Render Texture for Pixelating Spine

Phaser 3
1

Okay, I need some help because these render textures are driving me mad. I have Phaser running in and Electron app, window is resizable to any aspect ratio / size. I’m trying to setup a Scene where i can play Spine2d animations and pixelate the animations for mock pixel art animations. I am trying to use render Texture to set small scale and upsize into the viewport. but I either keep getting weird pixel scaling not square pixels or the texture warping inversely to the resize happening.

this is what I currently have thats almost there but has the weird non square pixels.

export class SecondScene extends Phaser.Scene {
    private fromKey?: string;
    test_timer: number = 0;

    private rt!: Phaser.GameObjects.RenderTexture;
    private rt2!: Phaser.GameObjects.RenderTexture;
    private stage!: Phaser.GameObjects.Container;
    private base = { W: 360, H: 180 };

    graphics!: Phaser.GameObjects.Graphics;
    private spineboy!: any; // Use 'any' for the Spine object for simplicity

    constructor() {
        super({
            key: 'second'
        });
    }

    init(data: { from?: string }) {
        if (data?.from) this.fromKey = data.from;
        this.test_timer = 0;
    }

    preload() {
        this.load.setPath('assets/test/');
        // @ts-ignore
        this.load.spine('spineboy', 'spineboy.json', 'spineboy.atlas');
    }

    create() {
        this.rt = this.add.renderTexture(0, 0, this.base.W, this.base.H)
            .setOrigin(0);
        
        this.stage = this.add.container(0, 0);
        this.stage.setVisible(false); // Hide the original container
        
        let text = this.add.text(10, 10, `Scene 2 - ${this.test_timer}s - from ${this.fromKey}`);

        // @ts-ignore
        this.spineboy = this.add.spine(0, 0, 'spineboy', 'idle', true);
        this.spineboy.setScale(.5);
        this.stage.add(this.spineboy);

        this.graphics = this.add.graphics();

        this.time.addEvent({
            delay: 1000,
            loop: true,
            callback: () => {
                this.test_timer++;
                text.text = `Scene 2 - ${this.test_timer}s - from ${this.fromKey}`;
            },
            callbackScope: this
        });

        this.input.once('pointerdown', () => {
            this.scene.stop();
            this.scene.setVisible(true, this.fromKey);
            this.scene.resume(this.fromKey);
        });

        this.scale.on('resize', this.onResize, this);
        this.onResize(this.scale.gameSize);
    }

    private onResize(size: Phaser.Structs.Size) {
        this.rt.resize(size.width, size.height);

        const scaleX = size.width / this.base.W;
        const scaleY = size.height / this.base.H;
        const uniformScale = Math.min(scaleX, scaleY);

        this.stage.setScale(uniformScale);
        
        this.spineboy.setPosition(this.base.W / 2, 200);
        
        this.rt.clear();
        this.rt.draw(this.stage);
    }

    override update() {
        this.rt.clear();
        this.rt.draw(this.stage);
    }
}

Any help would be greatly appreciated.

1 Like