ResUtil - Plan out game resolutions visually

Discussion and feedback on Construct 2

Post » Wed Feb 05, 2014 9:43 pm

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.

Image

Let me guys know what you think!


ORIGINAL POST
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)
Image

Landscape - Safari, iPhone 5S (iOS)
Image

Portrait - Safari, iPhone 5S (iOS)
Image
Last edited by Sigmag on Tue Jun 03, 2014 4:14 pm, edited 8 times in total.
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Thu Feb 06, 2014 11:38 am

This is great stuff, can you make it for landscape to?
B
9
S
4
G
1
Posts: 44
Reputation: 1,663

Post » Thu Feb 06, 2014 6:34 pm

@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!
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Thu Feb 06, 2014 8:00 pm

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.
Need help? Upload .capx file with your question.
B
16
S
4
G
2
Posts: 233
Reputation: 2,560

Post » Fri Feb 07, 2014 2:09 am

Thats very useful, thanks for sharing ;]
B
38
S
8
G
3
Posts: 439
Reputation: 6,876

Post » Fri Feb 07, 2014 10:21 am

@Sigmag
Thanks! This is just what i needed.
B
9
S
4
G
1
Posts: 44
Reputation: 1,663

Post » Fri Feb 07, 2014 4:52 pm

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.
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Tue Mar 04, 2014 12:29 am

@Sigmag
What the best for a pc online game?
B
7
S
1
Posts: 65
Reputation: 586

Post » Tue Mar 11, 2014 4:24 am

Cool. Posting so I can find this later. I need to see if this can be implemented in my work.
B
15
S
2
G
2
Posts: 96
Reputation: 1,118

Post » Tue Mar 11, 2014 4:45 am

Thanks! this is very helpful.
B
94
S
33
G
20
Posts: 438
Reputation: 17,605

Next

Return to Construct 2 General

Who is online

Users browsing this forum: Bobbyneal100, DomenicS, troxx and 5 guests