@makefully/platypus 4.1.6 → 4.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@makefully/platypus",
-    "version": "4.1.6",
+    "version": "4.1.9",
     "description": "2D tile-based HTML5 game engine with a component-based entity model",
     "license": "MIT",
     "contributors": [
@@ -73,7 +73,7 @@
         "webpack-dev-server": "^5.2.2"
     },
     "peerDependencies": {
-        "@esotericsoftware/spine-pixi-v8": "^4.2.111",
+        "@esotericsoftware/spine-pixi-v8": "^4.3.7",
         "@pixi/sound": "github:Makefully-Studios/sound#feature/media-file",
         "@tweenjs/tween.js": "^23.1.1",
         "pako": "^2.1.0",

package/src/components/RenderSpine.js

@@ -376,9 +376,17 @@ export default createComponentClass(/** @lends platypus.components.RenderSpine.p
                     spineAtlas = platypus.assetCache.get(this.atlas),
                     spineJsonParser = new SkeletonJson(new AtlasAttachmentLoader(spineAtlas)),
                     skeletonData = spineJsonParser.readSkeletonData(skeleton),
-                    spine = this.spine = new Spine(skeletonData),
+                    spine = this.spine = new Spine({skeletonData, autoUpdate: false}),
                     map = createAnimationMap(this.animationMap, skeleton.animations);
 
+                // Spine 4.3 inherits Pixi container world-transform deltas into skeleton physics by default.
+                // Platypus pans the camera by moving the world container, which shifts every entity's world
+                // transform even when owner.x/y are unchanged — causing unwanted physics on stationary characters.
+                // Use the `apply-spine-physics` event for intentional movement-driven physics instead.
+                spine.setPhysicsPositionInheritanceFactor(0, 0);
+                spine.physicsRotationInheritanceFactor = 0;
+                spine.resetPhysicsTransform();
+
                 let animation = '';
 
                 spine.state.addListener({
@@ -414,7 +422,6 @@ export default createComponentClass(/** @lends platypus.components.RenderSpine.p
                         this.owner.triggerEvent('animation-ended', animationName);
                     }
                 });
-                spine.autoUpdate = false;
 
                 this.stateBased = map && this.stateBased;
                 this.eventBased = map && this.eventBased;
@@ -621,7 +628,7 @@ export default createComponentClass(/** @lends platypus.components.RenderSpine.p
             for (x = 0; x < slots.length; x++) {
                 slot = this.spine.skeleton.findSlot(slots[x]);
                 if (slot) {
-                    slot.color.setFromString(color);
+                    slot.pose.color.setFromString(color);
                 }
             }
         },
@@ -660,7 +667,7 @@ export default createComponentClass(/** @lends platypus.components.RenderSpine.p
          *      rotate: {x: 0, y: 0, degrees: 0}
          * }
          * 
-         * Has known vibration issues. Until pixi-spine 4.3, recommend 120 FPS on physics constraints on joints.
+         * Has known vibration issues at low frame rates. Spine 4.3 improves physics constraint stability.
          * Potential fixes: https://esotericsoftware.com/forum/d/28093-jittering-when-applying-physicstranslate-pixispine/5
          *
          * @event platypus.Entity#apply-spine-physics
@@ -672,7 +679,7 @@ export default createComponentClass(/** @lends platypus.components.RenderSpine.p
             }
 
             if (changes.rotate) {
-                this.spine.skeleton.physicsTranslate(changes.rotate.x, changes.rotate.y, changes.rotate.degrees);
+                this.spine.skeleton.physicsRotate(changes.rotate.x, changes.rotate.y, changes.rotate.degrees);
             }
         }
     },
@@ -698,7 +705,7 @@ export default createComponentClass(/** @lends platypus.components.RenderSpine.p
             }
 
             this.spine.skeleton.setSkin(skin);
-            this.spine.skeleton.setSlotsToSetupPose();
+            this.spine.skeleton.setupPoseSlots();
         },
         addToContainer: function () {
             this.owner.container.cullable = false;

package/src/components/RenderTiles.js

@@ -257,7 +257,43 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
          * @type Number
          * @default 0
          */
-        left: 0
+        left: 0,
+
+        /**
+         * Tiled parallax factor for horizontal scrolling. 1.0 scrolls with the camera; values less than 1.0 scroll slower (background); 0 is fixed to the screen.
+         *
+         * @property parallaxX
+         * @type number
+         * @default 1
+         */
+        parallaxX: 1,
+
+        /**
+         * Tiled parallax factor for vertical scrolling.
+         *
+         * @property parallaxY
+         * @type number
+         * @default 1
+         */
+        parallaxY: 1,
+
+        /**
+         * Map parallax origin X in world coordinates (Tiled `parallaxoriginx`, plus any map offset).
+         *
+         * @property parallaxOriginX
+         * @type number
+         * @default 0
+         */
+        parallaxOriginX: 0,
+
+        /**
+         * Map parallax origin Y in world coordinates (Tiled `parallaxoriginy`, plus any map offset).
+         *
+         * @property parallaxOriginY
+         * @type number
+         * @default 0
+         */
+        parallaxOriginY: 0
     },
 
     /**
@@ -401,14 +437,7 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
 
             if (map) {
                 this.updateTile(tile, map[z || 0], x, y);
-                // Only flag a re-render if the changed tile is within the currently
-                // cached region. Changes outside the cache will be drawn correctly
-                // the next time the camera pans to include them.
-                if (!this.cache.empty &&
-                    x >= this.cache.left && x <= this.cache.right &&
-                    y >= this.cache.top  && y <= this.cache.bottom) {
-                    this.updateCache = true;
-                }
+                this.updateCache = true;
             }
         },
 
@@ -422,70 +451,13 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
         },
 
         /**
-         * Forces an immediate full re-render centered on the current camera
-         * position. Call this after bulk tile changes to ensure the display
-         * is up to date without requiring a camera pan.
-         *
-         * For the panning cache, we invalidate cachePixels and re-run the full
-         * camera-update recache logic using the last known camera, which correctly
-         * handles texture swapping, tile population, and sprite positioning.
+         * Forces an immediate full re-render of all cached tile textures.
+         * Call this after bulk tile changes to ensure the display is up to date
+         * without requiring a camera pan.
          */
         "force-render": function () {
-            if (this.cacheAll) {
-                // Single/full cache — re-render entire layer.
-                this.populateTiles(this.cache, null);
-                this.renderCache(this.cache, this.cacheTexture, this.mapContainer, this.mapContainerWrapper);
-            } else if (this.cacheTexture) {
-                // Panning cache — invalidate cachePixels so the recache branch
-                // runs, then execute the full camera-update recache inline.
-                const
-                    {viewport: vp} = this.owner.parent.worldCamera,
-                    {cache, cachePixels} = this,
-                    tempC = tempCache,
-                    ctw   = this.cacheTilesWidth  - 1,
-                    cth   = this.cacheTilesHeight - 1,
-                    ctw2  = ctw / 2,
-                    cth2  = cth / 2;
-
-                this.convertCamera(vp);
-
-                // Force the recache branch to run regardless of camera position.
-                cachePixels.empty = true;
-
-                tempC.setAll(
-                    Math.round((this.laxCam.x - this.left) / this.tileWidth  - ctw2) + ctw2,
-                    Math.round((this.laxCam.y - this.top)  / this.tileHeight - cth2) + cth2,
-                    ctw, cth
-                );
-                if (tempC.left < 0) {
-                    tempC.moveX(tempC.halfWidth);
-                } else if (tempC.right > this.tilesWidth - 1) {
-                    tempC.moveX(this.tilesWidth - 1 - tempC.halfWidth);
-                }
-                if (tempC.top < 0) {
-                    tempC.moveY(tempC.halfHeight);
-                } else if (tempC.bottom > this.tilesHeight - 1) {
-                    tempC.moveY(this.tilesHeight - 1 - tempC.halfHeight);
-                }
-
-                this.tilesSpriteCache.texture = this.cacheTexture;
-                this.cacheTexture = this.cacheTexture.alternate;
-                this.tilesSprite.texture = this.cacheTexture;
-
-                this.populateTiles(tempC, cache);
-                this.renderCache(tempC, this.cacheTexture, this.mapContainer, this.mapContainerWrapper, this.tilesSpriteCache);
-                cache.set(tempC);
-
-                cachePixels.setAll(
-                    (cache.x + 0.5) * this.tileWidth  + this.left,
-                    (cache.y + 0.5) * this.tileHeight + this.top,
-                    (cache.width  + 1) * this.tileWidth,
-                    (cache.height + 1) * this.tileHeight
-                );
-
-                this.tilesSprite.x = vp.left - this.laxCam.left + cache.left * this.tileWidth  + this.left;
-                this.tilesSprite.y = vp.top  - this.laxCam.top  + cache.top  * this.tileHeight + this.top;
-            }
+            this.refreshAllCaches();
+            this.updateCache = false;
         }
     },
 
@@ -535,8 +507,7 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
                 'handle-render': function () {
                     if (this.updateCache) {
                         this.updateCache = false;
-                        this.populateTiles(this.cache, null);
-                        this.renderCache(this.cache, this.cacheTexture, this.mapContainer, this.mapContainerWrapper);
+                        this.refreshAllCaches();
                     }
                 }
             });
@@ -596,21 +567,8 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
                 },
                 'handle-render': function () {
                     if (this.updateCache) {
-                        const
-                            {cache, cacheGrid, cacheTilesHeight, cacheTilesWidth, tilesHeight, tilesWidth} = this,
-                            tsh = tilesHeight - 1,
-                            tsw = tilesWidth - 1;
-
                         this.updateCache = false;
-
-                        for (let x = 0; x < cacheGrid.length; x++) {
-                            for (let y = 0; y < cacheGrid[x].length; y++) {
-                                cache.setBounds(x * cacheTilesWidth, y * cacheTilesHeight, Math.min((x + 1) * cacheTilesWidth, tsw), Math.min((y + 1) * cacheTilesHeight, tsh));
-
-                                this.populateTiles(cache, null);
-                                this.renderCacheWithExtrusion(cache, cacheGrid[x][y].texture, this.mapContainer, this.mapContainerWrapper);
-                            }
-                        }
+                        this.refreshAllCaches();
                     }
                 }
             });
@@ -663,24 +621,7 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
                             this.updateBufferRegion(laxCam);
                         }
 
-                        const
-                            ctw     = this.cacheTilesWidth - 1,
-                            cth     = this.cacheTilesHeight - 1,
-                            ctw2    = ctw / 2,
-                            cth2    = cth / 2;
-
-                        //only attempt to draw children that are relevant
-                        tempC.setAll(Math.round((laxCam.x - this.left) / this.tileWidth - ctw2) + ctw2, Math.round((laxCam.y - this.top) / this.tileHeight - cth2) + cth2, ctw, cth);
-                        if (tempC.left < 0) {
-                            tempC.moveX(tempC.halfWidth);
-                        } else if (tempC.right > this.tilesWidth - 1) {
-                            tempC.moveX(this.tilesWidth - 1 - tempC.halfWidth);
-                        }
-                        if (tempC.top < 0) {
-                            tempC.moveY(tempC.halfHeight);
-                        } else if (tempC.bottom > this.tilesHeight - 1) {
-                            tempC.moveY(this.tilesHeight - 1 - tempC.halfHeight);
-                        }
+                        this.alignCacheToCamera(tempC, vp);
                         
                         this.tilesSpriteCache.texture = this.cacheTexture;
                         this.cacheTexture = this.cacheTexture.alternate;
@@ -698,17 +639,9 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
                     this.tilesSprite.y = vp.top  - laxCam.top  + cache.top  * this.tileHeight + this.top;
                 },
                 'handle-render': function () {
-                    if (this.updateCache && !this.cache.empty) {
+                    if (this.updateCache) {
                         this.updateCache = false;
-                        this.populateTiles(this.cache, null);
-                        this.renderCacheClear(this.cache, this.cacheTexture, this.mapContainer, this.mapContainerWrapper);
-                        this.tilesSpriteCache.texture = this.cacheTexture;
-                        this.cachePixels.setAll(
-                            (this.cache.x + 0.5) * this.tileWidth  + this.left,
-                            (this.cache.y + 0.5) * this.tileHeight + this.top,
-                            (this.cache.width  + 1) * this.tileWidth,
-                            (this.cache.height + 1) * this.tileHeight
-                        );
+                        this.refreshAllCaches();
                     }
                 }
             });
@@ -746,24 +679,7 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
                             this.updateBufferRegion(laxCam);
                         }
 
-                        const
-                            ctw     = this.cacheTilesWidth - 1,
-                            cth     = this.cacheTilesHeight - 1,
-                            ctw2    = ctw / 2,
-                            cth2    = cth / 2;
-
-                        //only attempt to draw children that are relevant
-                        tempC.setAll(Math.round((laxCam.x - this.left) / this.tileWidth - ctw2) + ctw2, Math.round((laxCam.y - this.top) / this.tileHeight - cth2) + cth2, ctw, cth);
-                        if (tempC.left < 0) {
-                            tempC.moveX(tempC.halfWidth);
-                        } else if (tempC.right > this.tilesWidth - 1) {
-                            tempC.moveX(this.tilesWidth - 1 - tempC.halfWidth);
-                        }
-                        if (tempC.top < 0) {
-                            tempC.moveY(tempC.halfHeight);
-                        } else if (tempC.bottom > this.tilesHeight - 1) {
-                            tempC.moveY(this.tilesHeight - 1 - tempC.halfHeight);
-                        }
+                        this.alignCacheToCamera(tempC, vp);
                         
                         this.populateTiles(tempC, null);
                         cache.set(tempC);
@@ -873,6 +789,10 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
          * its world travel, laxCam is at the start of the layer's travel, and
          * likewise at the end.
          *
+         * Tiled `parallaxx` / `parallaxy` factors are then applied relative to the
+         * map's parallax origin so the layer's effective render position is:
+         * `layerPos - (camera - parallaxOrigin) * (1 - parallaxFactor)`.
+         *
          * IMPORTANT: laxCam is resized to the *actual viewport dimensions* (not
          * viewport + refreshBuffer). Its purpose is solely to compute the parallax
          * offset for sprite positioning (vp.left - laxCam.left). Inflating it with
@@ -885,7 +805,8 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
                 worldPosX   = worldWidth  - camera.width,
                 worldHeight = this.worldHeight / this.scaleY,
                 worldPosY   = worldHeight - camera.height,
-                laxCam      = this.laxCam;
+                laxCam      = this.laxCam,
+                {parallaxOriginX, parallaxOriginY, parallaxX, parallaxY} = this;
 
             if ((worldWidth === this.layerWidth) || !worldPosX) {
                 laxCam.moveX(camera.x);
@@ -899,6 +820,14 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
                 laxCam.moveY((camera.top - this.top) * (this.layerHeight - camera.height) / worldPosY + camera.halfHeight + this.top);
             }
 
+            if (parallaxX !== 1) {
+                laxCam.moveX(laxCam.x + (camera.x - parallaxOriginX) * (1 - parallaxX));
+            }
+
+            if (parallaxY !== 1) {
+                laxCam.moveY(laxCam.y + (camera.y - parallaxOriginY) * (1 - parallaxY));
+            }
+
             // FIX: resize laxCam to the actual viewport size only — never camera + refreshBuffer.
             if (camera.width !== laxCam.width || camera.height !== laxCam.height) {
                 laxCam.resize(camera.width, camera.height);
@@ -1030,7 +959,151 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
             this.mapContainer.mask = new Graphics().rect(0, 0, this.cacheClipWidth, this.cacheClipHeight).fill(0x000000);
         },
 
+        /**
+         * Computes tile bounds for the panning cache centered on the current camera.
+         *
+         * @param {platypus.AABB} bounds - Receives the computed tile bounds.
+         * @param {platypus.AABB} viewport - The camera viewport.
+         */
+        alignCacheToCamera: function (bounds, viewport) {
+            const
+                ctw  = this.cacheTilesWidth - 1,
+                cth  = this.cacheTilesHeight - 1,
+                ctw2 = ctw / 2,
+                cth2 = cth / 2;
+
+            this.convertCamera(viewport);
+
+            bounds.setAll(
+                Math.round((this.laxCam.x - this.left) / this.tileWidth - ctw2) + ctw2,
+                Math.round((this.laxCam.y - this.top) / this.tileHeight - cth2) + cth2,
+                ctw, cth
+            );
+
+            if (bounds.left < 0) {
+                bounds.moveX(bounds.halfWidth);
+            } else if (bounds.right > this.tilesWidth - 1) {
+                bounds.moveX(this.tilesWidth - 1 - bounds.halfWidth);
+            }
+
+            if (bounds.top < 0) {
+                bounds.moveY(bounds.halfHeight);
+            } else if (bounds.bottom > this.tilesHeight - 1) {
+                bounds.moveY(this.tilesHeight - 1 - bounds.halfHeight);
+            }
+        },
+
+        /**
+         * Re-renders every texture in a multi-texture full-map cache grid.
+         */
+        refreshAllCacheGrid: function () {
+            const
+                {cache, cacheGrid, cacheTilesHeight, cacheTilesWidth, tilesHeight, tilesWidth} = this,
+                tsh = tilesHeight - 1,
+                tsw = tilesWidth - 1;
+
+            for (let x = 0; x < cacheGrid.length; x++) {
+                for (let y = 0; y < cacheGrid[x].length; y++) {
+                    cache.setBounds(
+                        x * cacheTilesWidth,
+                        y * cacheTilesHeight,
+                        Math.min((x + 1) * cacheTilesWidth, tsw),
+                        Math.min((y + 1) * cacheTilesHeight, tsh)
+                    );
+
+                    this.populate(cache, null);
+                    this.renderCacheWithExtrusion(cache, cacheGrid[x][y].texture, this.mapContainer, this.mapContainerWrapper);
+                }
+            }
+        },
+
+        /**
+         * Re-renders the current panning-cache window in place.
+         * Uses the alternate render texture while drawing so we never render
+         * into the texture that is currently displayed on screen.
+         *
+         * @param {platypus.AABB} [viewport] - Optional camera viewport.
+         */
+        refreshPanningCache: function (viewport) {
+            const
+                {cache, cachePixels, laxCam, left, top, tilesSprite} = this,
+                vp = viewport ?? this.owner.parent.worldCamera?.viewport;
+
+            if (!vp) {
+                return;
+            }
+
+            if (cache.empty) {
+                this.alignCacheToCamera(cache, vp);
+            }
+
+            if (cache.empty) {
+                return;
+            }
+
+            this.detachCacheCopy();
+
+            this.tilesSpriteCache.texture = this.cacheTexture;
+            this.cacheTexture = this.cacheTexture.alternate;
+            tilesSprite.texture = this.cacheTexture;
+
+            this.populate(cache, null);
+            this.renderCacheClear(cache, this.cacheTexture, this.mapContainer, this.mapContainerWrapper);
+
+            this.tilesSpriteCache.texture = this.cacheTexture;
+            cachePixels.setAll(
+                (cache.x + 0.5) * this.tileWidth + left,
+                (cache.y + 0.5) * this.tileHeight + top,
+                (cache.width + 1) * this.tileWidth,
+                (cache.height + 1) * this.tileHeight
+            );
+
+            this.convertCamera(vp);
+            tilesSprite.x = vp.left - laxCam.left + cache.left * this.tileWidth + left;
+            tilesSprite.y = vp.top - laxCam.top + cache.top * this.tileHeight + top;
+        },
+
+        detachCacheCopy: function () {
+            const
+                {mapContainer, tilesSpriteCache} = this;
+
+            if (tilesSpriteCache?.parent === mapContainer) {
+                mapContainer.removeChild(tilesSpriteCache);
+            }
+        },
+
+        /**
+         * Re-renders all cached tile textures for the active caching strategy.
+         *
+         * @param {platypus.AABB} [viewport] - Optional camera viewport for panning caches.
+         */
+        refreshAllCaches: function (viewport) {
+            if (!this.tileCache) {
+                this.cachePixels.empty = true;
+                return;
+            }
+
+            if (this.cacheGrid) {
+                this.refreshAllCacheGrid();
+                return;
+            }
+
+            if (this.cacheAll && this.cacheTexture) {
+                this.populate(this.cache, null);
+                this.render(this.cache, this.cacheTexture, this.mapContainer, this.mapContainerWrapper);
+                return;
+            }
+
+            if (this.cacheTexture) {
+                this.refreshPanningCache(viewport);
+            }
+        },
+
         populateTiles: function (bounds, oldBounds) {
+            // When oldBounds is provided, only tiles outside the previous window are
+            // drawn. That is correct for camera scrolling (reuse pixels from the old
+            // cache texture) but must not be used for in-place tile edits — pass null
+            // to redraw the entire bounds.
             const
                 tiles = arrayCache.setUp();
 
@@ -1145,6 +1218,11 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
                 container: wrapper,
                 target: renderTexture
             });
+
+            if (oldCache?.parent === src) {
+                src.removeChild(oldCache);
+            }
+
             renderTexture.requiresUpdate = true;
         },
 
@@ -1152,6 +1230,8 @@ export default createComponentClass(/** @lends platypus.components.RenderTiles.p
             const
                 {renderer} = this;
 
+            this.detachCacheCopy();
+
             src.x = -bounds.left * this.tileWidth;
             src.y = -bounds.top * this.tileHeight;
             renderer.render({

package/src/components/TiledLoader.js

@@ -699,7 +699,7 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
     },
 
     methods: {
-        createLayer: function (entityKind, rawLayer, offsetX, offsetY, tileWidth, tileHeight, tilesets, tileSetTileData, images, combineRenderLayer, progress, entityLinker) {
+        createLayer: function (entityKind, rawLayer, offsetX, offsetY, tileWidth, tileHeight, tilesets, tileSetTileData, images, combineRenderLayer, progress, entityLinker, parallaxOriginX, parallaxOriginY) {
             const
                 //This builds in parallaxing support by allowing the addition of width and height properties into Tiled layers so they pan at a separate rate than other layers.
                 checkParallax = ({data, height, properties, width}) => {
@@ -730,6 +730,8 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
                 },
 
                 layer = decodeLayer(rawLayer),
+                parallaxX = layer.parallaxx ?? 1,
+                parallaxY = layer.parallaxy ?? 1,
                 {
                     offsetx: layerOffsetX = 0,
                     offsety: layerOffsetY = 0,
@@ -835,6 +837,10 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
             layerDefinitionProperties.left = layerDefinitionProperties.x || mapOffsetX;
             layerDefinitionProperties.top = layerDefinitionProperties.y || mapOffsetY;
             layerDefinitionProperties.z = layerDefinitionProperties.z || this.layerZ;
+            layerDefinitionProperties.parallaxX = parallaxX;
+            layerDefinitionProperties.parallaxY = parallaxY;
+            layerDefinitionProperties.parallaxOriginX = parallaxOriginX;
+            layerDefinitionProperties.parallaxOriginY = parallaxOriginY;
 
             if (tilesets.length) {
                 let imageIndex = 0;
@@ -910,7 +916,7 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
                 }
             }
 
-            if ((!this.separateTiles) && (combineRenderLayer?.tileHeight === tHeight) && (combineRenderLayer?.tileWidth === tWidth) && (combineRenderLayer?.columns === width) && (combineRenderLayer?.rows === height)) {
+            if ((!this.separateTiles) && (combineRenderLayer?.parallaxX ?? 1) === parallaxX && (combineRenderLayer?.parallaxY ?? 1) === parallaxY && (combineRenderLayer?.tileHeight === tHeight) && (combineRenderLayer?.tileWidth === tWidth) && (combineRenderLayer?.columns === width) && (combineRenderLayer?.rows === height)) {
                 combineRenderLayer.triggerEvent('add-tiles', renderTiles);
                 combineRenderLayer.triggerEvent('add-collision-tiles', collisionTiles);
 
@@ -998,7 +1004,9 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
                 height = level.height * tileHeight,
                 width = level.width * tileWidth,
                 x = offsetMap ? getPowerOfTen(width) : 0,
-                y = offsetMap ? getPowerOfTen(height) : 0;
+                y = offsetMap ? getPowerOfTen(height) : 0,
+                parallaxOriginX = (level.parallaxoriginx ?? 0) + x,
+                parallaxOriginY = (level.parallaxoriginy ?? 0) + y;
             let layer = null;
 
             createTilesetObjectGroupReference(tileSetTileData, tilesets);
@@ -1130,7 +1138,7 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
                 switch (layerDefinition.type) {
                 case 'imagelayer':
                     layer = this.convertImageLayer(layerDefinition);
-                    layer = this.createLayer(getProperty(layer.properties, 'entity') || 'image-layer', layer, x, y, layer.tilewidth, layer.tileheight, [layer.tileset], null, images, layer, progress, entityLinker);
+                    layer = this.createLayer(getProperty(layer.properties, 'entity') || 'image-layer', layer, x, y, layer.tilewidth, layer.tileheight, [layer.tileset], null, images, layer, progress, entityLinker, parallaxOriginX, parallaxOriginY);
                     break;
                 case 'objectgroup':
                     this.setUpEntities(layerDefinition.objects.map((object) => getObjectCentered(object)), layerDefinition, x, y, tilesets, progress, entityLinker);
@@ -1138,7 +1146,7 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
                     this.updateLoadingProgress(progress);
                     break;
                 case 'tilelayer':
-                    layer = this.setupLayer(layerDefinition, layer, x, y, tileWidth, tileHeight, tilesets, tileSetTileData, images, progress, entityLinker);
+                    layer = this.setupLayer(layerDefinition, layer, x, y, tileWidth, tileHeight, tilesets, tileSetTileData, images, progress, entityLinker, parallaxOriginX, parallaxOriginY);
                     break;
                 default:
                     platypus.debug.warn('Component TiledLoader: Platypus does not support Tiled layers of type "' + layerDefinition.type + '". This layer will not be loaded.');
@@ -1374,7 +1382,7 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
             };
         }()),
 
-        setupLayer: function (layer, combineRenderLayer, mapOffsetX, mapOffsetY, tileWidth, tileHeight, tilesets, tileSetTileData, images, progress, entityLinker) {
+        setupLayer: function (layer, combineRenderLayer, mapOffsetX, mapOffsetY, tileWidth, tileHeight, tilesets, tileSetTileData, images, progress, entityLinker, parallaxOriginX, parallaxOriginY) {
             const
                 entity = getProperty(layer.properties, 'entity') ?? 'render-layer', // default
                 entityDefinition = platypus.game.settings.entities[entity] ?? standardEntityLayers[entity];
@@ -1393,9 +1401,9 @@ export default createComponentClass(/** @lends platypus.components.TiledLoader.p
             }
 
             if (canCombine) {
-                return this.createLayer(entity, layer, mapOffsetX, mapOffsetY, tileWidth, tileHeight, tilesets, tileSetTileData, images, combineRenderLayer, progress, entityLinker);
+                return this.createLayer(entity, layer, mapOffsetX, mapOffsetY, tileWidth, tileHeight, tilesets, tileSetTileData, images, combineRenderLayer, progress, entityLinker, parallaxOriginX, parallaxOriginY);
             } else {
-                this.createLayer(entity, layer, mapOffsetX, mapOffsetY, tileWidth, tileHeight, tilesets, tileSetTileData, images, combineRenderLayer, progress, entityLinker);
+                this.createLayer(entity, layer, mapOffsetX, mapOffsetY, tileWidth, tileHeight, tilesets, tileSetTileData, images, combineRenderLayer, progress, entityLinker, parallaxOriginX, parallaxOriginY);
                 return null;
             }
         },