Create a flash draw game like Line Rider or others – part 5

Read all posts about "" game

Finally this tut has its 5th part.

You should read steps 1 to 4 before continuing with this one, although this time it’s not so important, because before to approach the “running car” I am going to explain the “walking man” on a line.

The same kind of gamestyle you can find in draw play 1 and 2.

Believe or not, this is an important step to understand before adventuring into running cars.

Now, let’s start.

I said we are going to see a man walking on a line we created.

As usual the “line” is instanced as terrain while the code I am showing is the one in the “player” object… yes, that red box is supposed to be the player…

The player is falling

The first thing to do is determine when the player is falling and when the player isn’t falling. If you think about the real world, a man is falling when there is no ground under his feet. Or when he’s so drunk. Or both. But at the moment we are only interested about the ground.

So, let’s translate real world physics into actionscript:

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		_y += yspeed;
	}
}

Line 2: Set the gravity at 0.2

Line 3: Set the yspeed (vertical speed) to zero

Line 6: Checks if _root.go is true. This is true once the “go” button is pressed. It’s not important for the game, I put it just to make the movie wait for a user input before starting.

Line 7: Gravity calls… yspeed is increased by gravity value.

Line 8: Performing a hit test between the terrain and the _x, _y+_height/2 spot. Since the anchor point of the player is on its center, you can easily understand the spot is located in the middle on the bottom side. Basically, the player’s feet.

Line 9: raising the player of one pixel (obviously, since the player must be sunk at the moment)

Line 10: set yspeed to zero (no need to fall if we are sunk into the ground)

Line 12: add yspeed to _y position

Look at the movie:

The player is not stable to the ground. Maybe the floor is too hot, maybe the code has something to be fixed.

The problem is that once the player touches the ground, I continue adding yspeed to _y position, so the player sinks a bit into the ground. Then, the while loop raises him a bit, just to watch him sinking again. That’s why the player seems to flick.

The player is falling – part 2

I need a hack to tell the “physics engine” to stop considering yspeed if the player has its feet on the ground

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		if (!_root.terrain.hitTest(_x, _y+_height/2+1, true)) {
			_y += yspeed;
		} else {
			yspeed = 0;
		}
	}
}

Lines 12-13: The yspeed value is added to _y (old line 12) only if the player is in the air. Look at the +1 in the _y+_height/2+1. I need to “forecast” next player’s position and if I find it will be in the ground, then I stop considering the gravity. Otherwise lines 14-15 set yspeed to zero.

Now the player is falling in the right way.

Let’s make him walk now.

The player is moving

To make the player move, we need to check if some keys are pressed and manage the x speed according to the key pressed.

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
	xspeed = 1;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		if (Key.isDown(Key.LEFT)) {
			_x -= xspeed;
		}
		if (Key.isDown(Key.RIGHT)) {
			_x += xspeed;
		}
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		if (!_root.terrain.hitTest(_x, _y+_height/2+1, true)) {
			_y += yspeed;
		} else {
			yspeed = 0;
		}
	}
}

Line 3: Set x speed to 1

Lines 8-10: If the left key is pressed, I move the player xspeed pixels to the left

Lines 11-13: Same thing with the right arrow key

Now the player can walk!!

But… try to walk to the left margin of the stage… or to the right one… you may notice there is a hard slope, but the player walks on it as if it was a plain ground. That’s not realistic!!

The player is moving – part 2

In order to make the player stop walking when on a too hard slope, we have to define a “knee” point. If the “knee” hits the ground, it means the ground is a hard slope, or a stair, o whatever thing the player can’t climb.

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
	xspeed = 1;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		if (Key.isDown(Key.LEFT)) {
			if (!_root.terrain.hitTest(_x-_width/2, _y+_height/4, true)) {
				_x -= xspeed;
			}
		}
		if (Key.isDown(Key.RIGHT)) {
			if (!_root.terrain.hitTest(_x+_width/2, _y+_height/4, true)) {
				_x += xspeed;
			}
		}
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		if (!_root.terrain.hitTest(_x, _y+_height/2+1, true)) {
			_y += yspeed;
		} else {
			yspeed = 0;
		}
	}
}

Line 9: Before moving the player to the left, I assure his “knee” (located to the leftmost side of the square at a quarter height of the player) is not touching the ground.

Line 14: Same thing with the right side.

Now the player cant’ walk on slopes!! Now we want the player to jump

The player is jumping

To make the player jump, I am going to check if the SPACE key is pressed

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
	xspeed = 1;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		if (Key.isDown(Key.LEFT)) {
			if (!_root.terrain.hitTest(_x-_width/2, _y+_height/4, true)) {
				_x -= xspeed;
			}
		}
		if (Key.isDown(Key.RIGHT)) {
			if (!_root.terrain.hitTest(_x+_width/2, _y+_height/4, true)) {
				_x += xspeed;
			}
		}
		if (Key.isDown(Key.SPACE)) {
			yspeed = -5;
		}
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		if ((!_root.terrain.hitTest(_x, _y+_height/2+1, true)) or (yspeed<0)) {
			_y += yspeed;
		} else {
			yspeed = 0;
		}
	}
}

Lines 18-20: If the SPACE key is pressed, the yspeed is set to -5 (since yspeed is affected by gravity, a negative value will make the player fly).

Line 26: In the if statement I add a check: If the yspeed is less than zero (player jumping) I add the yspeed to _y even if the player is not going to touch the ground. Without that condition, the player will never jump.

Look at our jumping player!

Again, it's not over... as you can see, if you press SPACE while the player is in the air, the player will jump again, and again... you can make the player fly and I don't want it.

The player is jumping - part 2

I need a variable to decide if the player can jump or not. Basically, a player can always jump execpt when he is already jumping

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
	xspeed = 1;
	jumping = 0;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		if (Key.isDown(Key.LEFT)) {
			if (!_root.terrain.hitTest(_x-_width/2, _y+_height/4, true)) {
				_x -= xspeed;
			}
		}
		if (Key.isDown(Key.RIGHT)) {
			if (!_root.terrain.hitTest(_x+_width/2, _y+_height/4, true)) {
				_x += xspeed;
			}
		}
		if ((Key.isDown(Key.SPACE)) and (!jumping)) {
			yspeed = -5;
			jumping = 1;
		}
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
			jumping = 0;
		}
		if ((!_root.terrain.hitTest(_x, _y+_height/2+1, true)) or (yspeed<0)) {
			_y += yspeed;
		} else {
			yspeed = 0;
			jumping = 0;
		}
	}
}

Line 5: initializing a variable to tell the player is not jumping

Line 19: Added the control if the player is NOT jumping when SPACE key is pressed.

Line 21: Set the jumping variable to 1. Actually, the player is jumping (so he can't jump anymore until he touches the ground)

Lines 27 and 33: Set the jumping variable to zero. When the player is hitting the terrain, or when the player is about to hit the terrain, he is not jumping, or the jump is over.

There are some other things to fix but at the moment it's over.

Download the full source codes and give me feedback

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

215 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
// 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