ResUtil - Plan out game resolutions visually

UPDATE (5/7/14)

Alright guys, decided to upgrade this utility, now being designated as HTML5 ResUtil. It has a good deal more functionality and can help give measurement information for knowing how much filler UI you will need for different aspect ratios, as well as now allowing you to designate your game resolution for testing. Not to mention portrait and landscape are both working under one utility now for ease of testing!

Click the banner below to launch.

Let me guys know what you think!

ORIGINAL POST

[quote:2s2l14aa]Hey guys,

We are in the first leg (week) of development on our new game, and I ran into the same problem we all do: Resolution and aspect ratio.

Since we are programming for different devices and different platforms (native HTML5, iOS, android, etc) we need to be able to account for software bars as well device native screen resolutions.

I've hobbled together some sort of basic utility to help me test how a game in different aspect ratios might scale (focus on DPI) and where I can expect black bars to show up, and I thought I'd post here in case anyone else can get use of it or use it as a foundation.

Speaking of which, this is a modified version of some scaleRatio code I found on these forums about 12 months ago, so I don't remember the original author , but thank you mystery man.

USAGE

Just load the program via web browser onto your device, then make note of the information you get per device. I recommend screen capture on the device if you want to save for reference later.

The utility works best if you stretch the window to allow empty space past 16:9 on the left and right in landscape mode, and on the top and bottom in portrait (may not work on most screens very well due to reduction of text size, but will work great if you have a flipped monitor! )

If you notice anything busted or misconfigured, let me know and I'll try to fix it.

HTML5 ResUtil

NOTES

• There may be minor discrepancies of 1-2px either visually, or represented in the information panel.
• Each box includes it’s border as a representation of it’s aspect ratio. This means the game screen box will overlap the borders when matching aspect ratios.
• The utility will automatically switch between portrait and landscape orientations (if height exceeds width in landscape, or width exceeds height in portrait).
• The orientation label also works as a button.

SCREENSHOTS

Landscape - Google Chrome, PC (windows)

Landscape - Safari, iPhone 5S (iOS)

Portrait - Safari, iPhone 5S (iOS)

This is great stuff, can you make it for landscape to?

matthewhxq Alrighty, landscape utility now available. I've got 3:2 included as a 3rd aspect ratio boundary in both portrait and landscape versions. Let me know how this works for you!

Thanks.. Looks really nice and useful. Landscape variant is really good to have too. 4:3 and 3:2 are typical aspects of photographs, the 16:9 is often used on videos, and nowdays also on many phones.

That�s very useful, thanks for sharing ;]

Sigmag

Thanks! This is just what i needed.

If anyone has another aspect ratio they are targeting let me know. I was going to include 17:10 and 16:10, but they just fall between 3:2 and 16:9 anyways, so it's a bit redundant.

I'm really glad you guys are finding it useful. If I knew a way to pull the device name into a text object that would be neat.

We could potentially screenshot the utility on our personal devices and post them here for reference, in order to get an exact look at the sizes/working resolutions for a bunch of different devices without having to own them.

Sigmag

What the best for a pc online game?

Cool. Posting so I can find this later. I need to see if this can be implemented in my work.

Thanks! this is very helpful.

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.

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.

Thanks for sharing all this useful tips Sigmag.

WOW...

Thank's alot Sigmag for this full answer, this will help any one confused about aspect ratios options.

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

cool thanks!