Dynamic Texture Platforms

Demonstrates creating custom-sized platform sprites by stamping tile textures onto a Dynamic Texture and configuring them as static Arcade Physics bodies.

1024 × 768

GitHub

import SPRITE_KEYS from "../spriteKeys.js";

export class Platform extends Phaser.Physics.Arcade.Sprite
{
    constructor(scene, x, y, width = 1, height = 1, outer = true)
    {
        const tileWidth = 32;
        const tileHeight = 32;
        const tileHalfWidth = tileWidth * 0.5;
        const tileHalfHeight = tileHeight * 0.5;

        const spriteWidth = width * tileWidth;
        const spriteHeight = height * tileHeight;
        const name = `platform${width}x${height}`;
        let texture;

        if (!scene.textures.exists(name))
        {
            texture = scene.textures.addDynamicTexture(name, spriteWidth, spriteHeight);

            if (width === 1 && height === 1)
            {
                texture.stamp(SPRITE_KEYS.FANTASY_TILES, 6, tileHalfWidth, tileHalfHeight);
            }
            else if (width === 1)
            {
                const topId = 3;
                const midId = 11;
                const bottomId = 19;

                for (let y = 0; y < height; y++)
                {
                    const id = y === 0 ? topId : y === height - 1 ? bottomId : midId;
                    texture.stamp(SPRITE_KEYS.FANTASY_TILES, id, tileHalfWidth, (y * tileHeight) + tileHalfHeight);
                }
            }
            else if (height === 1)
            {
                const leftId = 20;
                const midId = 21;
                const rightId = 22;

                for (let x = 0; x < width; x++)
                {
                    const id = x === 0 ? leftId : x === width - 1 ? rightId : midId;
                    texture.stamp(SPRITE_KEYS.FANTASY_TILES, id, (x * tileWidth) + tileHalfWidth, tileHalfHeight);
                }
            }
            else
            {
                const topId = [0, 1, 2];
                const midId = [8, 9, 10];
                const bottomId = [16, 17, 18];

                for (let y = 0; y < height; y++)
                {
                    for (let x = 0; x < width; x++)
                    {
                        const xId = x === 0 ? 0 : x === width - 1 ? 2 : 1;
                        const id = y === 0 ? topId[xId] : y === height - 1 ? bottomId[xId] : midId[xId];
                        texture.stamp(SPRITE_KEYS.FANTASY_TILES, id, (x * tileWidth) + tileHalfWidth, (y * tileHeight) + tileHalfHeight);
                    }
                }
            }
        }

        super(scene, x, y, name);

        this.setOrigin(0, 0);
        scene.add.existing(this);
        scene.physics.add.existing(this, true); // setting to true makes it static
    }
}

More in GameObjects13 examples

Floating Score TextDemonstrates a custom BitmapText class that animates upwards and automatically destroys itself using a Tween, creating a classic floating score effect for points.Hamster Player ClassA demonstration of extending the Arcade Physics Sprite class to create a controllable character with encapsulated movement, jumping, and animation logic.Key Sprite ClassA custom Sprite class for a collectible item that demonstrates a floating tween animation, cross-scene audio triggering, and self-destruction.Mystery Box Platformer MechanicA custom Arcade Physics Sprite that reacts to being hit from below, triggering a bump animation and spawning an item.