Emanuele Feronato

Flash AS3 Pixel based circle collision engine

Talking about Actionscript 3, Flash, Game development and Users contributions.

After seeing the Lineball video teaser I got some email asking me how did I make the hollow circle with Box2D, and how to get a smooth drawing using box primitives.

Well, I have to say I didn’t use Box2d, but another library called Collision Detection Kit.

I’ll publish some tutorial about it once I’ll complete the game, but it’s not the point of today’s post.

A reader from Argentina, Adolfo Chacon, sent me an AS3 basic engine to do the same thing (maybe even better) using the concepts I explained soooooo long ago in the Create a flash draw game like Line Rider or others series.

It’s a basic, uncommented script because it’s just a prototype… basically Adolfo took my old script, adjusted trigonometry and did the magic dividing the simulation in steps to manage slower speeds.

I resized it, changed variable names (translating from spanish) and some operators since the auto format option gave me errors when trying to format a<-b, forcing me to change into a<b*-1.

Now enjoy the script

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	public class pixel_engine extends Sprite {
		public var ball_radius:int;
		public var precision:int=120;
		public var degrees_to_radians:Number=0.0174532925;
		public var x_speed:Number=0;
		public var y_speed:Number=0;
		public var friction:Number=0.9;
		public var max_speed:int=15;
		public var gravity:Number=0.98;
		public var steps=2;
		public var ball:ball_mc = new ball_mc();
		public var terrain:terrain_mc = new terrain_mc();
		public function pixel_engine():void {
			addChild(ball);
			ball.x=250;
			ball_radius=ball.width/2;
			addChild(terrain);
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, reverse_gravity);
		}
		private function reverse_gravity(event:MouseEvent):void {
			gravity*=-1;
		}
		public function update(e : Event):void {
			if (ball.y>400) {
				ball.y-=400;
			}
			if (ball.y<0) {
				ball.y+=400;
			}
			for (var j:int = 1; j<=steps; j++) {
				var number_of_collisions:int=0;
				var sum_x_collision:Number=0;
				var sum_y_collision:Number=0;
				if (x_speed>max_speed) {
					x_speed=max_speed;
				} else {
					if (x_speedmax_speed) {
					y_speed=max_speed;
				} else {
					if (y_speed0) {
					var collision_angle:Number=Math.atan2(ball.x-average_x,ball.y-average_y)/degrees_to_radians*-1+90;
					var collision_x:Number = ball.x - ball_radius * Math.sin((collision_angle + 90) * degrees_to_radians);
					var collision_y:Number = ball.y + ball_radius * Math.cos((collision_angle + 90) * degrees_to_radians);
					var delta_x:Number = (collision_x - ball.x) / ball_radius * -1;
					var delta_y:Number = (collision_y - ball.y) / ball_radius * -1;
					var speed:Number=Math.sqrt(x_speed*x_speed+y_speed*y_speed)*friction;
					var bounce:Number=Math.atan2(x_speed,y_speed)/degrees_to_radians*-1;
					var ricochet:Number=2*collision_angle-bounce-180;
					x_speed=Math.sin(ricochet*degrees_to_radians)*speed;
					y_speed=- Math.cos(ricochet*degrees_to_radians)*speed;
					while (terrain.hitTestPoint(collision_x, collision_y,true)) {
						ball.x=ball.x+delta_x;
						ball.y=ball.y+delta_y;
						collision_x=ball.x-delta_x*ball_radius;
						collision_y=ball.y-delta_y*ball_radius;
					}
				}
			}
		}
	}
}

And play with the result… just watch the simulation and press left mouse button to reverse gravity.

Download the source code. Who said draw games are dead?