Basic Filler engine with Box2D – part 1
Filed Under Actionscript 3, Box2D, Flash, Game design • 9 Comments
Do you remember Filler?
In Filler, your goal is simple: fill 2/3 of the level. To create a filler ball, press down. It will grow until you release the mouse button, it hits another filler ball, or a bouncing ball runs into it.
I am showing you the first part, the creation of the filler ball by pressing down the mouse, with no collision detection while you are creating the ball.
The code is mainly taken from Drawing circles on the fly in Box2D – fleshMaker version, but uses movieclips for the balls (so I removed the debug draw) and has a different way of creating circles on the fly.
This is the script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | package { import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import Box2D.Dynamics.*; import Box2D.Collision.*; import Box2D.Collision.Shapes.*; import Box2D.Common.Math.*; public class colorballz extends Sprite { public var m_dbgSprite; public var m_world:b2World; public var m_phys_scale:Number = 30; public var m_timestep:Number = 1.0/30.0; public var m_iterations:Number = 10.0; //initial box coordinates when we first press mouse down public var initX:Number = 0.0; public var initY:Number = 0.0; public var drawing:Boolean = false; public var b:b2Body; // public var the_ball:ball; public function colorballz() { /* A Box2D world needs three parameters: a b2AABB, gravity and a Booleand deciding whether or not to let bodies sleep when they are not being simulated. This saves CPU so should always be left on :) */ var gravity:b2Vec2 = new b2Vec2(0,9.8); var worldAABB:b2AABB = new b2AABB(); worldAABB.lowerBound.Set(-1000,-1000); worldAABB.upperBound.Set(1000,1000); m_world = new b2World(worldAABB,gravity,true); //Add Our Ground AddStaticBox(250/m_phys_scale,510/m_phys_scale,250/m_phys_scale,10/m_phys_scale); AddStaticBox(250/m_phys_scale,-10/m_phys_scale,250/m_phys_scale,10/m_phys_scale); AddStaticBox(-10/m_phys_scale,250/m_phys_scale,10/m_phys_scale,250/m_phys_scale); AddStaticBox(510/m_phys_scale,250/m_phys_scale,10/m_phys_scale,250/m_phys_scale); addEventListener(Event.ENTER_FRAME,Update); stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed); stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved); stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased); } public function mousePressed(e:MouseEvent) { //Store initial X and Y position initX = e.localX; initY = e.localY; the_ball = new ball(); the_ball.x = mouseX; the_ball.y = mouseY; the_ball.width = 1; the_ball.height = 1; addChild(the_ball); drawing = true; } public function mouseMoved(e:MouseEvent) { if (drawing) { the_ball.x = mouseX; the_ball.y = mouseY; } } public function mouseReleased(e:MouseEvent) { drawing = false; addCircle( mouseX, mouseY, the_ball.width/2,the_ball); } public function addCircle(_x:Number, _y:Number, _radius:Number,ballclip:ball) { var bd:b2BodyDef = new b2BodyDef(); var cd:b2CircleDef = new b2CircleDef(); var area:Number = Math.floor(_radius*_radius*Math.PI/25)/100; // area is the % of the entire stage filled by the circle // the entire stage area is 500*500 = 250000 pixels // circle area is radius*radius*PI // so the % is radius*radius*PI*100/250000 cd.radius = Math.abs(_radius)/m_phys_scale; cd.density = 2; cd.restitution = 0.7; cd.friction = 2; bd.position.Set(_x/m_phys_scale, _y/ m_phys_scale); bd.userData = ballclip; b = m_world.CreateBody(bd); b.CreateShape(cd); b.SetMassFromShapes(); } public function AddStaticBox(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number) { var bodyDef:b2BodyDef = new b2BodyDef(); bodyDef.position.Set(_x,_y); var boxDef:b2PolygonDef = new b2PolygonDef(); boxDef.SetAsBox(_halfwidth,_halfheight); boxDef.density = 0.0; var body:b2Body = m_world.CreateBody(bodyDef); body.CreateShape(boxDef); body.SetMassFromShapes(); } public function Update(e:Event) { //We need to do this to simulate physics if (drawing) { the_ball.width+=2; the_ball.height+= 2; } m_world.Step(m_timestep,m_iterations); for (var bb:b2Body=m_world.m_bodyList; bb; bb=bb.m_next) { if (bb.m_userData is Sprite) { bb.m_userData.x=bb.GetPosition().x * 30; bb.m_userData.y=bb.GetPosition().y * 30; bb.m_userData.rotation=bb.GetAngle() * 180 / Math.PI; } } } } } |
There are some inline comments, and there is nothing that new in the code.
Here it is the result:
Click and hold to make the ball grow, release to create it.
And this is the source.
Next step we will see something new: how to make some objects to be affected by gravity and some other not to be affected.
They can be easily customized to meet the unique requirements of your project.
9 Responses to “Basic Filler engine with Box2D – part 1”
Leave a Reply
Trackbacks
-
Basic Filler engine with Box2D – part 2 : Emanuele Feronato on
July 20th, 2009 12:29 pm
[...] time ago I published Basic Filler engine with Box2D – part 1, now it’s time to see the next [...]
- Citrus Engine released for free for learning
- My epic fail with ClickBank
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Triqui MochiAds Arcade plugin for WordPress official page
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a survival horror game in Flash tutorial – part 1 (4.74/5)
- Create a flash artillery game – step 2 (4.74/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 1 (4.71/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)






Amazing job Emanuele! Can’t wait for part 2.
How to test the collision?
How to test the overlap?
world.Query()?
b2ContactListener ?
Great. Can’t wait to see the final game.
I think I broke it …
http://img26.imageshack.us/img26/2158/fillergame.jpg
Great work, i think theres some bug sometimes i loose lifes whe clicking even if no ball has touched my ball, thanks for all your tutorials, they are helping me to understad box2d, thanks to them I manage to make this game http://www.agus.com.mx/en/2009/02/shengashenga/ still under development, but give it a try.
Hey Emanuele, could you make a Bejeweled-like tutorial?
Thanks for all these wonderful tutorials ^^/