1
\$\begingroup\$

enter image description hereCan 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.

\$\endgroup\$
  • \$\begingroup\$ WHat's the problem with animating the progressbar? \$\endgroup\$ – bummzack Aug 10 '14 at 7:10
  • \$\begingroup\$ 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 \$\endgroup\$ – JJ91 Aug 10 '14 at 7:24
  • \$\begingroup\$ If U know any way how to animate GUITexture to make from it progress bar please tell me \$\endgroup\$ – JJ91 Aug 10 '14 at 7:25
  • \$\begingroup\$ Wait for Unity 4.6, there's a new GUI system coming. It's likely less than a month away. \$\endgroup\$ – MichaelHouse Aug 10 '14 at 14:09
  • \$\begingroup\$ 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. \$\endgroup\$ – JJ91 Aug 11 '14 at 17:48
2
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ 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. \$\endgroup\$ – JJ91 Aug 11 '14 at 17:42
  • \$\begingroup\$ 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. \$\endgroup\$ – JJ91 Aug 11 '14 at 18:03
  • \$\begingroup\$ @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. \$\endgroup\$ – bummzack Aug 11 '14 at 20:39
  • \$\begingroup\$ Yes I tried to give coordinates in percents, for now it's the best solution I have, but percentage can change with screen size. \$\endgroup\$ – JJ91 Aug 12 '14 at 17:59
  • \$\begingroup\$ I added screenshot to the question. \$\endgroup\$ – JJ91 Aug 12 '14 at 18:00
0
\$\begingroup\$

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 ); 
}
\$\endgroup\$
  • \$\begingroup\$ 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. \$\endgroup\$ – JJ91 Aug 14 '14 at 17:15
  • \$\begingroup\$ 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. \$\endgroup\$ – JJ91 Aug 14 '14 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.