Seven Tips to Start a Pixel Art Game in Godot

Seven Tips to Start a Pixel Art Game in Godot

Getting setup in Godot is the first step to making a pixel art game. Here are seven tips to help you get started.

1. The viewport

Here is the viewport in Godot. At the top middle of the viewport you will see a section with the mode of 2d, 3d, Scripts, Game, and Asset Lib.

You will see that the default mode is 3d when you create a new game project.

Select 2d to switch into 2d mode.

Slide 1

When you switch to 2d mode, you will see that the viewport is now in 2d mode. It only shows a grid with x and y values.

Slide 2

If you need to switch back to 3d mode, you can always do so by selecting 3d from the mode section. The other modes are for Scripts, Game, and Asset Lib.

Scripts

This is where you can program your game either in GDScript or C#.

Asset Lib

This is where you can find all the assets you need to make your game.

2. Create a root node

Select Create Root Node: 2d Scene.

Slide 2

When you create a new 2d scene, you will see a root node. By default it will be named Node2D.

Slide 3

Rename the node from Node2D to Main on the left side under the scene tab. You can right click on the node and select rename to rename it.

When you save a scene it will ask you where to save a tscn file. This is the file that will be used to run the game.

Slide 4

Rename node to Main and save the scene as main.tscn. Now you can run the game by clicking the play button in the top right corner of the viewport.

3. Running the game

Whenever you need to run the game, you can do so by clicking the play button in the top right corner of the viewport.

When you first create a game it will open a window asking what scene you want to be for the main scene. Select the current scene. You can always change this later.

Slide 5

It will open the game window. Here your game will be running. Although we don't have any characters or anything to see yet.

Slide 6

4. Create a character to play

Now the fun part starts. In order to create a character to play, we need to create a new scene. To create a new scene press the plus button at the top of the viewport.

This will create a new scene in the viewport but it will not be saved yet.

Slide 7

Once the scene has been opened you will need to choose what type of node it will be. In this case we will be creating a character. So click the Other Node button and a dialog will open.

Slide 8

You can either open up the tree view and find CharacterBody2d or you can search for it in the search bar. Either way select the CharacterBody2d node and click create.

Now you will see the CharacterBody2d node in the viewport. There are a few things we need to do to make it a playable character.

Slide 9

Rename the node to Player. There is a plus button in the top left of the scene tab where you can add child nodes to the current scene. Add a CollisionShape2d node to the player. And then select the rectangle shape for the collision shape.

Save the scene as player.tscn.

To control the player we need to add a script. Click the the script icon at the top with a little green plus sign. This will open a dialog where you can save a script. If you select a template it will create some basic code for you. Save the script as player.gd.

Slide 10

Here is the template code for the player script.

extends CharacterBody2D

const SPEED = 300.0
const JUMP_VELOCITY = -400.0

func _physics_process(delta: float) -> void:
	# Add the gravity.
	if not is_on_floor():
		velocity += get_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()

Now we need to add a sprite to the player. Click the plus button in the top left of the scene tab and add a Sprite2d node to the player.

Slide 11

In the project there is a sprite we can use. You can use any sprite you want. When you add the sprite you will notice that it is blurry. Let's open up the project settings to fix that.

Slide 12

5. Project settings

In the top menu bar select Project -> Project Settings.

Slide 13

Select Rendering / Textures. And Change Default Texture Filter to Nearest.

Slide 14

Now the sprite should be smooth.

Slide 15

6. Adding a scene to the main scene

Now that we have a player scene, we need to add it to the main scene. You can do this by clicking to the right of the plus button. The plus button is when you want to create a new node. The button to the right of the plus button is when you want to add a scene that you have created.

It should show all the scenes you have created. Select the player scene and add it to the main scene.

Slide 16

To test if our player can stand on the ground we will add a StaticBody2d node to the main scene. This node will act as the ground. You can add a collision shape to the static body, and shape it however you feel.

Slide 17

7. Changing the resolution and window size

To get our game to run in a window we need to change the resolution and window size. Select Project -> Project Settings. We want to make a pixel art game so we will set the resolution to 300x180. And the window size to 1152x648. This is the size of the window when the game is running. If you need to change the size or zoom in and out you can make a camera.

Slide 18

Bonus. Adding a camera

Add a new child node to the main scene. Select Camera2d. This will act as the camera for the game. You can also add a child node RemoteTransform2d to the camera. This will allow the camera to follow the player. Reparent the RemoteTransform2d to under the player and then set the remote path to the camera.

Slide 19

Bonus. Input actions

To change or setup your own input actions you can do so by selecting the Input Map tab in the project settings.

In this tutorial we are using the input actions from the Godot template. You can change these to your own input actions. There are several built in actions you can use.

  • ui_accept - This will cause the player to jump.
  • ui_left - This will cause the player to move left.
  • ui_right - This will cause the player to move right.

Slide 20

Now if you plcay the game you should see you character and be able to jump around.

This is the end of the tutorial. I hope this helps you get started with making a pixel art game in Godot.


More Articles

How to Trigger Animations with React Hooks

How to Trigger Animations with React Hooks

In this article let’s go over how to trigger animations using React Hooks. We want to be able to control when the user sees the animation. When the user scrolls to a certain section of the website we will slide the element in using CSS.

Seven Tips to Start a Pixel Art Game in Godot

Seven Tips to Start a Pixel Art Game in Godot

A guide to help you get started with pixel art in Godot.


Sign up to our newsletter

Stay up to date with the latest articles, tutorials, and news.