Sigmag

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

Recommended Posts

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!

 

Ixar07c.png

 

 

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!

 

IQLkp9U.png

 

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

 

 

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)

C32lIoil.png

 

 

Portrait - iPhone 5S, Safari (iOS)

TZpXJKtl.png

 

 

Landscape - PC, Google Chrome (windows)

1QIzGJJl.png

Share this post


Link to post
Share on other sites

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.

 

mPZ8D62.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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 :D

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

 
IQLkp9U.png

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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.  :unsure:

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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 :D

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.