HTML5 Resolution Utility - Visualizing common aspect ratios and scaling on any device

[Sigmag]

Hi all,

 

I'm new to these forums, but really want to share what I've made with everyone. Not for my own sake but to help all those other game developers out there that have trouble deciding what resolutions/aspect ratios to target.

 

I built this utility to help me visualize how common aspect ratios display on any screen size when stretched to fill the screen as much as possible.

 

All you have to do is deploy the URL on any device to see how a game of size 4:3, 3:2, or 16:9 will display. You can even just use your browser and stretch the window to the target size so you can do all your planning from the PC. however I recommend loading it up on the device as there are software bars and URL bars to consider!

 

In any case, please take a look - I feel we all have something to gain from having a visual aid when planning our target resolutions. Just click the banner below!

 

 

 

You can also see an augmented version of this scaling logic in action in our upcoming title, Dragonfly Zero. Click the banner below and stretch the window to whatever size you want. The game will scale and implement extra filler as is appropriate for the aspect ratio - regardless of how tall or wide you make it!

 

 

---------------------------------

 

 

UPDATE (5/7/14): Made changes requested by turnA, designated v2.0

 

This version includes both portrait and landscape in the same utility for ease of testing

 

New screenshots as well

 

 

Notes: 

 

1. There may be minor discrepancies of 1-2px either visually, or represented in the information panel.
2. 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.
3. The utility will automatically switch between portrait and landscape orientations (if height exceeds width in landscape, or width exceeds height in portrait).
4. The orientation label also works as a button.
5. Portrait mode is somewhat restricted on landscape displays (text size reduction), works best on flipped monitors and portrait displays.

 

 

SCREENSHOTS

 

Landscape - iPhone 5S, safari (iOS)

 

 

Portrait - iPhone 5S, Safari (iOS)

 

 

Landscape - PC, Google Chrome (windows)

[presidenten]

Very nice! Thanks for sharing! 

I think 960x640 seems like the sweet spot for my game. 

[Sigmag]

Glad you found it useful! 

 

There is also a trick in Chrome that I learned about recently that may help as well.

 

To emulate different device screens through chrome, you can hit ( CTRL + SHIFT + i ), then hit ESC, then click the "emulation" tab, and it'll give you a list of devices as well as viewport resolutions and some other info.

 

[turnA]

Great job! I think it will be even more useful if I can input my game screen resolution + ratio, and then it will show the maximun bleed and safe area size (in pixel) that my game needed for various screen ratio.

[Sigmag]

Great job! I think it will be even more useful if I can input my game screen resolution + ratio, and then it will show the maximun bleed and safe area size (in pixel) that my game needed for various screen ratio.

 

Thanks!

 

I have read this a few times, but I'm not sure I understand completely. Are you saying you would like for a 4th box to appear based on input of resolution (aspect ratio would be a byproduct of that input) that will show visual relation to those aspect ratio boxes, as well as include some additional text info (bleed px/safe area px for 4:3, 16:9, 3:2)?

 

If you could do a simple mock up of the idea in paint or something it could clarify a good deal - I don't think it will be too hard to modify the utility to suit your liking.

[turnA]

Yes, that's what I mean.

For example, I'm using 640x960 (2:3) resolution for my games using SHOW_ALL method (all my screen will be shown but it keep the aspect ratio)  and I know there will be left over/bleed area on various device.

It will be helpful if this utility can show the maximum size for other aspect ratio based on my resolution (3:4 -> 720x960 pixel, 10:16 -> 640x1024 pixel, etc...)

I can then use this number to prepare additional background that cover the unused space for these various aspect ratio.

 

Hope this is clear enough

[Sigmag]

Ok, I will start revising the code!

[Sigmag]

Alright turnA, check out the new version (landscape and portrait) and tell me if this is what you had in mind.

 

HTML5 ResUtil 2.0

 

I've also updated the main post to reflect the changes.

[turnA]

Cool! That's exactly what I had in mind. I already use it for my next mobile games to prepare the border/bleed asset

Although I can use calculator and do calculation for various screen size, this will be A LOT faster to use.

 

Just some ideas for future development:

- Support for other aspect ratio target, or even dynamic aspect ratio where player can input it themselves (because I think that the screen size will be even more varied in the future)

- Combined Portrait and Landscape mode into one Utility page (dynamically adjusted based on user browser window size)

 

No pressure of course. I already appreciated this tool in it's current form

[Sigmag]

Glad you found it useful, the other features shouldn't be too hard to add in. I already started on the dynamic window resize feature, because I think that's more intuitive than the original which changes orientation mode when the game screen is sized past 1:1 in either direction. Ran into a few hiccups though, so will revisit.

 

I need to get the numbers more precise as well, sometimes 1.77:1 (16:9) displays as 1.78:1 and some counts are off by 1 now and again, but it should be accurate enough for most uses!

[turnA]

Great update! I think you can now host it on Github as Github Pages so more people can use it without eating up your bandwidth

[Sigmag]

Not necessarily an update to the utility itself, but I stripped our upcoming game, Dragonfly Zero, down for a tech demo showing how by augmenting the logic used in the utility, I was able to make the game fit any screen.

 

Figured this might help people see what is possible, I think this is one of the best approaches to the resolution issue.

 

You can stretch the window to any size you want, any width, any height, and the game will display correctly - utilizing the most space it can. Top post is updated to show this as well.

 

[Froton X]

Exuberant program! This is gonna help many.

[Sigmag]

Glad you found it useful!

 

I have plans to do a write up for the dynamic scaling technique sometime within the next month or so, to give a detailed look at how this works so others can implement it more easily in their programs.

[nixeldev]

This utility is pretty sweet Thanks

 

One thing I would point out, when using it on desktop chrome I found that the focus was taken away from the input boxes as soon as I'd entered a character, meaning I'd have to re-click in the box to fill out the rest of the resolution. It's only a minor thing though.

 

Do you have a github repo set up for this yet? 

[Sigmag]

Alrighty nixeldev, made that change.

 

Decided while I was at it, I would completely restructure the code, so it should use like 10x less resources while it's at it - I wrote it really inefficient before for some reason so I was able to cut the code and memory commit by like 50%.

No more graphic glitches, no more weird jumpy behavior!  I didn't get around to making the info look bigger in portrait mode, but I'll get around to that eventually when I get some free time.

 

And I don't have a github, not sure how to use it. 

I don't code natively in html5 - I work through Construct 2 - so I don't know that my source code would be of any use to anyone. I'm willing to set one up, just not sure how to utilize it?

 

In any case, here's HTML5 ResUtil v2.1 just hit shift+f5 to clear the cache of the old one and you should see the new changes.

[nixeldev]

All sounds really cool

 

I'm sure you're already aware but I'm getting the following errors when trying to load it:

 

[Sigmag]

From v2.0 to v2.1 I made a bunch of image changes:

 

Removed:

• hud_3by2_p
• hud_16by9_p
• hud_4by3_p

 

Filename Changed:

• hud_3by2_ls --> hud_3by2
• hud_16by9_ls --> hud_16by9
• hud_4by3_ls --> hud_4by3

 

So all those sheets it's trying to load are from v2.0, you have a cached version of the code but not the images I think. Give SHIFT + F5 or CTRL + F5 a shot to ignore the cache and it shouldn't error out. Let me know if that does the trick!

[nixeldev]

Its working now 

 

Was a little odd though as I have caching disabled in the dev tools, I also tried it in Chrome and Opera last time and it failed in both but I'd only opened it in Opera previously.

 

Alas no matter, it's working great now. Thanks

[netox]

<p>Thanks for this tool, is amazing, help me a lot to choose my game resolution! Congratulations!</p>

[Sigmag]

Happy to hear it! Anything you found hard to use, or think would work better? It has room for improvement.

[geros]

Bumb:)
Hi Sigmag i didn't have the chance to view your tool since it gives me connection timeout. Is it somewhere available or you drop it ? 

Thanks