Efficiency difference between using large png and scaling down vs small pngs

[elitian]

Is there a big efficiency difference, in terms of game speed/smoothness and memory usage between using a small png for entities sprites VS using a big png and scaling it down with javascript ingame?

 

[tips4design]

Depends on how you do the scaling. If you simply set width and height of the image, then yes the performance is affected as the texture size is still large, but it's only displayed in a smaller size. If you manually re-size the image to an off-screen canvas or Phaser bitmapData then the performance won't be affected, only the load time will be a bit longer.

[Umz]

11 hours ago, tips4design said:

Depends on how you do the scaling. If you simply set width and height of the image, then yes the performance is affected as the texture size is still large, but it's only displayed in a smaller size. If you manually re-size the image to an off-screen canvas or Phaser bitmapData then the performance won't be affected, only the load time will be a bit longer.

Nice! Is it a very noticeable difference or just one to go for if you REALLY need to optimize for speed? Which I suppose should be always

[Rudrabhoj Bhati]

Other than performance, really large scaling aren't really good-looking/smooth either. I assume you want to support different display resolutions. In this case better way would be loading the size you need based upon the display resolution range.

I had to show an Agar.io like prototype to a client. I was using Arcade physics with bitmap sprites to keep it simple and fast Using very large sprites and then scaling them very low gave ugly looking results. So I ended up using three different sprites for different mass range the ball is in.

[tips4design]

On 5/19/2016 at 0:58 PM, Umz said:

Nice! Is it a very noticeable difference or just one to go for if you REALLY need to optimize for speed? Which I suppose should be always

If you for example use a 2048x2048 image and display it downscaled at 64x64 pixels there will certainly be a noticeable difference. Also, take in consideration that wheter you are using the canvas renderer or the WebGL renderer matters a lot. For example, with WebGL, if you use 2048x2048 textures for each object, the GPU simply can not store too many textures of this size (especially on mobile devices). Anyway, it mostly depends on how you actually scale the images. If you for example, down-scale the image each frame than you'll see a noticeable frame drop. So: if you use pretty small images (eg: like having 100x100px image and downscaling it to 80x80px) then you won't see much of a performance hit but the quality might suffer to do the fact that Phaser scaling method might not be as good as scaling the image yourself with Photoshop.

[bruno_]

In my game (see my signature) to support all resolutions with good quality I used SVG files - see it in the fields when you start a game.

SVG has a big advantage in image quality, because they don't loose quality when they scale.

My game is made with Phaser, Phaser doesn't support SVG, but it worked so I used it anyway.

The downside is that it won't work on all browsers, for me it's a Cordova/Crosswalk app so I only needed Chrome to work.

Try to test it with different resolutions and tell me what you think about it.

[Fatalist]

You can use mipmaps in webgl, which lets you render downscaled images fast and without significant loss of quality(but you waste some GPU memory by using higher resolution textures + 33% extra memory for mipmaps).

[elitian]

10 hours ago, tips4design said:

If you for example use a 2048x2048 image and display it downscaled at 64x64 pixels there will certainly be a noticeable difference. Also, take in consideration that wheter you are using the canvas renderer or the WebGL renderer matters a lot. For example, with WebGL, if you use 2048x2048 textures for each object, the GPU simply can not store too many textures of this size (especially on mobile devices). Anyway, it mostly depends on how you actually scale the images. If you for example, down-scale the image each frame than you'll see a noticeable frame drop. So: if you use pretty small images (eg: like having 100x100px image and downscaling it to 80x80px) then you won't see much of a performance hit but the quality might suffer to do the fact that Phaser scaling method might not be as good as scaling the image yourself with Photoshop.

Awesome answer, just what I was looking for. Concise and clear. Thanks!