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:
- there are system expressions, DisplayWidth and DisplayHeight, that return the size of screen (window or fullscreen)
- 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?
- 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.
- 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.
- Voila! Scaling GUI!