Progress Bar In Unity

In this post I’ll explain how to make a radial progress bar using Unity and C#. After going through it you should be able to create a basic radial progress bar using Unity assets, as well as adding simple functionality.

This is a continuation of a 2D Progress Bar Tutorial found here.

Unity 3D Radial/ Circular Progress Bar Tutorial January 15, 2020 dgraal 0 Comments. In this tutorial I will be showing how to make a circular/radial progress bar in Unity 3D. For this we will need a circular image with a transparent background. This asset is a highly configurable progress bar prefab. You can customize: - the title of the bar, its color, its font, its size - the color of the bar but also of the bottom. Unity WebGL Custom Progress Bar When making a browser-based game, you’re asking players to be generous with their time and wait patiently while your content downloads. This means how you indicate download progress in your preloader is super important. A Unity webGL custom progress bar is essential. For a progress bar You can use the Unity scrollbar object to make what you're looking for. There's a good tutorial on it here. Essentially, you add a scrollbar object to your canvas, and then change the slider value from code. For scrolling textures If you want a scrolling texture on your progress bar, then you can animate an image placed on. Unity is the ultimate game development platform. Use Unity to build high-quality 3D and 2D games, deploy them across mobile, desktop, VR/AR, consoles or the Web, and connect with loyal and enthusiastic players and customers.

First we’ll make a radial fill that will simply be for displaying a value between a defined minimum and maximum, both as a graphical radial bar and numerical text display. Then we’ll move into providing progress bar functionality to the radial fill where we can call methods once it’s been filled.

At the end of the tutorial we’ll wind up with a radial fill that looks like this:

I’m currently teaching myself Unity and C# while making a small incremental/idle game. While I may not be currently following the best practices for coding or design, I am open to constructive feedback regarding either. If you have any recommendations or requests please feel free to share them.

Files for this tutorial are hosted on my Github Page Here.

Anatomy of a Radial Fill

The Radial Fill will be made up of a handful of objects. As with any Unity object, everything exists in a GameObject. Within that object will be the graphics, text, and logic that make up the fill bar. It can be broken down as follows:

Creating a Basic Radial Fill

First we’ll create a basic radial fill by layering several images on top of each other, then adding a text display to show the fill amount numerically. Then we’ll create a simple script to handle the logic. We’ll start with a new, blank project using the 2D template.

Circle Upon Circle Upon Circle

We’ll import a custom circle image which will be used by all image components. We’ll be using an off-white circle called “SimpleCircle.png”:

We’ll start with a new, blank project using the 2D template. Unity UI elements exist on a Canvas, so we’ll have to add one to our scene. Right click the SampleScene menu and add a UI > Canvas. Next we’ll create the game object that will be our radial fill by right clicking the canvas, adding a Create Empty, and call it RadialFill. Adjust the Width and Height to 100.

Now we’ll start to create the components that make up the radial fill. First, add a UI > Image to the game object and name it Background. Now make the following adjustments:

• Source Image = SimpleCircle
• Color = Grey
• Anchor’s Min X/Y = 0, Max X/Y = 1

Now we’ll duplicate the Background and name it Fill Image. We duplicate it to simply keep the applied source image and anchors. Now we’ll make these changes:

• Color = Green
• Image Type = Filled
• Fill Method = Radial 360

We can mess around with Fill Amount to achieve the radial loading effect:

Duplicate the background again, and rename it Center. This will go over our fill image, giving the illusion of a radial fill bar. We’ll make a couple of adjustments to shrink it down:

• Color = White
• Rect Transform’s Left/Right/Top/Bottom = 12

Finally we’ll create the text display to show off the current fill as a percentage. We’ll make the text object a child of the center image. Right click Center and add a UI > Text, and name it Display Text. Adjustments:

• Anchor’s Min X/Y = 0, Max X/Y = 1
• Rect Transform’s Left/Right = 10, Top/Bottom = 15
• Text = “0%”
• Font Style = Bold
• Alignment = Middle & Center

With all the above we wind up with a pretty basic looking circular display. However, the text display doesn’t update with the current value yet. That’ll be handled in the script we’ll create shortly.

Radial Fill Scripting

Now we’ll write a script that will handle getting and setting the fill’s current value, handling the fill image’s total fill, and displaying the current value numerically. The script will be similar to the one created in the fill bar tutorial here. The main difference is how min/max and CurrentValue are handled. Instead of relying on slider’s minValue and maxValue, we’ll handle our own. We’ll also calculate the running fill percentage and use that as the fill image’s amount and text display.

To add a new script, right click the Assets folder > Create > C# Script. We’ll call this one Radiall.cs. Be sure to attach the script to the RadialFill object! Now copy and paste this code into the script. For the explanation of what’s going on be sure to check the “Fill Bar Scripting” section in the fill bar tutorial here.

Now we have a functional radial fill that is handled through CurrentValue:

Progress Functionality

Now we’ll move onto making the radial progress bar. It’ll be built on top of our newly minted radial fill, so all we’ll need to do is write a simple script which will be basically the same as the script created in the progress bar tutorial here. That tutorial covers the reasoning behind the code.

Right click the Assets folder > Create > C# Script and call it RadialProgress.cs. We’ll reuse our previously created fill bar by removing the existing RadialFill script, attaching our new RadialProgress script, and hooking up the fill image and display text just like we did before.

Copy and paste this code into RadialProgress.cs. For more explanation refer to the tutorial linked previously.

And that’s everything! The progress bar will fill up to its max fill value, which is 1, then fire off our method and reset itself, which we can see by the “Progress Complete” entry within the console.

A couple of things to note:

• When completing progress the Unity event is only fired off once, no matter how full it gets. To have it fire off each time it’s filled, you could calculate the total number of fills, then invoke the event. Something similar to int totalFills = (int)(value / slider.maxValue);
• Instead of directly accessing CurrentValue, you may instead write methods for handling adding and removing progress to ensure that we’re not adding negative progress, or attempting to set the current progress value too low.

Conclusion

We’ve created a basic radial progress fill bar in Unity. While limited, it should create a good foundation to build off of.

If you have any comments or questions regarding anything covered by this tutorial, or have an idea for future posts, feel free the leave them below.

As stated before, all files generated during this tutorial can be found on my Github Page Here.

This shader allows you to create shiny looking radial progress bars that can be used to display information like character HP, loading status, matchmaking rating progress, car speed, etc. The possibilities are endless.

The shader can be edited through Amplify Shader Editor and contributions to the project are always welcome!

Project developed using Unity 2017.4.8f1. Please use this version if you are planning on contributing. You can work on your own branch and send a pull request with your changes.

You can also just download a unitypackage from the releases tab and easily import everything to your project. This will not download the screenshots folder.

Disclaimer: The scripts controlling the behavior of the examples provided are not optimized in any way and should only be taken as quick & dirty examples.

1. Usage & parameters
   • 2.1 General settings
   • 2.2 Background settings
   • 2.3 Bar settings

To get this shader up and running you only need to attach it to a material, and drop that material onto a quad. That’s it, you now have a basic HP Bar!

Best is to check the examples provided to get an idea on how to tweak the different parameters, and to take inspiration from them.

This shader comes in two variants; “standard” (the one that will be described here) and “simple”. The second one is a simplified version of the first one, which does away with many of the settings.

General settings

These are settings that affect the whole bar, and they are pretty much self-explanatory. By increasing and decreasing Fill percentage, we control the amount of that bar that is filled. This is the main setting for this shader.

Rotation and Arc range (0-360) allows you to control the starting and ending angles.

Background settings

“Background” will always be visible regardless of the fill percentage (unless you turn the opacity all the way down to 0, of course).

Progress Bar Unity Asset

Here, we can set both the color for the “fill” area of the background, as well as for the border. Additionally, border radial (along the circle) and tangential widths can be set, as well as its opacity.

Bar settings

This is the meat of the shader, and it is divided into two sections: Border and Fill. Border settings are very similar to the ones already described for the background, with the caveat that it is possible to specify a Color (min) and a Color (max), so that the bar will lerp between them as is fills up.

Fill settings, on the other hand, are comprised of three more sections: Main texture, Secondary texture and Noise texture.

If you don’t want to use any texture, just leave the slot empty.

They all provide similar parameters to play with, like opacity and contrast, tiling and offset. You can make these textures scroll or rotate (which is quite handy for a radial bar) via a dropdown button. Rotation/scrolling speed is customizable.

Again, bar color will lerp between min and max colors. If you don’t want this to happen, simply give them both the same value.

It is important to note that the noise texture will be MULTIPLIED with the secondary texture, and the result will be ADDED to the main texture. This gives you some room to get creative.

This piece of software is offered for free because I believe the gamedev community can benefit from it, and it should not be behind a paywall. I learned from the community, and now I am giving back.

If you would like to support me, donations are very much appreciated, since they help me create more software that I can offer for free.

Unity Progress Bar Example

Thank you very much 😃

MIT License

Copyright © 2018 Guillermo Angel

Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the “Software”), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software.

Progress Bar In Unity Meaning

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESOFTWARE.