@makefully/platypus 4.1.5 → 4.1.8

package/src/components/Render.js

@@ -0,0 +1,178 @@
+/* global platypus */
+import RenderContainer from './RenderContainer.js';
+import createComponentClass from '../factory.js';
+import {Sprite, TilingSprite, AnimatedSprite, NineSliceSprite} from 'pixi.js';
+
+const
+    spriteTypes = {Sprite, TilingSprite, AnimatedSprite, NineSliceSprite};
+
+export default createComponentClass(/** @lends platypus.components.RenderSprite.prototype */{
+    
+    id: 'Render',
+    
+    properties: {
+        /**
+         * Whether the image should auto-resize if the owner's size changes. For NineSliceSprite, this auto-adjusts to the entity's height and width changes. For other types, it modifies the sprite's scale to match the original sprite-to-entity size ratio.
+         * 
+         * @property matchEntity
+         * @type Boolean
+         * @default false
+         */
+        matchEntity: false,
+
+        /**
+         * The offset of the x-axis position of the sprite from the entity's x-axis position.
+         *
+         * @property offsetX
+         * @type Number
+         * @default 0
+         */
+        offsetX: 0,
+
+        /**
+         * The offset of the y-axis position of the sprite from the entity's y-axis position.
+         *
+         * @property offsetY
+         * @type Number
+         * @default 0
+         */
+        offsetY: 0,
+
+        /**
+         * The z-index relative to other render components on the entity.
+         *
+         * @property offsetZ
+         * @type Number
+         * @default 0
+         */
+        offsetZ: 0,
+
+        options: null,
+
+        image: null,
+
+        images: null,
+
+        spriteType: 'Sprite',
+
+        /**
+        * The rotation for this sprite relative to the container.
+        *
+        * @property localRotation
+        * @type Number
+        * @default 0
+        */
+        localRotation: 0,
+        
+        /**
+        * The scaling factor for this sprite relative to the scale of the container.
+        *
+        * @property localScaleX
+        * @type Number|Array|Object
+        * @default 1
+        */
+        localScaleX: 1,
+
+        /**
+        * The scaling factor for this sprite relative to the scale of the container.
+        *
+        * @property localScaleY
+        * @type Number|Array|Object
+        * @default 1
+        */
+        localScaleY: 1
+    },
+
+    /**
+     * This component is attached to entities that will appear in the game world. It renders a static or animated image. It listens for messages triggered on the entity or changes in the logical state of the entity to play a corresponding animation.
+     *
+     * @memberof platypus.components
+     * @uses platypus.Component
+     * @constructs
+     * @listens platypus.Entity#handle-render
+     * @listens platypus.Entity#play-animation
+     * @listens platypus.Entity#stop-animation
+     * @fires platypus.Entity#animation-ended
+     * @fires platypus.Entity#update-animation
+     */
+    initialize () {
+        const
+            {image, images, localRotation, localScaleX, localScaleY, offsetX, offsetY, offsetZ, options, owner, spriteType} = this,
+            sprite = this.sprite = new spriteTypes[spriteType === 'Sprite' && images && !images ? 'AnimatedSprite' : spriteType]({
+                ...(image ? {texture: platypus.assetCache.get(image)} : {textures: images.map((image) => platypus.assetCache.get(image))}),
+                ...options ?? {}
+            }),
+            matchEntity = this.matchEntity ? {
+                originalWidth: owner.width,
+                originalHeight: owner.height
+            } : null;
+
+        sprite.x = offsetX;
+        sprite.y = offsetY;
+        sprite.zIndex = offsetZ;
+        sprite.rotation = (localRotation / 180) * Math.PI;
+        sprite.scale.x = localScaleX;
+        sprite.scale.y = localScaleY;
+
+        if (!owner.container) {
+            const
+                {interactive, mask, mirror, flip, visible, cache, ignoreOpacity, scaleX, scaleY, skewX, skewY} = owner;
+            
+            owner.addComponent(new RenderContainer(this.owner, {interactive, mask, mirror, flip, visible, cache, ignoreOpacity, scaleX, scaleY, skewX, skewY}, () => this.addToContainer()));
+        } else {
+            this.addToContainer();
+        }
+
+        if (matchEntity) {
+            if (spriteType === 'NineSliceSprite') {
+                sprite.x = offsetX - owner.width / 2;
+                sprite.y = offsetY - owner.height / 2;
+                sprite.width = owner.width;
+                sprite.height = owner.height;
+                this.addEventListener('handle-render', (renderData) => {
+                    sprite.x = offsetX - owner.width / 2;
+                    sprite.y = offsetY - owner.height / 2;
+                    sprite.width = owner.width;
+                    sprite.height = owner.height;
+                });
+            } else {
+                this.addEventListener('handle-render', (renderData) => {
+                    sprite.scale.x = localScaleX * owner.width / matchEntity.originalWidth;
+                    sprite.scale.y = localScaleY * owner.height / matchEntity.originalHeight;
+                });
+            }
+        }
+
+        if (sprite.update) {
+            this.addEventListener('handle-render', (renderData) => {
+                if (sprite.update) {
+                    sprite.update(renderData.delta);
+                }
+            });
+        }
+    },
+    
+    methods: {
+        addToContainer: function () {
+            const container = this.owner.container;
+
+            container.addChild(this.sprite);
+        },
+
+        destroy: function () {
+            this.owner.container.removeChild(this.sprite);
+            this.sprite.destroy();
+            this.sprite = null;
+        }
+    },
+    
+    getAssetList (a, b, c) {
+        const
+            image = a?.image ?? b?.image ?? c?.image;
+
+        return (image ? [image] : a?.images ?? b?.images ?? c?.images ?? []).map((src) => ({
+            alias: [src],
+            src
+        }));
+    }
+});

package/src/components/RenderAnimator.js

@@ -0,0 +1,275 @@
+import StateMap from '../StateMap.js';
+import {arrayCache} from '../utils/array.js';
+import createComponentClass from '../factory.js';
+
+const
+    createTest = function (testStates, animation) {
+        if (testStates === 'default') {
+            return () => animation;
+        } else {
+            //TODO: Better clean-up: Create a lot of these without removing them later... DDD 2/5/2016
+            const
+                states = StateMap.setUp(testStates);
+
+            return (ownerState) => ownerState.includes(states) ? animation : false;
+        }
+    },
+    methodPlay = function (animation, loop, restart) {
+        this.component.playAnimation(animation, loop, restart);
+    },
+    methodStop = function (animation) {
+        this.component.stopAnimation(animation);
+    },
+    triggerPlay = function (animation, loop, restart) {
+        /**
+         * On entering a new animation-mapped state, this component triggers this event to play an animation.
+         *
+         * @event platypus.Entity#play-animation
+         * @param animation {String} Describes the animation to play.
+         * @param loop {Boolean} Whether to loop a playing animation.
+         * @param restart {Boolean} Whether to restart a playing animation.
+         */
+        this.owner.triggerEvent('play-animation', animation, loop, restart);
+    },
+    triggerStop = function (animation) {
+        /**
+         * On attaining an animation-mapped state, this component triggers this event to stop a previous animation.
+         *
+         * @event platypus.Entity#stop-animation
+         * @param animation {String} Describes the animation to stop.
+         */
+        this.owner.triggerEvent('stop-animation', animation);
+    };
+
+export default createComponentClass(/** @lends platypus.components.RenderAnimator.prototype */{
+    id: 'RenderAnimator',
+
+    properties: {
+        /**
+         * An object containg key-value pairs that define a mapping from entity states to the animation that should play. The list is processed from top to bottom, so the most important actions should be listed first (for example, a jumping animation might take precedence over an idle animation). If not specified, an 1-to-1 animation map is created from the list of animations in the sprite sheet definition using the animation names as the keys.
+         *
+         *  "animationStates":{
+         *      "standing": "default-animation"  // On receiving a "standing" event, or when this.owner.state.standing === true, the "default" animation will begin playing.
+         *      "ground,moving": "walking",  // Comma separated values have a special meaning when evaluating "state-changed" messages. The above example will cause the "walking" animation to play ONLY if the entity's state includes both "moving" and "ground" equal to true.
+         *      "ground,striking": "swing!", // Putting an exclamation after an animation name causes this animation to complete before going to the next animation. This is useful for animations that would look poorly if interrupted.
+         *      "default": "default-animation" // Optional. "default" is a special property that matches all states. If none of the above states are valid for the entity, it will use the default animation listed here.
+         *  }
+         *
+         * @property animationStates
+         * @type Object
+         * @default null
+         */
+        animationStates: null,
+
+        /**
+         * An object containg key-value pairs that define a mapping from triggered events to the animation that should play.
+         *
+         *     "animationEvents":{
+         *         "move": "walk-animation",
+         *         "jump": "jumping-animation"
+         *     }
+         *
+         * The above will create two event listeners on the entity, "move" and "jump", that will play their corresponding animations when the events are triggered.
+         *
+         * @property animationEvents
+         * @type Object
+         * @default null
+         */
+        animationEvents: null,
+
+        /**
+         * Sets a component that this component should be connected to.
+         *
+         * @property component
+         * @type Component
+         * @default null
+         */
+        component: null,
+
+        /**
+         * Optional. Forces animations to complete before starting a new animation. Defaults to `false`.
+         *
+         * @property forcePlayThrough
+         * @type Boolean
+         * @default false
+         */
+        forcePlayThrough: false,
+
+        /**
+         * Whether to restart a playing animation on event.
+         *
+         * @property restart
+         * @type Boolean
+         * @default true
+         */
+        restart: true,
+
+        /**
+         * Whether to loop a playing animation on event.
+         *
+         * @property loop
+         * @type Boolean
+         * @default false
+         */
+        loop: false
+    },
+
+    /**
+     * This component is typically added to an entity automatically by a render component. It handles mapping entity states and events to playable animations.
+     *
+     * @memberof platypus.components
+     * @uses platypus.Component
+     * @constructs
+     * @listens platypus.Entity#animation-ended
+     * @listens platypus.Entity#state-changed
+     * @listens platypus.Entity#update-animation
+     * @fires platypus.Entity#play-animation
+     * @fires platypus.Entity#stop-animation
+     */
+    initialize: (function () {
+        const
+            trigger = function (animation, loop, restart) {
+                this.override = animation;
+                this.owner.triggerEvent('play-animation', animation, loop, restart);
+            },
+            method = function (animation, loop, restart) {
+                this.override = animation;
+                this.playAnimation(animation, loop, restart);
+            };
+
+        return function () {
+            const
+                events = this.animationEvents,
+                states = this.animationStates;
+
+            //Handle Events:
+            this.override = false;
+            if (events) {
+                const
+                    keys = Object.keys(events),
+                    {length} = keys,
+                    component = this.component,
+                    func = component ? method : trigger;
+        
+                for (let i = 0; i < length; i++) {
+                    const
+                        key = keys[i];
+                        
+                    this.addEventListener(key, func.bind(component ?? this, events[key], this.loop, this.restart));
+                }
+            }
+
+            //Handle States:
+            this.followThroughs = {};
+            this.checkStates = arrayCache.setUp();
+            this.state = this.owner.state;
+            this.stateChange = true; //Check state against entity's prior state to update animation if necessary on instantiation.
+            this.lastState = -1;
+
+            if (states) {
+                const
+                    keys = Object.keys(states),
+                    {length} = keys;
+
+                for (let i = 0; i < length; i++) {
+                    const
+                        key = keys[i],
+                        animationLabel = states[key],
+                        lastCharacter = animationLabel.length - 1,
+                        isNot = animationLabel[lastCharacter] === '!',
+                        animation = isNot ? animationLabel.substring(0, lastCharacter) : animationLabel;
+
+                    //TODO: Should probably find a cleaner way to accomplish this. Maybe in the animationMap definition? - DDD
+                    this.followThroughs[animation] = isNot;
+                    this.checkStates.push(createTest(key, animation));
+                }
+            }
+
+            this.waitingAnimation = false;
+            this.waitingState = 0;
+            this.playWaiting = false;
+            this.animationFinished = false;
+
+            if (this.component) {
+                this.playAnimation = methodPlay;
+                this.stopAnimation = methodStop;
+            } else {
+                this.playAnimation = triggerPlay;
+                this.stopAnimation = triggerStop;
+            }
+        };
+    } ()),
+
+    events: {
+        "state-changed": function () {
+            this.stateChange = true;
+        },
+
+        "animation-ended": function (animation) {
+            if (animation === this.currentAnimation) {
+                if (this.override && (animation === this.override)) {
+                    this.stateChange = true;
+                    this.override = false;
+                }
+
+                if (this.waitingAnimation) {
+                    this.currentAnimation = this.waitingAnimation;
+                    this.waitingAnimation = false;
+                    this.lastState = this.waitingState;
+                    
+                    this.animationFinished = false;
+                    this.playAnimation(this.currentAnimation);
+                } else {
+                    this.animationFinished = true;
+                }
+            }
+        },
+
+        "update-animation": function (playing) {
+            if (this.stateChange && !this.override) {
+                if (this.state.has('visible')) {
+                    this.visible = this.state.get('visible');
+                }
+                for (let i = 0; i < this.checkStates.length; i++) {
+                    const
+                        testCase = this.checkStates[i](this.state);
+
+                    if (testCase) {
+                        if (this.currentAnimation !== testCase) {
+                            if (!this.followThroughs[this.currentAnimation] && (!this.forcePlaythrough || (this.animationFinished || (this.lastState >= +i)))) {
+                                this.currentAnimation = testCase;
+                                this.lastState = +i;
+                                this.animationFinished = false;
+                                if (playing) {
+                                    this.playAnimation(this.currentAnimation);
+                                } else {
+                                    this.stopAnimation(this.currentAnimation);
+                                }
+                            } else {
+                                this.waitingAnimation = testCase;
+                                this.waitingState = +i;
+                            }
+                        } else if (this.waitingAnimation && !this.followThroughs[this.currentAnimation]) {// keep animating this animation since this animation has already overlapped the waiting animation.
+                            this.waitingAnimation = false;
+                        }
+                        break;
+                    }
+                }
+                this.stateChange = false;
+            }
+        }
+    },
+    
+    methods: {
+        toJSON: function () { // This component is added by another component, so it shouldn't be returned for reconstruction.
+            return null;
+        },
+
+        destroy: function () {
+            arrayCache.recycle(this.checkStates);
+            this.checkStates = null;
+            this.followThroughs = null;
+            this.state = null;
+        }
+    }
+});