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

Read all posts about "" game

March 31st update: part 5 released
March 4th update: part 4 released
February 17th update: part 3 released

In this part I’ll explore how to detect collision between a ball and the line.

Please read part 1 if you didn’t already.

You may say: “hey, I don’t want a ball, I want a car!!”. There’s no problem, you will learn everyting, I will explain, during next tutorials, how to insert complex objects, but the basics are the same for every collision.

The easy way

Ok, let’s imagine you have the purple line in the movie, and the blue ball you see.

The actionscript in the blue ball is:

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

Lines 1-5: These instructions are execute only once, when the ball firstly appears on the stage. If you followed my flash game creation tutorial you are familiar with those instructions. I am defining ball x and y speed (set to 0, the ball does not move) and the gravity.

Lines 6-15: These are the instructions execute every time the ball is on the stage… every 1/50 seconds in our case.

On line 7 you may see that the whole cycle is executed only when a variable called “go” is true. Don’t worry about it, I put this control to let the ball fall only when you click on the stage.

Line 8: gravity value is added to yspeed. You should easily understand these instructions, if not check flash game creation tutorial part 1 and all will be clear

Lines 9-11: The core of this script: I check the collision between the ball and the terrain, and if positive, I stop the ball. Stopping the ball is the first thing to do before bouncing.

Well, let’s test the script now! It should work!

Hmmm… it didn’t work as I expected… I want the ball to stop when it collides with the ground… but in this case the ball passed the ground as it crashed it.

What’s wrong then? Let’s see this instruction: _root.terrain.hitTest(_x, _y, true)… you can see the collision is checked on _x and _y ball values… the center of the ball. If you look at the movie, you may see the ball stopped once its center was in collision with the ground.

The hardest way

The solution now is: don’t worry about the center and let’s check the collision between the ground and the ball circumference

Let’s try this actionscript, then

onClipEvent (load) {
	yspeed = 0;
	xspeed = 0;
	gravity = 0.2;
	radius = 25;
	precision = 90;
}
onClipEvent (enterFrame) {
	if (_root.go == true) {
		yspeed = yspeed+gravity;
		for (x=1; x

Line 5: A new variable is initialized, the radius variable. It contains the value of the radius of our ball, in pixels

Line 6: Another new variable, called precision. We'll see how the higher the precision, the more accurate the collision checking, the more CPU expensive the game. It's up to you finding the right compromise between accuracy and CPU.

Line 11: A cicle executed precision times

Lines 12-13: spot_x and spot_y are the coordinates of points at ball's circumference taken every 360/precision degrees. And on line 14 you can see I am checking the collision between these points (the circumference) and the terrain.

Let's see if does it work.

It works!! The ball stops on the ground without passing it!!

Two things:

1) Since this operation could be CPU expensive, remember to find a compromise between precision and performances. In most cases, the smaller the ball, the less precision needed.

2) Always try so set precision as a number that perfectly divides 360. I mean values like 36,45,72,90,180. I found 90 is a good value in most cases.

Yeah, I solved the problem, congratulations and so on...

Getting harder and harder... how many collisions?

It's not as easy as it seems...

Look at this actionscript

onClipEvent (load) {
	yspeed = 0;
	xspeed = 0;
	gravity = 0.2;
	radius = 25;
	precision = 90;
}
onClipEvent (enterFrame) {
	if (_root.go == true) {
		collisions = 0;
		yspeed = yspeed+gravity;
		for (x=1; x

Basically it's the same script with three more instructions:

Line 10: A collisions variable is set to zero.

Line 17: Everytime a collision is checked, the collisions variable is incremented

Line 20: I show the collision value. You may thing this value will be 1...

Test the script...

I got an "8"... meaning that what seems a single collision, in reality is made of eight collisions. If you raise the precision to 360, you should get something around 27. I mean twentiseven different collisions, and only one to choose.

What can I do?

Collisions - the final word

Check this last (at the moment) actionscript

onClipEvent (load) {
	yspeed = 0;
	xspeed = 0;
	gravity = 0.2;
	radius = 25;
	precision = 360;
}
onClipEvent (enterFrame) {
	if (_root.go == true) {
		collisions = 0;
		sum_x = 0;
		sum_y = 0;
		yspeed = yspeed+gravity;
		for (x=1; x0) {
			spot_x = sum_x/collisions;
			spot_y = sum_y/collisions;
			createEmptyMovieClip("lines", 100000);
			lines.lineStyle(3, 0x000000, 100);
			lines.moveTo(0, 0);
			lines.lineTo(spot_x-_x, spot_y-_y);
		}
		_y = _y+yspeed;
		_x = _x+xspeed;
	}
}

Lines 11 and 12: I declare two new variables, sum_x and sum_y and set them to zero.

Lines 20 and 21: If a collision is checked, I add to sum_x the value of spot_x (the x value of circumference collision) and to sum_y the value of spot_y (same thing for the y value).

Line 24: Check if collisions is greater than zero, in this case...

Lines 25-26: the new spot_x, the (almost) real point where the ball collided with the ground, is determined dividing the sum_x variable by the number of collisions. In other words, I am finding the average point of all collisions occurred. Same thing with the spot_y

Lines 27-30: I am just showing a movieclip with a line that goes from the center of the ball to the spot with the average collisions detected

Look at the movie.

This time it works for real.

That's all at the moment, download the full sources of all examples and give me feedback, in next lesson I will explain how to make the ball bounce.

Have fun.

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