Image optimization (To avoid lag)

0
0
16
A198_Tips

I was creating my game, and it contains high-resolution images because it uses lighting and special effects. However, when I checked the GPU usage in the task manager, it reached high values ​​even with only a few sprites. So I wanted to get to the bottom of this so that a "potato computer" could run my game.

So I was experimenting with images and came to some interesting conclusions:

  • The resolution of your images doesn't matter; they can be 1000x1000 and it won't affect performance at all.
  • The larger your screen, the more GPU the game needs to use; that is, if you're playing in full screen, it will be more demanding than playing in windowed mode.
  • The larger the area your image covers on the screen, the more GPU it needs.

Why?

I think this is because when you request that an image be drawn, it doesn't resize and place the image. Instead, it checks which pixels on "your screen" the image will cover. And the screen pixels are painted according to the pixels that match those in your image.

It's similar to collision detection on maps; you don't check block by block to see if your player is colliding. Instead, you check your player's coordinates to determine which blocks are nearby and where a collision might occur.

So, the resolution of your image doesn't really matter. You can draw a 1000x1000 image and it will cost the same as a 1x1 image. The difference lies in how large you want it to be drawn on the screen.

If you use:

screen.drawSprite("image_hd",0,0,10,10)
screen.drawSprite("image",0,0,300,300)

And let's say "image_hd" is 1000x1000, while "image" is only 16x16. Then, drawing the second sprite ("image") costs 100 times more than drawing the first sprite ("image_hd"). This is because "image" is covering the entire screen, so it has to paint more pixels than "image_hd".

What happens if we compare both with the same drawing size?

Well, the same thing will happen if you use:

screen.drawSprite("image_hd",0,0,300,300)
screen.drawSprite("image",0,0,300,300)

Both will use the same amount of GPU resources. High? Yes. But they use the same amount because they cover the same number of pixels on the screen.

Why does increasing the screen resolution increase the cost?

Because you're painting more pixels. Higher resolution = more pixels to paint per sprite.

What happens with sprites or images where certain pixels are invisible (alpha = 0)?

Well, the same thing ends up happening. Even if certain pixels in your sprite aren't colored and nothing is displayed on the screen, those invisible pixels will still be painted, consuming the same amount of GPU resources.

If an image is drawn off-screen, does it have the same cost as drawing it on-screen?

Interestingly, no, because being off-screen doesn't draw the same number of pixels as being on-screen. That's why in certain games with too many elements covering the screen, if you stop seeing them, the lag will decrease.

And what about the CPU?

The cost is the same, even though the amount of CPU used by microStudio is limited since it's a portion of the other portion used by your browser (and exporting your game as an application doesn't work, frankly).

What do you recommend?

Honestly, I don't know. I hope this helps.

But hey! At least you can use high-resolution images without worrying about performance. However, keep in mind that if your image has very high resolution, it's not worth it, as the difference won't be noticeable and will appear pixelated.

Also, if you use many high-resolution images, you'll fill up your 50 MB of storage, and I'd recommend saving that space for your game's music.

And remember that less powerful computers have lower screen resolutions. Therefore, the GPU usage will be reduced somewhat.

Finally, I recommend saving more CPU resources, because that's pretty limited, I think. So don't bother drawing multiple sprites to "save performance"; you'll only complicate things since you're using more resources than just drawing one large image.

By the way, if you're wondering what was causing the high GPU usage in my game, it was the background. Having like 3 sprites with stars and parallax ends up painting all the pixels on the screen 3 times.