window size and optimization

Hey guys, so im trying to optimize my game, I have read pretty much all the posts and tutorials on optimization. I had one question though and its something that people havent really mentioned in the posts or tutorials.

Does the size of the window affect how well a game runs. Making a game 768x1024(using scale outer)vs 320x480 (also using scale outer) to make it fit the screen. Is there a big difference in performance. I have made my game using the bigger resolution and changing it now would be a lot of work. But I really need the game to be efficient.

thanks a lot for any input

Great question! Hopefully, somebody else has already tested this and can let us know.

The same amount of pixels would be drawn in either case. So, I think it may depend on how well the particular browser scales the canvas versus not having to scale at all.

Would you be able to copy your entire project, and test the different dimensions in the copy?

The bigger your native game resolution, the bigger the rendering/performance hit!

320x480 is still a 1.33:1 (4:3) ratio, so it will fill the screen the same as your 768x1024 game would (with less pixel density/graphical fidelity), but due to the increased resolution, the draw calls are going to be much more intensive.

That is because 320x480 is 153,600 pixels, and 768x1024 is 786,432 pixels! Over 5 times as many pixels!

Thus, a game designed a 320x480 will run many times faster than the same game at 768x1024 at the cost of graphical fidelity.

I actually just made a utility to help gauge this type of thing.

Here's a link to my resolution utility

What this utility does it show you based on layout size how much your game will scale up or down from it's native, intended resolution to fit the device it is running on.

If you open the portrait version, the layout is actually already set to 768x1024 (4:3 - iPad res) so you can test with the portrait HTML5 link to get an accurate idea of how your game will scale.

I can test maybe a few levels. Would have to import art in new sizes as well. But I have 40 levels so doing it for all of them would be a lot of time spent on it. So before I do it would be great to hear from the pros to see if its worth it. Im making a web game thats meant to run on mobile. clients want it to run on super slow and old hardware. I can only test on the 1st ipad since thats the oldest hardware I have. So any info would be much appreciated.

Sigmag Ur awesome!!!!!thanks for the reply. I'm actually using pixel art so I dont think it will look that bad with the loss in graphic quality. Again thanks a lot for the answer it makes sense and for your utility :)

ronval

If your game runs ok right now on the iPad 1, then you might be ok - since iPad 1 is an old device. But if your clients want you to have a game that runs really well on old hardware, the smaller resolution is usually the way to go, ESPECIALLY if they want it primarily for phones. If they want it primarily for tablets, you have to weigh the pros and cons of each to fit your situation.

I know I wouldn't want to redo all that work either! :X

I'm glad I was able to help.

ronval this is also why there is a new feature for fullscreen scaling, if set low quality, it first renders the canvas at whatever windowsize your game is set and then rescales the canvas to fit screen, this improves performance a great deal,because it skips al that extra pixelinformation if it set to high, it renders at the higher resolution of the fullscreen

So it would be even more beneficial if I do what sigmag says and put it in low quality or does setting it in low quality already do what sigmag says? Im assuming you should do both at the same time. Clients are wanting games to run on iphone 3gs, samsung galaxy y. Which are really crappy phones so any performance from the way things are drawn is a must.

Thanks a lot for your input

well, i could be wrong about this, but if high quality first scales, and then renders, you're still running on a pretty high resolution, no matter how small you're stage is, you are saving on texture space (if your objects are not scaled)

so i would say you should do both, for best performance

+ setting high dpi screens to no, actually if you don't scale you objects, this probably doesn't have an effect.

if you put a higher resolution objects and scale it smaller, on high dpi, it will show the details of the higher one.

but the best way to know is to do small tests, try some different settings,

but low quality scaling and no high dpi, should give you best performance, combine this with a smaller layout and you're set

The project 'Window size' property has no direct effect on performance in 'High quality' fullscreen mode, assuming the same content is displaying. It results in exactly the same rendering work. It's only faster to use a smaller window size in 'Low quality' fullscreen mode, where it first renders to a smaller size (which is faster), then stretches the result up (which is quick).

ronval - This is my understanding of it, there could be misinformation.

If you use the low quality scaling, it will decrease GPU load and increase overall performance to a comparable level to if you were using all the assets at that lower resolution, even if the assets have extra pixel information in the editor layout. But you will still have the RAM commitments for the original size of those assets.

For example, if your layout is 320x480, you can still have assets in your game that are 512x512, bigger than the layout itself. These assets with higher resolutions see use when using the hi quality full screen scaling, but use the same RAM regardless of render mode.

When you use hi quality scaling, it takes your 320x480 layout and scales it up to fit and render at a resolution of the device. So if you are running it on an iPad it will render at 768x1024 and on a 3GS it still renders at 320x480 because that's the native screen size. So while 512x512 is overkill for an asset on 320x480, that extra pixel information is used when scaled to fullscreen in hi quality.

Since the aspect ratio of the game is the same scaling from 320x480 to 768x1024, what IS changing along with the resolution is the ppi (pixels per inch) or how close together the pixels are. Retina displays have very high DPI displays, meaning that even though the iPhone 5S isn't much larger of a phone than the iPhone 3GS(163ppi), it has a much higher resolution (1136 x 640 pixel (326ppi), higher than the iPad2 (132ppi)!) so a game rendered at 320x480 will look great on 3GS, and pixelated on the iPhone 5S. That said, the 3GS looks more pixelated overall than the iPhone 5S due to lower ppi, because the pixels are larger.

However including higher resolution assets comes at the cost of RAM; each 256x256 square of pixels you have uses 0.25MB of RAM when loaded in the game. Meaning a 512x512 square uses 1MB by itself! This is what vtrix means when you should do both to save texture space, to modify the resolution of the original assets in the game to more closely match the intended resolution (ONLY IF USING LO QUALITY AND NOT GOING BACK) so you could potentially achieve the same effect with a 64x64 px sprite on lo quality as a 512x512 px sprite.

If you run lo quality, your game always renders at 320x480 resolution and then scales those pixels existing at the 320x480 resolution to fit the device's resolution of 768x1024. So you aren't filling each pixel with it's own unique color information, you are kind of stretching one pixel's color into like 9 pixels of information, causing it to look artifacted and pixelated.

I kind of got off a few tangents here, so if anything is unclear let me know and I'll try to explain further.

I will do some tests then see how much the FPS drops using high quality vs low quality. I want the game to run well but I also want it to look nice. Me and my business partner spent a good amount of time on the art so it would be nice if it looked decent. Sigmag Thank you so much for the explanation. Its people like you that make this community awesome. Ashley Thanks a lot as well for your input really appreciate it. Maybe you can add this info to the optimization tutorial that you wrote. I never found any posts with this info when using the search and can be very useful to others who want to squeeze some more performance out of their game just a suggestion :)

Don't confuse draw calls with GPU work. "Draw calls" as is meant by the profiler means the CPU overhead of telling the GPU what to do. Even in low-quality fullscreen mode there are probably identical draw calls, because all that's changed is the size it's rendered at, not the number of things to render. The smaller render surface in low-quality mode decreases the GPU work necessary to complete the draw calls issued by the CPU, because there are fewer pixels. So it only improves performance if the game is GPU-bottlenecked.

Can you guys explain why there is also a boost in FPS when going from scale outer to letter box scale? I have been making the levels at the new resolution and there was an increase of 6fps. Initially it was at 9 with the new resolution it climbed to 15fps. By changing full screen browser from scale outer to letter box scale it doubled and is steady between 28-30 FPS. Why is there such a big difference? by the way im testing it on an iphone 4 and an ipad 1st generation.

ronval - Glad I could help! I recommend reading these 3 links by Ashley for further information, they can save you a good deal of frustration down the road.

Supporting multiple screen sizes

Remember not to waste your memory

Performance Tips

And one possible explanation without knowing any further information about your game, is that scale outer can and will render your game beyond the layout size whereas letterbox renders your game at layout size. So maybe extra GPU/CPU work relating to that?

Ashley - Good to know! Thanks for the clarification.