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

[GGG-Administrator]

In this course, you will learn the basics of scripting in Action Game Maker.
In this fourth installment, we’ll create an HP bar UI.

---

Prerequisites

We’ll continue using the project from the previous tutorials (#1 to #3).
Open your project and get ready.

[GGG-Administrator]

STEP 1: Adjust the Player

1. Open Object_Sampleplayer.
2. Open BaseSettings, set both HP and Max HP to 20, and set Blink Duration to 0.1 seconds. This makes it easier to notice invincibility by adding a blinking effect.
   
   
3. Next, add a new node: TakenDamageSettings.
   
   
4. While TakenDamageSettings allows many configurations, we’ll use it this time just to add a damage voice.
   Create a new damage setting, enable Play Sound in Other Settings, and set the sound to male_1_1_A.
   
   
5. Test the game. The player should now blink and play a voice when taking damage. However, the player and zombies are pushing each other, so let’s fix that.
6. Select the Player node and change its Collision > Collision Layer from 1 to 2.
   Layers define what physics layer the object belongs to, while Masks define which layers it collides with.
   Zombies use Layer 2 / Mask 1, so by putting the player on Layer 2, they will no longer collide with each other.
   7.(CollisionLayer/CollisionMask is explained in more detail in a separate manual.)*
   
   
7. You now have a character with 20 HP, who becomes invincible for 1 second after taking 1 point of damage from an enemy.

---

Notes

What you can do with TakenDamageSettings
You can configure things like damage multipliers based on attack attributes set in Attack Settings. This is useful for setting up weaknesses and resistances.
You can also configure hit stop, such as making the game temporarily slow down when receiving a heavy blow.

[GGG-Administrator]

STEP 2: Create an HP Bar

1. Open the gamescene tab and select UI > UIObjectRoot.
2. Add a new node: ImageGauge.
   Any UI elements you want always visible and not affected by camera scrolling should be placed under UIObjectRoot.
   
   
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.
   
   
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.
   
   
5. Set the textures for the ImageGauge.
   Use images from templates > objects > ui > interface > variation_02_Ornate:

• Under: I_002_hp_horizontal_02.png
• Progress: I_002_hp_horizontal_03.png
  
  

6. Adjust the size of the ImageGauge.
   The blue-framed area is the UI display region. Scale the gauge to your liking.
   
   
7. Test the game.
   If set correctly, the HP will be displayed as a white bar and will decrease when hit by a zombie.
8. 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.
   
   
9. Set the NinePatchRect texture to I_002_hp_horizontal_01.png, and click the Edit Region button.
   
   
10. The Nine Patch editor will open.
    Adjust the black and white bar (not the solid white lines) as shown in the image.
    
    
11. Resize and position it over the HP bar.
    
    
12. 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.

Next course: Part 5

Tutorial: Script Course #5 - Let’s Create Scene Transitions

In this course, you will learn the basics of scripting in ACTION GAME MAKER. In Part 5, we will create scene transitions. Preparation Before Starting the Course You will continue using the same pro…