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
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.
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.
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.