How do I adapt HUD to different aspect ratios?

Hi everyone,

I'm very familiar with this tutorial https://www.scirra.com/tutorials/73/sup ... reen-sizes and I get it in terms of how this works, however I'd like to take it a step further and feel there must be a way to do it.

What I would like to do is adapt the HUD information to always appear at the far edge of a screen rather than in a fixed place.

A classic example would be that I want to support the iPhone 4s and 5s.. if I design it for the 5s giving the best full screen portrait look possible I then do letterbox and 4s users get black bars.

If I design it for the 4s, then I do scale Inner (or is it outter?) and I end up with a bunch of empty space above an below where the score would sit.

What I would like to achieve is some way to tell the Text / HUD objects (pause button for example) to not just be at a certain x,y coordinate, but actually have them always appear at the "Top" or "bottom' of the screen. Then I could design my background images and other things accordingly.

I have a game where I'd like to move the score and other hud stuff to the far left and right (in this case landscape) but if an iPad user were to play the game that info would get cut off and if i account for the ipad2 croppage then there is a ton of wasted space on the left and right side.

I'm sure there must be a way to do this, but I don't know how. It's also probably super easy. <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

Thanks!

Caleb

Bump, it just seems like there must be some straightforward ways to get this to work.

I can think of some ugly hacks like having an appear and be told to move in a certain direction till it hits the edge of the screen, but all of this sounds very ugly / inefficient.

it seems like images and objects could be told things like "Center" and left and right "justified". Top and bottom aligned. I know that for example admob can do this with it's ads, it would seem to make sense that objects in C2 would be able to in some way be told to behave in a similar fashion.

Bump, I'm really surprised there hasn't been a good informed answer on this. Maybe it really is impossible to do, but it just seems like having things be "justified" to the left / right / top / bottom could really be helpful in making games that can take full advantage of a wide range of devices and not rely on letterbox / black boxes.

I realize not every game would be able to take advantage of this, but I think a lot of people could if they know the tools are available.

Not to simplify your problem too much, but have you looked at the Anchor behaviour? I've only recently used this for the first time and it's good for me. In conjunction with designing my app for different aspect ratios it's been quite effective for me to implement HUD-like UI elements.

The hud will scale, put your game on letter box scaling, and use the anchor behaviour to your HUD objects, and they will stay on the corner or side that you archor it

Bump, I'm really surprised there hasn't been a good informed answer on this. Maybe it really is impossible to do, but it just seems like having things be "justified" to the left / right / top / bottom could really be helpful in making games that can take full advantage of a wide range of devices and not rely on letterbox / black boxes.

I realize not every game would be able to take advantage of this, but I think a lot of people could if they know the tools are available.

if I understand is very easy, use Viewport and will work to every screen size...

for instance:

set position to X = ViewportLeft("name of your layer") and you can add also +20,-20...

set position to Y = ViewportTop("name of your layer") and you can add also +20,-20...

codah ah right anchor, I've heard about that before but never really explored it. I wasn't really sure what it's good for.

Also Ribis that's cool. viewportleft.. didn't know about that one.. I'll give those a try and see how they work.

Lunatrap the thing is that i don't want letterbox because that creates black boxes. I'm trying to create something that uses scale inner (or outer depending) and insure that the scores and other hud information can be flush to the edges of whatever screen the player is on..

I knew it had to be simple, I just wasn't sure what the best approach or perhaps official way to do it that I was unaware of.

Thanks!

Caleb

I use scale outer and anchor on a portrait app and its fine. Check the tutorials, there's a couple of good ones on this.

codah thanks man! I have a buddy who did some work with anchors, but at the time it just seemed like extra work for little gain, but that was before I really wanted to remove any black boxes. Now I'm realizing it's usefulness.

Don't forget to use parallax 0,0 on the HUD layer. I also have a square sprite (useful at design time) that shows me the 'safe zone' where stuff will be displayed despite the aspect ratio.