[Tạo 2D Platformer Game với Godot] Part 3: Character Design

In this third part, we will proceed to design the character so that it can move, animate it.

In this part, it’s not too difficult, I will explain the code closely so that you can understand it more easily.

Tilemap

Before that, in the previous post, I showed you how to design the level, but that part we have not added CollisionShape to the tilemap.

So, now all you need to do is add it or else our character will fall to infinity because CollisionShape has not been added.

First, you go back to the Tileset section and then choose for yourself Collision.

After selecting, click 1 box below.

Then click on the square (the collisionshape square is next to the collisionshape polygon).

Then the square is green.

Then click on the box next to it twice and you will see that the cell we just selected has been filled with a collision shape.

Please continue to finish the Region we have selected.

Like I’ve finished filling here, because I only use these regions, I can only fill this one, not fill it all because it takes time + no longer uses it, so it’s a waste.

Character

About the character, you can download it at the following link: 3 Character Sprite Sheets

Here, I will use AnimatedSprite, not Spritesheet because this character Art is separated so I can’t use SpriteSheet.

Download & Install

You download and then go to the Assets folder to create a new folder named NhanVat (this is where the character art is located).

After that, you copy all the files from the downloaded zip file into the character folder

After you are done, the Editor will display like this.

Character creation

Coming to the most important part.First, to create a character you need to create a new scene by clicking the button on the image.

Here I do not add it to a scene like the image above because doing so will take time to redo.

Therefore, I create a new scene and can Instance (add the created scene to another scene) it into other Scenes quickly.

You add your own Root Node is Kinematicbody2D (This node is the node that Godot defaults to as the Node used to create characters because this Node contains functions to help us move.In addition to this node, there are also 2 types of Body Nodes. other are Rigidbody and StaticBody).

After that, I renamed the Original Node to Player and added 2 more AnimatedSprite nodes (I use it instead of Sprite because the art I downloaded has many Animations and is divided into many images, so I will use AnimatedSprite instead of Sprite) , CollisionShape2D.

You click AnimatedSprite in the Inspector panel select [empty] -> New SpriteFrames

Then click on the newly created SpriteFrames.

Then the AnimatedSprites tab will appear.

You will see the Animations column on the left is a list of Animations.

On the right are the frames of Animation.

I will change the default to dungyen by double clicking on it.

Next, I will select the button on the image to add the sprite.

Here, I am creating a stationary Animation so I will find the appropriate Animation. In here idle by standing still.

After that, a new table will appear and I will edit it properly.

You notice on the top left there are 2 adjacent lines are Horizon (horizontal) and Vertical (vertical) . You have to adjust it properly to select frames.

Here, my animation has 4 frames. Horizontally, it has 4 pictures so Horizon is number 4, Vertical is only 1 so Vertical will be number 1

Then you select each cell in order from left to right because it calculates the frame order in the order you choose. Then press Add Frame.

This will be the interface after adding.

Then you add the corresponding animations as shown on the table for yourself.

This is also an exercise for you.

Here, if you don’t know which photo to choose, I will say it below:

• run = run
• chet = deah
• jump = jump
• tancong = attack1

To run Animation, you can select Animation in the box Animation and tick Playing to run.

If your character is blurry like the picture, you need to Reimport 2D pixels again.

After Reimport our character will be sharper.