Best Way To Increase Performance In General

Hello All! I’m making a game I want some options to boost performance. Any tips are appreciated!

One question I have: Will lower quality textures help?

Hi,
I don’t know for texture quality, but the config.width and height affects performance.

Sadly, I’m basically using the max size possible for that, that’s why I am asking the question :slightly_frowning_face:.

Max size or min size??

Max size, as in I’m using 1920 x 1080. I want you to be able to change settings in game, and I don’t think you can change game size when it has already started (or maybe you can? I don’t know)

You can but it needs a restart or refresh of the page, you can store a config in localstorage, modify it in the game options by user, and just load this localstorage config instead of the default one.
And 1920x1080 is a lot, i use 400x256 and if i increase it, my high velocity machine gun weapon decrease dps to 40, and my water shader to 20-30…
It really depends on what your game do, number of assets, size, enemies update script etc…

1 Like

I’ve done localstorage option storing before. I have a question though. Does the game auto scale to your screen when in 400x256? Or do you have to zoom in? I want my game to be playable in fullscreen, so can I just use a 16:9 aspect ratio with any pixel width/height values?

Yes, width and height are fixed but scale handle the fullscreen, i use Phaser.Scale.HEIGHT_CONTROLS_WIDTH
But there is many others:
https://photonstorm.github.io/phaser3-docs/Phaser.Scale.html#.ScaleModeType

What does height controls width do? Nevermind just looked it up.

How would that be helpful exactly?

I think ENVELOP is what I’m looking for, but I’m not sure.

Yes, ENVELOP or FIT, i don’t remember

FIT doesn’t retain aspect ratio, which is what I want. I will try ENVELOP.

Now that I think about it, if I change width and height size, I change pixel distance too.

That would mean everything would have to be relative size and position, which I don’t really want to deal with.

I guess that means I’m back to the original question then, although I’m not sure if there are other solutions.

Hard coded values always give bad times…
What i try to do is a config file with game variables about everything, and in the code all is relative.
If needed i can changes things without breaking all the gameplay

It just takes forever to use no pixel values and sometimes after you get something in the perfect position as soon as you change the size it looks bad. Maybe someday, but for game jams especially, using relative values just takes too long for me.

can’t you just do xValue = config.width * .5 //For the center of the screen
yValue = config.height * .5 //Center of screen

Just keep the value under 0 unless you are using a camera.

Then if you change the width or height things should still line up.

Yeah, it just takes a bit longer.

I can surely recommend going down with your game size.
We went down from fullHD to 1280x720 (so still pretty big for Phaser I would say) and its working fine both on desktop and mobile devices. You can take a look here if you want:
Treasure Hunters

Another thing I would suggest is to change Text objects into BitmapText if possible. If your game is text heavy, you will notice the difference.

Also you can group your assets together into atlases and try to reduce your draw calls.


Here is an outdated tutorial of how to do so. Might need to look for alternatives as browsers seem to abaddon the native Canvas Debugger.

Cheers.

SpectorJS is a really good alternative to the old canvas debuggers.

2 Likes

We had an issue where add.graphics (layering depth??) were causing massive cpu drops.

Better use 1 image(?)
Better use blitter object(?)

Graphics objects can become expensive very quickly. Unlike a real canvas, they do not buffer their contents; instead, they’re completely redrawn (which, for paths on WebGL, includes triangulation) every frame, which makes them very flexible, but also limits their usefulness for static images.

Any object with a static texture - images, blitters, and even the shape objects like Rectangles - will probably outperform a Graphics object. If you need to draw something dynamically, generating a texture from the Graphics object or using a Canvas Texture could be a good idea.

The only real difference between a blitter and the other textured game objects is that blitters’ children are more lightweight and are drawn in a rather tight loop, which may be faster if you have many of them. Rendering them isn’t any cheaper, so the best way to determine whether they’re better is to profile your specific use case.

2 Likes