Tutorial: “Getting Started with ACTION GAME MAKER from Zero” Chapter1

Chapter 1: Learning About Godot Engine and ACTION GAME MAKER

Introduction

This tutorial is designed for those who have no knowledge of game development, no programming skills, yet still want to create a full-fledged game! Step by step, you’ll learn how to build a game using ACTION GAME MAKER, starting from the very basics.

In Chapter 1, before actually starting game development, you will learn some essential background knowledge:

  • What exactly is ACTION GAME MAKER as a tool?

  • What kind of engine is the Godot Engine, which serves as its foundation?

  • How to use the basic features of the Godot Engine.

ACTION GAME MAKER and Godot Engine

What is ACTION GAME MAKER?

ACTION GAME MAKER is a customized version of Godot Engine, one of the major “game development software tools” often referred to as game engines, such as Unity or Unreal.
It has been specially adapted so that even people with no programming knowledge at all can use it to make games.


What is Godot Engine? What can it do?

Godot Engine is a game engine that has been rapidly growing in popularity in recent years.

It is a general-purpose game engine capable of creating games in any genre, equipped with a wide range of powerful features on par with Unity and Unreal Engine.

With Godot, you can create not only PC games, but also smartphone games and even titles for platforms such as Nintendo Switch. To see what kinds of games have already been made, check out the official showcase below.

:backhand_index_pointing_right: Official Showcase

Godot Engine is an incredibly versatile tool that allows for the creation of virtually any type of game. However, programming knowledge is usually essential to use it.

That’s where ACTION GAME MAKER comes in. By providing a dedicated visual scripting system, it enables users with no programming background to take full advantage of Godot Engine.

Since all of Godot’s 2D features are available, you can create 2D games in ACTION GAME MAKER at the same level as those shown in the showcase.


What kinds of games can be made with visual scripting?

You might be wondering: “Even if Godot is a powerful engine, won’t visual scripting limit what kinds of games I can make compared to real programming?”

The visual scripting system in ACTION GAME MAKER is inherited from the previous title, Action Game Maker MV. Thanks to its flexibility, creators have developed not only platformers, but also shooters, fighting games, puzzles, RPGs, and many other genres.

In fact, over 60 titles made with the previous system have been released on Nintendo Switch™.

:backhand_index_pointing_right: Watch the showcase video

ACTION GAME MAKER builds on this proven visual scripting system from Action Game Maker MV, now enhanced with the advanced capabilities of Godot.

First, Get Familiar with Godot Engine

Before using ACTION GAME MAKER, let’s first get hands-on with the basics of Godot Engine. Since ACTION GAME MAKER is essentially Godot Engine with additional features, the core UI is identical, and you can operate it just like standard Godot.


Creating a New Project

When you launch ACTION GAME MAKER, a screen called the Launcher will appear. This is where you manage your projects.
Think of a “project” as your workspace for making a game.

  1. Click + New Project in the upper left corner.

  2. Enter a project name — let’s use Tutorial for this example.

    • Note: The project name will also become the name of your game, so it’s best to choose something clear and meaningful.
  3. Click the Create and Edit button.

The project you create here will be stored in the following folder:
UserName\Documents\ActionGameMaker\{ProjectName}


Key Godot Concepts: “Scenes” and “Nodes”

Before we start operating the editor, let’s learn two fundamental concepts in Godot game development: Scenes and Nodes.

In Godot, you build games by creating Scenes and placing Nodes within them.

This might sound a little abstract, so let’s use an amusement park as an analogy:

  • A Scene is like a theme park attraction.

  • A Node is like the individual parts of that attraction.

For example, in a roller coaster attraction, the rails, supports, and the coaster cars are all Nodes.

By placing these attractions (Scenes) inside the land of your Project, you gradually build up a full amusement park — in the same way you build a complete game.

Layout of the Godot Interface

At this point, you should see a screen like the one below. This is the basic interface of Godot and therefore also of ACTION GAME MAKER.


Main Layout

The interface is divided into several areas, each serving a specific purpose.

Although there may seem to be a lot of panels and it might feel complicated at first, the Godot interface is designed with a simple principle in mind:

“Select on the left, view in the center, adjust on the right.”


Left Panel

  • Scene: Displays a list of all the nodes contained in the current scene.

    • Using the amusement park analogy: this is like seeing a list of the individual parts of an attraction.
  • FileSystem: Shows all the assets available in the entire project.

    • In the amusement park analogy: this is like the storage yard where all the construction materials are kept, ready to be used.

Center Panel

  • Editor View: Displays the overall scene.

    • Here, you place and arrange parts to build up your attraction.

Right Panel

  • Inspector: Shows detailed information about the node selected in the Scene panel.

    • You use it to adjust the properties of that part — for example, changing the color of the roller coaster or modifying its maximum speed.

There are other panels as well, but for now, remembering this basic concept will make things much easier to understand.

Now, let’s move on to actually trying out some operations.

Let’s Create a Scene

First, you need to create a root node for your scene. As the name suggests, the root node is the foundation (or “root”) of the scene. It determines what type of thing you are about to build — for example, whether it will be an attraction, a shop, or something else.

  1. At the top left of the screen, click Create Root Node and select 2D Scene.

The label Create Root Node will now change to Node2D. This is your root node.
Since Node2D serves as the base for 2D screens, this means you’ve decided: “I’m making a 2D game.”


Saving the Scene

At the top left of the editor window, you’ll see [unsaved](*). Simply creating a scene doesn’t save it yet, so let’s save it now.

  1. Right-click on the tab that says unsaved.

  2. From the menu, select Save Scene As…

  3. A file browser will appear. This is the FileSystem, which displays the folders and files in your project.

    • Think of it like a warehouse where all the construction materials for your amusement park are stored.
  4. By default, the filename will be node2d.tscn. If you save it like this, it might be hard to find later. Instead, change the name to test_scene.tscn and save it.

    • You’ll see a folder called AGMaker. This folder is reserved for ACTION GAME MAKER’s internal data, so don’t select it. Just save the scene without choosing any folder.
  5. If the save was successful, the unsaved tab will change to test_scene, and in the FileSystem panel at the lower left, you should see test_scene.tscn listed.

Adding a Node to a Scene

Next, let’s learn how to work with nodes. You’ll create a new node, place it in the game world, and customize it.

For starters, let’s place a rectangle in the scene.

This corresponds to the first step in the principle: “Select on the left, view in the center, adjust on the right.”


Adding a Rectangle (ColorRect Node)

  1. Add a node that draws a rectangle into the scene.

    • In Godot, the node used to draw a rectangle on a 2D screen is called ColorRect.

    • As the name suggests (Color + Rectangle), this node draws a colored rectangle.

  2. In the Scene panel (upper left), click the “+” (Add Child Node) button.

  3. In the search bar at the top, type ColorRect, then select the node that appears.

  4. Click the Create button.

  5. A plain white rectangle will appear in the center editor window.


Test Playing the Scene

  1. Let’s immediately test play the scene.

    • In the upper-right corner, click the “Run Current Scene (F6)” button.

      :warning: Be careful not to use “Run Project (F5)”, which launches a different scene. Use “Run Current Scene” here.

  2. A new window will open.

    • This shows how the game will actually look when launched.

    • If you haven’t changed its position, the rectangle should appear in the top-left corner of the screen.

  3. Once you’ve confirmed it appears, close the window using the X button at the top right.

:backhand_index_pointing_right: If nothing is displayed:

  • Close the window and try running the scene again with Run Current Scene (F6).

  • If it still doesn’t appear, you may have accidentally moved the rectangle. Continue with the next steps, and try again later.

Let’s Try Operating the Editor View

Right now, the rectangle is stuck in the top-left corner, which doesn’t look great.
The Editor View (the central panel) is a preview of the scene, so let’s adjust how things appear there.

This corresponds to the “View in the center” step of the principle:
“Select on the left, view in the center, adjust on the right.”


Zooming In and Out

  1. First, try zooming in and out of the preview.

    • With the editor view selected, scroll your mouse wheel.

    • Scrolling forward zooms in, scrolling backward zooms out.

    • The current zoom level will be shown in the top-left corner of the editor view.


Moving the Preview

  1. Next, move the position of the preview.

    • With the editor view still selected, press and hold the middle mouse button (wheel click).

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

    • While holding the button, drag the mouse to move the preview around.

  2. Using zoom and pan together, adjust the view so that the blue rectangle (the game screen area) fits nicely around the green and red crosshair lines (this point is called the origin).

    • The white rectangle created by the ColorRect node currently sits in the top-left of this blue area, which is why it showed up there in the test play.

Moving the White Rectangle

Now, let’s move the white rectangle so that it appears in the center of the game screen.

  1. Click the ColorRect node to select it.

  2. At the top of the editor, switch to Move Mode (W).

  3. In this mode, you can move the position of the selected node.

    • Left-click and drag the rectangle in the editor view to place it in the center of the blue rectangle (the game screen).

  4. Run a test play again by clicking Run Current Scene (F6) in the top-right menu.

  5. If the move was successful, the rectangle should now appear near the center of the game screen.

Changing the Color of the White Rectangle (ColorRect) in the Inspector

Right now, the ColorRect node is plain white. However, one of its functions is that you can change its color. Let’s try switching it to a different color.

This corresponds to the final step of the principle:
“Select on the left, view in the center, adjust on the right.”


Steps

  1. In the Scene panel on the left, select the ColorRect node.

  2. Look at the Inspector panel on the right. You’ll see a list of many settings.

    • These settings represent the functions available for the selected node.

    • Each setting is called a Property.

    • In our roller coaster analogy, these would be things like the maximum speed or the color of the coaster cars that you can adjust.

  3. The property we’ll change is easy to find: at the very top, look for Color.

  4. A color picker window will appear. There are several ways to set colors, but the simplest is the default RGB mode.

    • RGB stands for Red, Green, Blue.

    • A monitor creates all colors by mixing light from these three colors.

    TIPS: You might wonder, “Wouldn’t mixing all three colors make black?”

    • That’s true for paints, but here we’re working with light.

    • When two lights overlap, their brightness doubles, making the result lighter.

    • This way of mixing colors is called additive color mixing.

  5. As a test, change the R (Red) value from 255 to 0.

  6. In this way, Godot lets you customize nodes by adjusting their properties in the Inspector on the right.

Adding a Node to Draw an Image in the Scene

Next, let’s dive deeper into working with nodes.

What happens when you place multiple nodes in a scene? Let’s try it out.

This time, instead of just a rectangle, we’ll place an image. To do this, we’ll use Sprite2D, a node that displays 2D images (sprites).


Adding a Sprite2D Node

  1. In the Scene panel on the left, select Node2D.

    • This is important because any newly added node becomes a child node of the currently selected node.

    • A child node is a node that belongs to a parent node.

    • Using the roller coaster analogy: wheels and seats are smaller parts (child nodes) that belong to the main coaster car (parent node).

    • Since we don’t want Sprite2D to be a child of the ColorRect, we select Node2D instead.

  2. With Node2D selected, click the “+” (Add Child Node) button at the top left.

  3. In the search bar, type Sprite, then select Sprite2D.

  4. Click the Create button.

    • You’ll now see Sprite2D appear in the Scene panel…

    • But nothing seems to have changed visually.

    • That’s because we haven’t yet told it which image to display.


Setting the Texture

  1. Following the principle “Select on the left, adjust on the right”, select Sprite2D in the Scene panel, then look at the Inspector panel on the right.

  2. The property we need is right at the top: Texture.

    • A texture is like a sticker or pattern that you attach to objects in your game.
  3. Click the box labeled next to Texture.

  4. A file selection window will open. You should see just two items:

    • A folder named AGMaker

    • An image file named icon.svg
      These are automatically created when you first make a project in ACTION GAME MAKER.

    :warning: Note: What you see here is the same as what appears in the FileSystem panel at the bottom left.

    • Files like test_scene.tscn don’t appear here because they are not images and are filtered out.

    In Godot Engine, you can only use assets stored in the project’s FileSystem.

    • You cannot directly load files from anywhere on your PC.

    • Just like with the amusement park analogy, materials must first be brought into the project’s warehouse (FileSystem) before they can be used.

  5. For now, select icon.svg.

    • You should see the icon appear at the top-left corner of the blue rectangle, where the red and green crosshair lines intersect.

    • Congratulations — you’ve successfully applied an image (icon.svg) as a texture to the Sprite2D node.

Learning About Node Drawing Order

In the Scene panel, select Sprite2D. Then, using Move Mode in the editor view, drag it so that it overlaps with the light blue rectangle.

You should see the image displayed on top of the light blue rectangle. This is because in Godot, nodes that are lower in the Scene panel are drawn in front of those above them.


Changing the Order

Let’s try changing the order to see how it works:

  1. In the Scene panel, click and drag Sprite2D.

  2. Place it between ColorRect and Node2D.

Now, the light blue rectangle is drawn in front of the icon.


Key Rule

In Godot:

“The lower a node is in the Scene panel, the closer to the front it will appear in the game.”

Learning the Concept of Child Nodes

Earlier, we mentioned something called a child node. Now let’s see what this actually means in practice.

This time, we’ll make Sprite2D a child node of ColorRect.


Steps

  1. Click and drag Sprite2D, then drop it onto ColorRect in the Scene panel.

  2. The display should change as follows:

    • Sprite2D now appears slightly indented and positioned under ColorRect in the Scene panel.

    • This indicates that it has become a child node of ColorRect.

  3. Since child nodes appear below their parent node in the Scene panel, and following the rule “nodes lower in the Scene panel are drawn in front”, the Sprite2D is still drawn in front of ColorRect in the scene.

  4. Now let’s test what happens when the parent node (ColorRect) is moved.

  5. In the Scene panel, select the ColorRect node, then switch to Move Mode in the editor view.

  6. If everything is set up correctly, moving ColorRect will also move Sprite2D together with it.

  7. By making a node into a child, you can group it as part of its parent and operate them together — in this case, treating Sprite2D as an accessory of ColorRect.

「いいね!」 1

Chapter 1 Review

Now you’ve learned the basic concepts and operations of Godot.
In Chapter 1, by creating and manipulating nodes, you learned these key points:

  • In Godot, you build games by placing nodes inside scenes.

  • The interface follows the rule: select on the left, view in the center, adjust on the right.

  • In the Scene panel, nodes lower in the list are drawn in front on the game screen.

Next, it’s finally time to make things move like a real game using something called scripts — in other words, making your attractions playable.

However, in Godot Engine, scripting normally requires programming knowledge. To bring your project to the point where it truly becomes a game, you would need to gradually study programming from the basics, which takes a lot of time.

But don’t worry! With ACTION GAME MAKER’s visual scripting system, you can start building your game right away — no prior programming knowledge required.

That’s exactly why ACTION GAME MAKER exists: for people who don’t know programming but still want to create games with Godot.


Coming Up: Chapter 2

In Chapter 2, let’s begin learning how to use ACTION GAME MAKER’s Visual Script.

:backhand_index_pointing_right: Read more here