[Theory] Resolution and relative object placement

Post your own tutorials, guides and demos.

Post » Wed Apr 29, 2009 5:49 pm

Since this is more of a theoretical rant than anything else, I consider it to be a tutorial, thus I am placing it here. It is useful to see an example of progressive brainstorming.

So. You've no doubt tried fiddling with various screen sizes, be they 320x200, 640x480, 800x600 or higher. But when you change resolution, all the objects are thrown off proportions or positions.

If we want objects to maintain relative sizes and positions, then we have to use a couple tricks.

First, we don't use absolute coordinates anymore. Instead we use abstract coordinates. How? Well, here is how:
[list:22wk0ue9][*:22wk0ue9]there are system expressions, DisplayWidth and DisplayHeight, that return the size of screen (window or fullscreen)[/*:m:22wk0ue9]
[*:22wk0ue9] now, we have an object we want to always be positioned smack middle of screen. In a 800x600 layout, we'd place it at coordinates of 400x300. But if we change resolution to 640x480, the object is now closer to bottom right corner! Thus we have to use relative position. How?[/*:m:22wk0ue9]
[*:22wk0ue9] We take DisplayWidth and DisplayHeight and with simple math modify them to obtain the correct coordinates. In our case, we simply divide both into half. DisplayWidth/2 = 400 and DisplayHeight/2 = 300 for 800x600 or 240 for 640x480, respectively. If we want to place an object at 10% of height (from top) and 90% of width (from left), thus in top right corner, we use DisplayWidth*0.1 (1/10) and DisplayWidth*0.9 (9/10). If we want to use precise coordinates, we just use precise multipliers.[/*:m:22wk0ue9]
[*:22wk0ue9]We can modify the size in same way! Say, we need to define the default resolution and come up with some multipliers for object resizing: DisplayWidth/'DefaultWidth' and DisplayHeight/'DefaultHeight' are your size multipliers. So, to resize an object at resolution change we just need to set Height to 'OriginalHeight'*(DisplayHeight/'DefaultHeight') and Width to 'OriginalWidth'*(DisplayWidth/'DefaultWidth'). Obviously OriginalHeight and OriginalWidth are private variables as well that store the original size.[/*:m:22wk0ue9]
[*:22wk0ue9]Voila! Scaling GUI![/*:m:22wk0ue9][/list:u:22wk0ue9]
B
62
S
21
G
12
Posts: 1,910
Reputation: 13,155

Post » Wed Apr 29, 2009 6:06 pm

You can also make use the following expressions:
ScrollXLeft - left most visible pixel
ScrollXRight - right most visible pixel
ScrollYTop - top most visible pixel
ScrollYBottom - bottom most visible pixel

Also, if you're feeling devious, you can adjust the display zoom to zoom in slightly with bigger resolutions, and therefore display exactly the same content. If your textures are high resolution and were slightly downscaled originally, you really do get more texture detail using a higher resolution.
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,518

Post » Wed Apr 29, 2009 6:09 pm

Oh yeah, zooming was the other trick I forgot to mention! A certain layer - where you have the GUI - can be zoomed, but I'm not sure if that would leave other layers intact.
B
62
S
21
G
12
Posts: 1,910
Reputation: 13,155

Post » Wed Apr 29, 2009 9:30 pm

Any thoughts on widescreen?
:s

Also, wouldn't setting positions like that break all behaviors?

btw the more I delve into Construct I find it more flexible :D
B
3
S
2
G
4
Posts: 1,445
Reputation: 4,665

Post » Thu Apr 30, 2009 8:01 am

Behaviors aren't broken, Construct just recalculates positions before using them. But if you want the actual game to use actual coordinates, you just use actual numbers - the relative stuff is mostly needed for graphical interface, such as menus and sidebars, that have to always be on certain location on screen.
B
62
S
21
G
12
Posts: 1,910
Reputation: 13,155


Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 1 guest