@makefully/platypus 4.1.6 → 4.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@makefully/platypus",
-    "version": "4.1.6",
+    "version": "4.1.8",
     "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
     },
 
     /**
@@ -873,6 +909,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 +925,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 +940,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);

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;
             }
         },