Emanuele Feronato

Talking about Stairs game, 3D, Game development, Godot Engine and HTML5.

Did you play Stairs mobile game by Ketchapp? It’s available both for iOS and Android and is one cute hyper casual game just like the games Ketchapp is used to release.

As I want to start playing with Godot Engine why shouldn’t I start to build a 3D game with it? So here we go.

First, we need to create a new project, so once the Project Manager opens, click on New Project.

You will be asked for a project name and a project path. Fill the form as you want, just remember to create an apposite folder for your project.

Also, choose OpenGL ES 2.0 as we won’t create a complex game but just a quick, hyper casual game which does not requires a lot of features.

Finally Godot Engine starts. Don’t be afraid of all those panels, everything will be easy.

The Scene panel is the one we need this time, as we want to create a new 3D Scene.

Default scene name is Spatial and we do not want to change at this time, but we want to create the first step of the stair, so right click on Spatial and select Add Child Node.

In the Create New Node dialog, select MeshInstance. You can select it by navigating through the tree, or typing the name of the node in the Search textbox.

A MeshInstance is a node that takes a Mesh resource – a vertex array-based geometry, divided in surfaces, basically in our case a 3D object – and adds it to the current scenario by creating an instance of it.

The MeshInstance has now been added to Scene panel, but this time we want to rename it, so right click on it and select Rename.

I called it Step. You can give it the name you want, or you can even keep the original game, but in this tutorial I called it Step so I will refer to it with this name.

Now we have a MeshInstance but we do not have any Mesh. Select Step then on the Inspector panel in the Mesh selector, choose New CubeMesh to give our Step a cubic Mesh.

You should see a big cube in the center panel. This will be our step.

This definitively does not look like a step, so we are going to change its size by entering some values in the Inspector panel, in the Transform -> Scale form.

I set Scale x = 8, Scale y = 1 and Scale z = 2, and you can obviously set the values as you want but I will be referring to these values in this tutorial.

Now our cube looks like a stair step, and if you zoom out a bit in the center window using mouse wheel, you should see something like this:

Now we need to create a camera. A camera is the eye which will look at the stair and render it.

Ne need to add another node to Spatial, so right click on it and select Add Child Node.

This time we’ll add a camera, so select Camera.

Now the camera has been created as we can see in the Scene panel but we can’t see it in the main window.

This is because it has been created in the same position we created the step, so we need to move it a bit.

We want to place the camera in a way so that the bottom of the step is about to leave the camera view from the bottom.

Select Camera in the Scene panel by clicking on it, and just like you did with the Step, in Inspector panel enter these values in Transform-> Translation and Transform -> Rotation Degrees forms:

Translation y = 14, Translation z = 8, Rotation Degrees x = -30

Again, these are just values I found to work as I wanted, feel free to experiment.

And finally we should be able to see our camera in the main panel.

Do you want to see through camera’s eye? Just select Preview and you will see what camera sees and what players will see.

This is exactly what I wanted: the first step about to leave the camera view from the bottom

Now we just have to add more steps to build the scale. We could add manually just like we did with the first step, by adding new MeshInstance nodes and repositioning them to build the ladder, but we are programmers so we are going to add them with a script.

Select Spatial, then right click and select Attach Script.

Do not touch any of the options, although we receive a warning it’s not important at the moment.

And a script attached to Spatial has been created.

This is the default GDScript script created by Godot.

extends Spatial


# 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

What is this? GDScript uses a syntax similar to Python, as you can see from blocks that are indent-based rather than using braces, and it fully integrates with Godot.

Let’s try to launch the project and see what happens, so let’s press Play.

We get a dialog asking to confirm which scene is the main one, and unfortunately we can’t make it work by clicking on Select Current or Select, so press Cancel.

This is because we never saved the project, so actually there isn’t anything in it.

Go to Scene -> Save Scene.

Confirm clicking on Save.

Now press Play again and click on Select Current.

Finally your project is running, showing the same thing we got by selecting Preview, but here we will see our script in action.

A script which actually does nothing, but we are going to change it.

From now on, remember to save your project every time you modify it.

Time to edit the script and add some GDScript lines.

extends Spatial

# amount of steps we want in the stair
var steps = 12

# Called when the node enters the scene tree for the first time.
func _ready() :
	
	# get Step node
	var stepNode = get_node('Step')
	
	# this is the height of the step, determined according to mesh size and transform
	var deltaY = stepNode.transform.basis.y[1] * 2
	
	# this is the depth of the step, determined according to mesh size and transform
	var deltaZ = stepNode.transform.basis.z[2] * - 2
	
	# a for loop going from 1 to steps - 1
	for i in range (1, steps) :
		
		# duplicate newStep node
		var newStep = stepNode.duplicate()
		
		# move the duplicated step along y axis
		newStep.translation.y = deltaY * i
		
		# move the duplicated step along z azis
		newStep.translation.z = deltaZ * i
		
		# add the step to the scene
		add_child(newStep)

Run again the project and this is what you should get.

Now we have a stair going up until it exits from camera’s eye.

It’s time to move the stair endlessly. Rather than moving the camera up along the stair, we’ll move each step down towards the camera.

Let’s select Step and right click then Attach Script.

As usual confirm everything.

And this is the content you should add to the script.

extends MeshInstance

# stair speed
var speed = 2

# variable to store y/z ratio
var yzRatio

# variable to store the amount of steps
var steps

# Called when the node enters the scene tree for the first time.
func _ready() :
	
	# determine y/z ratio
	yzRatio = transform.basis.y[1] / transform.basis.z[2]
	
	# get steps value from Spatial node
	steps = get_node('/root/Spatial').get('steps')

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta) :
	
	# move the step along y axis according to speed and elapsed time
	translation.y -= delta * speed
	
	# move the step along z axis according to speed, elapsed time and y/z ratio
	# y/z ratio is necessary because y and z speed cannot be the same as steps
	# do not have the same size so the stair does not have a 45 degrees angle
	translation.z += delta * speed / yzRatio
	
	# is z position greater than 4, making the step to be outside camera eye?
	if (translation.z > 4) :
		
		# move the step along y axis as if it were the highest step
		translation.y += steps * transform.basis.y[1] * 2
		
		# move the step along z axis as if it were the furthest step
		translation.z += steps * transform.basis.z[2] * - 2

And when you run again the project, you should finally see your endless stair.

Building an endless stair was easy and fun with Godot, next time I am going to add the spikes, meanwhile download the entire project and play with it.