In the previous post, we explored how to create a gauge that fills upward from the bottom.
Today, let’s take it a step further and learn how to keep that gauge always visible on the game screen. This way, players can easily track their progress at a glance, no matter where they are in the game. Shall we pin the gauge to the screen and make it a part of the user interface?

The first thing we need to do is create a Common Event that displays the gauge image on the game screen. This event will be set up to remain visible even when the player moves between maps.

Here’s how you can set it up:

Insert the same code we used last time to display the gauge images.
Then, add one more line to turn on a switch right below:

Replace n with the number of the switch you want to use.

We turn on the switch because it will be used in Step 3, where we’ll create another common event that updates the gauge in real time.

• true means the switch is turned ON
• false false would turn it OFF

Next, let’s create a map event that automatically runs the common event we just made.

We’ll place a simple, invisible event on the map. Its job is very straightforward. Run the common event once, then quietly disable itself.

After running the common event, we’ll turn Self Switch A ON so this map event doesn’t run again.

Let’s write the code to turn on Self Switch A for this event.

• this._mapId : the map ID this event is on
• this.eventId() : the function that returns the ID of this event
• A :  Self Switch A
• true : Turns the switch ON (use false to turn it OFF)

1. Click New Event Page to create a second page for the event.
2. In Conditions, check on Self Switch and select ‘A’
3. Leave the Contents section completely empty.

When the self switch turns on, the event switches to this new page and stops functioning.

Now it’s time to create a new common event that makes the on-screen gauge bar update in real time.

This way, the event will run continuously in the background only when the switch is ON.

1. Insert the same code we used last time to make the gauge bar move according to the rate.
2. Then, there’s one important line we need to add.

At the end, make sure to add a wait command.
Without it, the script will run every frame, which can cause lag.

In this.wait(n), n represents the number of frames to wait.

For example:

• this.wait(60) → waits for 1 second
• this.wait(30) → waits for 0.5 seconds

The reason it doesn’t work when using let goal = $gameVariables.value(n1); is usually because the variable n1 hasn’t been set yet or its value is still 0. In the linerate = done / goal;, if goal is 0 or undefined, the result becomes NaN or Infinity, which breaks the rest of the calculation. That’s why you need to make sure the variable for goal is properly set before turning on the switch that runs this parallel common event. Otherwise, it won’t work correctly.