Tutorial: "Getting Started with ACTION GAME MAKER" — Chapter 4

[Moonling]

Chapter 4: Making It a Real “Game”

In the previous chapter, we laid the foundation of the gameplay,
implementing the ability for the player to fire bullets and defeat enemies.

In this chapter, we’ll take it a step further,
and refine this project into a fully playable game.

---

What’s Missing to Make It a “Game”?

In the current version, the player can move and enemies exist,
but some key elements are still missing.

• The level is too small, so we need to expand the stage (map).

• Although the player has a damage reaction, they cannot be truly defeated.
  Also, the player cannot visually see their remaining HP, so we need to make it visible.

• Finally, the game lacks a clear objective.
  Ideally, we could add a boss battle,
  but in this tutorial, we’ll simplify the goal:
  Defeat 5 enemies to complete the game.

---

Completed Example

「0からはじめるACTION GAME MAKER」第四章完成イメージ

[Moonling]

Extend Stage1 (Level Expansion)

First, let’s expand the level by adding more tiles.
Since the level will become larger, the player will eventually move outside the current camera view, so we also need to ensure that the camera follows the player.

---

Adding More Tiles

The level terrain is created using the Base (TileMapLayer) node, so we’ll use this node to expand the stage.

1. Switch to the stage1 scene tab.

2. In the Scene (Scene) window, select the Base (TileMapLayer) node.

   

3. In the bottom window, open the TileMap tab and select a tile.

   

4. Place tiles freely in the empty area on the right. To maintain good gameplay balance, keep the following principles in mind:

   
   • Platforms or walls in the air should not exceed 4 tiles in height.
   • Gaps or traps should be no wider than 4 tiles, so players can easily jump over them.

Once you’ve arranged enough terrain, you’re ready to proceed to the next step.

[Moonling]

Make the Camera Follow the Player

In ACTION GAME MAKER, camera following is controlled through a system called Target ID.
Do you remember the CameraTargetSettings node you added when creating the player? This node has a property called Target ID.

The ZoomCamera2D camera node also has a Target ID property.
When the camera and a game object have the same Target ID, the camera will automatically follow that object.

We will now set the same Target ID for both the ZoomCamera2D and the player’s CameraTargetSettings.

---

Set Target ID for InitialCamera (ZoomCamera2D)

1. Switch to the Stage1 scene tab and select the InitialCamera (ZoomCamera2D) node.

   

2. In the Inspector, expand the Target ID (Array…) property.

   

3. Click the + Add Element button.

   

4. A text box will appear. Delete the default \u003cnull\u003e and enter player.

   

---

Add Target ID to the Player’s CameraTargetSettings Node

1. Switch to the player scene tab.

2. Select the CameraTargetSettings node.

3. In the Inspector, enter player in the Target ID field.

   

---

Test the Extended Level

Now, let’s run the game to test whether the extended level works correctly.
Try moving the player all the way to the far right of the level.

If everything is set up correctly, the camera should smoothly follow the player’s movement.

---

Checklist

• Camera is not following the player:
  Double-check that both the InitialCamera in Stage1 and the player’s CameraTargetSettings have the same Target ID.

• Cannot reach the far right of the level:
  Check and adjust the terrain layout in the Base (TileMapLayer), such as the width of pits or the height of walls, which might be too high.

[Moonling]

Add a “Death” Effect for Players: Creating Particle Effects

Similar to enemies, when the player’s HP reaches zero, they should also be defeated.
Since the current character sprite sheet does not contain suitable “death animation” frames, we will use particle effects to visually represent the player’s defeat.

---

What Are Particles?

Particles are essentially numerous small, scattered images that create visual effects through their movement and transformation.
Think of them as confetti or fireworks—each individual element is small, but together they form a striking visual display.

In Godot Engine, particle effects are typically created using GPUParticles2D or CPUParticles2D nodes.
In ACTION GAME MAKER, particle effects are managed via the ParticleObject node.

The ParticleObject includes over 20 built-in particle templates, which can be used directly—very convenient.

---

Creating a Particle Object

The process of creating a particle object is identical to creating a regular Game Object.

1. Create a new scene tab.

2. When creating the root node, select GameObject.

   

3. Set the Object Name to DeathParticle,
   choose particles for Template, then click Create.

   

4. In the Scene window, select the newly created DeathParticle node.

5. In the Inspector, change Particle Template from None to Fireworks.

   

6. A GPUParticles2D node will be automatically added.

7. In the GPUParticles2D Inspector, enable the Emitting property to start emitting particles.

   

8. You should now see a firework-like particle effect playing in the scene view.

   Finally, right-click the [Unsaved](*) tab and save the scene as deathparticle.tscn.

   

[Moonling]

Add a “Death” State to the Player’s Visual Script

Thoughts on the “Death” State

When the player’s HP drops to 0, the character should stop moving and play the Death Particle Effect we just created.

Structurally, connecting this state from AnyState makes the most sense. However, there’s a problem:

As shown in the image below, currently, whenever the player collides with an enemy attack, it transitions from AnyState to the Take Damage state — regardless of the current state.

When HP = 0, the player is already “dead.” Without additional handling, it’s possible to trigger the Take Damage state again while in the Death state.

To solve this, we need to add a condition to the Take Damage transition:

“HP ≠ 0 (HP is not Zero)”

This ensures that once the player is dead, they won’t enter the damage state again.

---

Creating the “Death” State

Since we don’t have a dedicated death animation frame, we’ll reuse the DamageTaken animation. To make death more visually distinct, we’ll overlay a filter effect to gradually fade the character out.

1. Open the Player scene.

2. Switch the editor view from 2D to Script.

   

3. Right-click in the empty area near the Take Damage state and select Add State.

4. Rename the newly created State001 to Death.

5. In Animation, select DamageTaken.

   

6. Expand Action Settings.

7. Check Ignore Movement Input.

   

8. Click + Add Executable Action.

9. Select DisplayParticle.

10. In Particle Object Path, click the icon and select the previously created DeathParticle.tscn.

    

11. Click Add.

    

12. Click + Add Executable Action again.

13. Select ApplyObjectFilter.

14. Set Filter Type to Transparent, and Finish Time to 3.0 seconds.

    • This will make the character gradually fade out and disappear over 3 seconds.
    

15. Click Add.

16. If your action list matches the image below, the Death state is complete.

    

---

Connecting AnyState to the “Death” State

1. Right-click AnyState → Add Link → connect to Death.

   

2. Click + Add Other Condition.

3. Select HPIsZero and click Add.

   

---

Adding a Restriction Condition to the “Take Damage” Transition

The final step is to ensure that when HP is already 0, the Take Damage state won’t be triggered again.

We can achieve this by using a reversed condition (Is Reversed).

1. Select the AnyState → Take Damage link.

2. Click + Add Condition.

   

3. Select HPIsZero.

4. Check Is Reversed to invert the condition to “HP ≠ 0”.

   

5. If you see the ≠ icon highlighted in the condition list, the setup is correct.

   

---

Testing the “Death” State

Now, let’s test it. Since the player’s initial HP is set to 1, being hit once by an enemy will trigger the death state.

If everything works correctly:

• A death particle effect will appear upon being hit.
• The player character will gradually fade out.
• After the game ends, press F5 to restart.

---

Troubleshooting

• Particles don’t appear
  → Check if DeathParticle.tscn is correct and verify the DisplayParticle action settings.

• Character doesn’t fade out
  → Confirm the parameters of ApplyObjectFilter are set correctly.

• Still triggers damage state after death
  → Recheck the HPIsZero (reversed) condition in the AnyState → Take Damage link.

[Moonling]

Creating an HP Bar

It’s a bit harsh that the player dies in one hit, so let’s first increase the player’s HP.
However, once the player has more HP, we need a way to visually display the remaining health.
To achieve this, we’ll create an HP Bar.

In ACTION GAME MAKER, you can use either the SimpleGauge or ImageGauge node to display various value bars.
In this tutorial, we’ll use SimpleGauge.

Additionally, since the camera now follows the player, if we place the HP bar in the same layer as the player, it will move along with the player and may even leave the screen.
Therefore, elements like the HP bar that must always remain visible on screen should be placed in the UI Layer.

---

About the UI Layer

You may recall that earlier we mentioned the layer structure in ACTION GAME MAKER roughly looks like this.
Among them, the UI Layer and Screen Effect Layer are special layers unaffected by the camera.

This means:

• Nodes placed in the UI Layer will always remain visible on screen.
• Perfect for HP bars, scores, UI buttons, etc.
• The Screen Effect Layer is typically used for visual effects triggered by actions.

In this section, we’ll use the UI Layer to place the HP bar.

---

Set Player’s HP and Max HP to 10

1. Select the BaseSettings node within the player object.

2. In the Inspector, change both HP and Max HP from 1 to 10.

   

---

Add and Configure the SimpleGauge Node

1. Switch to the stage1 scene tab and change the editor view from Script back to 2D.

   

2. In the Scene panel, select the UI node.

   

3. Click the + (Add Child Node) button in the top-left corner of the Scene panel.

   

4. Select SimpleGauge, then click Create.

   

5. Initially, the Gauge may appear squashed.

   

6. Drag the orange control points to adjust its size appropriately (refer to the tutorial example image).

   

7. The visible area of the UI Layer is marked by a thin blue line.
   Move the HP bar to the top-left corner within this area.

   

---

Link the HP Bar to the Player’s HP Variable

8. In the Inspector, set Variable Type to Object.

9. The Specify Target Object Path field will appear.
   Click the icon on the right.

   

10. Select player.tscn, then click Open.

11. The Variable Name will automatically display as hp.
    This is the variable name used for the “current value”—leave it unchanged.

    

12. Check Use Variable as Max Value.

13. Repeat steps 9–10 to re-specify player.tscn.

    

14. The Max Value Variable may default to object_id.
    Change it to max_hp.

    • This means the HP bar’s maximum value will use the player’s Max HP.
    

---

Test the HP Bar

Click Test Play to run the game.
If configured correctly, you should see:

• The HP bar displayed in the top-left corner of the screen.

• The HP bar decreases as the player takes damage.

  

---

Troubleshooting

• HP bar is not visible
  → Confirm that the SimpleGauge is a child of the UI Layer and positioned within the blue visible area.

• HP is low at game start
  → Check that the player’s HP in BaseSettings is set to 10.

• HP still drops to zero instantly despite having Max HP
  → Confirm:

  • In BaseSettings, Max HP = 10
  • In SimpleGauge, Max Value Variable is correctly set to max_hp

[Moonling]

Setting Up “Fall Death”

During game testing, you may have noticed:
When the player falls into a pit, they keep falling infinitely.

Now let’s fix this issue so that when the player falls into a deep pit, they are判定 as Death (failure).

The implementation consists of two steps:

1. Limit the camera’s movement range to prevent it from endlessly tracking downward.
2. When the player leaves the camera’s visible area, trigger the Death state.

---

Limiting the Movement Range of InitialCamera (ZoomCamera2D)

1. Select the InitialCamera node.

   

2. In the Inspector, expand the Limits section.

3. Change the Bottom value from 10000000 to 500.

   
   • This means:
     The camera will follow the player no more than 500 pixels below the origin (intersection of red and green axes).

4. Run a test play.

   • If configured correctly:
     • The camera will continue to follow the player horizontally and upward.
     • But it will stop moving downward once it reaches the limit.

---

Troubleshooting

• Nothing visible on screen:
  This suggests the level may not be positioned near the origin.
  Try changing the Bottom value to 1000 or 2000 until the scene displays correctly.

---

Adding “Fall Death” Detection to the Player’s Visual Script

Since we’ve already created the Death state, we only need to add an additional condition to the existing AnyState → Death transition.

The condition we’ll use is OffScreen (leaving the screen).

---

Steps

1. Switch to the Player scene and change the editor view to Script.

2. Select the AnyState → Death transition.

   

3. Click + Add Condition.

4. Select the OffScreen condition.

5. Change the Data Type from Unset to This Node.

6. Set Connection With Previous Condition to OR, then click Add.

   

7. Confirm the condition list displays the following:

   • HPIsZero

   • OR

   • OffScreen

     

   This means:
   “HP is 0 OR player leaves screen → enter Death state”

---

Testing “Fall Death”

Run the game again and let the player fall into a pit.

If configured correctly:

• When the player leaves the camera’s visible area,
• The Death state will be triggered,
• And the previously set fireworks particle effect will play,
• Indicating the player has been defeated.

---

Troubleshooting

• Player doesn’t die when falling into a pit:
  → Check whether the AnyState → Death transition condition is set to:
  HPIsZero OR OffScreen

[Moonling]

Thinking “Defeat 5 enemies to clear the stage”: How to handle variables

We need a way to count down from 5.
Each time an enemy is defeated, this value decreases by 1. When it reaches 0, the game triggers a Game Clear event.

To achieve this, we will use a concept called Variable.

---

What is a Variable?

A Variable is like a container for storing numerical values.
For example, the player’s HP (Health Points) we used earlier is essentially a variable.

When the player is hit by an enemy attack, the value stored in this HP container decreases by 1.

In ACTION GAME MAKER, variables can primarily be defined in two ways:

1. Using the VariableSettings node attached to an object
2. Using Project Variables (global variables shared across the entire project)

The HP we previously used belongs to the first type.

---

Differences Between Object Variables and Project Variables

• Object Variables (VariableSettings)

  • Bound to a specific object
  • The variable disappears when the object is deleted

• Project Variables (Project Variables)

  • Global variables shared across the entire project
  • Persist throughout the entire runtime of the project
  • Ideal for managing data that spans multiple scenes or objects

In practical usage:

• HP, Attack Power, Jump Strength
  → Best suited for Object Variables

• High Score, Coin Count, Remaining Lives
  → Best suited for Project Variables
  (because they typically need to be shared across multiple levels)

---

Which type of variable should we use for “Remaining Enemy Count”?

Technically, both approaches can work.
However, since this value will be manipulated simultaneously by multiple objects (enemies), we will choose to use a Project Variable.

The overall flow will be:

• When an enemy enters the Vanish (disappear) state
  → Decrease “Remaining Enemies” by 1

• When “Remaining Enemies” becomes 0
  → Trigger the Game Clear sequence

---

How to Implement the Clear Sequence

We will create a dedicated game object to manage the defeat count.

This object will be placed in the UI layer, ensuring it remains visible at all times.
Similar to the HP bar, it will display how many enemies remain, making it clear to the player.

The specific steps are as follows:

1. Create a Project Variable:
   Remaining Enemies

2. In the enemy’s “Vanish” state,
   Add an action to decrease this variable by 1

3. In the UI layer, create a Clear Event Object,
   Continuously monitor “Remaining Enemies”,
   And trigger the clear sequence when its value becomes 0

[Moonling]

Add an Action During the Enemy’s “Vanish” State

In ACTION GAME MAKER, modifying variables requires using the Change Property action.
Since this action supports basic arithmetic operations (addition, subtraction, multiplication, division), we can directly implement the following logic:

Remaining Enemies -= 1
(Decrease the number of remaining enemies by 1)

---

Steps

1. Open the enemy scene tab and switch the editor view to Script.

2. Select the Vanish state, then click + Add Executable Action.

   

3. Choose ChangeObjectProperty.

4. Configure the settings as follows:

   • Target Object Type: Project Database

   • Database Type: Project Variable

   • Record Name: Remaining Enemies

   • Expression: -=

   • Constant Value: 1

     

   There are 5 items to configure—please verify each one carefully.
   With this action, the project variable Remaining Enemies will decrease by 1.

5. Finally, adjust the execution order of actions.
   Actions execute from top to bottom. If Vanish Self (RemoveSelf) executes before Change Property, the variable will not be updated.

   • Drag the hamburger menu icon (three horizontal lines) on the left of Change Property
     to move it to the very top, ensuring Change Property executes first.

     

---

Why Use -= Instead of Just -?

In programming, -= is a shorthand operator, meaning:

New Value = Original Value − 1

In other words, it simultaneously performs two steps in one:

• Subtraction
• Writing the result back to the variable

If you use only - (minus sign) without =,
the system won’t know where to store the computed result,
so the variable’s value will not actually change.

[Moonling]

Create the UI Object “Remaining Enemies Manager”

We will create a UI object to manage the Remaining Enemies project variable.

This object will be responsible for two tasks:

• Display the current value of Remaining Enemies
• Trigger the game clear (Clear) process when this value becomes 0

To make the display more intuitive, we will show an enemy icon (Sprite2D) in the UI,
and display the Remaining Enemies value next to it using an animation.
The enemy icon can directly reuse the previously used enemy.png.

---

Creating the Remaining Enemies Manager Object

1. Switch the editor view to 2D.

2. Open a new scene tab, and when creating the root node, select GameObject.

3. Configure as follows:

   • Object Name: RemainingEnemiesManager
   • Template: UI
   • Type: Empty

   Then click Create.

   

4. Save the newly created scene.

5. From the FileSystem, drag enemy.png (the sprite image used for enemies)
   into the blank area to the left of the red and green axis intersection in the editor view.

   

6. The system will automatically create a Sprite2D node named Enemy.

   • In Godot, when you drag an image file directly into the editor view,
     it automatically generates a Sprite2D node and sets that image as its texture.

[Moonling]

Configure the Visualization Script for “Remaining Enemies Manager” (Display Variables)

First, let’s focus on displaying the variable itself.
We only need one state, “Count”, to display the current value of the project variable Remaining Enemies.

To display the variable, we will use the DisplayText action.

---

Create the “Count” State

1. In the Scene window, select the RemainingEnemiesManager (GameObject) node and click + (Attach Script).

   

2. Create the script RemainingEnemiesManager.vs.

3. Rename the default State001 to Count.

   

4. Add the DisplayText execution action and configure the Basic Settings as follows:

   • Text Type: Variable

   • Variable Source: Data Management

   • Database Type: Project Variables

   • Record Name: Remaining Enemies

     

5. Next, configure the Layout & Action settings as follows:

   • Unlimited Duration: On

   • Font: New SystemFont

   • Font Size: 64

   • Display Size: x = 80, y = 80

   • Margins (Top / Left / Right / Bottom): All set to 0

   • Horizontal Alignment: Center

   • Vertical Alignment: Center

     

---

Notes on Positioning in the “DisplayText” Action

This action creates a text box of the specified size and displays the text (or variable value) centered on the reference point for the specified duration.

When the reference point is set to “This object’s center”,
this center refers to the origin (the intersection point of the red and green axes).

In the current configuration:

• A 80×80 pixel text box is created
• The text box is centered on the origin
• The text is centered within the box
• The display duration is unlimited

---

Test the Display of “Count”

Next, place it in the scene for testing.
Since we want it to remain visible at all times, it must be placed in the UI layer.

1. Switch to the stage1 scene tab and set the editor view to 2D.

   

2. In the Scene window, select the SimpleGauge node under UI (CanvasLayer).

   

3. In the FileSystem, select RemainingEnemiesManager.tscn,
   and drag it to the top-right area within the blue border of the UI layer.

   

4. Run the test and verify:

   • At the start of the game, Remaining Enemies = 5 is displayed correctly

   • After defeating one enemy, the value decreases to 4

     

---

Troubleshooting

• Neither the icon nor the number is displayed:
  Ensure the object is a child of the UI layer and located within the blue border (UI display area).

• The icon is displayed but not the number:
  Verify in the Remaining Enemies Manager:

  • The icon is positioned near the origin
  • The DisplayText action in the Count state is configured correctly

• The number does not change after defeating an enemy:
  Check the execution order in the enemy object’s Vanish state—
  it must be Change Property first, then RemoveSelf.

[Moonling]

Creating the Clear Sequence

Next, let’s create the Clear Sequence.
We will again use the DisplayText action.

To make it clear to the player that they have “cleared the stage,”
we will display “STAGE CLEAR” in large text at the center of the screen.

The trigger condition for clearing the stage is:
The project variable Remaining Enemies becomes 0.

---

Setting Up the “Stage Clear” State

1. Switch to the RemainingEnemiesManager scene tab and set the editor view to Script.

2. Near the Count state, right-click and select Add State.

3. Rename the newly created state to Stage Clear.

   

4. Click ＋ Add Executable Action.

5. Select DisplayText.

6. Configure the settings as follows (there are many items—please verify each one):

   • Text Body: STAGE CLEAR

   • Unlimited Duration: On

   • Font: New SystemFont

   • Font Size: 96

   • Display Area: x = 1200, y = 120

   • Horizontal Alignment: Center

   • Vertical Alignment: Center

   • Reference Point: Use Scene as Base

   • Anchor: Center

     
     

   What does “Use Scene as Base” mean?
   This means the display position is not relative to the object itself, but relative to the entire game screen (the area visible to the camera).
   In this setup, a 1200×120 text box will be placed at the center of the screen,
   and STAGE CLEAR will be centered within that text box.

7. Right-click the Count state → Add Link → connect to Stage Clear.

8. Click ＋ Add Condition.

   

9. Select SwitchVariableChanged.

10. Configure the condition as follows:

    • Variable Type: Variable
    • Target Type: Project Variable
    • Database Record Name: Remaining Enemies
    • Variable Condition: =

    (This means the state transition will trigger when Remaining Enemies == 0.)

    

---

Testing the Clear Sequence

First, place enough enemies in the level.
Place a total of 5 enemies, then verify whether the clear sequence triggers correctly.

1. Switch to the stage1 scene tab and set the editor view to 2D.

2. Under BaseLayer, select a child node (e.g., enemy or player) to begin placing enemies.

   

3. Drag enemy.tscn from the FileSystem into the level to place one enemy.

   

4. Repeat the above step until you have placed a total of 5 enemies (enemy5).

   

5. Start testing.

   • If everything is set up correctly, after defeating all enemies, STAGE CLEAR will appear at the center of the screen.

     

---

Troubleshooting

• “The 5 enemies I placed disappeared”:
  The enemies may have fallen outside the visible screen area.
  Please verify:

  • Each enemy is placed on the ground.
  • In Template Move, Don’t fall off ledges is enabled.

• “Nothing happens when the enemy count becomes 0”:
  Please check:

  • The DisplayText settings in the Stage Clear state.
  • Whether the state transition condition is correct:
    Project variable Remaining Enemies == 0.

[Moonling]

Chapter 4 Review

In this chapter, we learned the following concepts, which laid the foundation for turning the game into a true playable experience:

• Camera following mechanics
• Use of particle effects
• Display of UI elements (HP bar & remaining enemy count)
• Use and management of variables

These features not only make the game interactive but also provide:

• Real-time UI display
• Game over conditions
• Victory conditions
• And a smooth, streamlined level experience

However, the current presentation remains relatively simple, lacking sound effects and background settings, making the overall experience somewhat monotonous.

In the next chapter—Chapter 5—we will further enhance the game’s completeness by adding:

• Sound effects and background music (BGM)
• Background and visual art settings
• Exporting the project so anyone can play it

Get ready to polish your game even further!

教程："从零开始使用 ACTION GAME MAKER"— 第 5 章

第 5 章：提升演出效果并导出游戏 在本章中，我们将学习如何 打磨已经完成的游戏表现，并最终让它可以在 PC 上游玩。 思考：现在的游戏还缺少什么？ 虽然目前游戏在功能上已经完成，但画面表现仍然略显单调。 为了让它更像一个“真正的游戏”，我们还可以加入哪些要素呢？ 首先，没有背景，因此加入背景会让画面更有层次感。 这是一个“击败敌人”的游戏，所以在敌人被击败时，也应该有击破演出效…