Tutorial: Graphics Course #1 – Backgrounds and Tiles

[GGG-Administrator]

This tutorial course is designed for those who want to start experimenting with their own images right away!

Before starting this course, we recommend completing the following introduction:
Tutorial: Tutorial: Beginner Course

In this course, we’ll be continuing with the same project used in the initial tutorial.
If you’ve deleted that project, please return to the initial tutorial and recreate the tutorial project before proceeding.

[GGG-Administrator]

STEP 1: Let’s Add an Image to the Stage

---

1. Download the following sample image:

---

2. Open your tutorial project.

---

3. In the [File System] window (bottom left), select the folder where you want to store the image.

You can also create a new folder by right-clicking in the file system.

---

4. Drag and drop the downloaded image from your file explorer into the selected folder in the [File System].

You should now see test_picture.png listed in the selected folder.

Note: This applies not only to images but to all types of assets—you must first import them into the File System before using them in your project.

---

5. Select any layer, then drag and drop test_picture.png from the [File System] onto the stage.

---

6. The image should now appear on the stage.

When placing image files such as PNGs, a node called Sprite2D will be automatically created and the image will be assigned as its texture.

---

7. About Sprite2D:

When you place an image file like PNG, a Sprite2D node is automatically generated.
A Sprite2D is a simple image node—it can’t perform actions, but it’s lightweight and ideal for things like stickers or background decorations.

[GGG-Administrator]

STEP 2: Let’s Change the Background

---

1. Next, let’s change the background image.

In the left [Scene] panel, you’ll notice three layers: DistantView, MiddleView, and NearView.
These three layers make up the background.
In this tutorial project, the background is split into three layers to create a parallax scrolling effect.

---

2. As in STEP 1, each of these layers contains a Sprite2D node.

This node holds the background image.
Select the Sprite2D under DistantView.
In the [Inspector] window on the right, you’ll see a property labeled Texture—this is the currently assigned image.

---

3. Let’s use one of the replacement background images included in the tutorial project.

In the bottom-left [File System] window, open the folder templates > backgrounds.
These are pre-made background images for each layer.

---

4. Open the 03_DistantView folder and drag B_004_snow_03.png into the Texture field from earlier.

---

5. You may notice that the background appears as a wide image, even though it’s a small vertical PNG. Why?

That’s because we’re using a special Godot node called Parallax2D to create a parallax background effect.
Each “View” node (e.g., DistantView) is essentially a renamed Parallax2D node.

Let’s take a look inside. Select the DistantView node.

---

6. In the [Inspector], you’ll see several properties.

Here’s a quick explanation of each:

Property	Description
Scroll Scale	Controls how much the layer moves in response to camera movement. Lower values move slower, making the layer appear farther away. Use values above 1 for foreground elements.
Scroll Offset	Adds an offset to the parallax effect. You can ignore this for now.
Repeat Size	Specifies how large the image should repeat. Usually set to the same size as the texture image. If you replace it with a custom image, be sure to update this.
Autoscroll	Automatically scrolls the layer in a set direction—useful for drifting clouds. In this example, it scrolls to the right at 3px per second.
Repeat Times	Sets how many times the background repeats. It expands from the center outward in the order: right, left, right, left.

---

Try adjusting these settings or replacing the images in the Middle and Near layers. Then test play your project to see the effects.
If you want to use your own custom image, follow the steps from STEP 1 to import it. Don’t forget to update the Repeat Size to match your image.

---

Note:

The backgrounds 002_forest and 003_cave are designed for indoor parallax scenes.
If you use them directly, the NearView may appear misaligned.

To fix this, change the Y position of NearView > Node2D > Transform > Position from 360 to -180.

[GGG-Administrator]

STEP 3: Let’s Add a New Tile

Now let’s create a new tile layer and try loading your own tile graphics.
If you don’t have any tile materials ready, feel free to use this sample tile:

---

1. Create a new node for the tile layer.

In the [Scene] window, select BaseLayer, then click the ＋ button.

---

2. In the node creation dialog, choose TileMapLayer.

Type “tile” in the search bar to filter the results.

Be careful not to select TileMap, which is an older, legacy node.

---

3. Select the newly created layer and assign a TileSet.

In the [Inspector] window, click the dropdown next to TileSet and choose New TileSet.

---

4. Click the TileSet to expand and begin configuring it.

• Tile Size: Match this to the size of your tile (e.g., 24px for the sample tile).
• Physics Layers: Add a new physics layer (click +) so tiles can have collision settings.

Without this, the player won’t be able to stand on the tiles.

This tutorial assumes square tiles, but you can change the Tile Shape to isometric or hexagonal as needed.

---

5. Switch to the TileSet panel at the bottom center.

This tab allows you to manage tiles.
Drag and drop your tile image from the [File System] into this panel.

---

6. A window will appear for tile slicing.

Confirm that the tile size is correct, then click “Yes.”

---

7. You’ll be asked whether to import as Auto Tile.

Since the sample and likely your tile isn’t designed for auto-tiling, choose No.
Auto-tiles will be covered in the next step.

---

8. Tiles will now appear, sliced into the correct size.

If something went wrong, use the trash can icon to delete and try again.

Next, let’s define the collision area (wall detection).
Switch to the Select tab and drag over all tiles to select them.

---

9. The tile settings panel will open.

Go to Physics > Physics Layer 0.
If you don’t see this, go back and make sure you added a physics layer in step 4.

---

10. Use the “Add Point” tool to click the four corners of each tile to define the collision polygon.

Click the last point again to close the shape. A red collision outline should appear.

Tips:

• Be careful when clicking the top-left corner—zooming in can help avoid misclicks.
• Use the blue arrow tool to move points, or the red “X” tool to delete them.
• If some tiles aren’t perfect squares, select them individually and adjust the points accordingly.

---

11. Switch the panel to “TileMap” view and begin placing tiles on your stage.

Pick a tile and click to place it.
Since collisions are defined, the player should be able to walk on them in test play.

In Godot, nodes lower in the Scene tree are drawn in front.
If you want to change draw order, drag the TileMapLayer up or down in the Scene window.

---

You’ve successfully created and configured your own custom tile!
However, setting each tile manually can be time-consuming.

In the next step, we’ll explore Auto Tiles to speed things up.

[GGG-Administrator]

STEP 4: Auto Tiles

ACTION GAME MAKER uses Godot’s Terrain system for its auto tile functionality.
More details:
https://docs.godotengine.org/en/4.x/tutorials/2d/using_tilesets.html#creating-terrain-sets-autotiling

This feature allows flexible creation of auto tiles, but in ACTION GAME MAKER, if you prepare your tile images in a specific format, they will be automatically loaded as auto tiles—no manual setup required.

Let’s try that feature now.

---

1. First, download the test auto tile image below and import it into your File System.

---

2. Just like in STEP 3, select the TileMapLayer where you want to load the tile.

The sample tile size is 24×24.
If you used a different size in STEP 3, you may want to use an existing layer like [Base].

---

3. Open the TileSet panel at the bottom center, and drag test_autotile.png from the File System into it.

As before, a slicing window will appear—click Yes.

---

4. Next, when asked if you want to load it as an Auto Tile, this time click Yes.

This will automatically configure:

• Collision detection (wall settings)
• Terrain settings (auto tile logic)
  And the tile will now be usable as an auto tile.

---

5. Switch the bottom panel from TileSet to TileMap and choose the “Terrains” tab.

You should see the newly created tile listed under something like Terrain_Set X → auto_tile_00.

If it doesn’t appear right away, try selecting a different node and then reselecting your TileMapLayer.

---

6. Select “Terrains” and try placing the auto tile.

You’ll notice the tile shape changes automatically based on its neighbors.
This sample tile clearly visualizes connection rules to help you understand how auto-tiling works.

---

7. You can create your own auto tiles in the same format, and it will work regardless of the tile size.

To help with this, here is a transparent auto tile template that you can use as a guide when designing your own:

---

Continue the Graphics Course here:

Tutorial: Graphics Course #2 – 2D Bone-Based Characters

In this course, you’ll learn how to modify the player object included as a sample. It focuses on the basic operations of 2D bone-rigged characters. As with the previous courses, this tutorial will u…