Davaaron Posted August 9, 2018 Share Posted August 9, 2018 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 More sharing options...
PhaserEditor2D Posted August 9, 2018 Share Posted August 9, 2018 Hello @Davaaron Maybe you can try by enabling autoCull in the sprites: https://phaser.io/examples/v2/camera/mass-camera-cull But it depends on the nature of your game. Maybe you don't need to create all the objects at the same time, maybe you can create them by demand. Link to comment Share on other sites More sharing options...
Davaaron Posted August 10, 2018 Author Share Posted August 10, 2018 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 More sharing options...
PhaserEditor2D Posted August 10, 2018 Share Posted August 10, 2018 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. Link to comment Share on other sites More sharing options...
Davaaron Posted August 10, 2018 Author Share Posted August 10, 2018 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 More sharing options...
PhaserEditor2D Posted August 10, 2018 Share Posted August 10, 2018 > 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 More sharing options...
PhaserEditor2D Posted August 10, 2018 Share Posted August 10, 2018 Non renderable objects keeps the body and all the physics checks. Link to comment Share on other sites More sharing options...
Davaaron Posted August 11, 2018 Author Share Posted August 11, 2018 Is P2 better for performance? If I kill the sprite, I would need to kill the body, too (so for the revival too). Thanks for your responses. Link to comment Share on other sites More sharing options...
Davaaron Posted August 13, 2018 Author Share Posted August 13, 2018 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 More sharing options...
PhaserEditor2D Posted August 13, 2018 Share Posted August 13, 2018 No, P2 is not better for performance. In my opinion, you should ask on the Box 2D forums for tips: http://www.box2d.org/forum/index.php It does not matter if the developers are not using Phaser or the Box 2D javascript port, it is a matter of the Box 2D design. You are welcome. Link to comment Share on other sites More sharing options...
Davaaron Posted August 13, 2018 Author Share Posted August 13, 2018 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. PhaserEditor2D 1 Link to comment Share on other sites More sharing options...
Davaaron Posted August 29, 2018 Author Share Posted August 29, 2018 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 More sharing options...
PhaserEditor2D Posted August 31, 2018 Share Posted August 31, 2018 That's pretty strange. My advice is to create a small test game with only the background and reproduce the FPS drop, then we can work on improving that case. Link to comment Share on other sites More sharing options...
Recommended Posts