Thruster fuel UI

Today my goal is to set up a UI for my thrust and a limited fuel that recharges.

I need to set up UI images on the canvas, one for the empty bar, and another for full bar.

This is the red empty bar, that will sit behind the green full one.

The empty bar is just a blank image colored.

But the fill bar needs to have a source image, which I created as just a green block, in order to be able to select ‘filled’, ‘vertical’ from the ‘bottom’, so that it fills from bottom to top, and drains from top to bottom.

Then I set the image within the Player script, as well as a couple additional variables.

Now I’ll set a method for when the thruster is being used that will lower the fuel (and bar) while it’s being used.

Then if the fuel is empty, then it won’t allow the thruster to be used, but will keep the fuel at 0. When the key is released, it will slowly recharge.

Here it is in action!