Mobile Game: Circle Jump on Godot 4 レシピ

Project setup

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

Tip

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

Where to start? Depending on the game, and how fleshed-out your idea is, the answer might be very different. In our case, I’ve cheated a little bit by making a prototype of the game already and working out a few of the ideas ahead of time. Still, it diverged a bit from my initial idea, and so might this series - time will tell.

Spawning Circles

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

Tip

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

In the previous part, we created the Jumper and Circle object that make up the bulk of the game. Now we need to add the progression: a continuous series of spawned circles as long as the player doesn’t miss.

Expanding the Main scene

Let’s add some more nodes to Main:

Marker2D (“StartPosition”)

This will mark the starting position for the game. Place it near the bottom-center of the screen.

Limited circles

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

Tip

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

In the first two parts, we got the basic gameplay working. Now we’re going to start adding some different modes to the circles.

Circle modes

Eventually, we’ll have many different modes, but we’re going to start with the “limited” mode: the circle only allows a given number of orbits before disappearing. First, let’s add a Label node to show the number of remaining orbits. Type a number (1) in the text field so we can see how it looks.

Menus

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

Tip

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

Now that we’ve got the basic gameplay, it’s time to start working on the UI. We’re going to need menu screens for the title, settings, and game over.

The three screens will share a common layout and some functionality, so we’ll start with a base scene they can all inherit from. In the new scene, start with a CanvasLayer and name it BaseScreen. Save this scene in the “UI” folder.

Score and HUD

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

Tip

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

In the last part, we added UI in the form of menus to start and configure the game. We also need a UI to display in-game information such as score.

HUD scene

Add a new scene with a CanvasLayer root to be our HUD. Give it two children: a MarginContainer named “ScoreBox” and a `Label" named “Message”.

Sound and Colors

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

Tip

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

Settings singleton

First, we’ll add a new script by choosing File -> New Script in the script tab. Name the script settings.gd.

In this script we’ll place the configuration settings for the game.

var enable_sound = true
var enable_music = true

var circles_per_level = 5

Add the script as an autoload by opening “Project Settings” and selecting the “Autoloads” tab. Click the folder to load the script and then click “Add”.

Moving circles

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

Fixing a bug

Our first task is to fix a bug with our menu system. Pressing the “Start” button launches a new game, but as the screen is moving off, it can be pressed again. Try “spamming” the start button - disaster ensues!

We can fix this by disabling the buttons while the screen transition is happening. Since we put all the buttons in a “buttons” group, we can easily do this with call_group().

Mobile ads

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

Tip

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

About ads

When building a free-to-play mobile game, you have two choices when it comes to monetization: in-app purchases and advertisement. In this part, we’ll look at how to integrate a mobile ad platform (Admob) into your game.

Ads can be unpopular and whether to use them is a decision for the individual game developer to make. We’re not making a decision on the pros and cons in this tutorial - we’re here to show you how to put ads in your game if you want them.

Saving settings

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

Tip

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

Saving settings

We’ve added three toggle properties in the game - which works fine - but the settings aren’t preserved when we quit. We need to save those settings so the next time you run the game, they persist.

First, we’ll define our settings file in res://settings.gd:

var settings_file = "user://settings.save"

Next, we’ll add saving/loading functions for the three game settings that we want to save.

Mobile Game: Circle Jump on Godot 4 レシピ

Project setup

Spawning Circles

Expanding the Main scene

Limited circles

Circle modes

Menus

Menu screens

Score and HUD

HUD scene

Sound and Colors

Settings singleton

Moving circles

Fixing a bug

Mobile ads

About ads

Saving settings

Saving settings