Create a flash draw game like Line Rider or others – A different approach – Part 3

Read all posts about "" game

Maybe some of you did not notice it, but there was a real pearl in a comment of Create a flash draw game blike Line Rider or others – A different approach – Part 2 post.

Jesuson studied all the source codes and came up with this comment:

—————-

I have been testing it and it chash a lot of times. I would change next things:
1. For the collision response, to calculate the out velocity I would use

vx1=-cosa*w.vx sina*w.vy;
vy1=(-cosa*w.vy-sina*w.vx)*bounce;

w.vx = -cosa*vx1-sina*vy1; //ball X velocity
w.vy = -cosa*vy1 sina*vx1; //ball Y velocity

Now it has got aceleration and velocity won’t be infinite.

2. There is some problems when you test the perimeter of the ball for collisions. The first is you don’t do it in order. For do it in order change
px=w._x w.radius*Math.sin(i*360/precision);
py=w._y-w.radius*Math.cos(i*360/precision);
by
px=w._x w.radius*Math.sin(i*Math.PI/precision);
py=w._y-w.radius*Math.cos(i*Math.PI/precision);

The second is, what happend if there are diferent points of collisions? for expample if ball collide with floor and wall, you don’t must take it like a single collision, becouse the response won’t be good.
For fix it I take all the collisions points what are together (For detect than it´s together you have to detect them in order like I said)and put it in a collision group array, and then I calculate diferents responses with diferent arrays.

Here you can see what I’m speaking about:
Bad method –> http://denvish.net/ulf/130607/55530_collisions4.fla
Good method –> http://denvish.net/ulf/130607/55602_collisions5.fla

Look what happend in two cases when the ball hit the wall.
note: use up/down to acelerate/brake.

—————-

I downloaded both methods and the “good” one is… really good!

This is the actionscript with some comments from the author

gravity = .2;
bounce = 0;
precision = 360;
w1.vx = 0;
w1.vy = 0;
w1.vAngle = 0;
w1.radius = w1._width/2;
w1.col = false;
w1.cArray = [];
onEnterFrame = function () {
	w1.vy += gravity;
	checkWL1(w1, level);
	checkWL2(w1, level);
	control(w1);
	w1._x += w1.vx;
	w1._y += w1.vy;
	w1._rotation += w1.vAngle;
	scrollWorld();
};
////////////////// Colisiones /////////////////////////////
function checkWL1(w, level) {
	w.sumX = 0;
	w.sumY = 0;
	w.collisions = 0;
	for (i=1; i0) {
		checkArray(w);
		//collisionResponse(w);
	}
	w.cArray = [];
}
function checkWL2(w, level) {
	w.col = false;
	for (i=1; i0) {
		w.col = true;
	}
}
function checkDL(px, py, w, l) {
	if (l.hitTest(px, py, true)) {
		w.sumX += px;
		w.sumY += py;
		w.collisions++;
		w.col2 = true;
	} else {
		w.col2 = false;
	}
}
function collisionResponse(w) {
	w.hitX = w1.sumX/w.collisions;
	w.hitY = w.sumY/w.collisions;
	dx = w._x-w.hitX;
	dy = w._y-w.hitY;
	d = Math.sqrt((dx*dx)+(dy*dy));
	d2 = w.radius-d;
	angle = Math.atan(dx/dy);
	if (dy>0) {
		cosa = Math.cos(angle);
		sina = Math.sin(angle);
	} else {
		cosa = -Math.cos(angle);
		sina = -Math.sin(angle);
	}
	w.sina = sina;
	w.cosa = cosa;
	w._x += d2*sina*2;
	w._y += d2*cosa*2;
	v = Math.sqrt((w.vx*w.vx)+(w.vy*w.vy));
	vx1 = -cosa*w.vx+sina*w.vy;
	vy1 = (-cosa*w.vy-sina*w.vx)*bounce;
	w.vx = -cosa*vx1-sina*vy1;
	w.vy = -cosa*vy1+sina*vx1;
}
function checkArray(w) {
	cont = 20;
	w.sumX = 0;
	w.sumY = 0;
	w.collisions = 0;
	for (i=0; i0) {
				if (cont == 0) {
					collisionResponse(w);
					w.collisions = 0;
					w.sumX = 0;
					w.sumY = 0;
					cont = 20;
				} else {
					cont--;
				}
			}
		}
	}
}
///////////////////// Control ///////////////////////////////
function control(w1) {
	if (Key.isDown(38) && w1.col && w1.vx<10) {
		w1.vx += .3;
	}
	if (Key.isDown(40) && w1.col && w1.vx>-3) {
		w1.vx -= .1;
	}
}
///////////////////// Camera  ////////////////////////////
function scrollWorld() {
	if (w1._x>350 && w1.vx>0) {
		level._x -= w1.vx;
		w1._x -= w1.vx;
	}
	if (w1._x<200 && w1.vx<0) {
		level._x -= w1.vx;
		w1._x -= w1.vx;
	}
}

And this is the result (up and down arrows to move the ball)

Now I am going to study more in depth this work because I find it really interesting, so expect a tutorial based on this code during next days.

And this is the source code hosted on my site, just in case some day the link provied by Jesuson should disappear.

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