Creating a dynamic texture from an image with preFX has wrong dimensions and coordinates

[DavidTalevski]

Version

• Phaser Version: 3.80.1

Description

I'm trying to make a dynamic texture that is sized exactly like the image I am drawing on it. The image has a preFX glow on it , but this issue happens with any preFX or postFX that I've tested. If the texture size is as big as the game size itself, then the image together with the glow effect gets drawn correctly on the texture but this is not optimized since the texture is way larger than it should be. If the texture is sized less than the size of the game then the image gets cropped, misplaced and enlarged. This makes it impossible to create a texture that is the same size as the original image with the effect applied to it.

Example Test Code

https://codepen.io/DavidTalevski/pen/bGJJvRy

The first texture is drawn correctly but the texture is as large as the game itself.

The second texture is as large as the image should be, but it is not drawn correctly.

Additional Information

Instead of using requestAnimationFrame I've tried testing it with setTimeout (just in case the effect doesn't take place next frame), I've also tried using all of the scene events such as (render, update, pre update, post update etc..) and the result was the same.

If this behaviour is normal, is there any other way of drawing a glow effect on the image and then using it as a texture?

[DavidTalevski]

Might be connected to https://github.com/phaserjs/phaser/issues/6794

[zekeatchan]

Hi @DavidTalevski. Thanks for bringing this to our attention.

We are aware of this issue for all FX but it will not be fixed. We are currently focusing our efforts on developing a new renderer (that will address this issue) and the next version of PhaserJS.

Here's a workaround to consider:

    create() {
        const scale = 0.2;
        const bomb1 = this.add.sprite(400, 300, 'bomb');
        bomb1.setScale(scale)
        bomb1.setOrigin(0, 0);

        bomb1.preFX.addGlow(0xffff00, 4, 0, false, 0.1, 32);

        // width and height of dynamic texture MUST match canvas width and height
        const texture1 = this.textures.addDynamicTexture("bomb_glow1", 800, 600);
        texture1.draw(bomb1, 0, 0);

        const texture2 = this.textures.addDynamicTexture("bomb_glow2", bomb1.width * scale, bomb1.height * scale);
        texture2.stamp('bomb_glow1', null, 400, 300);

        this.add.sprite(400, 300, "bomb_glow1")
        this.add.sprite(400, 300, "bomb_glow2")

        bomb1.destroy();
    }