Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
DavidTalevski opened this issue Apr 29, 2024 · 2 comments

Comments

@DavidTalevski
Copy link

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
Copy link
Author

Might be connected to #6794

@zekeatchan
Copy link
Collaborator

zekeatchan commented Jun 27, 2024

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();
    }

@zekeatchan zekeatchan self-assigned this Jul 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants