Tutorial: “Getting Started with ACTION GAME MAKER from Zero” – Chapter 2

[Moonling]

Chapter 2: Let’s Create a Simple Stage!

Goal of Chapter 2

From here, we’ll start actually building an action shooting game.
In this chapter, we’ll walk through the process of creating a simple stage where:

• The player character can walk and jump.

By the end of this chapter, you’ll have something like the example shown below.

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

---

Workflow

1. First, we’ll need a scene for the stage itself.

2. Inside that stage, we’ll place platforms that the character can walk and jump on.

3. Next, we’ll create a character scene, and then use Visual Script to give it movement.

[Moonling]

Learning About “Game Scenes” and “Game Objects”

In Chapter 1, we created everything using only the functions of Godot Engine.
From this point on, we’ll start using the additional features of ACTION GAME MAKER to build our game.

In Godot Engine, you normally create characters, courses, and other elements by adding nodes one by one to a root node. However, this can be quite time-consuming.

To make things easier, ACTION GAME MAKER provides two main types of preset scenes:

• Game Scene

  • A Game Scene is a scene used for stages or courses.

• Game Object

  • A Game Object is a scene used for players, enemies, items, and similar elements.

In ACTION GAME MAKER, you create your game by placing Game Objects inside a Game Scene.

---

How to Recognize Features Added by ACTION GAME MAKER

Features added by ACTION GAME MAKER — such as Game Scenes and Game Objects — are marked with two-color icons in blue and orange.
Whenever you see these colored nodes or buttons, it means they are ACTION GAME MAKER features.

By contrast, the original Godot nodes use single-color icons (white, blue, green, etc.), though a few may use more than one color.

[Moonling]

Creating a “Game Scene”

Let’s go ahead and set up a Game Scene.

---

Steps

1. In the Scene tab, click the “+” (Add New Scene) button.

   

2. In the Scene window, under Create Root Node, select Game Scene.

   

3. A large number of nodes will automatically appear in the Scene window. These are the preset nodes that make up a Game Scene.

   

4. Since this is a new scene, let’s save it.

   • Right-click the [unsaved] tab and select Save Scene As.

     

5. Because this is a stage (course) scene, save it as stage1.tscn.

   

---

Structure of a Game Scene

You might notice a sudden flood of nodes being added — but what exactly does each one do?

In ACTION GAME MAKER, Game Scenes are organized using the concept of “layers.”

A layer is one way of expressing depth, similar to a theater stage:

• The background layer (backdrop scenery) sits at the very back.

• The character layer is in the middle, where the actors perform.

• The foreground layer is in front, with props placed closest to the audience.

When viewed “through a camera placed in front,” these layers together form the game’s scene.

ACTION GAME MAKER provides seven default layers. Each has a different name and icon, and slightly different functions, but they are stacked as shown in the diagram.

By default, each layer comes with the minimum necessary preset nodes already in place, plus a single camera that captures the whole scene.

---

Difference Between “SceneLayer” Nodes and “UI” / “PostEffectLayer” Nodes

If you look closely at the icons of the seven layers, you’ll notice some differences. Broadly speaking, there are two types:

1. The five layers from Base to DistantView, which are children of the SceneLayer node.

2. The two layers UI and PostEffectLayer.

The difference is:

• SceneLayer nodes represent spaces with depth, where what you see changes depending on the camera’s position.

• UI and PostEffectLayer nodes are always displayed in the camera, regardless of camera position.

Using the theater analogy:

• The stage itself is the SceneLayer.

• The filters placed over the camera lens are the UI and PostEffectLayer.

[Moonling]

Setting the “Initial Scene”

In ACTION GAME MAKER, scenes are managed using a dedicated Scene Transition system.
This system lets you define how scenes connect to each other, using operations similar to Visual Script.

First, let’s set the scene we just created as the Initial Scene, which is the first scene displayed when the game starts.

---

Steps

1. At the top center of the screen, switch the editor mode to SceneTransition.

   
   • This button changes what is displayed in the central editor window.

2. An empty grid will appear.

   • From the FileSystem panel at the bottom left, drag and drop the scene you saved earlier (stage1.tscn) onto the grid.

     

3. If stage1.tscn now appears on the grid, you’re done.

   

4. Switch back to 2D mode from the top-center button to return to the previous view.

   

   • Now, when the game starts, stage1 will be displayed as the first scene.

---

Note: What Happens If You Don’t Set an Initial Scene?

In ACTION GAME MAKER, a special scene called core.tscn always runs in the background.
Normally, this loads and displays the designated game scenes.

If you don’t set an initial scene, only core.tscn will be shown — which means the game will launch with an empty screen.

[Moonling]

Setting Up Tiles

Now, let’s create the platforms for our stage.

We’ll need a ground and some floating platforms to jump onto. There are various ways to create platforms using different nodes, but since we’ll be building a wide stage with multiple shapes, we’ll use a node that’s designed for this purpose: tiles.

A tile is just like a floor tile — a small image repeated in a grid to build up larger structures such as platforms.

---

Importing the Tile Image into the FileSystem

First, let’s prepare the tile image.

Download the provided image by right-clicking and saving it.

As explained in Chapter 1, Godot Engine only works with assets that are placed inside the project’s FileSystem.
Think of the FileSystem as the warehouse where your amusement park materials must be stored before they can be used.

The import method is simple: just drag and drop the file into the editor.

1. Keep the folder on your PC with the downloaded image open.

2. In the editor, go to the FileSystem panel (bottom-left) and select res://.

   
   • Imported files will be stored in whichever folder you have selected.

3. Drag tile.png from your PC folder into the editor window.

   

---

Choosing Which Layer to Place Tiles On

Next, let’s decide which layer the tiles will be placed in.
We’ll use BaseLayer, which is the default layer meant for ground tiles.

Looking inside BaseLayer, you’ll see three nodes: Base, BaseDecoration, BaseCover.
These are actually TileMapLayer nodes, just renamed.

Why three versions of the same node?

• This is so you can stack tiles on top of each other to create depth.

• For example, you might want to place a torch on top of a ground tile.

• With only one layer, placing the torch would overwrite the ground tile.

• With multiple layers, you can stack them together, showing both ground and decorations.

For now, select the node named Base to place tiles.

At the bottom, you’ll see a panel that says something like:
“No TileSet found. Please create a TileSet in the Inspector.”

---

Creating a TileSet

A TileSet defines the basic information for the tiles you’ll use in this TileMapLayer node:

• The size and shape of each tile

• Whether characters can collide with it or pass through it

Our prepared tile image is a 48×48 pixel square. It will act as a platform that the player can stand on, so it needs collision enabled.

1. In the Inspector, next to TileSet, click , then select New TileSet.

   

2. Now you can edit the TileSet properties. Set them as follows:

   • Tile Shape: Square

   • Tile Size: x = 48 px, y = 48 px

     

3. Expand the Physics Layers section and click + Add Element.

   

4. Leave Collision Layer / Collision Mask as default.

   • If your inspector looks like the example with Physics Layer 0 added, your TileSet setup is complete.

     

---

Note: Collision Layers and Masks

In Godot, collisions are determined by two settings:

• Collision Layer: the group the node belongs to

• Collision Mask: which groups this node can collide with

We’ll explain this in more detail in Chapter 3.

---

Configuring the Tile

After creating the TileSet, the message at the bottom will change to something like:
“No source for TileSet”.

This means we still need to assign an image for the tiles.
We also need to set up collision shapes (walls/floors) for them.

1. At the bottom panel, switch the tab from TileMap to TileSet.

   

2. Drag tile.png from the FileSystem panel into the black box on the left of the TileSet editor.

   

3. A new window will pop up. Since our tile is a 48×48 square, set Tile Size: x=48, y=48, then click Yes.

   

4. The next window will ask, “Set the Tile Format to Auto Tile?” Select No.

   

---

Note: What Is an Atlas and Auto Tile

An atlas is a single large image file containing many smaller images (e.g., floors, walls, slopes).
Instead of handling many individual image files, the engine loads just one big image and slices it into tiles.
This improves efficiency.

Auto Tile is one of the features exclusive to ACTION GAME MAKER.

It automatically arranges tile atlases placed in a specific format neatly, but we won’t be using it this time.

---

Adding Collision Shapes to the Tile

1. In the TileSet editor, switch to the Select tab at the top.

   
   • This tab lets you configure detailed settings for individual tiles.

2. On the right side, click the tile image to select it.

   • The lower part of the panel will change to show its properties.

     

3. Scroll down and open Physics > Physics Layer 0.

   
   • This is the physics layer we created earlier.

4. Click the Add Polygon Tool button (square with a “+” icon).

   

   • This tool adds vertices to draw polygons.

   • A polygon is simply a shape defined by connecting points.

5. Click the top-right corner of the green square. A diamond-shaped point will appear.

   

6. Do the same for the bottom-right, bottom-left, and top-left corners in clockwise order.

   

7. Finally, click again on the first point you placed (top-right).

   
   • The tile will turn orange, showing that the whole square has been marked as a collision area.

---

Troubleshooting

• If a point is misplaced: Use the Edit Point Tool (square with arrow icon) to move points.

• If you added too many points: Use the Delete Point Tool (square with an X icon) to remove extra points.

---

At this stage, you’ve successfully imported a tile, created a TileSet, assigned the image, and set up collision so it can act as a platform.

[Moonling]

Placing Tiles

Now that we’ve prepared our tiles, let’s place them.
Our goal is to create a floor and some platforms within the camera’s visible range.

---

Steps

1. Look at the editor view in the center of the screen.

   • You should see thin purple lines forming a rectangle, centered at the point where the red and green lines cross.

   • This purple rectangle represents the camera’s visible area.

   • First, adjust the view so the camera area is fully visible.

     

2. In the editor view, press and hold the middle mouse button (wheel click).

   • The cursor should change to a cross-shaped arrow.

   • While holding, move the mouse to pan the view until the purple rectangle is completely in view.

   • If the purple rectangle looks too small or too large, use the mouse wheel to zoom in or out until it fits nicely within the screen.

3. At the bottom panel, switch the tab back to TileMap (Tile Painting).

   • The tile you created earlier should now be available.

     

4. On the right side of the bottom panel, click the tile to select it.

5. Move your mouse into the editor view — the tile should appear as a preview under the cursor.

   • Left-click to place tiles.

   • Right-click to erase them.

     

   • If you can’t perform the operation, the editor panel might be in Move Mode, so switch it back to Select Mode.

     

6. Draw the floor and platforms similar to the example below.

   
   • It doesn’t have to be exact, but if the platforms are placed too high, the player’s jump may not reach them.

---

Checking With Test Play

Let’s confirm how it looks in the game.

• In the top-right menu, click Run Project (F5).

• If everything was set up correctly, the scene should display with the floor and platforms made of tiles.

  

---

Troubleshooting Checklist

If tiles don’t appear as expected, check the following:

• Are the tiles placed inside the purple rectangle (the camera area)?

• In SceneTransition, is the Initial Scene correctly set to stage1.tscn?

[Moonling]

Setting Up the Input Map (Controls)

Now that we have a simple stage, our next step would normally be to create the player character.
But before that, let’s configure the Input Map (controls).

The Input Map lets you define:

• “When this button or key is pressed, it performs this action.”

In this tutorial, we’ll make a simple action shooting game with only the basic movements.
For now, we only need four actions:

• Attack

• Jump

• Move Right

• Move Left

(Later, you might add more actions such as sliding, weapon selection, or climbing ladders, but for now, we’ll just create the essential ones.)

---

Steps

1. From the Project menu at the top left, open Project Settings.

   

2. A window will appear. Switch the tab at the top from General to Input Map.

   

3. In the field labeled “Add New Action”, type in a name.

4. Enter Right, then press the + Add button on the right.

   

5. Repeat the same process to add the following actions:

   • Left

   • Jump

   • Attack
     If your list looks like the example below, you’re on the right track.

     

6. Next, click the “+” button(Add Event) on the far right of the action Right.

   

7. A window titled “Add Event to Right” will appear. Press the → (Right Arrow) key on your keyboard.

   

8. If it now shows Right or Right (Physical) or Right(Unicode), you’ve succeeded. Click OK.

9. Repeat the same steps for the other actions:

   • Left → assign the ← (Left Arrow) key

   • Jump → assign the Z key

   • Attack → assign the X key

     Once your Input Map looks like the screenshot below, you’re done.

     

10. Finally, click the Close button to finish.

[Moonling]

Creating a “Game Object” Scene

Now, let’s create a scene for our Game Object.

---

Steps

1. Just like when we created Stage1, click the “+” (Add New Scene) button at the top of the editor.

2. Under Create Root Node, select Game Object.

   

3. The Create New Game Object window will appear.
   In ACTION GAME MAKER, you can create various objects from templates.
   Set it up as follows:

   • Object Name: Player

   • Template: characters

   • Type: 2DSprite Character Base

   • Object Group: Player

   • Object to be manipulated by input devices.: On

   • Add CameraTargetSettings Node.: On

     

4. A new scene will be generated, containing several nodes.

   

5. Save the scene with a name. You can simply save it as player.tscn.

   
   

[Moonling]

Understanding the Structure of a Game Object

At first glance, the many nodes inside a Game Object might feel overwhelming.
However, these nodes can be broadly divided into three categories:

---

1. Nodes with “Settings” in their name

These nodes store the data that can be accessed and used in ACTION GAME MAKER’s Visual Script.
By setting values here—such as HP, attack power, movement speed, and jump strength—you make them available for use within Visual Script.

---

2. Nodes with “Collision” in their name

These nodes define shapes used for collision detection. For example:

• CollisionShape2D → collisions with walls and floors

• AttackCollision → the shape of the attack hitbox

• HitCollision → the shape for detecting damage when hit

---

3. Animation-related nodes

• AnimationPlayer → controls the character’s animations

• Sprite2D → provides the images used in those animations

---

You’ll be using these three groups of nodes when configuring your Game Object.

---

Visual Script Can Only Be Set on Game Objects

ACTION GAME MAKER’s Visual Script works by reading data from these nodes.
For that reason, Visual Script can only be assigned to GameObject nodes (in this case, the Player node).

---

Planning the Object Settings

In this section, we’re only setting up movement and jumping.
This means we don’t need to configure attacks or damage just yet.

All we need for now is:

• The player’s image

• Animations for movement and jumping

• Movement speed

• Jump strength

• Movement keys

So, in this part, we will configure just these elements.

[Moonling]

Setting the Player Sprite on Sprite2D

Let’s apply the player’s image to the Sprite2D node, which is used to display images.
We’ll use the image provided for this tutorial.

---

Steps

1. Right-click the image below and save it to your computer.

   

2. Drag and drop the downloaded image into the FileSystem to import it.

   

3. Select the Sprite2D node, which will display the image.

4. In the Inspector panel on the right, find the Texture property (currently set to <empty>).
   Drag and drop the imported player.png file onto it.

   

5. The image will appear — but you’ll notice that all 9 characters are shown at once.

   

   • This is because the file is a sprite sheet, a single image that contains all animation frames (a type of atlas image, similar to what we discussed with tiles).

   • We need to slice the sprite sheet into smaller frames and tell Godot which part to display.

---

Splitting the Sprite Sheet

6. In the Inspector, expand the Animation section.

   

7. Set Hframes (horizontal frames) to 5 and Vframes (vertical frames) to 2.

   • This divides the image into 5 × 2 = 10 small frames.

     

8. Try clicking the Frame property’s up/down arrows in the Inspector.

   

   • The displayed image will change slightly each time.

   • Game animations are created in exactly this way — swapping frames one after another, like a flipbook.

---

Note: Why Does the First Frame Start at 0?

You might find it strange that the first frame is labeled 0 instead of 1.
In programming, lists usually start from 0.
Godot follows the same convention, so frame numbering also begins at 0.

[Moonling]

Creating Animations with the AnimationPlayer Node

In Godot Engine / ACTION GAME MAKER, animations are created using the AnimationPlayer node.
This system works in a timeline-based style, similar to video editing.

On the timeline, you create tracks (for images, sounds, etc.) and place keyframes (events). As time progresses, the AnimationPlayer executes each keyframe on its track.

Think of it like an orchestra’s musical score:

• At 1 second, the piano plays a C note.

• At the same moment, the violin plays a D note.

In this analogy:

• Tracks = the instruments

• Keyframes = the instructions for how they play

---

The Animations We Need

For this tutorial, we’ll create three basic animations:

• Idle → when no input is given

• Jump → when the jump button is pressed

• Move → when left/right input is given

We’ll use AnimationPlayer to create these animations.

---

Steps

1. In the Scene panel, select the AnimationPlayer node.

2. A new Animation panel will appear at the bottom (similar to the Tile editor earlier).

3. Click the Animation button and select New.

   

4. A window will pop up asking for the animation name. Start with Idle. Enter the name and press OK.

   

5. The Idle animation is now created.

   • We’ll use the sprite frames we set up earlier to build the animation.

6. Select the Sprite2D node.

   • Out of the 9 images, Idle uses only the top-left frame.

   • Since the top-left frame is Frame 0, all we need to do is set the Idle animation to display Frame 0.

     

7. In the Inspector, under Animation > Frame, confirm it is set to 0.

   • Click the + button next to it.

     

   • This inserts a keyframe, registering the current frame in the active animation.

8. A window will appear. Turn off “Create RESET Track(s)”, then press Create.

   

---

Note: What is a RESET Track?

A RESET track specifies the initial state of the scene.
For example, in Idle you could set this as the default state.
However, ACTION GAME MAKER generally doesn’t use it, so leave it off.

---

9. A track called Sprite2D: frame will appear in the timeline.

   

   • At the 0-second mark, Frame 0 of player.png is set.

   • When the Idle animation begins, it will instantly display this image.

   • Since Idle uses only one image, it’s now complete.

10. Repeat steps 1–8 to create the Jump animation.

    

• The jump frame is the third image on the top row → Frame 2.

  

• If set correctly, the track should show Frame 2 at the 0-second mark.

  

11. Finally, create the Move animation.

• Unlike Idle and Jump, this animation uses four frames:

  • Bottom row, first through fourth images → Frames 5, 6, 7, 8.

• To create smooth motion, we’ll switch frames every 0.2 seconds and loop the animation.

---

Creating the Move Animation

12. As before, create a new animation called Move.

    

• Start by setting Frame 5 at the 0-second mark.

  

13. Move the timeline playhead to 0.2 seconds (type “0.2” into the box that shows the time).

    

14. Change Sprite2D’s Frame to 6 and press the + button to insert a keyframe.

    

• You should now see Frame 6 added at the 0.2-second mark.

  

15. Repeat the same process:

• At 0.4 seconds, set Frame 7.

  

• At 0.6 seconds, set Frame 8.

  

• Now all 4 frames are placed on the timeline.

  

16. Adjust the animation length.

• At the top-right of the Animation panel, you’ll see a box showing 1 (the default length in seconds).

• Change this to 0.8, since we’re using 4 frames at 0.2s each.

  

• This ensures the animation loops smoothly.

17. Enable looping.

• Next to the time box, click the loop button (circular arrows).

  

• This makes the animation repeat automatically.

---

Note: Loop vs. Ping-Pong Loop

• A single click sets a normal loop (the animation restarts from the beginning).

• Clicking again enables a ping-pong loop (the animation plays forward, then backward, then forward again).

  

---

18. Once everything is set, press the Play button to test the animation.

• If it runs smoothly, you’re done!

---

Troubleshooting

• If the animation looks wrong:

  • Select each frame on the track and check the Value field.

  • Make sure they are set in order: 5 → 6 → 7 → 8.

  • If not, manually change the numbers to correct them.

• Double-check that:

  • The animation is set to loop.

  • The length is set to 0.8 seconds.

---

With this, you’ve successfully created the Idle, Jump, and Move animations for your player character.

[Moonling]

Creating an Animation Set

In ACTION GAME MAKER, there is a system called the Animation Set, which automatically switches animations based on movement direction.

By assigning animations for up to 8 directions in an Animation Set, you only need to select that set once — then the animations will automatically change when moving right, left, up, and so on.

For our game, we only need two movement directions: right and left.
Currently, we only have three animations — Idle, Jump, and Move — and all of them are facing right.

However, there is an option to automatically flip animations, which is enabled by default.
This means we don’t need to create separate left-facing animations — the system will mirror them automatically.

Also, in cases like this (where only left and right movement is needed, and right-facing animations can be flipped), we can use the bulk import function to quickly set up the Animation Set.

---

Steps

1. In the Scene panel, select the Player node (the GameObject node).

   

2. In the Inspector, click the button labeled Select Animation Player.

3. A node selection window will appear — choose the AnimationPlayer node.

   

4. Next, click the Bulk Load Animations button.

   

5. To confirm that everything worked, expand the Animation Set section.

6. If successful, you should see the Jump, Idle, and Move animations listed inside the Animation Set.

   

---

Troubleshooting

• If the animations do not appear in the set:

  • Go back to Assign AnimationPlayer and re-assign the AnimationPlayer node.

[Moonling]

Adjusting Player Settings

Now that we’ve created the animations, let’s configure the player’s settings.
We need to do three things:

1. Set the keys used for movement

2. Adjust the movement speed and jump strength

3. Resize the collision shape to match the character’s body

---

Setting the Keys for Movement

Let’s assign the movement keys using the input actions we set up earlier.

1. In the Scene panel, select the MoveAndJumpSettings node.

   

2. In the Inspector, set:

   • Left Move Key → Left

   • Right Move Key → Right

     

---

Adjusting Movement Speed and Jump Strength

Next, let’s tune the speed and jump power to values appropriate for the character.

1. With the MoveAndJumpSettings node still selected, look at the Inspector.

2. Change the Horizontal Speed values from 100 to 300.

   • Now, when a key is held for 1 second, the character will move 300px.

     

3. Find the property Jump Force near the bottom.

   • Change it from 500 to 700.

     

   • This means the character will launch upward at 700px per second when the jump button is pressed.

---

Adjusting the Collision Shape

The CollisionShape2D node defines the shape the character uses to collide with the ground and other objects.
Right now, the shape is too small (smaller than the character’s head), which makes the body sink into the ground.
We’ll resize it to fit the entire sprite.

1. In the Scene panel, select the CollisionShape2D node.

   • You’ll see a small blue rectangle outlined with orange points — this is the current collision shape.

     

   If the character is currently showing a Jump or Move frame, switch the AnimationPlayer back to Idle.

   • This makes it easier to align the shape with the body.

2. Click and drag the orange points at the corners to resize the rectangle.

   • Adjust it so the collision shape covers the entire body of the character.

     

---

Once done, your player will respond correctly to input, move and jump at proper speeds, and collide with the ground without sinking.

[Moonling]

Moving the Character with Visual Script

All the preparations are now complete — let’s use Visual Script to make the player character move.
First, we’ll attach (add) a Visual Script to the Player.

---

Attaching a Visual Script

1. In the Scene panel, select the Player node (GameObject).

2. Click the + (Attach Script) button.

   

3. A new window will appear. It asks whether to attach a VisualScript or a GDScript (standard programming script).

   • Since we selected a Player node (GameObject), VisualScript will be chosen automatically.

     

   • Just click the Create button.

4. The editor view will automatically switch to the Script tab.

   • You’ll see two boxes: State001 and AnyState.

   • This is the Visual Script workspace.

     

---

Returning to the Previous View

If you want to go back to the previous screen, simply switch the top tab back to 2D.
As explained earlier in the Scene Transition section, the top tabs are used to switch what the editor displays.

[Moonling]

Creating States

Deciding Which States Are Needed

As explained in Chapter 1, ACTION GAME MAKER’s Visual Script is built by:

1. Adding behaviors to character states, and

2. Connecting those states together (linking) with conditions.

For our game, where the character simply walks around the stage and jumps, we only need three states:

• Idle

• Move

• Jump

By connecting these three states and switching between them under the right conditions, we can create the player’s movement.

Let’s start by preparing the Idle, Move, and Jump states, then assigning the animations and behaviors.
We can reuse the already existing State001 as our Idle state.

---

Creating the Idle State

1. In the Script window, select State001.

2. In the Inspector, change the Title from “State001” to Idle.

   

3. Under Animation to assign > Animation Select, click the empty field and select Idle.

   
   • Now, the Idle Animation Set will play while the character is in the Idle state.

---

Creating the Move State

The Move state will need to be created as a new state.

1. Right-click on the empty space to the right of the Idle state.

2. From the menu, select Add State.

   

3. A new “State001” will appear. Rename the Title to Move.

4. Under Animation Category, select Move.

   
   • Now, the Move animation will play while the character is in the Move state.

---

Creating the Jump State

The Jump state needs both an animation and a jump action.

1. Create a new state below the Idle and Move states.

2. As before, rename the Title to Jump and set the Animation to Jump.

   

3. Expand the Action Settings section.

   • Check the box for Jump.

     

   • Now, when the character enters the Jump state, it will automatically perform a jump.

---

Note: Why Doesn’t the Move State Have action like “Perform Move Action”?

Movement based on player input is already handled by the key bindings we set in MoveAndJumpSettings.
This system applies across all states, so the Move state does not require any additional action settings for movement.

---

With this, you now have the three core states — Idle, Move, and Jump — set up and ready to drive your character’s behavior.

[Moonling]

Connecting States with Links

Now that we’ve created the three states, let’s connect them with links so the player can transition smoothly between them.

---

Thinking About Transition Conditions

For this game, the basic logic will be:

• If Left/Right input is pressed → Move

• If Jump input is pressed → Jump

• If no input is given → Idle

This means:

• Idle → Move if Left/Right is pressed, and Move → Idle if no input is given.

• Idle → Jump if Jump is pressed, and Move → Jump if Jump is pressed while moving.

• Jump → Idle when touching the ground (when colliding downward with a tile).

Do we also need a Jump → Move link?
Not necessarily. When landing while holding a movement key, the transition from Idle → Move happens instantly, so a direct Jump → Move link isn’t required.

---

Linking Idle and Move

1. Right-click the Idle state and select Add Link.

   

2. Drag the line from Idle to the Move state.

   

   • Now Idle and Move are connected.

   • Next, we’ll add the condition: if Left/Right is pressed, go to Move.

3. Select the new link. In the Inspector, check “Trigger On Input”.

   

4. Expand the new Input Operation List (Array[InputCondition]).

5. Click + Add Input.

   

6. A new <empty> slot will appear. Click it and select New Input Condition.

   

7. <empty> changes to Input Condition. Click to expand it.

8. Set the fields as follows:

   • Input Target: Four Any Input Keys

   • Up Key: None

   • Down Key: None

   • Left Key: Left

   • Right Key: Right

   • Input Method: Being Pressed

     

9. Now the character will transition Idle → Move when Left or Right is held.

10. Next, let’s make the Move → Idle link. Right-click Move and select Add Link.

11. Select the new link.

    

12. In the Inspector, check “Trigger On No input”.

    
    • Now the character transitions back to Idle when no keys are held.

---

Place the Player in the Stage and Test

At this point, the player should be able to walk left and right on the ground.
Let’s place the Player scene into stage1.tscn and test it.

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

2. Save the Player scene: right-click the player tab and select Save Scene.

   

3. Switch to the stage1.tscn tab.

4. In the Scene panel, select Base (TileMapLayer).

   

5. Drag player.tscn from the FileSystem onto the stage, placing it on the ground.

6. Make sure the Player appears as a child of BaseLayer.

   

   • If it’s in the wrong layer, drag it in the Scene panel to fix it.

   • If its position looks off, use Move Mode to adjust.

7. Click the Run Project (F5) button in the top right.

8. If everything is correct, the character should:

   

   • Walk when Left/Right is pressed

   • Stop when the key is released

---

Troubleshooting

• Player doesn’t move → Check that MoveAndJumpSettings has the correct input keys assigned.

• Player moves but animation doesn’t change → Check the Idle → Move link and the Move state’s animation setting.

• Player doesn’t return to Idle → Check that the Move → Idle link condition is correct.

Error: ID is not set in CameraTargetSettings.
This warning means CameraTargetSettings exists but isn’t configured.
Since we’ll set up camera tracking in Chapter 4, you can safely ignore this error for now.

---

Linking Idle, Move, and Jump

Now let’s connect Jump to the other states.

1. Switch back to the player tab and set the editor to Script view.

   

2. Right-click Idle, add a link, and connect it to Jump.

3. Select the link and enable “Trigger On Input”.

   

4. Expand the Input List → + Add Input → → New Input Condition.

   

5. Configure as follows:

   • Input Target: Registered key

   • Input Key: Jump

   • Condition: Moment pressed

     

   • Now, pressing Jump while Idle will transition to Jump.

6. Next, we’ll link Move → Jump.

   • Since the condition is identical, we can reuse the Idle → Jump link.

7. Right-click the Idle → Jump link and select Copy.

   

8. Right-click the Move state and select Paste Link.

   

9. Drag the new line from Move to Jump.

10. Select the Move → Jump link and confirm it’s set correctly (Jump key pressed).

    

---

Linking Jump Back to Idle

1. Right-click the Jump state, add a link, and connect it to Idle.

2. Since this isn’t input-based, open the Inspector and click + Add Condition.

   

3. A window will appear. Select ContactWithTile.

4. In the condition, set Incoming Contact Direction → Bottom

   

   This means: only when the player’s bottom is touching a tile (the ground).

5. If the link now shows this setup, you’re done.

   

---

Test Play

Click Run Project (F5).

• While Idle or Moving, press Z → the player should Jump.

• On landing, the player should return to Idle.

---

Troubleshooting

• Can’t jump → Check the Idle → Jump and Move → Jump links, and confirm Jump Action is enabled in the Jump state.

• Can’t land → Check the Jump → Idle link and confirm the “ContactWithTile (Bottom)” condition is set.

---

With this, your player can now Idle, Move, and Jump smoothly using Visual Script!

[Moonling]

Chapter 2 Review

In Chapter 2, we learned about the concepts of Game Scenes and Game Objects, and created both a stage and a player character.

• In the Game Scene, we covered the concept of layers, as well as how to import and place tiles.

• In the Game Object, we learned how to import images, create animations, adjust settings, and attach a Visual Script.

This workflow is common across almost all game development.
So, whenever you feel stuck in your future projects, it’s a good idea to look back at these steps as a reference.

By now, you’ve learned the basic operations and core concepts of ACTION GAME MAKER.
In Chapter 3, we’ll move forward to make it feel more like a real game by adding bullet shooting and enemy creation.

Tutorial: “Getting Started with ACTION GAME MAKER from Zero” – Chapter 3

Chapter 3: Shoot Bullets and Defeat Enemies Goal of Chapter 3 In Chapter 2, we achieved the goal of: Creating a simple stage where the player character can walk and jump. In this chapter, we’ll tak…