In most computer games, the player adopts an avatar A.125.1, which can be seen as his digital image. The player can then move this avatar, interact with the game environment and put himself in the role of the story. This helps game developers A.43 to convey the message of the computer game. In this small article we will create a simple environment in Godot and implement an avatar. For this we first need an avatar in form of a graphic. As template I took a figure from my repertoire A.40.1. You may download it if you are developing a game and are not so good at creating pixel graphics.I won't get into the subject here very much and if you have more questions please visit the step by step tutorial of the Godot Engine project. There you will find this tutorial much more detailed and also with more screen shots. This article is for people who already have some experience with programming and the engine.
You can also use this avatar as a template and build your own idea on it. E.g. change the hair color or the skin color. A different gender or just no gender at all. The boundaries are set by your imagination. But we don't know what to do with a single image in a game environment. Because just like in a movie, our avatar moves in single frames.
We have to create these single frames for our avatar as well. There must be some unspoken animation rules somewhere that say how many frames a profile walk cycle must have. In the last few years I have found out that I can work best with seven individual frames. I like it when you see that this is a computer game and not a perfect animation. In order to use the frames in the game engine, we have to save them in single frames. I name the individual frames from
plr_07.png A.153.2.1 We create a new Project and rename the folder and choose a empty folder. We open a new project in Godot and under
Project > Project Settings > Display we set the display size of the game environment to
400 x 300 and under Stretch we set the mode to 2D and Aspect to keep. So that our avatar is not displayed blurry, we also read this short article A.153.1. In the next step we copy the single frames of the avatar. The Godot Engine updates itself automatically and then displays the individual frames in the FileSystem window. Now we create the Player Scene. In Godot it's best to create everything in single scenes, so you can test everything separately. We need a root node for our player object. We go to the Scene window and click on the Other Node button. We select the
Area2D node and rename it to
Player. To rename a node we simply double click on the node. Before we continue working with this node, we close it so that we don't accidentally change or delete it. We do this with the small seven pixel icon next to the lock icon in the menu bar of the big window. We save the Scene.
For our animation we need a child node in our player node. We click on the player node and add to AnimatedSprite node as a child. In the AnimatedSprite the single frames are managed. To load the frames we have to click on the
frames property > empty > New SpriteFrames in the inspector window. When we click a second time the SpriteFrames window opens. We rename the default animation to
walk and load our individual graphics. In order for our player to collide with other people and counter-attacks we have to create a hitbox. Therefore we create a child node of player with CollisionShape2D. After that we go into the Inspector window again and click on
empty > New RectangleShape2D. With the mouse wheel we can zoom in and out. With the small red dots we drag the turquoise hitbox over our whole avatar. You won't see that later in the game. Now we start scripting. In the Scene window we select the player node. On the right you see a small paper with a turquoise cross. We click on it to create a blank script. In the script settings window we leave everything as it is suggested. The lines with the hashtags are comments and will not be considered by the game engine later. We will use GDScript.
extends Area2D # Declare member variables here. Examples: # var a = 2 # var b = "text" # Called when the node enters the scene tree for the first time. func _ready(): pass # Replace with function body. # Called every frame. 'delta' is the elapsed time since the previous frame. #func _process(delta): # pass
First we will declare the member variables we will need for our game.
extends Area2D export var speed = 400 # How fast the player will move (pixels/sec). var screen_size # Size of the game window.
Especially when you learn a new programming language it is important to write comments about what you are doing. If you take a break in between the development of the game and after two weeks of opening the project it can happen that you have already forgotten everything that sman does. It's like streaming a computer game, which forgets to control the game as soon as you start a new game. In the
_ready function we call the
func _ready(): screen_size = get_viewport_rect().size
Now we have to collect the input of the players and the player position. We transfer it to the avatar.
func _process(delta): var velocity = Vector2() # The player's movement vector. if Input.is_action_pressed("ui_right"): velocity.x += 1 if Input.is_action_pressed("ui_left"): velocity.x -= 1 if Input.is_action_pressed("ui_down"): velocity.y += 1 if Input.is_action_pressed("ui_up"): velocity.y -= 1 if velocity.length() > 0: velocity = velocity.normalized() * speed $AnimatedSprite.play() else: $AnimatedSprite.stop() position += velocity * delta position.x = clamp(position.x, 0, screen_size.x) position.y = clamp(position.y, 0, screen_size.y)
After that we only have to select the animation. If we go with the avatar to the left the picture should flip. It will look better and more realistic in the later game.
if velocity.x != 0: $AnimatedSprite.animation = "walk" $AnimatedSprite.flip_v = false # See the note below about boolean assignment $AnimatedSprite.flip_h = velocity.x < 0
Here is the complete code how it should look like on your site. That's all we need to run our avatar and if you have tried it several times it's pretty easy.
extends Area2D export var speed = 400 # How fast the player will move (pixels/sec). var screen_size # Size of the game window. # Called when the node enters the scene tree for the first time. func _ready(): screen_size = get_viewport_rect().size func _process(delta): var velocity = Vector2() # The player's movement vector. if Input.is_action_pressed("ui_right"): velocity.x += 1 if Input.is_action_pressed("ui_left"): velocity.x -= 1 if Input.is_action_pressed("ui_down"): velocity.y += 1 if Input.is_action_pressed("ui_up"): velocity.y -= 1 if velocity.length() > 0: velocity = velocity.normalized() * speed $AnimatedSprite.play() else: $AnimatedSprite.stop() position += velocity * delta position.x = clamp(position.x, 0, screen_size.x) position.y = clamp(position.y, 0, screen_size.y) if velocity.x != 0: $AnimatedSprite.animation = "walk" $AnimatedSprite.flip_v = false # See the note below about boolean assignment $AnimatedSprite.flip_h = velocity.x < 0
With F6 or the Play Scene button in the upper right corner of our engine we can test the scene. What strikes us now is that our avatar moves with less frames than we want to. He is doing a moonwalk and is slow. This can be changed quite fast. Therefore we click on the AnimatedSprite node and enter the number 5 in the Inspector under Speed Scale and confirm this with the Enter key. Now our avatar moves at the right speed. So that our player can walk in the right place, we set the position anew. For this we click on the player node and look into the inspector. Under Node2D we find the position. In this position we change x and y to 50 each. We have to do this later with all the objects in our game. So we should learn quickly how to find and change this. Now the base of our first game demo is ready. From now on we should start to expand the game a bit. A.153.3