elitian

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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 :rolleyes:

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 :rolleyes:

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.