Sprites primitive properties

This primitive goals to draw a sprite

Properties#

• spriteWidth
• spriteHeight
• url
• numberOfFrames
• nbPerLine
• separatorSize
• selectedColumn
• selectedLine

Properties specifications#

Do not use width and height for SpritesPrimitive. You should use spriteWidth and spriteHeight instead to define the size of on image.

spriteWidth#

Describes the width of one image in the sprite.

spriteHeight#

Describes the height of one image in the sprite.

url#

Describes path url to the sprites image source.

Formats supported across all renderers are PNG and JPEG. Other formats could require specific work.

numberOfFrames#

Describes the number of single image that compose the sprite.

nbPerLine#

Describes the number of single image per line.

separatorSize#

Describes the space in pixel between two single image that compose the sprite.

selectedColumn#

Describes the selected column number (starting from 1 for first column).

selectedLine#

Describes the selected line number (starting from 1 for first line).

Tips#

Create an animated sprite#

If you want to animate your sprite, we recommend you to create start an stop methods that you will be able to call from a `Screen`` to launch the animated effect.

export default $SpritesPrimitive.declare("AnimatedSpritesPrimitive", {
    statics: {
        SPRITE_ANIMATION_TIMER_ID: "spriteAnimation",
        SPRITE_ANIMATION_TIMER_DURATION: 70
    },
    properties: {
        timerManager: {class: $TimerManager}
    },
    methods: {
        startAnimatedSprite: function () {
            const nbOfLines = Math.ceil(this.numberOfFrames / this.nbPerLine);

            this.spriteIntervalId = this.timerManager.setInterval(() => {
                if (this.selectedColumn === this.nbPerLine) {
                    this.selectedLine = (this.selectedLine + 1) % nbOfLines;
                    this.selectedColumn = 1;
                } else {
                    this.selectedColumn++;
                }
            }, this.statics.SPRITE_ANIMATION_TIMER_DURATION, this.statics.SPRITE_ANIMATION_TIMER_ID);
        },
        stopAnimatedSprite: function () {
            this.timerManager.clearInterval(this.statics.SPRITE_ANIMATION_TIMER_ID);
        }
    }
});