Creating a Progress Bar in Unity
Objective: Create a progress bar.
We’ll begin with our base background image. This image has a red bar that will serve as our progress bar’s background.
Next we have the yellow progress bar image itself.
We’ll position this so it covers the background’s red bar.
In the progress bar’s Image component, we’ll the Image Type to Filled, the Fill Method to Horizontal, and the Fill Origin to Left. When the Fill Amount is 0, the bar will be empty. As we raise the fill amount, it will grow until reaching full size at 1.
And, just to be cool, we’ll add this cool overlay on top of everything. Since the “blood” is the same color as the red background, it won’t show-up until the yellow bar is behind it. A simple set-up for a really neat effect!
Tomorrow we’ll find out how to use the Fill Amount in code to make a loading screen!
