elitian Posted May 18, 2016 Share Posted May 18, 2016 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? plicatibu 1 Quote Link to comment Share on other sites More sharing options...
tips4design Posted May 18, 2016 Share Posted May 18, 2016 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, ecv and Kyros2000GameDev 3 Quote Link to comment Share on other sites More sharing options...
Umz Posted May 19, 2016 Share Posted May 19, 2016 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 Quote Link to comment Share on other sites More sharing options...
Rudrabhoj Bhati Posted May 19, 2016 Share Posted May 19, 2016 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. Quote Link to comment Share on other sites More sharing options...
tips4design Posted May 21, 2016 Share Posted May 21, 2016 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. Kyros2000GameDev, plicatibu and elitian 3 Quote Link to comment Share on other sites More sharing options...
bruno_ Posted May 21, 2016 Share Posted May 21, 2016 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. Quote Link to comment Share on other sites More sharing options...
Fatalist Posted May 21, 2016 Share Posted May 21, 2016 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). Quote Link to comment Share on other sites More sharing options...
elitian Posted May 21, 2016 Author Share Posted May 21, 2016 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.