[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>;</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();
STEP 2 – 3D
You can easily create a Ball3D class based on alumican’s experiments or saharan
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