Davaaron

Render sprites only in Camera

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. 

Share this post


Link to post
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).

Share this post


Link to post
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

 

 

Share this post


Link to post
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.

Share this post


Link to post
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. 

Share this post


Link to post
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.

Share this post


Link to post
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.

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.