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?