Build a 3D HTML5 game like “Stairs” using Godot – Step 1: building an endless stair

Read all posts about "" game

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

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers