How to make progress bar adapt to various aspect ratios in Unity3d

Question

Can anyone help me with this problem: I want to make a time progress bar in my game. I have two textures: progressBarFrame and progressBar. Currently I'm doing the following:

void OnGui() {
    GUI.DrawTexture ( Rect(x,y,width,height), progressBar ); 
}

It works, but it doesn't adapt to different screen sizes.

I also tried this: Create GUITexture in the hierarchy and add a texture to it, after adjusting its size and location as I need, progress bar stretches/squishes with different aspect ratios and keeps its position relative to other GameObjects (that's what I want). But I don't know how to animate it properly because the figure of the textures is not a simple line.

Answer 1

If you don't want your progress bar to be distorted when scaling, you'd need something like a 9-slice sprite (also sometimes referred to as 9-patch). Here's an article that explains the technique (the examples in the article are for Cocos2D, but it should be clear how it works).

When you create a GUITexture in Unity, you have 4 properties in the inspector called Left Border, Right Border, Top Border and Bottom Border. This is effectively a 9-slice implementation.. so if your progress-bar image has a border of 3 pixels that should remain intact, set all 4 border-properties to 3.

Then you can just scale the GUITexture to your desired size and the progress-bar should adapt nicely.

Unity 4.6 will also provide this in their new GUI system, so do some of the popular GUI Frameworks/Toolkits (2dToolkit, NGUI, etc.).

Answer 2

You don't need a 9-slice unless you're doing some much more extreme scaling than what's implied here (it's used when you need the borders to stay a constant size while the interior changes [ie. a window]).

The simplest solution here is to modify the dimensions based on the screen resolution:

void OnGui() {
    var aspectRatio = Screen.width/Screen.height //This can be gotten from the camera too
    var scaledWidth = height * aspectRatio;
    GUI.DrawTexture ( Rect(x,y,scaledWidth ,height), progressBar ); 
}