Jump to content

Render sprites only in Camera


Davaaron
 Share

Recommended Posts

Hi,

 

i got a big game whose dimension is about 30.000 x 1000. The problem is obvious: The fps drops down to around 5-20 (WebGL / Canvas). Im using the Phaser Editor to create my states and I'm missing a function like "only render the sprites within the camera". 

Is it possible to do so? The chrome dev-tools performance test tells me that the activity "drawImage" takes up 17,3% of total time. 

I'd appreciate any tips and tricks. 

 

PS: All sprites are contained in an asset.json. 

Link to comment
Share on other sites

Unfortunately, setting the autoCull property to true didnt improve the performance. 

It's a platformer game, where the player can run from left to the right. How would you create the objects on demand when working with Phaser Editor? 

If I'm aware correctly, the Phaser Editors adds all sprites to the cache and renders them when I enter the state (the .canvas file is a state file).

Link to comment
Share on other sites

Phaser Editor is a code generator, it compiles the .canvas file into a js file with Phaser code, it means, all is static, it does not create new objects on the fly.

Maybe you can create parts of the scene in different Group prefabs, and add the groups to the state by demand. Or you can check the player position and enable only the near objects.

By the way, did you tried by enabling quedtree?

game.physics.arcade.skipQuadTree = false;

See the demo here: https://github.com/photonstorm/phaser-examples/blob/master/examples/arcade physics/quadtree collision infos.js

Or better, just open the New Phaser Example Project in Phaser Editor and select that example, then create a bigger scene and add more enemies.

image.png.c9704c5b6ee295cf763ab91317d313bc.png

 

 

Link to comment
Share on other sites

Thanks for your response.

Quote

 Or you can check the player position and enable only the near objects.

This means I should set the property of each sprite to renderable = false and set it to true whenever the player move nearly?

I thought this is was autoCull actually does, uff.

 

As Arcade does not suite my needs, I use box2d to handle the physics.

Link to comment
Share on other sites

 

> This means I should set the property of each sprite to renderable = false and set it to true whenever the player move nearly?

> I thought this is was autoCull actually does, uff.

 

Not the renderable property, you should "kill" the object and revive it.

As Arcade does not suite my needs, I use box2d to handle the physics.

Oh! I fear Box 2d is not good for performance. It does too heavy computations. You should look into Box 2D forums for better tips. 

Link to comment
Share on other sites

I think the problem lies in the amount of sprites, so I'll be trying to write a wrapper for the generated *.js files (from the *.canvas files). My goal is to create the elements on demand as you suggested.

But I wonder what would be the best solution (in relation to performance) to achieve that. Someone got any further suggestions? 
 

I'm going to inspect the state.stage object, which seems to handle visibility, rendering, etc.I'm afraid of looping over all generated fields from the *.canvas file might cause too much overload and the performance will drop.

Link to comment
Share on other sites

I verified that box2d is not the issue in my game. It's more the amount of sprites being loaded (with textures and bodies). When I set generate=false for some groups of my canvas, the fps went from ~28 to ~58.

The approach is now to have something like onOutOfCameraKill and onWithinCameraReset (as I need the body for collision checks).

 

Thanks.

Link to comment
Share on other sites

  • 3 weeks later...

So still no solution to the problem and it seems like the problem cannot be fixed. The backgrounds are the main issues, having 3 layers and rendering them are causing the issue, although I created a chunk system (so I'm using sprites instead of tilesprites). As soon as the backgrounds needs to be rendered, the fps drops to 30. When they dont need to be rendered, the fps goes up to 60, even when CPU is throttled by 4 times.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...