Godot Tutorial: How to make a level progress bar on top

Often side scrolling platformers have this kind of progress bar which indicates how much the player has progressed through the level!

In this article I’ll share how can you make one for your game, so hang on!

Step 1: Get the nodes

In your scene tree, you’ll add below nodes
CanvasLayer > renamed to HUD
Position2D > renamed to StartPosition
Position2D > renamed to EndPosition

Step 2: Place StartPosition and EndPosition in your Level
As per your need, place the StartPosition at start of your level, and EndPosition where your level ends.

Step 3: The progress Node
In a fresh new scene, add a TextureProgess node, and a Sprite node.

Step 4: Choose textures
select the Texture progress and load appropriate textures

also for icon

Step 5: Tweak position and scale for TextureProgress and icon node
Tip: take help of Layout

Change ‘y’ position of TextureProgress to some value that looks suitable
for me 20 works fine

for y position of icon node, it should be roughly half of whate we used earlier
in my case you can see I’ve done 10

It might look weird, but fear not. you can change to whatever looks best.

Tip: Change scale of icon node

Step 6: Time for some Coding!!!!!!!!!!!
attach a script to TextureProgress.
Open the script panel

In the _process function, add this magic line…
What this will do ?
this line, for every frame,
check the value of TextureProgress which is between 1 to 10
the rect_size.x is total horizontal size of TextureProgress which needs to get converted to a relative value i.e. a percentage
Hence, this line will make sure that icon is placed where the value is.

Step 7: Intancing in the World/Level scene
In the World scene, at this as a child to HUD node we added earlier.

Step 8: Coding in the World script.
Add below variables and code in _ready function.

This will record the max_prog that is the distance between start and end of the level that we placed earlier.
start_pos is a variable we use to save typing.

Add below lines in _process function,

here, $Robo will be your player.
this will track where your player is and assign to value of TextureProgress.

Voila! you are done. Hit F5 to see how this works.
It might not work for first time as expected, but will with some tweaks.

For any queries:
Visit my Discord !