2D on Godot 4 レシピ

Entering/Exiting the screen

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You want to detect when an object enters or exits the screen.

Solution

The engine provides a node for this: VisibleOnScreenNotifier2D. Attach this node to your object, and you’ll be able to use its screen_entered and screen_exited signals. *

Example 1

Consider a projectile that travels in a straight line after it’s fired. If we continue firing, eventually we’ll have a large number of objects for the engine to track, event though they’re offscreen, which can cause lag.

Platform character

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You need to make a 2D platform-style character.

Solution

New developers are often surprised at how complex a platform character can be to program. Godot provides some built-in tools to assist, but there are as many solutions as there are games. In this tutorial, we won’t be going in-depth with features like double-jumps, crouching, wall-jumps, or animation. Here we’ll discuss the fundamentals of platformer movement. See the rest of the recipes for other solutions.

Screen wrap

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You want to allow the player to “wrap around” the screen, teleporting from one side of the screen to the other. This is a common feature, especially in old-school 2D games (think Pac-man).

Solution

Get your screen (viewport) size
```
@onready var screen_size = get_viewport_rect().size
```
get_viewport_rect() is available to any CanvasItem derived node.

Compare your player’s position

if position.x > screen_size.x:
 position.x = 0
if position.x < 0:
 position.x = screen_size.x
if position.y > screen_size.y:
 position.y = 0
if position.y < 0:
 position.y = screen_size.y

Note that this is using the node’s position, which is usually the center of your sprite and/or body.

Splitscreen multiplayer

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Introduction

In this demo, we’ll consider a local multiplayer game - a topdown-style maze game with two players (one using arrow keys and the other using WASD controls). This is not a problem if our game world all fits on one screen, but if the map is large, we’ll want to have a “split screen” view tracking the two players separately.

TileMap: detecting tiles

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You have a CharacterBody2D character colliding with a TileMap, and you want to know which tile it collided with.

Solution

When a CharacterBody2D collides, the collision data is returned in a KinematicCollision2D object. The TileMap acts as a single collider, so if you reference the collider property, it will be the TileMap node.

You then need to find out which tile in the TileMap is at the collision location.

Assume you’ve obtained a KinematicCollision2D object stored in the variable collision:

Top-down movement

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You’re making a 2D top-down game, and you want to control a character’s movement.

Solution

For this solution, we’ll assume you have the following input actions defined:

Action Name	Key(s)
`"up"`	W,↑
`"down"`	S,↓
`"right"`	D,→
`"left"`	A,←
`"click"`	Mouse button 1

We will also assume you’re using a CharacterBody2D node.

We can solve this problem in many ways, depending on what type of behavior you’re looking for.

Option 1: 8-way movement

In this scenario, the player uses the four directional keys to move (including diagonals).

Grid-based movement

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You need a 2D character that moves in a grid pattern.

Solution

Grid- or tile-based movement means the character’s position is restricted. They can only stand on a particular tile - never between two tiles.

Character setup

Here are the nodes we’ll use for the player:

Area2D (“Player”): Using an Area2D means we can detect overlap (for picking up objects or colliding with enemies).
- Sprite2D: You can use a sprite sheet here (we’ll set up the animation below).
- CollisionShape2D: Don’t make the hitbox too big. Since the player will be standing on the center of a tile, overlaps will be from the center.
- RayCast2D: For checking if movement is possible in the given direction.
- AnimationPlayer: For playing the character’s walk animation(s).

Add some input actions to the Input Map. We’ll use “up”, “down”, “left”, and “right” for this example.

Shooting projectiles

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want to shoot projectiles from your player/mob/etc..

Solution

Setting up the bullet

First, we’ll set up a “bullet” object that we can instance. Here are the nodes we’ll use:

 Area2D: Bullet
 Sprite2D
 CollisionShape2D

For the Sprite2D’s texture, you can use any image you like. Here’s an example one:

Set up the nodes and configure the sprite and collision shape. If your texture is oriented pointing up, like the one above, make sure to rotate the Sprite node by 90° so that it’s pointing to the right, ensuring it matches the parent’s “forward” direction.

Car steering

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You need to create a 2D top-down car controller.

Solution

When approaching this problem, beginners often wind up creating something that handles nothing like a real car. Some common mistakes you’ll find in amateur car games:

A car doesn’t rotate around its center. Put another way, a car’s rear wheels don’t slide side-to-side. (Unless it’s drifting, but we’ll talk about that later.)
A car can only turn when it’s moving - it can’t spin in place.
A car isn’t a train; it’s not on rails. Turning at high speeds should involve some sliding (drifting).

There are many approaches to 2D car physics, mainly depending on how “realistic” you want to be. For this solution, we’re going for an “arcade” level of realism, meaning we’ll prioritize action over realism.

8-Directional Movement/Animation

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You need a 2D character that has 8-directional movement, including animation.

Solution

For our example, we’ll use the Isometric Mini-Crusader, which contains 8-directional animations for idle, run, attack, and several other states.

The animations are organized in folders, with a separate image for each frame. We’ll use an AnimatedSprite2D and we’ll name each animation based on its direction. For example, idle0 pointing to the right and going clockwise to idle7.

TileMap: using autotile

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You are using a TileMap, and want to use autotiling to more quickly draw your levels.

Solution

For this demo, we’ll be using the following tileset:

Note

These tiles are from Kenney’s “Topdown Shooter” art pack, which you can find here:https://kenney.nl/assets/topdown-shooter

Creating a map from these tiles, if you were adding them one-by-one, would be a tedious process. You would be constantly changing between tiles to line up corners, intersections, and endpoints.

Using Y-Sort

Mon, 01 Jan 0001 00:00:00 +0000

Problem

Many 2D games use a “3/4 view” perspective, giving the impression that the camera is looking at the world at an angle. To make this work, objects that are “farther” away need to be rendered behind “nearer” objects. In practice, that means we want to “y-sort” - making the drawing order tied to the object’s y coordinate. The higher on the screen, the farther away and therefore lower the render order.

Coyote Time

Mon, 01 Jan 0001 00:00:00 +0000

Problem

Your platformer jumping feels “off”. Players don’t have good control and sometimes they “miss” jumping off the edge of platforms.

Solution

The answer to this problem is to use a technique called “coyote time”. This gives the player a greater feeling of control and a little “wiggle room” around the process of jumping from the edges of platforms.

“Coyote time” works like this:

If the player walks off the edge of a platform, for a few frames afterward, we still allow them to jump as if they were still on the ground.

Moving Platforms

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You need moving platforms in your 2D platformer.

Solution

There are several ways to approach this problem. In this recipe, we’ll use AnimatableBody2Ds for our platform and move it with a Tween. This allows for a variety of movement styles while minimizing the amount of code we need to write.

Info

You can also implement this moving platform technique using an AnimationPlayer rather than a tween. Much of the setup will be the same, but rather than tween code, you’ll animate the body’s position property.

Pathfinding on a 2D Grid

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You have a grid-based environment and you’d like to set up pathfinding to allow navigation.

Solution

Godot provides a number of methods for pathfinding. For this recipe, we’ll consider the A* algorithm.

About A*

A* is a widely-used algorithm for finding the shortest path between two points. It can be used in any graph-based data structure, not just a grid.

AStarGrid2D is a specialized version of Godot’s more generic AStar2D class. Because it’s specialized for using with a grid, it’s quicker and easier to set up because you don’t have to manually add all the individual grid cells and their connections.

TileMap: animated tiles

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You’d like to use animated tiles in your TileMap.

Solution

The most straightforward way to approach this problem is to use the AnimatedTexture resource.

Creating an AnimatedTexture

For this example, we’ll use the following water tiles:

Download these images: water.zip

Unzip the images into your project folder. In the Inspector, click the “Create a new resource” button:

Multitarget Camera

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You need a dynamic camera that moves and zooms to keep multiple objects on screen at the same time.

An example might be in a 2 player game, keeping both players on-screen as they move farther and closer together, like so:

Solution

In a single-player game, you’re probably used to attaching the camera to the player, so that it automatically follows them. We can’t really do this here because we have 2 (or more) players or other game objects that we want to keep on the screen at all times.

Ballistic bullet

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want a 2D bullet that travels in an arc, or ballistic curve.

Solution

One approach to this problem would be to use a RigidBody2D - with its built-in physics, gravity would automatically pull it back to earth after firing it.

However, as mentioned in the 2D shooting recipe, Area2D is a great choice for simple bullets and other projectiles - when you don’t need collisions, bouncing, or other physics reactions. Ballistic motion is easy enough to calculate that we won’t need the help of the physics engine.

Line2D Collision

Mon, 01 Jan 0001 00:00:00 +0000

Problem

You want to have collisions with a Line2D.

Solution

Node setup

Add the following nodes to your scene, and draw your line as desired:

 Line2D
 StaticBody2D

Don’t add a collision shape to the body yet!

Note

You can use an Area2D instead if you want to detect overlap with the line rather than collision.

Next, we need to add collision shapes to the body. We have two options:

Touchscreen Camera

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You need a touch-controlled 2D camera for your mobile game.

Solution

In this recipe, we’ll create a generic 2D camera with multiple touch controls:

Drag to pan
Pinch to zoom

Setup

Our camera will extend the built-in node, so add a Camera2D to a new scene and name it “TouchCamera”. Save and attach a script.

Draw trajectory

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want to draw the trajectory of a ballistic shot, like from a tank.

Solution

Setup

For this example, we’re using the “Ballistic Bullet” from this recipe:

Ballistic bullet

and a tank set up like so, with a Marker2D designating the “muzzle” where the bullet will be spawned:

In the tank’s script, we instance the bullet like so: