Let’s Add a “Node” to Depict an Image in a “Scene”
Next, let’s delve deeper into node operations.
When multiple nodes are placed, what is their positional relationship? Let’s try it out.
This time, instead of a simple rectangle, let’s place an image. We’ll use Sprite2D, a node capable of displaying images. This node is designed to display 2D images (sprites).
- In the Scene panel on the left, select Node2D. This is because newly added nodes will be placed as “child nodes” under the selected node. A “child node” is a node attached to its parent node. In the roller coaster example, smaller parts like wheels or seats inside the car body are child nodes. Since the Sprite2D we are setting up this time should be an independent entity, not an attachment of ColorRect, we keep Node2D selected.
-
With Node2D selected, click the + button in the top-left corner (Add Child Node).
-
In the search bar at the top, type “Sprite” and select the Sprite2D node.
-
Click the “Create” button. A Sprite2D appears in the top-left view, but nothing else seems to have changed. This is because no information has been set regarding “which image to display.”
-
Select on the left and configure on the right. Select Sprite2D in the left panel, and look at the Inspector on the right.
- The property that determines the displayed image is the topmost one: “Texture”.
A “Texture” is like a pattern or sticker applied to objects within the game.
- Select “” next to Texture. Many options will appear; click the “Load” button at the very bottom.
- A file selection window like the one below will open. You should see only the AGMaker folder and the icon.svg image. These two are automatically generated when creating a project with ACTION GAME MAKER.
Note that what is displayed here is the same as what appears in the “FileSystem” at the bottom-left of the screen. The file test_scene.tscn is not shown because it is unrelated to images and has been filtered out.
In Godot Engine, you can only use assets located within this “FileSystem.” You cannot directly select and use files from your computer. To work with assets, they must first be moved into the warehouse (FileSystem) of the construction site (project), like an amusement park.
- First, select the icon.svg already in the warehouse. An icon should appear at the top-left corner of the blue rectangle, where the red and green lines intersect. With this, you have successfully applied the icon image as a sticker to the Sprite2D node.
