@makefully/platypus 4.1.5 → 4.1.8

package/src/components/RenderDebug.js

@@ -0,0 +1,319 @@
+import {Container, Graphics} from 'pixi.js';
+import {arrayCache} from '../utils/array.js';
+import createComponentClass from '../factory.js';
+
+const
+    collisionColors = {},
+    createCollisionColor = function (collisionType) {
+        let r = collisionType.charCodeAt(0) || 0,
+            g = collisionType.charCodeAt(1) || 0,
+            b = collisionType.charCodeAt(2) || 0,
+            min = 0,
+            max = 0;
+        
+        min = Math.min(r, g, b);
+
+        r -= min;
+        g -= min;
+        b -= min;
+
+        max = Math.max(r, g, b, 1);
+            
+        r = (0xCC * r / max) >> 0;
+        g = (0xCC * g / max) >> 0;
+        b = (0xCC * b / max) >> 0;
+
+        return (r << 8) + (g << 4) + b;
+    },
+    createShape = function ({radius, color, left, top, width, height, z, outline, points}) {
+        const
+            newShape = new Graphics();
+
+        if (radius) {
+            const
+                cx = width ? left + width / 2 : left + radius,
+                cy = height ? top + height / 2 : top + radius;
+
+            newShape.circle(cx, cy, radius);
+        } else if (points) {
+            newShape.poly(points);
+        } else if (width && height) {
+            newShape.rect(left, top, width, height);
+        }
+        newShape.z = z;
+        newShape.fill(color, 0.1);
+        if (outline) {
+            newShape.stroke({
+                width: outline,
+                color
+            });
+        }
+
+        return newShape;
+    },
+    standardizeColor = function (color) {
+        if (typeof color === 'string') {
+            return parseInt(color.replace('#', ''), 16);
+        } else {
+            return color;
+        }
+    };
+
+export default createComponentClass(/** @lends platypus.components.RenderDebug.prototype */{
+    
+    id: 'RenderDebug',
+
+    properties: {
+        /**
+         * The color to use to highlight an entity's AABB. For example, use `"#ffffff"` or `0xffffff` to set as white.
+         *
+         * @property aabbColor
+         * @type Number|String
+         * @default 0xff88ff
+         */
+        aabbColor: 0xff88ff,
+
+        /**
+         * The color to use to highlight an entity's collision shape. For example, use `"#ffffff"` or `0xffffff` to set as white. Will generate a color based on the collision type if not specified.
+         *
+         * @property collisionColor
+         * @type Number|String
+         * @default 0
+         */
+        collisionColor: 0,
+
+        /**
+         * The color to use to highlight the AABB for a group of entities attached to this entity. For example, use `"#ffffff"` or `0xffffff` to set as white.
+         *
+         * @property groupColor
+         * @type Number|String
+         * @default 0x00ff00
+         */
+        groupColor: 0x00ff00,
+
+        /**
+         * The color to use to highlight an entity. This property is only used if there is no `CollisionBasic` component attached to the entity: this component uses the entity's `width` and `height` properties if defined. For example, use `"#ffffff"` or `0xffffff` to set as white.
+         *
+         * @property renderColor
+         * @type Number|String
+         * @default 0x0000ff
+         */
+        renderColor: 0x0000ff,
+
+        /**
+         * The height of the entity.
+         *
+         * @property height
+         * @type Number
+         * @default 100
+         */
+        width: 100,
+
+        /**
+         * The width of the entity.
+         *
+         * @property width
+         * @type Number
+         * @default 100
+         */
+        height: 100,
+
+        /**
+         * The local offset in z-index for the rendered debug area.
+         *
+         * @property offsetZ
+         * @type Number
+         * @default 10000
+         */
+        offsetZ: 10000
+    },
+    
+    /**
+     * This component is attached to entities that will appear in the game world. It serves two purposes. First, it displays a rectangle that indicates the location of the entity. By default it uses the specified position and dimensions of the object (in grey). If the object has a collision component it will display the AABB of the collision shape (in pink). If the entity has a LogicCarrier component and is/was carrying an object, a green rectangle will be drawn showing the collision group. The RenderDebug component also allows the developer to right-click on an entity and it will print the object in the debug console.
+     *
+     * @memberof platypus.components
+     * @uses platypus.Component
+     * @constructs
+     * @listens platypus.Entity#camera-update
+     * @listens platypus.Entity#collide-off
+     * @listens platypus.Entity#collide-on
+     * @listens platypus.Entity#handle-render
+     * @listens platypus.Entity#load
+     * @listens platypus.Entity#orientation-updated
+     */
+    initialize: function () {
+        this.container = new Container();
+        this.container.cullable = true;
+
+        this.parentContainer = this.owner.parent.worldContainer;
+        this.parentContainer.addChild(this.container);
+
+        this.shapes = arrayCache.setUp();
+        this.isOutdated = true;
+
+        this.aabbColor = standardizeColor(this.aabbColor);
+        this.collisionColor = this.collisionColor ? standardizeColor(this.collisionColor) : 0;
+        this.groupColor = standardizeColor(this.groupColor);
+        this.renderColor = standardizeColor(this.renderColor);
+    },
+    
+    events: {
+        "load": function () {
+            if (!platypus.game.settings.debug) {
+                this.owner.removeComponent(this);
+                return;
+            }
+        },
+
+        "handle-render": function () {
+            if (this.isOutdated) {
+                this.updateSprites();
+                this.isOutdated = false;
+            }
+            
+            if (this.owner.getCollisionGroupAABB) {
+                const
+                    aabb = this.owner.getCollisionGroupAABB(),
+                    offset = -0.5;
+
+                if (!this.groupShape) {
+                    this.groupShape = createShape({
+                        color: this.groupColor,
+                        left: offset,
+                        top: offset,
+                        width: 1,
+                        height: 1,
+                        z: this.offsetZ
+                    });
+                    this.container.addChild(this.groupShape);
+                }
+                this.groupShape.scaleX = aabb.width;
+                this.groupShape.scaleY = aabb.height;
+                this.groupShape.x      = aabb.x - this.owner.x;
+                this.groupShape.y      = aabb.y - this.owner.y;
+            }
+
+            this.update();
+        },
+        
+        "orientation-updated": function () {
+            this.isOutdated = true;
+        },
+        
+        "collide-on": function () {
+            this.isOutdated = true;
+        },
+        
+        "collide-off": function () {
+            this.isOutdated = true;
+        }
+    },
+    
+    methods: {
+        addShape (properties) {
+            const
+                shape = createShape({
+                    z: this.offsetZ,
+                    ...properties
+                });
+
+            this.shapes.push(shape);
+            this.container.addChild(shape);
+            this.offsetZ -= 0.0001;
+        },
+
+        update () {
+            const
+                {container, owner} = this;
+
+            if (container.zIndex !== owner.z + 0.000001) {
+                container.zIndex = owner.z + 0.000001;
+            }
+
+            container.updateTransform({
+                x: owner.x,
+                y: owner.y
+            });
+        },
+
+        updateSprites: function () {
+            const
+                {owner} = this;
+
+            for (let i = 0; i < this.shapes.length; i++) {
+                this.container.removeChild(this.shapes[i]);
+            }
+            this.shapes.length = 0;
+            
+            if (owner.getAABB) {
+                for (let j = 0; j < owner.collisionTypes.length; j++) {
+                    const
+                        collisionType = owner.collisionTypes[j],
+                        aabb = owner.getAABB(collisionType),
+                        lineWidth = 2,
+                        shapes = owner.getShapes(collisionType),
+                        width = this.initialWidth = aabb.width,
+                        height = this.initialHeight = aabb.height;
+
+                    let collisionColor = this.collisionColor || collisionColors[collisionType];
+
+                    if (!collisionColor) {
+                        collisionColor = collisionColors[collisionType] = createCollisionColor(collisionType);
+                    }
+                    
+                    this.addShape({
+                        color: this.aabbColor,
+                        left: aabb.left - owner.x,
+                        top: aabb.top - owner.y,
+                        width,
+                        height
+                    });
+                    
+                    for (let i = 0; i < shapes.length; i++) {
+                        const
+                            shape = shapes[i],
+                            shapeAabb = shape.aABB;
+
+                        this.addShape({
+                            color: collisionColor,
+                            left: shapeAabb.left - owner.x,
+                            top: shapeAabb.top - owner.y,
+                            width: shapeAabb.width,
+                            height: shapeAabb.height,
+                            radius: shape.type === 'circle' ? shape.radius : 0,
+                            outline: lineWidth
+                        });
+                    }
+                }
+            } else {
+                const
+                    {height = 1, width = 1} = this;
+
+                this.addShape({
+                    color: this.renderColor,
+                    left: -width / 2,
+                    top: -height / 2,
+                    width,
+                    height
+                });
+            }
+            this.addShape({
+                color: 0x000000,
+                left: -1,
+                outline: 1,
+                top: -1,
+                radius: 1
+            });
+        },
+        
+        destroy: function () {
+            for (let i = 0; i < this.shapes.length; i++) {
+                this.container.removeChild(this.shapes[i]);
+            }
+            arrayCache.recycle(this.shapes);
+
+            this.parentContainer.removeChild(this.container);
+            this.container = null;
+        }
+    }
+});

package/src/components/RenderDestroyMe.js

@@ -0,0 +1,59 @@
+import {arrayCache, greenSlice} from '../utils/array.js';
+import createComponentClass from '../factory.js';
+
+export default createComponentClass(/** @lends platypus.components.RenderDestroyMe.prototype */{
+    id: 'RenderDestroyMe',
+    
+    properties: {
+        /**
+         * This or animationIds required. This is a String identifying the animation that should destroy this entity on its completion.
+         *
+         * @property animationId
+         * @type String
+         * @default ''
+         */
+        animationId: '',
+        
+        /**
+         * This or animationId required. This is an array of Strings identifying the animations that should destroy this entity on their completion.
+         *
+         * @property animationIds
+         * @type Array
+         * @default null
+         */
+        animationIds: null
+    },
+
+    /**
+     * This component will destroy the entity once an animation has finished. This is useful for explosions or similar animations where the entity is no longer needed once the animation completes.
+     *
+     * @memberof platypus.components
+     * @uses platypus.Component
+     * @constructs
+     * @listens platypus.Entity#animation-ended
+     */
+    initialize: function (definition) {
+        if (this.animationId) {
+            this.animationIds = arrayCache.setUp(definition.animationId);
+        } else if (this.animationIds) {
+            this.animationIds = greenSlice(this.animationIds);
+        }
+    },
+
+    events: {// These are messages that this component listens for
+        "animation-ended": function (animation) {
+            if (!this.animationIds || (this.animationIds.indexOf(animation) >= 0)) {
+                this.owner.parent.removeEntity(this.owner);
+            }
+        }
+    },
+    
+    methods: {
+        destroy: function () {
+            if (this.animationIds) {
+                arrayCache.recycle(this.animationIds);
+                this.animationIds = null;
+            }
+        }
+    }
+});

package/src/components/RenderLottie.js

@@ -0,0 +1,149 @@
+import {LottieSprite} from '@qva/pixi-lottie';
+import createComponentClass from '../factory.js';
+import RenderContainer from './RenderContainer.js';
+
+export default createComponentClass(/** @lends platypus.components.RenderSprite.prototype */{
+    
+    id: 'RenderLottie',
+    
+    properties: {
+        /**
+         * 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,
+
+        /**
+            {
+                asset: string | Uint8Array;
+               
+                autoplay?: boolean;
+               
+                loop?: boolean;
+               
+                width?: number;
+               
+                height?: number;
+               
+                speed?: number;
+            }
+         */
+        options: null,
+
+        /**
+        * 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
+            {localRotation, localScaleX, localScaleY, offsetX, offsetY, offsetZ, options, owner} = this,
+            sprite = this.sprite = new LottieSprite(options ?? {});
+
+        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 (sprite.update) {
+            this.addEventListener('handle-render', (renderData) => {
+                if (sprite.update) {
+                    sprite.update(renderData.delta);
+                }
+            });
+        }
+
+        sprite.play();
+    },
+    
+    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/RenderProgress.js

@@ -0,0 +1,120 @@
+/* global platypus */
+import {Container, Graphics, Point} from 'pixi.js';
+import createComponentClass from '../factory.js';
+
+export default createComponentClass(/** @lends platypus.components.RenderProgress.prototype */{
+    
+    id: 'RenderProgress',
+    
+    properties: {
+        //TODO: Document!
+        backgroundColor: 0x000000,
+        
+        color: 0xffffff,
+        
+        mirror: false,
+        
+        flip: false,
+        
+        width: 100,
+        
+        height: 20,
+        
+        regX: 0,
+        
+        regY: 0
+    },
+    
+    publicProperties: {
+        x: 0,
+        
+        y: 0,
+        
+        z: 0
+    },
+    
+    /**
+     * This component creates a visual progress bar that can be used for loading assets or showing other types of progress changes.
+     *
+     * @memberof platypus.components
+     * @uses platypus.Component
+     * @constructs
+     * @listens platypus.Entity#handle-render
+     * @listens platypus.Entity#handle-render-load
+     */
+    initialize: function () {
+        const
+            b = new Graphics(),
+            f = new Graphics(),
+            con = new Container();
+        
+        this.parentContainer = null;
+        this.background = b;
+        this.progress   = f;
+        this.container  = con;
+        
+        if (typeof this.backgroundColor === 'string') {
+            this.backgroundColor = +this.backgroundColor.replace('#', '0x');
+        }
+        if (typeof this.color === 'string') {
+            this.color = +this.color.replace('#', '0x');
+        }
+        
+        b.f(this.backgroundColor).rect(-this.regX, -this.regY, this.width, this.height);
+        f.f(this.color).rect(-this.regX, -this.regY, this.width, this.height);
+        f.scale = new Point(0.0001, 1);
+        con.addChild(b);
+        con.addChild(f);
+    },
+    
+    events: {
+        "handle-render-load": function (resp) {
+            if (!this.parentContainer && resp && resp.container) {
+                this.parentContainer = resp.container;
+                this.parentContainer.addChild(this.container);
+            }
+        },
+        
+        "handle-render": function (resp) {
+            if (!this.container) { // If this component's removal is pending
+                return;
+            }
+
+            if (!this.parentContainer) {
+                if (resp && resp.container) {
+                    this.parentContainer = resp.container;
+                    this.parentContainer.addChild(this.container);
+                } else {
+                    platypus.debug.warn('No PIXI Stage, removing ProgressRender component from "' + this.owner.type + '".');
+                    this.owner.removeComponent(this);
+                }
+            }
+            
+            this.container.x = this.x;
+            this.container.y = this.y;
+            this.container.z = this.z;
+        },
+        
+        "update-progress": function (progress) {
+            if (isNaN(progress)) {
+                if (typeof progress.fraction === 'number') {
+                    this.progress.scale.x = progress.fraction;
+                } else if ((typeof progress.total === 'number') && (typeof progress.progress === 'number')) {
+                    this.progress.scale.x = progress.progress / progress.total;
+                }
+            } else {
+                this.progress.scale.x = progress;
+            }
+        }
+    },
+    
+    methods: {
+        destroy: function () {
+            if (this.parentContainer) {
+                this.parentContainer.removeChild(this.container);
+                this.parentContainer = null;
+            }
+            this.container = null;
+        }
+    }
+});