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)