{"id":10014,"date":"2026-09-14T18:30:10","date_gmt":"2026-09-14T09:30:10","guid":{"rendered":"https:\/\/salgudiy.com\/js\/rpg-maker-mz-%ec%95%84%eb%9e%98%ec%97%90%ec%84%9c-%ec%9c%84%eb%a1%9c-%ec%b0%a8%ec%98%a4%eb%a5%b4%eb%8a%94-%ea%b2%8c%ec%9d%b4%ec%a7%80-%eb%a7%8c%eb%93%a4%ea%b8%b0\/"},"modified":"2026-09-14T19:40:37","modified_gmt":"2026-09-14T10:40:37","slug":"rpg-maker-mz-creating-a-gauge-that-fills-from-bottom-to-top","status":"publish","type":"js","link":"https:\/\/salgudiy.com\/en\/js\/rpg-maker-mz-creating-a-gauge-that-fills-from-bottom-to-top\/","title":{"rendered":"[RPG MAKER MZ] Creating a Gauge that Fills from Bottom to Top"},"content":{"rendered":"
\"gauge<\/span><\/div>

In this post, I\u2019ll show you how to create a gauge that fills up from bottom to top using a script in RPG Maker MZ.<\/p>\n<\/div>

1. Preparing the Gauge Image Files<\/h2><\/div>
\"gauge<\/span><\/div>

First, I prepared the gauge images.gauge_bg.png<\/mark> is the background image of the gauge, and gauge_fill.png<\/mark> is the image of the filling part that increases or decreases based on the value.<\/p>\n

I placed both images inside the \/img\/pictures<\/mark> folder. Now we're all set to load these images through a script and display them on the screen.<\/p>\n<\/div><\/div><\/div>

\"gauge_bg\"<\/span><\/div>
<\/i>Download Image : gauge_bg.png<\/span><\/a><\/div><\/div><\/div>
\"gauge_fill\"<\/span><\/div>
<\/i>Download Image : gauge_fill.png<\/span><\/a><\/div><\/div><\/div>
<\/div><\/div><\/div><\/div>

2. Displaying the Images with a Script<\/h2><\/div>

Now, let\u2019s try displaying the gauge images we prepared.
\nIn RPG Maker MZ, you can use the showPicture<\/mark> command to show images on the screen.<\/p>\n<\/div>