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

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.

• WHat's the problem with animating the progressbar? – bummzack Aug 10 '14 at 7:10
• I'm new at Unity, and I know only two ways how to animate GUITexture object: changing x,y and scale values in Transform component but doing this doesn't give the desired result – JJ91 Aug 10 '14 at 7:24
• If U know any way how to animate GUITexture to make from it progress bar please tell me – JJ91 Aug 10 '14 at 7:25
• Wait for Unity 4.6, there's a new GUI system coming. It's likely less than a month away. – MichaelHouse Aug 10 '14 at 14:09
• Unfortunately can't wait for a month, I have only a week to finish my project) Anyway I hope it'll be much easier with GUI editor in new version. – JJ91 Aug 11 '14 at 17:48

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.).

• Thanx a lot for helping, but it didn't work. Maybe I do it wrong: I set Left, Right, Bottom, Top Borders in the inspector to the same value, but anyway when resizing it the progress bar becomes blurred. – JJ91 Aug 11 '14 at 17:42
• I found a method GetScreenRectangle(), it returns the rectangle where the guiTexture is located. I tried this: I have GUITexture objected named PrBarGUItex in the ierarchy. Rect r = PrBarGUItex.GetScreenRectangle(); // now I can pass it to GUI.DrawTexture() PrBarGUItex.renderer.enabled = false; // making it invisible to draw // a texture on its place void OnGui(){ GUI.DrawTexture( r, barTexture ); } BUT! GetScreenRectangle doesn't work correctly(the r.x and r.y don't match with where PrBarGUItex is located) or I just don't get how it works. – JJ91 Aug 11 '14 at 18:03
• @JJ91 Well, you should probably include a screenshot in your question to show what the problem is. You could also use GUI.DrawTexture and calculate your texture size relative to screen size. Eg. if you wanted your progress-bar to be 75% of the screen width, you would set the width to Screen.width * 0.75f. – bummzack Aug 11 '14 at 20:39
• Yes I tried to give coordinates in percents, for now it's the best solution I have, but percentage can change with screen size. – JJ91 Aug 12 '14 at 17:59
• I added screenshot to the question. – JJ91 Aug 12 '14 at 18:00

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 );
}

• yes this seems the best way to do it, so I decided to use it. But I'm curious if there any other solutions, if u know any could u tell please. Thank you. – JJ91 Aug 14 '14 at 17:15
• unfortunately can't add comment on your answer to my "Problem with texture's quality in Unity" question so comment it here)), thank u so very much, the answer is very useful. Image become clear when I set Texture Type to GUI. Also I've noticed if I set Filter mode to Trilinear textures looks better, but more recourses are engaged. About tutorials, maybe u have some useful links. Thanx again. – JJ91 Aug 14 '14 at 18:26