[Flash 10]

MArs 2014

How to build a billiard game with Flash regular display list

A great billiard game that use stage3D (flash 11+) and probably away physics

But what if you cannot target stage3D ?

Here is the “final preview”



And how to build it in 3 steps:

  • physics
  • rendering using native 3D
  • sync 2D physics and 3D redering.

STEP 1 – Physics
We will use box2d, in order to to speed up the set up there is a great tool known as quick Box2D

simBalls = new Vector.<QuickObject>;

// create the simulation view
simView = new MovieClip();
sim = new QuickBox2D(simView);	

// adding it to the stage
addChild( simView );
// a quick command to create 4 walls based on Stage size
sim.createStageWalls();				
// we are in 2D with a top down view so gravity is null
sim.gravity = new b2Vec2();
sim.grid(25, 0xCCCCCC, .5);

// creating 16 balls			
var bb:QuickObject;
for (var j:int = 0; j < NB_BALLS ; ++j ) 
{
	bb = sim.addCircle( { x:Math.random() * 640/30, y: Math.random() * 480/30, radius:.5,  isBullet:true } ); // choose a random position on the board
	bb.body.ApplyImpulse( new b2Vec2( (Math.random() * 30) - 15, (Math.random() * 30) - 15), bb.body.GetPosition() ); // apply an impulse on each body
	simBalls.push( bb ); // keep a reference to that body
}

// start the simulation
sim.start();
// all balls are draggable
sim.mouseDrag();	
&#91;/as3&#93;

<center>
    
</center> <br/><br/> <strong>STEP 2 - 3D</strong> You can easily create a Ball3D class based on <a href="http://wonderfl.net/c/4Hj9">alumican's experiments</a> or <a href="http://wonderfl.net/c/7r2j">saharan</a> [as3] package game { import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; /** * ... * @author YopSolo */ public class Ball3D extends Sprite { private var _sphere:Sphere; public function Ball3D(texture:BitmapData, radius:int = 30, x:Number = 0, y:Number = 0) { this.x = x; this.y = y; this.mouseChildren = false; this.mouseEnabled = false; _sphere = addChild(new Sphere(texture, radius, 16, 12)) as Sphere; _sphere.render(); } public function rot(rAngleX:Number, rAngleY:Number):void { _sphere.rotateByQuaternion(rAngleX, rAngleY, 0, false); _sphere.render(); } } }

STEP 3 – SYNC 3D dispaly and 2D physics

Finally, in the update loop it’s time to sync the display to the physic engine.

private function _oef(e:Event):void 
{
	var ball:Ball3D;
	for (var i:int = 0; i < NB_BALLS; i++)
	{
		ball = balls[i] as Ball3D;
		ball.x = simBalls[i].x * 30;
		ball.y = simBalls[i].y * 30;
		ball.rot( -simBalls[i].body.m_linearVelocity.y / 30, simBalls[i].body.m_linearVelocity.x / 30); // the trick :)
	}			
}

note : 30 is default size of the quick box2d physic world

Edit :
Have a look to this great experiment build by @makc3d on wonderfl.net


Vote in HexoSearch