Grid causes CPU to go up to 60%

Phaser 3
1

Hi everyone,

I am currently building my first game with Phaser.
Currently I am noticing, when drawing a grid (size=800x800, cells=20x20).

My CPU usage goes up to 60% while basically nothing is on the screen except the grid. I changed to canvas and saw in the javascript profiler, that it is busy most of the time rendering the grid.

When changing to canvas my CPU usage goes down to around 20% but my RAM usage is peaking :confused:

Is there any alternative way to draw a larger grid like this which won’t cause trouble like this?

Thanks for your help!

2

Are you drawing the grid every frame?

3

I am adding it once in the create function of the scene.

4

Then use a texture. Something like https://phaser.io/examples/v3/view/game-objects/render-texture/shape-to-render-texture

5

Thanks for your help - sadly this didn’t change anything. CPU usage is still between 60 - 65% after adding the grid to a render texture.

Are there any alternatives to using a grid?

Also when opening this demo https://phaser.io/examples/v3/view/game-objects/shapes/grid my cpu usage goes up to 50% using Chrome.

6

I suspect your graphics driver is no good, or maybe hardware acceleration is not used.
Anyway, it seems you need to bake the grid.

var rt = this.add.renderTexture(0, 0, 800, 800);
var g1 = this.add.grid(0, 0, 800, 800, 20, 20, 0x057605);
g1.setOrigin(0);
rt.draw(g1, 0, 0);
rt.saveTexture('grid');
sprite = this.add.sprite(400, 400, 'grid');
rt.destroy();
g1.destroy();
1 Like