Skip to main content
‹ Back to Tutorials
Intermediate Unity

Unity 3d + Playmaker - Creating a Fuel Meter UI Slider

Aug 17, 2021
About this tutorial

In this 6th part of my Unity 3D + Playmaker Space X Mini Game Jam, I am creating a fillable fuel meter ui slider that will be based on the number of times the user pushes the clicker button during the 5 second button time to fuel the Space X rocket after the timer. Then will be wrapping up. ► Plea

Written Guide

Part six of the three-hour rocket mini game jam turns the player's frantic button-tapping into a visible fuel meter, then adds landing polish and a success screen before wrapping the jam. The core idea is the same click-count global from earlier parts, this time driving the vertical scale of a fill bar.

Build the meter out of stacked images

Assemble the gauge from UI images: a fill bar, a slightly larger surrounding frame, and a darker fill background behind the orange fill so empty space reads clearly. Set the fill bar's pivot X to zero so it grows from the bottom up rather than from the center. Sizing the frame about 10px wider on each side than the 200px-tall fill keeps a clean border.

Scale the fill from the click count

Add a fill bar FSM to the UI manager. Use an Int Operator to multiply the global spacex count by 4 — roughly mapping a realistic max of around 50 clicks onto the full 200px height — and store it in a fill amount variable, updated every frame and starting from zero. Set the image's Image Type to Filled so its fill value can be driven directly.

Convert and drive the scale

Because the fill amount is an int but a transform scale is a float, run Int To Float to produce a fill scale value, then use Set Property on the bar's RectTransform local scale Y, updating every frame with fill scale. Starting at zero, the bar climbs toward 200 as the player taps — the more clicks, the taller the meter.

Add falling and landing particle effects

For descent realism, duplicate the rocket smoke into a separate world-space landing smoke that plays once (no loop) over about 5 seconds and is simply switched on during the landing animation. Add a wind-particle system rotated to match the ship, using a box emission shape, fast start speed (random 10–20), very short lifetime (around 0.1–0.2), and color-over-lifetime fade, emitting around 30–50 per second. Toggle it on within the sideways flight animation and off as the rocket returns to its landing configuration.

Show a success screen

Create a new canvas with a centered bold TextMeshPro message and a panel behind it, bumping the sort order to 1 so it sits above the rest of the UI, and leave it disabled at start. In the Game Manager, after the ground-tween finishes, transition to a Success state that uses Activate Game Object to switch the screen on — a tidy payoff that closes out the self-imposed three-hour jam.

Unity tools by Bliz Studio
Built for our own games — now on the Asset Store

Multi Tag — unlimited hierarchical tags for any GameObject. Hierarchy Pro — style your whole hierarchy with rules. Made by a Unity dev, for Unity devs.

Explore our Unity assets →