Build a 3D HTML5 game like “Stairs” using Godot – Step 6: starting and dying with stile

Read all posts about "" game

Two of the most important features to add to a game is the way the game starts and the way it ends. In this sixth step of the creation of a Stairs game using Godot engine, we’ll see how to make the game start and end with style.

First, let’s make a small recap of the series:

In first step, we built an endless staircase.

In second step we added spikes and assigned materials to the meshes.

In third step we added a bouncing ball only using trigonometry.

In fourth step we added mouse control to the ball and added some more spikes.

In fifth step a better way to control the ball was added, and we also checked for collision between ball and spikes, and last but not least we checked for the ball to fall down a step.

Now, we are about to see how to make the game start with some style, waiting for user input.

We need to make the ball a bit bigger, so select Ball in Scene panel.

Now in Inspector panel set Radius = 1.5 and Height = 3.

Next thing to do is to make the game start, and the ball bounce, only when the player presses the mouse.

We need to introduce game states, so we can know how the game should work in each state. At the moment we need a state waiting for player input, and a state playing the game.

Let’s change Spatial.gd script adding a couple of lines:

extends Spatial

# state value used when the game is waiting for player
const WAITING_FOR_PLAYER = 0

# state value used when the game is playing 
const PLAYING = 1

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

# array to store all steps
var stepsArray = []

# at the beginning of the game, the game state is "waiting for player"
var gameState = WAITING_FOR_PLAYER

# Called when the node enters the scene tree for the first time.
func _ready() :
	
	# get Step node
	var stepNode = get_node('Step')
	
	# insert the step in steps array
	stepsArray.append(stepNode)
	
	# this is the height of the step, determined according to mesh size
	var deltaY = stepNode.mesh.size.y

	# this is the depth of the step, determined according to mesh size
	var deltaZ = -stepNode.mesh.size.z
	
	# a for loop going from 1 to steps - 1
	for i in range (1, steps) :
		
		# duplicate newStep node
		var newStep = stepNode.duplicate()
		
		#insert the step in steps array
		stepsArray.append(newStep)
		
		# 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)

Now, we need steps to move only if gameState is set to PLAYING, so let’s add a line to Step.gd script:

extends MeshInstance

# stair speed
var speed = 3

# variable to store y/z ratio
var yzRatio

# variable to store the amount of steps
var steps

# initialize the random number generator
var rnd = RandomNumberGenerator.new()

# maximum amount of spikes on each step
var maxSpikes = 4

# Called when the node enters the scene tree for the first time.
func _ready() :
	
	# set a time-based seed for random number generator
	rnd.randomize()
	
	# determine y/z ratio
	yzRatio = mesh.size.y / mesh.size.z
	
	# get steps value from Spatial node
	steps = get_node('/root/Spatial').get('steps')
	
	# custom function to set the spikes
	setSpikes()
	
# This function position enables some random spikes
func setSpikes() :
	
	# loop from 0 to 6
	for i in 7 :
		
		# set i-th child of the step (the i-th spike) to invisible
		get_child(i).visible = false
	
	# loop from 0 to maxSpikes - 1
	for i in maxSpikes :
		
		# toss a number from 0 to 6		
		var randomSpike = rnd.randi_range(0, 6)

		# set the randomSpike-th child of the step to visible
		get_child(randomSpike).visible = true

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta) :
	
	# check if gameState is "PLAYING"
	# the $ symbol is a shortcut for get_node
	if $'/root/Spatial'.gameState == $'/root/Spatial'.PLAYING :
	
		# 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 mesh z size, making the step to be outside camera eye?
		if (translation.z > mesh.size.z) :
			
			# move the step along y axis as if it were the highest step
			translation.y += steps * mesh.size.y
			
			# move the step along z axis as if it were the furthest step
			translation.z += steps * mesh.size.z * - 1
			
			# set random spikes
			setSpikes()

Although we only added a line, the whole script inside _process function is executed only if the if condition is true.

And same thing goes for the ball, which needs to move only if gameState is set to PLAYING, and of course we also need to set gameState to PLAYING once the player presses the mouse button, so we need to change a bit Ball.gd script too:

extends MeshInstance

# ball starting step. 0: first step, 1: second step, and so on
var ballStartingStep = 1

# jump height, should be higher than step height
var jumpHeight = 5

# here we'll store the jump time, that is the time required for a step to take the place of another
var jumpTime

# here we'll store the amount of time the ball is in play
var ballTime

# we need to store ball starting y position to determine its y position when it's jumping
var ballY

# virtual pax X position
var virtualPadX

# variable to save ball x position when we start acting on the trackpad
var ballPositionX

# ration between movement on the screen (pixels) and movement in game (units)
var virtualPadRatio = 0.1

# ball movement limit, beyond this limit the ball falls down
var ballLimit

# is the ball falling off down a step?
var ballFallingDown

# step the ball is about to land on
var nextStep

# Called when the node enters the scene tree for the first time.
func _ready() :
	
	# ball is not falling down at the moment
	ballFallingDown = false
	
	# when the virtual pad is not active, we set it to -1
	virtualPadX = -1
	
	# get Step reference
	var step = get_node('/root/Spatial/Step')
	
	# set ball limit to half mesh size
	ballLimit = step.mesh.size.x / 2
	
	# jump time, in seconds, is step height divided by step speed
	jumpTime = step.mesh.size.y / step.get('speed') * 1000
	
	# ballTime starts at zero
	ballTime = 0
	
	# determine ball y position according to step size and starting step
	ballY = step.mesh.size.y * ballStartingStep + step.mesh.size.y / 2 + mesh.radius
	
	# move the ball to ballY position
	translation.y = ballY
	
	# determine ball z position according to step size and starting step
	translation.z = -step.mesh.size.z * ballStartingStep
	
# called at every inout evenet
func _input(event) :
	
	# is the event a mouse button?
	if event is InputEventMouseButton :
		
		# did we press the mouse button?
		if (event.pressed) :
			
			# set game state to "playing"
			$'/root/Spatial'.gameState = $'/root/Spatial'.PLAYING
				
			# set virtual pad to x mouse position
			virtualPadX = event.position.x
			
			# save current ball x position
			ballPositionX = translation.x
	
		# in this case, we released the mouse button
		else :
			
			# set virtual pad to -1 again
			virtualPadX = -1
		
# called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta) :
	
	# check if gameState is "PLAYING"
	if $'/root/Spatial'.gameState == $'/root/Spatial'.PLAYING :
	
		# if next step is not defined yet...
		if nextStep == null :
			
			# next step is... actually next step!
			nextStep = get_node('/root/Spatial').get('stepsArray')[ballStartingStep + 1]
		
		# is virtual pad different than -1
		# that means: are we using the virtual pad?
		# also, is the ball not falling down?
		if virtualPadX != -1 and !ballFallingDown :
			
			# get the viewport
			var viewport = get_viewport()
		
			# get mouse x position
			var mouseX = viewport.get_mouse_position().x
			
			# set ball x position according to virtual pad, current mouse position and virtual pad ratio
			translation.x = ballPositionX + (mouseX - virtualPadX) * virtualPadRatio
		
		# increase ballTime adding delta to it
		ballTime += delta * 1000
		
		# if ballTime is greater or equal than jump time...
		if (ballTime >= jumpTime) :
			
			# get main node
			var mainNode = get_node('/root/Spatial')
			
			# increase ball starting step
			ballStartingStep = ballStartingStep + 1
			
			# get next step, where 
			nextStep = mainNode.get('stepsArray')[(ballStartingStep + 1)  % mainNode.get('steps')]
			
			# subtract jumpTime to ballTime
			ballTime -= jumpTime
			
			# if ball x position goes beyond limit...
			if abs(translation.x) > ballLimit :
				
				# the ball falls down
				ballFallingDown = true
		
		# ratio ranges from 0 (ball at the beginning of jump time) to 1 (ball at the end of jump time)
		var ratio = ballTime / jumpTime
		
		# if the ball is in play (not falling down) ...
		if !ballFallingDown :
		
			# move the ball to y position equal to sin of ratio * PI multiplied by jump height
			translation.y = ballY + sin(ratio * PI) * jumpHeight
			
			# loop through all spikes in current step
			for spike in nextStep.get_children() :
				
				# is the spike visible?
				if spike.visible :
					
					# get spike global position
					var spikeGlobalPosition = spike.global_transform.origin
					
					# get ball global position
					var ballGlobalPosition = global_transform.origin
					
					# get spike tip position, which is located 1/2 height above spike global position
					var spikeTip = Vector3(spikeGlobalPosition.x, spikeGlobalPosition.y + spike.mesh.height / 2, spikeGlobalPosition.z)
					
					# get the distance between ball center and spike tip
					var distance = spikeTip.distance_to(ballGlobalPosition)
					
					# if the distance is lower than ball radius...
					if distance < mesh.radius :
						
						# make the ball fall down
						ballFallingDown = true
					
		# if the ball is falling down...
		else :
			
			# move the ball down at high speed
			translation.y -= delta * 30
			
			# if the ball falls down too much...
			if translation.y < -20 :
				
				# restart the game
				get_tree().reload_current_scene()

The concept is the same applied to Step.gd script: the ball moves only if gameState is PLAYING, but inside this script we are also able to update gameState value if the player presses the mouse.

Look at the game now:

Now the game is paused until player presses the mouse.

We also do not want spikes to appear on first steps. The idea is not to make them visible on a step if the index of such step is lower than or equal to ballStartingStep value.

Let’s add another couple of lines to Step.gd:

extends MeshInstance

# stair speed
var speed = 3

# variable to store y/z ratio
var yzRatio

# variable to store the amount of steps
var steps

# initialize the random number generator
var rnd = RandomNumberGenerator.new()

# maximum amount of spikes on each step
var maxSpikes = 4

# Called when the node enters the scene tree for the first time.
func _ready() :
	
	# set a time-based seed for random number generator
	rnd.randomize()
	
	# determine y/z ratio
	yzRatio = mesh.size.y / mesh.size.z
	
	# get steps value from Spatial node
	steps = get_node('/root/Spatial').get('steps')
	
	# custom function to set the spikes
	# the argument is true if the amount of steps placed is greater than or equal to ball starting step
	setSpikes($'/root/Spatial'.stepsArray.size() > $'/root/Spatial/Ball'.ballStartingStep + 1)
	
# This function position enables some random spikes
# visibleSpikes tells us if this step should have visible spikes
func setSpikes(visibleSpikes) :
	
	# loop from 0 to 6
	for i in 7 :
		
		# set i-th child of the step (the i-th spike) to invisible
		get_child(i).visible = false
	
	# if spikes need to be visible...
	if visibleSpikes :
		
		# loop from 0 to maxSpikes - 1
		for i in maxSpikes :
			
			# toss a number from 0 to 6		
			var randomSpike = rnd.randi_range(0, 6)

			# set the randomSpike-th child of the step to visible
			get_child(randomSpike).visible = true

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta) :
	
	# check if gameState is "PLAYING"
	# the $ symbol is a shortcut for get_node
	if $'/root/Spatial'.gameState == $'/root/Spatial'.PLAYING :
	
		# 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 mesh z size, making the step to be outside camera eye?
		if (translation.z > mesh.size.z) :
			
			# move the step along y axis as if it were the highest step
			translation.y += steps * mesh.size.y
			
			# move the step along z axis as if it were the furthest step
			translation.z += steps * mesh.size.z * - 1
			
			# set random spikes, with visible spikes
			setSpikes(true)

And now the game works this way:

As you can see, first steps are clear.

Now we want the ball to die with style when it hits a spike. Let’s shake the camera a bit, then restart the game.

From Scene panel, right click on Camera then select Attach Script.

Don’t worry about the alert and click on Create.

Now you should have a new script called Camera.gd.

As usual, we need to replace the default script with our custom script:

extends Camera

# current camera shakes so far
var currentShakes = 0

# total amount of shakes we want
var wantedShakes = 30

# method to shake the camera
func shake() :
	
	# set camera rotation, in radians. 
	# that -0.5236 means -30 degrees
	set_rotation(Vector3(-0.5236 + rand_range(-0.01, 0.01), rand_range(-0.01, 0.01), rand_range(-0.01, 0.01)))
	
	# increase the amount of total shakes
	currentShakes += 1
	
	# are we done with the shakes?
	if currentShakes == wantedShakes :
		
		# restart the game
		get_tree().reload_current_scene()

We also have to know when the player dies, creating a new game state in Spatial.gd script:

extends Spatial

# state value used when the game is waiting for player
const WAITING_FOR_PLAYER = 0

# state value used when the game is playing 
const PLAYING = 1

# state value used when the player is dying
const DYING = 2

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

# array to store all steps
var stepsArray = []

# at the beginning of the game, the game state is "waiting for player"
var gameState = WAITING_FOR_PLAYER

# Called when the node enters the scene tree for the first time.
func _ready() :
	
	# get Step node
	var stepNode = get_node('Step')
	
	# insert the step in steps array
	stepsArray.append(stepNode)
	
	# this is the height of the step, determined according to mesh size
	var deltaY = stepNode.mesh.size.y

	# this is the depth of the step, determined according to mesh size
	var deltaZ = -stepNode.mesh.size.z
	
	# a for loop going from 1 to steps - 1
	for i in range (1, steps) :
		
		# duplicate newStep node
		var newStep = stepNode.duplicate()
		
		#insert the step in steps array
		stepsArray.append(newStep)
		
		# 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)

And finally we can edit Ball.gd to handle DYING state:

extends MeshInstance

# ball starting step. 0: first step, 1: second step, and so on
var ballStartingStep = 1

# jump height, should be higher than step height
var jumpHeight = 5

# here we'll store the jump time, that is the time required for a step to take the place of another
var jumpTime

# here we'll store the amount of time the ball is in play
var ballTime

# we need to store ball starting y position to determine its y position when it's jumping
var ballY

# virtual pax X position
var virtualPadX

# variable to save ball x position when we start acting on the trackpad
var ballPositionX

# ration between movement on the screen (pixels) and movement in game (units)
var virtualPadRatio = 0.1

# ball movement limit, beyond this limit the ball falls down
var ballLimit

# is the ball falling off down a step?
var ballFallingDown

# step the ball is about to land on
var nextStep

# Called when the node enters the scene tree for the first time.
func _ready() :
	
	# ball is not falling down at the moment
	ballFallingDown = false
	
	# when the virtual pad is not active, we set it to -1
	virtualPadX = -1
	
	# get Step reference
	var step = get_node('/root/Spatial/Step')
	
	# set ball limit to half mesh size
	ballLimit = step.mesh.size.x / 2
	
	# jump time, in seconds, is step height divided by step speed
	jumpTime = step.mesh.size.y / step.get('speed') * 1000
	
	# ballTime starts at zero
	ballTime = 0
	
	# determine ball y position according to step size and starting step
	ballY = step.mesh.size.y * ballStartingStep + step.mesh.size.y / 2 + mesh.radius
	
	# move the ball to ballY position
	translation.y = ballY
	
	# determine ball z position according to step size and starting step
	translation.z = -step.mesh.size.z * ballStartingStep
	
# called at every inout evenet
func _input(event) :
	
	# is the event a mouse button?
	if event is InputEventMouseButton :
		
		# did we press the mouse button and are we still alive?
		if (event.pressed and $'/root/Spatial'.gameState != $'/root/Spatial'.DYING) :
			
			# set game state to "playing"
			$'/root/Spatial'.gameState = $'/root/Spatial'.PLAYING
				
			# set virtual pad to x mouse position
			virtualPadX = event.position.x
			
			# save current ball x position
			ballPositionX = translation.x
	
		# in this case, we released the mouse button
		else :
			
			# set virtual pad to -1 again
			virtualPadX = -1
		
# called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta) :
	
	# check if gameState is "dying"
	if $'/root/Spatial'.gameState == $'/root/Spatial'.DYING :
		
		# call camera's shake method
		$'/root/Spatial/Camera'.shake()
	
	# check if gameState is "PLAYING"
	if $'/root/Spatial'.gameState == $'/root/Spatial'.PLAYING :
	
		# if next step is not defined yet...
		if nextStep == null :
			
			# next step is... actually next step!
			nextStep = get_node('/root/Spatial').get('stepsArray')[ballStartingStep + 1]
		
		# is virtual pad different than -1
		# that means: are we using the virtual pad?
		# also, is the ball not falling down?
		if virtualPadX != -1 and !ballFallingDown :
			
			# get the viewport
			var viewport = get_viewport()
		
			# get mouse x position
			var mouseX = viewport.get_mouse_position().x
			
			# set ball x position according to virtual pad, current mouse position and virtual pad ratio
			translation.x = ballPositionX + (mouseX - virtualPadX) * virtualPadRatio
		
		# increase ballTime adding delta to it
		ballTime += delta * 1000
		
		# if ballTime is greater or equal than jump time...
		if (ballTime >= jumpTime) :
			
			# get main node
			var mainNode = get_node('/root/Spatial')
			
			# increase ball starting step
			ballStartingStep = ballStartingStep + 1
			
			# get next step, where 
			nextStep = mainNode.get('stepsArray')[(ballStartingStep + 1)  % mainNode.get('steps')]
			
			# subtract jumpTime to ballTime
			ballTime -= jumpTime
			
			# if ball x position goes beyond limit...
			if abs(translation.x) > ballLimit :
				
				# the ball falls down
				ballFallingDown = true
		
		# ratio ranges from 0 (ball at the beginning of jump time) to 1 (ball at the end of jump time)
		var ratio = ballTime / jumpTime
		
		# if the ball is in play (not falling down) ...
		if !ballFallingDown :
		
			# move the ball to y position equal to sin of ratio * PI multiplied by jump height
			translation.y = ballY + sin(ratio * PI) * jumpHeight
			
			# loop through all spikes in current step
			for spike in nextStep.get_children() :
				
				# is the spike visible?
				if spike.visible :
					
					# get spike global position
					var spikeGlobalPosition = spike.global_transform.origin
					
					# get ball global position
					var ballGlobalPosition = global_transform.origin
					
					# get spike tip position, which is located 1/2 height above spike global position
					var spikeTip = Vector3(spikeGlobalPosition.x, spikeGlobalPosition.y + spike.mesh.height / 2, spikeGlobalPosition.z)
					
					# get the distance between ball center and spike tip
					var distance = spikeTip.distance_to(ballGlobalPosition)
					
					# if the distance is lower than ball radius...
					if distance < mesh.radius :
						
						# ...DIE!
						$'/root/Spatial'.gameState = $'/root/Spatial'.DYING
					
		# if the ball is falling down...
		else :
			
			# move the ball down at high speed
			translation.y -= delta * 30
			
			# if the ball falls down too much...
			if translation.y < -20 :
				
				# restart the game
				get_tree().reload_current_scene()

Look at the final result:

Now when you hit a spike, you will die with style. During next step we’ll see how to adjust camera, background and settings to turn this prototype into a portrait mobile game, meanwhile download the source code of the entire project.

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

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 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
// 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