Tutorial: Script Course #4 — Let's Create a UI

ACTION GAME MAKER チュートリアル
,
3

STEP 2: Create an HP Bar

  1. Open the gamescene tab and select UI.
    image
    image371×121 7.31 KB
  2. Add a new node: ImageGauge.
    Any UI elements you want always visible and not affected by camera scrolling should be placed under UI.
    image
    image902×351 12.8 KB
  3. Configure the ImageGauge properties as follows:
    Set the Current Value to sampleplayer.hp and the Max Value to sampleplayer.max_hp.
    The Object_Sampleplayer.tscn is located in the sampleobject folder.
    image
    image443×276 21.7 KB
  4. Next, configure the properties of TextureProgressBar within the ImageGauge.
    Enable Nine Patch Stretch, and set Left Limit and Right Limit to 10px.
    This allows resizing without distorting the bar’s proportions.
    image
    image431×245 13.8 KB
  5. Set the textures for the ImageGauge.
    Use images from templates > objects > ui > interface > variation_02_Ornate:
  1. Adjust the size of the ImageGauge.
    The blue-framed area is the UI display region. Scale the gauge to your liking.
    image
    image1104×634 50.2 KB
  2. Test the game.
    If set correctly, the HP will be displayed as a white bar and will decrease when hit by a zombie.
  3. Now let’s add a frame.
    Add a new node under ImageGauge: NinePatchRect.
    This node creates a rectangle that stretches while maintaining proportions, using Nine Patch settings.
    image
    image750×238 8.94 KB
  4. Set the NinePatchRect texture to I_002_hp_horizontal_01.png, and click the Edit Region button.
    image
    image451×270 10.3 KB
  5. The Nine Patch editor will open.
    Adjust the black and white bar (not the solid white lines) as shown in the image.
    image
    image962×572 14.7 KB
  6. Resize and position it over the HP bar.
    image
    image819×264 29.6 KB
  7. The HP bar is complete!

Notes

Bar Types
By changing the Fill Mode of the ImageGauge, you can create various types of bars—including vertical and circular gauges.
You can also change the bar’s color using the Tint property.

About Nine Patch
Nine Patch is a technique that divides an image into 9 sections and stretches them proportionally to avoid distortion.
This method is also useful for things like message windows.

:blue_book: Next course: Part 5

2 Likes