ResUtil - Plan out game resolutions visually

Discussion and feedback on Construct 2

Post » Tue Apr 01, 2014 4:31 am

@slanw

Sorry for the late reply.

LONG, ARDUOUS ANSWER:
What is best for mobile is also what is best for PC - that is to target all aspect ratios that can appear on any device. 99% of all monitors are one of these 3 aspect ratios - 4:3, 16:9, or 16:10. Keep in mind 16:9 is the defacto standard going forward and monitors are rarely made in 4:3 or 16:10 any more due to the standard set by 1080p (1920x1080 - 16:9).

That said, there are still plenty of 4:3 and 16:10 monitors in the wild, and it's never a smart thing to target one specific aspect ratio.

All normal aspect ratios fall between 4:3 and 16:9, there are a few outliers but for the most part you only need to target 4:3 to 16:9.

What this means is your UI will need to scale to make use of extra space, with the low end limit at 4:3 and the high end limit at 16:9. How you handle that is up to you but requires a different type of fullscreen scaling than the default letterbox (I personally like Scale Outer). I handle most of the issue by spawning elements at certain %s of screen height/width rather than focus on absolute values like X: 100, Y:200. This way when the window size stretches past the layout size it won't break your game.


You can see some of this in action on my current project, working title: Dragonfly Zero. The crucial part of the screen where all the gameplay happens is 3:2, anything outside of the 3:2 aspect ratio is filled with filler art that extends the UI graphics, but not the UI functionality. All crucial functionality must fit within the core 3:2 area.

Click the banner below to launch the Dragonfly Zero main menu scaling demo and stretch your window to any size you want and watch what happens.

Image

The game will start stretching upwards if taller than 3:2 and stretch outwards to the sides if wider than 3:2. You can use the utility from the first post to get a better idea of how this works.

Keep in mind I chose 3:2 in portrait because I'm targeting mobile and 3:2 is a good middle of the road between 4:3 and 16:9. Since you are on PC you should be targeting landscape, and if you are targeting browser with no intentions of fullscreen you may want to offset your aspect ratio range towards 16:9, because the browser address bars and things like the task bar in windows will squish the available height for your game, meaning your game will be making use of an area with a wider aspect ratio, easily passing beyond 16:9 on widescreen monitors, while not dropping down to 4:3. However, this all assumes a fullscreen browser on a 16:9 monitor, when someone could be playing in a scaled down browser window not taking up the entire screen.

I highly suggest using this window resizer plugin for chrome, not only for testing this, but for testing all of your games in the future. It's an invaluable tool.


SHORT ANSWER:
This answer only really applies if you are thinking about making a lower res html game like a flash game you might see on kongregate, which stays at a fixed smaller size that fits fully in the browser window even when the browser isn't fullscreen.

In that case you might aim for a smaller res like 480x320 (3:2), or 480x360 (4:3), where the aspect ratio doesn't matter so much because you aren't making use of the whole screen anyways.
Last edited by Sigmag on Tue Jun 03, 2014 4:11 pm, edited 3 times in total.
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Tue Apr 01, 2014 5:10 pm

Thanks for sharing all this useful tips Sigmag.
B
34
S
13
G
8
Posts: 134
Reputation: 8,118

Post » Tue Apr 01, 2014 10:01 pm

WOW...
Thank's alot Sigmag for this full answer, this will help any one confused about aspect ratios options.
B
7
S
1
Posts: 65
Reputation: 586

Post » Wed May 07, 2014 6:42 pm

BUMP FOR UPDATE

I've updated the first post of the thread, I've made modifications to the utility so that it provides more detailed information and allows for custom game screen resolution!

Let me know if it sucks! I haven't tested it very thoroughly, but it should work on any device.


HTML5 ResUtil 2.0
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Tue May 20, 2014 6:41 pm

cool thanks!
B
88
S
29
G
14
Posts: 1,154
Reputation: 15,003

Post » Thu May 22, 2014 5:38 am

If there is anything you guys would like to see it modified to do, I can take a swing at it as well. It's an ongoing project :P
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Tue Jun 03, 2014 3:01 pm

Thank you so much.
Image
B
81
S
16
G
4
Posts: 501
Reputation: 8,934

Post » Sun Jun 08, 2014 7:35 pm

NICE!!!!!!!!!!!!
Check out my latest game RAPID-TAPIT. Get your Fingercise on with this one. A steady Tap is all you need to score points. Lift a finger and see what you can do...

Image

ALLMarkMade Designs
B
32
S
15
G
3
Posts: 356
Reputation: 5,269

Post » Wed Jul 23, 2014 4:46 am

Updated! v2.1 is live, uses half the assets, single layout switching, and should be slightly more accurate in the readouts. Planning to make information display larger in portrait mode, but haven't gotten to it yet. Code optimization and tweaks to graphics and input so that everything works a little better all around.

It's at the same URL so just shift+f5 if you have a cached copy.

Again, if you guys have any suggestions, I'd love to add on - so just call it like you see it!
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Previous

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 11 guests