I’m trying to implement a count down timer displaying a progress bar. I have two sprites, a background which is two frames and an animation attached. This shows a full progress bar and the same image with a glow surrounding it. This just alternates between the two to draw attention to itself. The second sprite is an empty background and is child of the first GameObject. I need to display portions of this second object to simulate the progress bar going down, increasing the viewable portion as the timer is diminishing.
Two questions: Is there a more conventional way to do this in Unity? And, how do I display only the portion of a game object I want?
Typically there are many ways to do something, and any way that works is acceptable. I’m making a attempt to properly learn Unity and want to know ‘best practices’ in my attempt. Bad habits and convoluted methods come natural. The ability to implement the best solution for the situation at hand is my ultimate goal. I just trying to get off on the right foot and stay in step.
There is a much easier way of displaying progress bars, but it only works in UI (i.e. inside a Canvas), not with SpriteRenderer. That easier way is to use UI.Image. Just set the fillMethod to how you want it to fill (horizontal, vertical, or any of several radial styles). Then set the fillAmount to the percentage fill you want.
This is the “best practice” solution to this problem, and if your countdown is a global UI-ish thing anyway, it’s really trivial to do. If you want it to hover with your unit like a health bar in an RTS game, then it’s a little harder to set up; you have to make a little Canvas inside your object and fiddle with its properties to get it scaled right for the job. But still not too hard — let me know if you need help with that.
2 Likes
I haven’t gone into canvas objects yet. I’ve tried to focus on the editor and learning that while simultaneously learning GameObjects, Components, Physics, Animation, Sound, and an irritating C# scripting language.
Just to satisfy my curiosity, are you saying do all progress bar elements in a canvas or just the overlay portion I want to animate? Along this same question, do I put all my score, lives, bonus items and timer progress bar in this same canvas. It’s probably obvious if I was working on a scrolling game. If I had to pick a game it was like I’d have to say packman. I’m going back to the tutorial videos again. I’m currently stuck without a clue how to move forward without going back and covering it again until it sinks in. Your last answer, using UI.Image made it clear I’m not ready to do a game yet. I looked it up and wouldn’t even know how to setup and implement. I should have a least a vague understanding of UI elements so I can a least ask intelligent questions. All signs point to go back to school…
OK, cool, if it’s a scrolling PacMan-ish game, then I think your UI needs will be pretty simple. And don’t worry, Canvas and the other UI elements are simple and elegant. There are lots of good tutorials on this, but here’s the big picture:
- Add a Canvas object into your scene hierarchy. Double-click it to give it the focus in the scene editor.
- Inside that, add whatever UI elements you need — probably Text for score, lives, etc., and Image for health, timer, things like that. When you’re doing a menu screen, of course you’ll need Button for the menu options.
- In your code, get a reference to (say) a Text object (just remember to “using UnityEngine.UI;” at the top of your script). Then you can assign to yourTextObj.text whenever you want to change the text (update the score, etc.).
- If it’s a button, it invokes your code via a UnityEvent. You just click the little “+” button under the “on click” event in the Inspector, drag in some object in the scene that has a script on it, and then pick a public method of that script from the pop-up menu.
That’s pretty much it… there is a lot of more advanced stuff for making your UI elements properly move or stretch with the screen size, but you can ignore that initially by just picking a fixed display size. Then it really is just throwing things onto your Canvas, and assigning their properties in the inspector or in code as needed.
P.S. I thought of one thing that may stress you out: with the default property values, the Canvas scale is totally different from your likely sprite scale. So when you double-click the Canvas, the scene view will zoom way the heck out, so that your whole sprite world is barely visible. And then when you double-click some sprite object, the scene zooms back in so the canvas is no longer visible. This is alarming at first, but harmless. (The Canvas has its own renderer relative to the screen, and by default has nothing to do with your world camera, so it all ends up on the screen together anyway.)
1 Like