Energy Bar Toolkit - 2D and 3D Progress Bars

Thanks a lot!! I felt so silly seeing solution was so simple and I was trying all the complicated things D)

 

Awsome update with the new gui and features.
Though I did found a bug when using the Radial mode for the new gui. The Grow Direction's offset and length doesn't work.
Edit: I found that it works if I tweak within the debug mode. Seems like the value is not connected outside of it.

Also I did witnessed another minor bug where the bar was lingering behind itself. The best way to replicate that was to go into play mode. Change settings like change the bar color, adding smooth effects, burn and blink, then copy the component value of the Filled Renderer ugui, then get out of play mode and 'paste component values' back in. When you move its value, you'll see the previous change is stuck behind it.

 

It's been a tough fight, but finally we're here!

Energy Bar Toolkit 3.0.0 with native Unity GUI (uGUI) support has been released!

Unity UI is a new feature that has been introduced in Unity 4.6. Starting with the first beta releases it's received very good reviews from game and tool developers. Actually uGUI made all existing GUI toolkits deprecated. Don't get me wrong, there are still many great tools out there but Unity UI from now on will receive more and more attention from tool developers like us. That's why we've decided to rewrite our bars to Unity UI!

What will you find in 3.0.0?

​

Energy Bar Toolkit 3.0.0 is everything that the previous version had plus a new version of renderers to make it work with the new Unity UI system. We did our best to bring 100% functionality from Mesh renderers into the new uGUI renderers, so the migration will not require giving up some features that Mesh renderers had. Many features such as screen anchoring and font rendering are now natively supported by Unity UI now, thus the inspector of Energy Bar Toolkit bars is simpler than ever before! We've also implemented some neat editor features to make it more consistent with the rest of Unity3D interface.

We've made some big rearrangements inside Energy Bar Toolkit directory and in the main menu. First we've marked all Mesh bars, OnGUI bars and textures for both of these as deprecated. In the main menu these are hidden under one additional menu category and for the directory structure you will find the old stuff inside _Deprecated directories. This needed to be done because if texture is chosen to be imported as Unity UI sprite, it cannot be used as Mesh renderer texture or OnGUI texture.

​

As an addition we've created a new filled bar effect that is available only for uGUI renderer. It's called a tilled effect and it allows you to configure this kind of bar animation:

​

The future
Lately Energy Bar Toolkit was suffering from the lack of new features. Now it's changed because with the new UI system our codebase was reduced by about 70%! Now it will be a lot easier to add new things than before! Stay tuned for the new features that are about to come!

Cheers!
Piotr

 

Thank you for reporting these bugs!
As with every big release there will be more to come. I will fix these as fast as I can

Cheers!
Piotr

 

great work genail!
this tool is one of the most updated asset on the store

awesome quality as always.

 

great update! thank you for your hard work

 

woooow awesome!!!
thanks for the update, time to test it

 

Can you make floating (as in floating above in-game 2d sprites) with this?

 

Hi!

Yes, you can! All you have to do is to use the Follow Object component!

If you're using Unity 4.6, Unity 5 and uGUI, please just attach the component:



If you're using mesh renderers please see this: http://energybartoolkit.madpixelmachine.com/doc/latest/other/following.html

Here's another demo, but it is a little outdated

http://energybartoolkit.madpixelmachine.com/demo/botrun.html

Cheers!
Piotr

 

Looks great, and this all works fine for a 2D game?

 

Yes it does!

If you will encounter any issues, you can always write here or to support@madpixelmachine.com

Cheers!
Piotr

 

I want this asset to support HUD Text.. Is this too much to ask?

 

Hi,
Can you explain how this should be working?

 

In the old version, I was able to get bars that didn't completely fill their outlines vertically, which I liked.



In the new uGUI version, this doesn't seem to be possible anymore. Even changing the size of the bar sprites doesn't work as they seem to be automatically scaled to fit the bar, except in the case of the "simple" examples, in which the bar is actually bigger than the outline. (???)

Would you consider adding the ability to scale the height of the bar relative to the foreground?

 

Hi Lork,
It seems like a bug. Thank you for reporting this. I will look into this matter and I will send you the update if you'd like. Just send me your invoice no. to support@madpixelmachine.com

Like keeping the bar at the center and making it stretched in Y? Maybe I will do this for both axis?

Cheers!
Piotr

 

That's OK. I assume you mean the "Simple" examples being broken, which doesn't really affect me. I was just confused by them at first.

That would be great, thanks!

 

I've got a question about particle effects in 2D. Is there any way to make them render above the bars? I have a power up bar in the center of my screen, and when particle effects rain down, they dip below the bar when falling. I'd definitely prefer they render on top of the bar.

It doesn't matter what sorting layer I assign things (custom or stock), it doesn't affect my particles relationship with the toolkit bars (and I've gone crazy with the values). With sprites, I could obviously resort to giving them a negative value (if this were an issue). But that option isn't available for a power up meter. I can only change sorting layer and that's just having zero effect. I'm running Unity 4.6x. The camera is set at the Unity 2D default.

Any suggestions? Thanks.

 

Hello Paul,

Are you using mesh or uGUI bars?
I think that this can be resolved by camera rendering order. Bars camera should be invoked before particles camera, but if you have other objects on your scene (I bet you do!) then you have to create a separate camera for particles and make it's Depth value the greatest of all cameras and Clear Flags set to "depth only". Of course you have to create a separate layer for your particles (set them to this layer), make this camera to render only this specified layer (Culling Mask) and all other cameras to ignore that layer (also Culling Mask)

http://docs.unity3d.com/Manual/class-Camera.html

If you will have any problems with that scenario, please let me know. I will prepare an example for you.

Cheers!
Piotr

 

Welp. I know what I'll be doing next. Thanks for that info.

 

Hello.

Filled bar jut out from frame,in Unity5.


I changed mesh type to "Full Rect",it goes well.
Just my note

 

Hi!
Please send me your invoice no. to support@madpixelmachine.com or as a private conversation, I will send you 3.0.1 rc which (most probably) has this bug fixed.

Cheers!
Piotr

 

Hey

please add support for webgl (update Mad2D.dll or release its source) to support Unity 5

 

Hello GCat,
Energy Bar Toolkit 3.0.0 already supports WebGL. Please see this cool WebGL demo

Although I am aware of issues with mesh renderers and WebGL. The demo above is build over uGUI renderers. There is Energy Bar Toolkot 3.0.1 pending review that is fixing this issue. I will send you the URL in a moment.

Edit: wrong demo url
Edit2: Mad2D sources are included in the package as the zip file. Cannot attach them as is because of possible conflict with Mad Level Manager sources.

Cheers!
Piotr

 

Hi, I'm working on a 2d pixel art platformer, and I want to use this plugin to show small energy bars above characters heads when they have been attacked. Can you give me some kind of guide as to how to do this? Thanks.

 

Hi!

The best would be if you will see the uGUI Follow Objects scene.

Steps are usually like this:
1) Create and/or select existing canvas
2) Add a bar
3) Use Tools -> Energy Bar Toolkit -> uGUI -> Add Components -> Follow Object option from the main menu
4) For newly attached object set the camera that is used to render your characters and set the follow target object.

The follow target may be an empty game scene object that is attached to your characters as a child. In this way you can easily manipulate where your bar should be precisely displayed.

If you will need any kind of example, please let me know I can prepare one on Tuesday.

Cheers!
Piotr

 

Hey! Good news! Energy Bar Toolkit 3.0.1 is here!​

It's the first bugfix release, but I've found the time to implement one new feature. Here's the list:

New Features

• uGUI Filled Renderer: Bar scale and offset properties

Bug Fixes

• uGUI: Fixed bar positioning on pixel-perfect canvases
• uGUI Filled:: Fixed not working radial offset and length properties
• uGUI: Fixed hierarchy position when creating new bar
• uGUI: Fixed local rotation when creating new bar
• OnGUI: Fixed memory leak
• Unity 5: Fixed serious graphics & performance issue

Have fun with EBT!
Piotr

 

Sweet!

Thanks for everything!

 

Hi friends,
I need little guidance for "elapsed time bar" , i.e:
1. let's say I got a powerup that is active for a certain time (5 sec)
2. activating the Energybar object
3. (here is my perplexity) in Update() I want to decrease the bar current value according to powerup time:
i.e:

Code (CSharp):

1. public void PowerUpTime(int time){
2. powerTime.GetComponent<EnergyBar>().valueCurrent = time;
3. }
4.  
5. void Update(){
6. // Now I want to decrease the current value every second !
7. }

Tried I lot of cases but not very good results
Hope will get some guidance from you, thanks in advance !

 

Hi Dorin,

Haven't compile it, but you should do something like that:

Code (CSharp):

1. private float timeLeft;
2.  
3. // To make this work the best would be if you will pass the time as seconds/float
4. public void PowerUpTime(float time) {
5.     // make sure that your bar have max calue to set to max time * 100 (e.g. 1000 for 10 seconds)
6.     powerTime.GetComponent<EnergyBar>().valueCurrent = (int) (time * 100);
7.  
8.     timeLeft = time;
9. }
10. void Update() {
11.     // decrease the time, but not below 0
12.     timeLeft = Mathf.Max(timeLeft - Time.deltaTime, 0);
13.  
14.     // update the bar
15.     var bar = powerTime.GetComponent<EnergyBar>();
16.     bar.valueCurrent = (int) (timeLeft * 100);
17. }

Cheers!
Piotr

 

Thanks for suggested idea Piotr, seems to work fine I will let you know about my progress !

Cheers,
Dorin

 

I see that spawning characters with uGUI bars attached is a issue for those who are not familiar with scripting. Since EBT should be easy to use without need of writing additional scripts, I will write an additional component that attached to character will spawn and attach a bar for him.

The configuration options will be:

• How to find the canvas (by tag, path or reference)
• How to find the camera (by tag, path or reference)
• Where bar should be attached to (current prefab or child transform)
• Where is bar prefab

When character prefab with this component will be instantiated, the bar will be instantiated afterwards. I will do a PlayMaker version as well.

Does anybody have any suggestions or feature requests on this matter?

Cheers!
Piotr

 

Of course! How do you think it should be done? Should I write my own implementation or try to integrate with some other script?

 

Sorry ... I deleted my quoted post that you quoted, deciding I should take a nap. But it is a reflex to think of pooling. Not sure if it really applies here or not. I suspect devs will want to pool their whole character with energy bar included - if they can do that in their game - and maybe not just the energy bar.

 

Hmm. I'm doing something wrong here. I read the links. I think I understand it all. I've experimented a ton with this info. But no matter what combination of things I do, the only thing I can accomplish is to make the particles completely disappear beneath the background (as opposed to being above the background... but rendering beneath the Power Up bar when they fall over it).

I'm probably making a horrible noob mistake, so maybe this info can help explain things:

Out of desperation, I decided I'd just using the culling masks to allow a single camera to filter out the Power Up bar. Just as a proof of concept that everything was correct settings wise. By tagging any object with the "particle" tag, I could make that object ignored by the camera. Any object, that is, except for the Power Up bar. Even when this thing doesn't have a single camera assigned to render it, it shows up anyways.

Out of curiosity, I checked/unchecked GUI Layer Legacy (on the camera). This didn't change anything.

Maybe this is really STUPID, but for this power-up bar, I'm using a cosmetically modified prefab that was included. It's the bar from the Progress Pack 2 folder. Bar 5 Prefab. (The one that looks like < < < < < ).

Was that a really dumb move on my part?

And completely off-topic from the above problem, is it normal for that bar to take 4 draw calls when the bar is completely filled. The more it fills, the more draw calls it requires. It maxes out at 4. I verified this by starting with the bar filled when the scene starts. The scene normally starts with 20 draw calls. If I just alter the values so it starts full, it's 24 draw calls.

Has anything I posted helped identify my issue? Really appreciate your efforts.

 

Hi Paul!

Changing tags have no effect on how cameras are rendering objects. Layers is what is important
I will send you an example, I just have to know what type of renderers you've decided to use:

http://energybartoolkit.madpixelmachine.com/doc/latest/components/renderer_types.html

Note: OnGUI renderers are no longer supported. These are horrible, deprecated and putting anything in front of them is very difficult. If you're using OnGUI renderers then this may be the case.

Cheers!
Piotr

 

Poor choice of words on my part. Everything I explained was done via the layers.

I honestly don't know what I choose. This is my first real project and this was one of the first things I did in it. I did a lot of stupid things in the beginning (most of which I've now corrected). Here's a screen shot of my inspector panel (and the project panel where I grabbed one of your prefabs):



I'm guessing it's the old method and this is the cause of my issues?

P.S. Yours is the only asset where I haven't deleted things I'm not using. My project isn't that messy. I've just never been confident my bars were in their final form (with good reason it now appears).

 

Yep, this is the deprecated OnGUI rendering method. What version of EBT are you using? This directory structure seems pretty old. Do you want the example for uGUI bars? If you're using Unity 4.6 or 5 then this is the best choice. You will need to upgrade your EBT to the newest version as well. I would recommend to remove Energy Bar Toolkit directory and then import the upgraded package. The reason behind that is how unitypackage files are working (may cause quite a mess).

Please try working with uGUI and layers again. Please remember to set your Canvas mode to Screen Space - Camera instead of Screen Space - Overlay because only in this way you will be able to set the rendering order

Cheers!
Piotr

 

I think it was EBT 2.1.6. It was the latest version around the time I started in early December. Was expecting things to go a lot faster than they ended up. Asset creation turned out to be my quicksand

I'll go through the PDF and all related tutorials. I may have questions on how to replicate the two different prefabs I'm using. That's kind of why I just quit where I did and am so ignorant on this subject. I liked the two I ended with and figured I wasn't going to do any better. Next

I'm assuming it's not worth importing any of the examples then? Aren't they all deprecated?

Thanks, again.

 

I've created new prefabs, but you have to do a fresh import so old prefabs will be placed in Deprecated directories to not confuse them anymore

There are new example scenes and I am planing to do a lot more in the future. This is my mistake that I was not providing enough examples for my clients. I will create example for particles over a bar too sooner or later, so if you will have any issues, please let me know so I will choose the "sooner" option

 

Hi, can you post a guide on how to reproduce the functionality of the old depreciated follow bars? With this new method I get bars that don't follow the anchor closely and stay onscreen even when the anchor isn't:



(For reference, it's anchored to the cube)

 

Hi Lork,
The second one is a bug. I will fix this today and send you the fixed version. I'm sorry for that. I am always forgetting about offscreen anchors.

Are you able to create a example scene (with a built-in cube and bar anchored to it) that will behave like this one and send me an unitypackage using assets -> export option? Steps to reproduce it also would be OK

Cheers!
Piotr

 

I managed to reproduce it with the standard FPS controller, so theoretically it should work with whatever camera system is most convenient.

To reproduce, follow the instructions you gave in reply to Biggerplay, then make the bar a bit smaller so it's easier to see. Move the camera around and you should be able to see the bar bob around a bit in response even with default settings. To get the extreme movement seen in my gif, set the UI scale mode in the Canvas scaler to "Scale with screen size". The larger the reference resolution, the more pronounced the effect.

 

I've fixed it! I will send you the fixed version by private conversation in a moment.
The fix will be available in 3.0.3.

 

Hi!

Here's a new video tutorial for Energy Bar Toolkit 3 and uGUI users!

​

Cheers!
Piotr

 

Very good and helpful video about the powerful Energy Bar Toolkit that comes with a lot of features...simple a must to have extension for Unity Keep up the good work Piotr !

Cheers,

 

HI, I have used energy bar toolkit and find it very useful! thanks for such a wonderful tool!

I am currently using sequence bar, I wonder is there a way to use animated texture as icon and when value is changed.

 

Hi Vamky,
Thank you for purchasing EBT!

Do you have any example of this kind of bar? Move or gif will be appropriate

Cheers!
Piotr

 

Hi Piotr!

Here is a link of the wind walker combat

In this video you can see the life bar of link is a sequence bar, and its current max value is animated.
I have seen more complicated bar in some Japan RPG but I forgot in which game. They use animated spirit in sequence bar like when life is reduced, a heart is broken into small pieces, and when life is increased, a heart appears and shine.

Cheers!
Vamky

 

Hello Vamky,
Thank you for the example!

Are you familiar with programming? I can modify the bar code, so you will have the access to all uGUI images, so you will have the ability to decide about the position, scale, color etc.

If yes, please give me some time, so I can test it out and I will provide you a working example

Cheers!
Piotr

 

Hi Piotr!

I am not very familiar with unity C# programming at the moment, I can do some very basic scripting, I might need another 2 or 3 months before I can comfortably work with unity scripting

But, what ever your wish to do, please take your time I will always look forward to it

Cheers!
Vamky