Designing for multiple screen resolutions and aspect ratios, target one resolution then scale to meet others or use normalized values?

Question

I feel like what I'm currently doing is stupid but would just like reaffirmation it is. Basically I'm writing games which target a certain screen resolution (800x480), so all positions, widths and heights I set for sprites is for that resolution.

On the engine side I have special scalers which will change the width and height of what is being drawn to meet the current platforms res, so for example if the platforms screen res is 1200x720 I will stretch a sprite by a factor of:

1280 / 800.0f;
720 / 480.0f;

Positions are also offset and manipulated in a similar way.

I really feel I should move to a normalized system for widths and positions (i.e. 0 to 1) but at the same time feel this is more intuitive since the first platform I target is 800x480 and I already kind of have a good udnerstanding of dimensions and such for that.

So my question is, is it really that bad to target a specific ccreen res then in the engine side modify this res to meet different platforms?

Answer 1

So my question is, is it really that bad to target a specific screen res then in the engine side modify this res to meet different platforms?

Generally speaking, no. Changing the scale of your number and then normalizing to 0..1 later just means it's easier to design the UI.

The one thing that'll bite you on this, though, are different aspect ratios. If you're authoring on a coordinate system that's, for example, 4:3, things are going to stretch pretty bad at 16:9.

There are a couple of solutions to this. One is to just accept the stretching. Another is to stretch to fill the screen area, and just not have any UI in the side areas if you are displaying on a screen that's wider.

A more robust solution, though, is to set up some kind of anchoring system. Generally speaking, you want certain elements near the edges of the screen. You set up your widgets such that the "quit" button is in the "upper left", offset by some amount. Then when your resolution changes, the button's absolute position shifts such that it makes sense.

Answer 2

You might want to consider only scaling some things, specifically the positions of the layouts. But then leave the actual size of the UI elements the same and allow the user to step it up in increments as they see fit. This should give you a layout that works between resolution and aspect ratios as well as increasing the options the user has in how predominant the UI is on their screen all while solving the issue you are addressing.

Hope this helps

Answer 3

If this is your first time out, then you're unlikely to get this right. Something will come and bite you in the arse, and it's unlikely anyone will be able to steer you away from that because what that thing is will depend on your design.

So my advice is pick a resolution for this project, and treat it as your "virtual" coordinate system and let it lie at that. As you've already mentioned, you're currently thinking in 800 * 480, so stick with that.

If you're working on your own 2D engine on 3D hardware, then you can use your vertex shader to compensate for the actual size of your back buffer. Otherwise, you'll need to factor in a scale somewhere in your pipeline between the fixed logical units and the variable screen dimensions.

Now, what to do about aspect ratio changes? The easiest plan is to just assume you'll letter box. That's not a terrible choice, and most devices are close enough in aspect ratio that it won't matter. In that case, all you'll have to do is calculate the largest square that fits inside the screen at your aspect ratio, calculate either a horizontal or vertical offset to center that box on screen, and then mask off the remaining space.

One step up from that, but heavily dependent on what kind of game you're making and how you're building it, is making sure you have some bleed in your backgrounds that can extend outside the play area into what would be the letter boxed area. This would give the user the impression that you're filling the screen, without shagging up your logic.

Imagine, for instance, Mario; you could easily see making it taller if you had to, just repeating sky and ground tiles above and below. Going the other way is a little dicier, in that you'd have to show more of the level to the left and right, which may break some of the design, but art wise appending a few extra columns to the far left and far right of the level would be trivial.