I’m new to Phaser 3 and seem to have a huge performance problem. I’m making a Wordle clone game that renders a grid and fills it in with colors and letters as users progress in the game. Each item in the game is either something I created using this.add.text or this.add.graphics
When the game starts, the scene is able to render in less than 3ms
By the end of the game, the scene takes more than 45ms
What am I doing wrong and why is it so slow? How can I improve the performance?
Possible you have too many Graphics objects or too many Graphics commands. Are you clearing Graphics before redrawing?
how many is too many? Each square in my game is made up of one text object and 2 graphics objects (one for the white box with a grey border and one for the filled in box that sits in the middle). So if my game grid is 5 x 6 then I’ll have 90 game objects + the keyboard on the bottom is another 28 * 3 so a total of 174.
The weird thing is that everything is “smooth” until the colors and text starts to fill in on row 3 or 4.
I do not clear any graphics before redrawing …
The game works by setting up the scene and calling this.add.X in the create function. Then in my input handler, when a user presses a key, I add more graphic objects to render to show which keys are pressed and if they are correct or not in the puzzle.
You could draw the whole letter grid on 1 graphics object — e.g. by calling fillRect() 30 times and strokeRect() 30 times. Then you would clear and redraw any time a cell changes color.
Or an alternative to Graphics is a Rectangle Shape (this.add.rectangle(…)) for each cell.
It may help if you use bitmap fonts as well.
ahhh, I didn’t think of it that way… I thought I had to keep individual graphic objects per thing that I render … but you are right. I could do everything on one graphic object. I’ll give that a go and see how it improves things.
thank you for the suggestion
Rectangle shape game object will have better rendering performance, compared with Graphics game object.
The different is, Graphics game object calculates triangles every render tick, Rectangle shape game object calculates triangles one time, and stores them for reusing.
Paste Graphics game object to RenderTexture game object will have more better rendering result, if this Graphics game object won’t change rendering content every tick.
Also, notice that rendering text has performance implications (you should provide metrics so that the framework can optimize font size calculations)
What I’ve been doing in my game is getting metrics info in the first render, and then providing the value for next renders (it’s an ugly mutation, but I can consider it part of the app’s state 
