Very slow rendering

Recommended Posts

Hello everyone,

I  just upgraded my project from Phaser CE to Phaser 3 (latest beta) and I noticed that framerate has dropped down dramatically. I know that version 3 is using custom renderer and not Pixi, but as I understand, the WebGL version should have similar performance as the original Pixi renderer.

I have just a single isometric scene with 64x64 tile sprites, every sprite is 80x40 and there are 128 single textures. Before upgrade, I got solid 50-60 FPS, now I can barely move the camera without FPS dropping under 15 FPS.

Has anyone actually tested the rendering performance of Phaser 3?

Thank you for any hint,

Have a nice day, Max.

Share this post

Link to post
Share on other sites

I already checked those iso demos, however those are really simple one, using a few texture atlases. I had 128 tile textures/sprites and the FPS was under 15 FPS. Has anyone benchmarked the new renderer? I mean how it performs while rendering "many" different sprites/textures. Is there some kind of viewport/camera culling implemented?

Anyway, I solved the performance problem by using texture packer (however I had a good reason why I didn't use a texture atlas in first place).

Another problem, I just switched to beta.18 and it seems that interactive objects are picked incorrectly, when you click on sprite that has texture from texture atlas where the frame was trimmed.


    "frames": {
        "example": {
            "frame": {
                "h": 159,
                "w": 40,
                "x": 0,
                "y": 0
            "rotated": false,
            "sourceSize": {
                "h": 159,
                "w": 40
            "spriteSourceSize": {
                "h": 159,
                "w": 40,
                "x": 39,
                "y": 130
            "trimmed": true

Then I add the example sprite at 0x0 and Phaser places the sprite at 39x130 (as defined in spriteSourceSize prop). When I click anywhere from 0x0 to 39x130, ie. where is visually no sprite, I get gameobjectdown event.

      this.input.on('gameobjectdown', (pointer, gameObject) => {
          gameObject.setTint(Math.random() * 16000000);

I believe that there is problem with the bounding rect not being updated/calculated correctly.

Sorry for bad English.



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.