This tutorial walks you through building a very simple platforming game from scratch, so that you can learn the basics of making games with ACTION GAME MAKER.
It assumes that you have already finished the “Screen Tour” Tutorial that appears when you launch ACTION GAME MAKER for the first time. If you have not done it yet, or if you skipped it, please try the “Screen Tour” Tutorial from the Tutorial button on the launcher first.
The Setup window will open. Set the Font Size and the Display Scale (the size of the UI). If you leave the display scale on Auto, it will pick a size that fits your screen. Once you are done, press “Next Step”.
Next you can choose a theme color. If you prefer dark themes, pick Default, AGM Dark, or AGM Midnight; if you prefer light themes, pick AGM Light, AGM Cream, or AGM Mint. Choose the color you like, press “Finish”, and you are all set.
The “Create New Project” window appears, so change the project name. (We will call it “Platform Tutorial” here, but any name you like is fine.) Since we are making a platform game with the official assets, you can leave the other settings as they are. Press the “Create” button.
The screen shown right after startup is the map view, so let’s go ahead and build a map here. If you have not clicked on anything, “Base” should be selected in Map Layers, and something called a Palette should be displayed below.
This “Base” is a TileMapLayer, a node for painting tiles, and the Palette is the space that shows the tiles you can paint with. No tiles are registered yet, though, so let’s add some.
Click the tile settings button on the bottom panel.
The “Tile Palette Settings” window opens. This is where you set up tile images and so on, but we have no images yet. Click the “Import official assets” button in the upper right.
The list expands and shows a variety of images. Click the checkbox to the left of AT_B_001_soil_00.png to put a check on it, then press the “Import” button.
Let’s start painting right away. In the Palette, the “Pen” tool should be selected and a tile image should be selected too, so you can paint directly on the screen above.
Move the mouse cursor over the screen above and a grid area appears. Click, and a tile should be placed at that spot.
Drag, and you can paint tiles as if you were drawing with a pen. These are autotiles, so their shape changes automatically depending on how you paint them. If you paint something by mistake, you can erase it with a right click.
Check whether “Base” is correctly selected in Map Layers, and whether “Pen” is properly selected in the palette tools. Also make sure you have not enabled “Eraser” by accident.
Also check that the toolbar for the preview screen at the top is correctly set to (Select Mode). You cannot paint in Move Mode, Rotate Mode, or Pan Mode.
Once you have finished painting, press the button (Run Project) in the upper right. A test play starts up, and the island you made should be displayed.
Just to be safe, let’s check that it was loaded properly. Switch “Folder” to “Graphics” and player_meika.png should be there. If it is not, import it again.
The “Create New Game Object” window opens, so set the object name to “Player”. You can leave everything else at its default, but if anything differs, set it up like the image below and press “Create”.
A window asks whether to automatically configure the default movement input, so press “Yes”. This automatically sets up the keys for controlling the character with a gamepad or keyboard.
The image is loaded. What you see on the right is a preview of the animations to be loaded — 1. Idle through 6. Shoot are loaded automatically. What you see on the left is the wall collision (light blue rectangle), the hit collision (blue rectangle) and the attack collision (red rectangle), but they do not match the image, so they need to be adjusted by hand.
This template is a parkour action template with 19 different animations. By switching the template field you can automatically load and configure all 19. We will not use them in this tutorial, so we are using the minimal template that uses only 6 of the animations.
Adjust the wall collision (light blue rectangle). The wall collision is the area that detects collisions with tiles and other objects.
Move the □ handles at the four corners of the light blue rectangle to fit the character. Roughly right is good enough, but be careful to align the feet neatly — otherwise the character will float above the ground or sink into it.
Adjust the hit collision (dark blue rectangle). The hit collision is the area that gets hit by enemy attack collisions, so make it slightly larger than the wall collision.
Finally, adjust the attack collision. Since this is a platformer game, let’s make the attack collision appear only at the character’s feet.
Here is one important point: in an action platformer you can normally attack while jumping or falling, but not during other movements. So uncheck Enabled so that it becomes Attack Collision (Disabled).
The look of the animation changes and the collisions are now displayed. On this screen you can change the position and size of each collision for every “frame” shown at the bottom.
Select “jump” in the animation set field. If you set things up correctly during the import, the attack collision at the feet should be transparent (disabled) rather than red.
Now the attack collision at the feet is red and enabled during a jump. The in the upper left lets you preview the collision movement together with the animation.
Next, select “air” in the animation set. “air” is the animation used for the falling state, so attacks need to be enabled here too. Repeat steps 4~7 and enable the attack collision on frame 1.
If “Player” is under the base layer and the character image appears inside the purple frame, you are good. If it is outside the frame, drag and drop it into place.
Try pressing the test play button in the upper right — the tiles and the character image should be displayed. However, there is no program yet, so nothing moves at all. Let’s keep making.
The screen switches to the visual script. The rectangular boxes are called “states”, and each one represents a condition the player is currently in — walking, jumping, and so on. You build a visual script by connecting these “states” with things called “links”.
Let’s test play with “Run Project”. The character now moves, and flips automatically when going left. However, since there is only the idle motion, it looks like the character is sliding. Next, let’s build a walking state.
The “Move” state now exists, but we still have to set the condition for what has to happen to go from “Idle” to “Move”. Let’s set it up using a “link”.
The “Input Condition Settings” window opens. In the left column choose “Four Any Input Keys”, and in the right column set the left key to “left” and the right key to “Right”, then press the “Add” button.
Now it transitions from Idle to Move “while left or right of the four directional keys is held down”. Next, let’s make the opposite link, from Move to Idle.
The switch from Move to Idle happens when the movement input stops, so turn on “Trigger On No Input” in the Inspector. Now it transitions from Move to Idle once there is no input.
Part 4-4: Let’s Build the “Jump” and “Fall” States!
Next, let’s build the stars of a jump action game: jumping and falling.
Something like this sounds right: from Idle or Move, jump when the jump key is pressed; flip to falling once the jump reaches its peak; and return to Idle on landing.
Right-click anywhere, choose “Add State”, name it “Jump” and assign “jump” in the animation category.
In the left column select the registered key used for input, set the input key to “A” and the input condition to “Moment Pressed”, then press “Add”. Now the character jumps only at the moment A is pressed.
We also want to jump while moving, so let’s make a Move-to-Jump link too. The condition is the same this time, so let’s copy it. Right-click the “Idle” → “Jump” link you just added and choose “Copy” (the Ctrl+C shortcut works too).
Next, let’s make the falling state. Create a new state next to Jump, name it “Fall” and select “air” in the animation category. This one only falls, so no action settings are needed.
Connect a link from “Jump” to “Fall”. This time the condition is not an input but “when the jump reaches its peak”. For conditions like that, use “Conditions”. Click the “+ Add Condition” button.
There are a lot of conditions listed, but select “JumpHeightReached” (the jump has reached its peak) under “Object Control” in the left column and press “Add”. (We will not touch the settings to the right at this time.)
Finally, let’s make the transition from Fall to Idle. Connect a link from Fall to Idle. This is “when the character lands on the ground”, which again is not an input condition, so we use a condition. Press “+ Add Condition”.
Landing can be rephrased as “colliding downward with a tile, an enemy, or something similar”, so in the left column select “ContactWithBody” (contact with something that has a collision box or tiles) under Object Control.
In the right column, select “Bottom” as the incoming contact direction. Now the character transitions to Idle whenever it collides with something under it.
Let’s test play. If everything is set up correctly, pressing Z on a keyboard or A on a controller (B on a Nintendo layout) makes the character jump, and it returns to Idle on landing.
Enter “Enemy” as the object name, set the Object Group to “Enemy”, the Collision Template to “Standard Enemy”, select “Sideview Walking Enemy”, and click the “Create” button.
A crab-like enemy will be loaded. As mentioned in the template description, this is a simple enemy object that moves left and right and disappears when its HP reaches 0. Save it using the save button at the top or the Ctrl+S shortcut.
It functions as an enemy as is, but if you jump on it, the player also takes damage. This happens because there is a delay before the enemy disappears, allowing the player to remain within the enemy’s attack range during that time.
You need to adjust it so that the player is knocked up when stomped, preventing damage from being taken.
First, the attack hitbox is too large, so let’s adjust it. Select the Attack Collision in the left list and reduce the size of the red attack preview box in the red preview screen downward to about half its size. This should prevent the player from taking damage simultaneously when using the stomp attack.
Name it “Damage”. Since there is no animation to assign, check the box for “Maintain Previous Animation”. This ensures the animation in use before the transition continues as is.
Select Object Operation > Set Object Velocity, and configure:
Set “Y Operation” to “Set”
Set “Velocity” for Y to -300
Set “Movement Target Type” to “Last Contacted Object”.
This will cause the last object that came into contact with the attack collision or wall collision to be knocked upward at a speed of 300 pixels per second.
Select Object Operation > Contact with Object Attack Collision, and configure:
Contact Direction: Top
Object Spec Type: Object Group
Target Object Group: Player
Now, the state will transition to Damage when stomped from above by the player.
Press the “” button in the top right or the F5 key. When test play starts, collisions such as wall collisions, attack collisions, and hitboxes will be visualized, as shown in the image below.
First, check if the red attack box is displayed under the player’s feet while jumping. If it is not displayed, check Part 3-4: Enable Attacks Only During Jump/Fall. チュートリアル: ツクールモードでジャンプアクションをツクろう！ - Moonling の #2
If it is displayed but the knock-up doesn’t happen, the visual script is not set up correctly. Re-check if the link from Walk to Damage is correct and if the settings inside the Damage state are correct.
・Knocked up when stomped, but the enemy doesn’t fall
Check if the link from Damage to Dead is set up correctly. It should have the condition “HP reaches 0” set.
A window to add settings will appear. Select and add “Camera Target” from the Target and Direction options. As the name suggests, this node is used to set the object that the camera follows.
The Camera Target node is added and automatically selected. In the Inspector window on the right, enter “Player” in the “Target ID” field. Note: This field is case sensitive, so the P must be uppercase.
Once selected, look at the Inspector on the right. You should see “Player” listed under “Target ID.” If it isn’t there, change it to “Player.” This configures the camera to follow any object with a “Camera Target” node that has the Target ID “Player.”
Check if the Player has a Camera Target node and if the Target ID is correctly set to “Player.”
Check if the Initial Camera node’s Target ID is set to “Player.”
Since jumping makes the player appear in the dead center, limiting the visible area, let’s adjust it. Look at the Inspector for the “Initial Camera” node. There is an “Offset” field; set y to -20. This moves the camera center 20 pixels above the target.
Test play again by clicking [] in the top right or pressing the F5 shortcut key. The camera should now be slightly above the player, making it easier to see.
Once placed, perform a test play. Check if the player can jump to each platform. If you fall off a platform, press [F5] to restart. Note that you can delete tiles by right-clicking and dragging.
Add enemies. Switch the tab in the Map List Dock to the Objects list.
The clear condition for this game is defeating 5 enemies. Since one is already placed, add 4 more enemies. Drag and drop enemies from the Object List Dock to place them. You are done when you have placed 5 enemies into the Base Layer.
As a precaution, test play to ensure everything works correctly.
If the stage widens and you want to adjust the movement speed of the character:
Double-click the Player from the “Object” view,
and select “Movement and Jump.”
Once loaded, return to the “Map” view and switch the Map List Dock in the top left to “Images.” You should see new images like B_001_plain_01, 02, 03, etc. These are the background images you just imported.
In the Map Layer, select “Sprite2D”, which is a child of the “Distant View” layer. Sprite2D is a node for displaying images, but currently, nothing is displayed. Check the Inspector; the “Texture” field is empty. Texture refers to the image to be displayed, so this means no image is specified. Let’s specify an image. Click the folder icon (Quick Load) to the right of Texture .
A window to choose an image for the texture will appear. For this step, we need a far background image, so select the blue sky image named B_001_plain…
You can also go back one step using the Ctrl+Z shortcut key.
Next, set the middle ground. Select the Sprite2D which is a child of the Middle View, and use Quick Load in the Inspector’s Texture field. Since the middle view is the inbetween layer, choose an image of distant mountains. The name is cut off and a bit confusing, but select the mountain image named B_001_plain…
The mountains are now visible, but the clouds in the blue sky are hidden. Let’s raise the position of the blue sky. Set the offset of the far background Sprite2D to y=-360.
Why does it look perfectly stacked in the editor but is misaligned in the game?
In Action Game Maker maps, the background nodes have a “Parallax Background” feature enabled by default. This feature creates a 3D effect by changing the speed at which the background moves according to the camera’s movement.
If you move or jump, you should notice the foreground (near layer) moving faster and the background (far layer) moving slower, creating a sense of depth.
To achieve this parallax effect, the background automatically shifts and displays based on the camera’s position.
This time, select the “Distant View” layer itself, not the Sprite2D.
Look at the Inspector. There is an “Repeat” field; expand it to find “Repeat Size” and “Repeat Count.” Set both to x=720 and Count=5. This ensures that the same 5 images are always displayed across a width of 720 (= the width of the B_001_plain… image you set).
The repeat count is simply the number of times the image is displayed internally in the game at once. Regardless of this setting, the images will repeat infinitely.
Do the same for the “Middle View” layer and the “Near View” layer. Set “Repeat Size” to x=720 and “Repeat Count” to 5. This should eliminate gaps and display the background continuously.
Things look quite a lot like a game by now, but there is still no clear condition and no way to be defeated, so it is not really a complete game yet. Let’s finish it off.
Part 7-1: Let’s Make “Getting Defeated” When You Take Damage!
Let’s make the game restart automatically when the player runs into an enemy or falls off the stage. We will start with running into an enemy.
Go to the “Object” view and press the player’s “Edit Visual Script” button.
The player’s HP is set to 1 as its initial value, so “HP has reached 0” can be used as the condition for transitioning to “Defeated”. However, the transition to “Defeated” can happen from any state — Move, Jump, Idle, or Fall. For cases like this, you can use “Any State”. Just as the name “Any State” suggests, if you draw a link from it, the transition happens from any state as long as the condition is met.
Now, from any state, the game should transition to Defeated and reset once “HP reaches 0”. Test play with “” or the F5 key and try running into an enemy.
Part 7-2: Let’s Make “Getting Defeated” by Falling!
This one is a little more involved, but you can do it by “limiting the camera’s movement range” and transitioning to “Defeated” when the player “goes off screen”. Let’s set up the camera first.
Go back to the “Map” view and select “Initial Camera” in the map layers.
In the Inspector, expand Limit and change the “Bottom” value to 300. A yellow-green horizontal line should appear on the preview screen — that is the range the camera can move in. If any platform you made is below the yellow-green line, increase the “Bottom” value to 500 or 1000 as needed.
Now “my HP has reached 0” OR “I went outside the camera range” should put the player into the defeated state and reset the game. Test play and try falling off a platform. If it is set up correctly, falling resets the game.
You can switch between [OR] and [AND] by clicking the [OR] icon.
If it does not work
The camera keeps following even when you fall: review whether the map’s initial camera bottom limit is set correctly.
Falling does not reset, and running into an enemy no longer resets either: check that the logical condition is correctly set to “OR”. With “AND”, the game only resets when you fall while your HP is 0.
We decided at the start that the clear condition would be defeating 5 enemies — but how do we actually do that? We use something called a “variable”.
We create a variable called “Enemy Count” with an initial value of 0, and then increase it by 1 every time an enemy is defeated. After 5 enemies the value should be 5, so it looks like we can just set things up so that “Clear” happens when the variable “Enemy Count” becomes “5”.
Part 8-1: Let’s Make the Project Variable “Enemy Count”!
Click the “Configure Variables / Switches” button at the top of the visual script screen.
A new window opens, so switch to the “Project Variables” tab. There are two kinds of variables: “variables” that each object has of its own (HP, attack power, and so on), and “project variables” that are shared across the whole game. For our “Enemy Count”, a project variable is more appropriate than a per-object variable.
“Project Variable 001” appears, so rename it to “Enemy Count” in the input field in the upper right. *If you see “Variable 001” here, you are on the wrong tab — switch to “Project Variables”.
Part 8-2: Let’s Build a UI So You Can See the “Enemy Count” on Screen!
We have the project variable “Enemy Count”, but as things stand there is no way at all to see it in game. Let’s build a UI that shows it on the game screen.
UI is built on the “UI” layer that every map has. Anything placed on this layer is always displayed at the same position on the screen, regardless of where the camera is.
Switch to the “Map” view and press the + button next to “UI” in the map layers.
Next, press the “Insert a Value” button above the Text field. The Insert a Value window appears, so open the list in the Name field (which shows “Player_Count”) and change it to “Enemy Count”.
The enemy count is now displayed, but the text is small, so let’s make it bigger. Click the empty field under “Label Settings” below the Text field and add “LabelSettings”.
Let’s test play. If “Enemies: 0” is displayed in the upper left of the screen, it worked. If something like “project.Enemy Count” is displayed, something went wrong during insertion, so insert the value again.
Part 8-3: Let’s Increase the “Enemy Count” When an “Enemy” Is Defeated
We can display the enemy count now, but there is no way to change the number.
Let’s make the project variable “Enemy Count” increase by 1 when an “Enemy” is defeated.
Go back to the Object view and double-click Enemy to open it.
Select the “dead” state, which handles the Enemy’s defeat. Four actions are already set, but let’s add one more. Press the “+ Add Executable Action” button.
Select “ChangeObjectProperty” under Switch/Variable. This action can change all sorts of values. First, set the target in the right pane:
Target Object Type: Project Database
Database Type: Project Variable
Record Name: EnemyCount
That sets the target to EnemyCount.
Next, specify how the value of EnemyCount should be changed. Expand the operator / assignment source and enter
Target Operator: +=
Assign Const Value: 1.0
then press “Add”.
So now the [dead] state performs += 1 on the project variable “EnemyCount”… except that, as things stand, it will not actually work. Why?
Look at the executable actions. When there are several executable actions, they run in order from the top — and the “ChangeObjectProperty (Database | Enemy…)” you added is number 4, while number 3 is “RemoveSelf”. In other words, the object disappears before the enemy count is changed, and processing is interrupted. We need to reorder them.
Click the [≡]-like button on the left of 4 “ChangeObjectProperty (Database | Enemy…)” and drag it up so it comes right after “Property | disable~~”. It is fine once it reads 1 “ChangeObjectProperty (Database | Enemy…)”.
The project variable “EnemyCount” now increases as you defeat enemies, but we still need to make “Clear” happen when it reaches 5.
This time, let’s display the text “CLEAR!” from the player object.
Go back to the Object view, switch the object to Player (double-click) and open Edit Visual Script.
A font size of 12 is too small, so change it to 64.
After that, drag the handles to fine-tune the position. Once it is roughly in the position below, close it.
Let’s adjust the DisplayText action. Scroll the right pane down a little and you will find an “Unlimited Duration” checkbox, so set
Unlimited Duration to on.
By default the DisplayText action disappears after a certain time, but turning on Unlimited Duration keeps it on screen unless another action is performed to clear it. Once it is on, press “Add”.
Click “+ Add Condition”. To transition based on a variable, use “SwitchVariableChanged” from the variable group.
Set
Variable Type: Variable
Target Type: Project Variable
A field called Monitored Project Variable then appears, so press the “Settings…” button to its right.
The Variable / Switch Setting window appears, so choose “Enemy Count” and press “OK”. The variable is now specified, so next let’s set the condition’s comparison.
Set
Variable Condition: >=
Comparison Constant Value: 5.0
That creates the condition “when the project variable Enemy Count is 5 or more”, so press “Add”.
Everything should be ready now, so let’s test play. All that is left is to check whether defeating 5 enemies shows the clear… which is a lot of work, so let’s use the debug features. Click “Debug” in the menu in the upper left and click “Open AGM Debug Monitor…” in the submenu.
The display changes and object information for the player, enemies and so on appears. “Enemy Count” is a project variable, though, so switch to the “Project Variables” tab.
If the enemy count on screen becomes 5 and “CLEAR!” is displayed, everything is set up correctly. You have made a game where “stomping and defeating 5 enemies clears the stage”!
The project variable “Enemy Count” shows 5 on screen, but CLEAR! does not appear.
First, switch the AGM Debug Monitor tab to Object, click the object “Player”, and check the State > Main Layer part. That shows the player’s current state.
If the main layer says Clear…
The transition is working, so something is wrong with the behavior of the “Clear” state. Let’s check it.
If the main layer does not say Clear…
The transition to the “Clear” state is not working. Let’s check the link from “AnyState” to “Clear”.
Part 9: Let’s Finish the Game Off with Some Polish!
The game systems are done, but with no sound and no effects it feels a little plain.
Finally, let’s add sound and effects to finish the game off. We will start with sound.
Part 9-1: Let’s Add “Sound” to the Game!
Four sounds sound about right: the stage BGM, a jump sound, a sound for when an enemy is stomped, and a clear sound. Let’s add them, starting with importing the assets.
Go to the Assets view and press the “Import official assets” button.
Switch to the “Sounds” tab, select the following four and “Import” them.
bgm > Battle_pop1
se > Movement & Action Sounds > Jump1
se > Attack & Weapon Sounds > Blow1
se > Progress & Result Sounds > Stageclear1
Next, let’s set the clear sound and the jump sound on the player. These use visual script actions, so switch to the Object view and open the player’s visual script.
Part 9-2: Let’s Finish Up with “Effect” and “Particle” Polish!
Now that the sound is set up, let’s finish off with some polish using the “Effect” and “Particle” features.
An effect when you defeat an enemy and particles when you clear the game should make for nice polish.
First, let’s import an effect and a particle from the official assets. Go to the Assets view and click “Import official assets”.
Drag the orange crosshair in the “Preview” screen to just above the player. Fireworks go off every time you move it, so fine-tune while watching them, and once it is roughly in the position in the image below, press “Close”.
Effects can be adjusted in “Preview” just like particles, so press the Preview button and check. It looks like the position is already about right without changing anything, so just close it and press “Add”.
You should now have a basic jump action game, but as things stand only people who own ACTION GAME MAKER can play it. Let’s export it in Windows format so that people who do not own it can play too.
From the “Project” menu in the upper left, choose “Export…”.
A save-file window opens. Here you choose where and under what name to export the game you made. The location it opens by default is the project’s own folder, so let’s change it to a different folder.
For example, creating a “Platform Tutorial Export” folder in My Documents is a good idea.
Why is exporting inside the project folder a bad idea?
Everything inside the project folder is loaded when the project opens and when the game starts. In other words, having export files in there causes unnecessary loading, which can slow things down or cause problems.
It rarely becomes a serious issue, but it is best avoided just in case.
Once you have decided on the destination folder, enter “Jump Action Tutorial.exe” as the file name inside it and save. (You need to type the .exe as well.)
A progress bar appears for a moment and closes automatically — that means it is done. Open the folder you saved to in Windows. There should be two files: PlatformTutorial.exe and .pck. The .exe is the program and the .pck is the data; the two go together. If you distribute your game to someone, make sure to send both files.
Try launching the .exe file. Just like in a test play, the game starts up and you can play it. Your game is complete, at least for now — congratulations!
How was the tutorial?
It was probably a bit difficult, but you have now learned the basics of ACTION GAME MAKER: how to make a map, how to make an object, and how to build a visual script.
That said, you probably still have questions like:
How do I make a title screen?
How do I make that gimmick you see all the time?
How do I make a top-down game?
We have prepared advanced tutorials that cover these, so please take a look at those as well.
You can find the other tutorials in the table of contents!
(Select Mode). You cannot paint in Move Mode, Rotate Mode, or Pan Mode.
button (Run Project) in the upper right. A test play starts up, and the island you made should be displayed.
