Scaling HUD and Camera

Unity Engine
1

Hello everyone!

I’m having an issue with my game, and I really hope you can help me.

I wanted to display an HUD, similar to the strategic games’ one (like in DotA 2, Warcraft III, Starcraft II or Age of Empires). I didn’t really know how to do it, so I managed to create a Texture Object and placed it in front of the scene. The image attached is the HUD itself, with some transparent “holes” in which I placed the cameras. I don’t know if this description explains well what I’m trying to say, so I made this screenshot:

1434094--76456--$CUAyOcR.jpg
1434094--76456--$CUAyOcR.jpg1440×900 245 KB

The HUD is just a png image with a greater z-index. The image has three “holes”: one for the gameboard, one for the dices, and one for the spells you can see on the right. The holes are filled with the cameras, so we can see the objects beyond the transparency. Everything looks quite nice.

But if I change aspect ratio (which was “Free Aspect”), my layout gets completely screwed up.

1434094--76457--$4r9K3mK.jpg
1434094--76457--$4r9K3mK.jpg1440×900 215 KB

Notice that the HUD borders are not fully displayed; the spells on the right are misplaced, and so are the dices.

I managed to get the free aspect resolution, it is 1440x720, a perfect 2:1. But, even if I change my resolution to 800x400, things are not getting better.

1434094--76458--$TCUmJLW.jpg
1434094--76458--$TCUmJLW.jpg1440×900 255 KB

I’ve read something about pillarboxing and letterboxing, but I’m not sure that those techniques will help me with this issue. Is there something I can do to resize my objects and my cameras dynamically to fit the screen like in the first screenshot?

Of course, if you have any other solutions to achieve the same result, I’ll be glad to learn!

Thank you guys.

2

The second half of Schell Games’ Unity presentation (http://video.unity3d.com/video/3708530/unite-11-scaleable-game) discusses resolution-independent GUI scaling. They used Unity GUI, but the principles are the same even if you’re using something else.

This is a design decision as much as an implementation issue: On one hand, you could keep the HUD elements a constant size and shrink the gameplay view to whatever is left. This gives you perfect design-time control over the look of the HUD, but you could end up with a small or oddly-shaped gameplay view.

On the other hand, you could keep everything proportionally-positioned and scaled (e.g., game view always takes 75% of the width and height) and scale every HUD element to fit inside its containing element.