Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Carlos Armando Marcano Vargas
Carlos Armando Marcano Vargas

Posted on • Originally published atcarlosmv.hashnode.dev on

     

Building a 2D Platformer Game with Godot. Part 1

This article is the first part of a series about building a 2D platformer game with Godot. In this article, we will cover how to install Godot, create a scene, a node, and a player.

We will use as assets for our game, the Sunny Land pixel game art created by Ansimuz, you can download it fromhere.

We have to download all these assets.

Requirements

  • Basic programming knowledge (variables, functions, loops, IF statement).

Godot

The README page says,Godot Engine is a feature-packed, cross-platform game engine to create 2D and 3D games from a unified interface**.** It provides a comprehensive set ofcommon tools, so that users can focus on making games without having to reinvent the wheel. Games can be exported with one click to a number of platforms, including the major desktop platforms (Linux, macOS, Windows), mobile platforms (Android, iOS), as well as Web-based platforms andconsoles.

Godot is completely free and open source under the very permissiveMIT license. No strings attached, no royalties, nothing. The users' games are theirs, down to the last line of engine code. Godot's development is fully independent and community-driven, empowering users to help shape their engine to match their expectations. It is supported by theSoftware Freedom Conservancy not-for-profit.

Installation

To install Godot, we navigate to thispage. Press "Download latest", by the time I'm writing this article, is version 4.0.3.

After we download the Godot folder, we execute the following file:

Creating a New project

The Godot windows will open and we click on "New project".

That button will open a new window where we will have to give a name to our project and select a renderer.

After naming the project, we click on "Create folder", then we choose a renderer, I will choose "Compatibility". Finally, we click on "Create & Edit".

The following windows will open, and it will be set to develop 3D games. We select 2D, to create a 2D scene:

Then, we will take all the assets, we previously downloaded and add them to our project.

Creating a Scene

We need to create a scene first, so we click on "2D scene".

I will stop right here for a moment and explain, what scenes and nodes are.

Nodes

As dedocumentation says, nodes are fundamental building blocks for creating a game. A node can perform a variety of specialized functions. However, any given node always has the following attributes:

  • It has a name.

  • It has editable properties.

  • It can receive a callback to process every frame.

  • It can be extended (to have more functions).

  • It can be added to another node as a child.

../../_images/tree.png

Nodes can have other nodes as children. When arranged in this way, the nodes become a tree.

In Godot, the ability to arrange nodes in this way creates a powerful tool for organizing projects. Since different nodes have different functions, combining them allows for the creation of more complex functions.

Scenes

According to the Godot documentation, a scene is composed of a group of nodes organized hierarchically (in tree fashion). A scene always has one root node, can be saved to disk and loaded back, and can be instanced.

Running a game means running a scene. A project can contain several scenes, but for the game to start, one of them must be selected as the main scene.

The Godot editor is a scene editor. It has plenty of tools for editing 2D and 3D scenes as well as user interfaces, but the editor is based on the concept of editing a scene and the nodes that compose it.

Then, a Node2D will be created, we need to give it a name. This node will be our parent node, so, I will name it "World".

In this node is where we will put our world assets, like the ground and background. It will be the parent node of the player node, enemies nodes, etc.

Now, let's add some props to this node. We go toFileSystem and click onSunny-land-assets-file, then we go toPNG/environment/props, selectbig-create.png, and drag it into the scene.

If we click on the big create, we can adjust its dimension.

And if we press ctrl + D, we can create duplicates of this node.

We click on the big crate in the scene and drag it to any direction, to see the duplicates.

We pressctrl + S to save this scene. We have to save the scene every time we create one and change one, so we don't lose the changes we make.

Creating a Player

To create a player, we have to create another scene.

We press on the plus symbol, to add a new scene.

Then, we select "Other Node.

Godot we ask to choose the kind of node we want to create, and we choose "CharacterBody2D" and press the "Create" button.

After theCharacterBody2D node is created. Godot will tell us that we have to create a collision shape for theCharacterBody2D node.

So, again, we create another child node, and select "CollisionShape2D". This node also must be a child node of the Player node.

After theCollisionShape2D is created. Godot will tell us that we have to select a shape.

We go to theCollisionShape2D panel, and we select a shape.

We select "New CapsuleShape2D".

After the collision shape is selected, a capsule form will appear in the scene window.

Now, we pressCtrl + S, to save this scene asplayer.tscn .

Now, is the moment to select the sprites. We have to create another node and select "AnimatedSprite2D".

We have to select "Sprite Frames" in the right panel where it says "AnimatedSprite2D".

And we select "New SpriteFrames".

Then, we click on "SpriteFrame", and it will appear theResource tab. And the Animation section below.

We go to theFileSystem section a look in the "Sunny-land-assets-file" folder for thePNG/sprites/player folder.

We create a new animation, we rename the "default" animation to "Idle".

In theSunny-land-assets-file/PNG/sprites/player/idle folder are 4 images. We drag them and drop them in theAnimation Frame section.

For this game, I think is necessary to add 3 animations more, a run animation, a jump and a death animation. InSunny-land-assets-file/PNG/sprites/player folder, there are folders for the animation we want to create.

In theAnimation Frame section, we click on theAdd Animation button.

We rename the "new_animation" to "Jump". And look at theSunny-land-assets-file/PNG/sprites/player/jump folder for the 2 images in it, and drag and drop them in the "Jump" animation section.

We have to repeat the same steps for the run and death animation. The death sprites are in theSunny-land-assets-file/PNG/sprites/player/hurt folder.

We will create moreCharacterBody2D nodes, so we renamed this one to "Player" to differentiate it from the others.

Now, we add a script for this node. A script is where we define the behavior of a node. For instance, the behavior of thePlayer node is its velocity, how high it can jump, its direction, etc.

We click on the "Add new script" for thePlayer node.

We keep the Template selected. This is a new feature in Godot 4.0. It generates a script template with the basic movements of a character.

This is the script that allows our character to Jump, move and handle gravity.

extends CharacterBody2Dconst SPEED = 300.0const JUMP_VELOCITY = -400.0# Get the gravity from the project settings to be synced with RigidBody nodes.var gravity = ProjectSettings.get_setting("physics/2d/default_gravity")func _physics_process(delta):    # Add the gravity.    if not is_on_floor():        velocity.y += gravity * delta    # Handle Jump.    if Input.is_action_just_pressed("ui_accept") and is_on_floor():        velocity.y = JUMP_VELOCITY    # Get the input direction and handle the movement/deceleration.    # As good practice, you should replace UI actions with custom gameplay actions.    var direction = Input.get_axis("ui_left", "ui_right")    if direction:        velocity.x = direction * SPEED    else:        velocity.x = move_toward(velocity.x, 0, SPEED)    move_and_slide()
Enter fullscreen modeExit fullscreen mode

Here are some key things it does:

It defines aSPEED andJUMP_VELOCITY constant for the character.

In_physics_process(), it adds the project's gravity to thevelocity.y to handle gravity.

It handles jumping when theui_accept action is pressed and the character is on the floor.

It gets the input direction fromui_left andui_right actions and applies avelocity.x accordingly.

It usesmove_toward() to decelerate the character when no input is given.

Finally, it callsmove_and_slide() to move the character.

We click on "2D" to return to edit our World scene.

Now, we drag and drop theplayer.tscn file in the World scene.

If we click on the "Play" button or press the F5 button, we can play the World scene.

We can see how our player is falling through the screen. Because theBig-crate assets don't have any collision shape, yet.

Let's change that by clicking the right button of the mouse on any of theBig-crate assets (I going to selectBig-crate2).

Then, we click onChange Type.

We selectStaticBody2D.

Then, we add a child node to theBig-crate2 and selectCollisionShape2D.

In the right panel, where it says "CollisionShape2D", we click on "Shape" and select "New Rectangle shape".

Again, we add another child node toBig-crate2, this time, we selectSprite2D.

In the right panel, where it says "Sprite2D", we select a texture. We click on "Load" and select a "Big-crate" from the assets folder.

Now, we can repeat the process for the other "Big-crate" assets and we can add different assets. We just need to add a child node to the World node, selectStaticBody2D, then add a child node to theStaticBody2D and selectCollisionShape2D, after that another child node and select Sprite2D and finally, we select the texture to load a texture.

As we can see in the image above, bothCollisionShape2D andSprite2D are child nodes ofBig-crate.

If we play the scene again, we will notice that the player is not falling through the crates.

If we try to drag a crate, we will notice that we are dragging theSprite2D node, and not theCollisionShape2D.

To avoid this, we select the Big-crate and then, click on "Group Selected Node", making sure to realign theSprite2D withCollisionShape2D before grouping the node.

Now, we can move both nodes.

Also, with "Group Selected Nodes" we can group all three "Big-crates" and be able to move them simultaneously.

Conclusion

In this article, we learn how to create a project in Godot, how to add assets and create a player.

I want to shout out toAnsimuz for allowing us to use its assets for free.Coding Quest,HeartBeast andBornCG for creating very good content about Godot, their content motivated me to create this tutorial. Their videos were a great help for me to learn Godot and Game development.

Thank you for taking the time to read this article.

If you have any recommendations about other packages, architectures, how to improve my code, my English, or anything; please leave a comment or contact me throughTwitter, orLinkedIn.

Resources

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
terabytetiger profile image
Tyler V. (he/him)
He/Him. A developer that loves to teach others and spread my passion for Mathematics, Coding, and Pet Photography!In love with Vue.js 💚
  • Location
    United States
  • Education
    BS in Mathematics & Comp Sci
  • Work
    Frontend Developer
  • Joined

Starting to look into Godot for when I have time to work on a little project with it - this is a nice write up and I look forward to working through it in the future! 🎉

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I'm a backend developer, I enjoy writing tutorials on how to use open-source projects in Python, Go, and Rust, that I use or find interesting.
  • Location
    Maturin/Venezuela
  • Joined

More fromCarlos Armando Marcano Vargas

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp