STEP 1: Create a New 2D Sprite Character Game Object
-
First, prepare an image for your 2D sprite character. If you don’t have one, please download and use the sample image below.
-
Drag and drop the image into the File System window to load it.
-
Create a new Game Object scene. Click the + button on the tab in the central Editor window to open a new tab. Then, select “Game Object” in the Scene window.
-
The Settings window will open. Configure it as follows:
Object Name: Set as desired.
Template: characters
Template Type: 2DSprite Character Base
Group: Player
Objects to be manipulated by input devices: On
-
A Game Object scene with basic settings applied will be generated. First, save it. Right-click the unsaved tab or use the Ctrl+S shortcut to save it to your desired location.
-
Load the character image. Click “Sprite2D” in the Scene window.
-
In the Inspector window, drag and drop the character image loaded in step 2 from the File System into the “Texture” field.
-
The character has been loaded, but the sprite sheet should be displayed as is. Let’s split it.
-
Set “Animation > Hframes, Vframes” in the Inspector window.
Hframes: The number of frames arranged horizontally. For the sample image, set this to 5.
Vframes: The number of frames arranged vertically. For the sample image, set this to 4.
-
Try moving the “Frame” setting below one by one. If split correctly, it should play frame-by-frame starting from 0. Note that in Godot, as a general rule, the first piece of data starts at 0. Frame 7 corresponds to the 8th frame, so there will be an offset of one. Please be aware of this.
-
Next, adjust the collision shapes which are currently too large. Select “CollisionShape2D” in the Scene window. You should be able to select the light blue rectangle. This is the wall collision used to detect collisions with the ground or enemies.
-
Adjust the wall collision to match the character’s size. Select the points at the four corners and move them to adjust the size.
-
Next, adjust “HitCollision” in the same way. This is the hitbox used to detect collisions with attacks, so it is recommended to set it slightly larger than the wall collision.
-
Finally, there is “AttackCollision”. This indicates the attack range, but its handling varies greatly depending on the animation created, so for now, let’s disable it. Select “AttackCollision” and turn on “Disabled” in the Inspector.
The “AttackCollision” has turned gray. If it still feels obstructive, you can also hide it by clicking the
icon on the right side of “AttackCollision”.
-
Once completed up to this point, save the tab by right-clicking it or using Ctrl+S.
TIPS: Hidden vs. Disabled
You can toggle visibility using the icon in the Scene window, but this only controls how things appear in the editor. Simply hiding an object makes it invisible, but it continues to function. If you want to stop its operation, disable it in the Inspector or delete the node.