Creation of a Flash Stabilize! clone using Box2D – part 2
Filed Under Actionscript 3, Box2D, Flash, Game design • 6 Comments
Time to add some new features to our Stabilize! clone we started in this post.
The features we’ll add this time are:
* Restricted area in which you can drop crates
* “Real” crates, made with a movieclip, take the place of the boxes you can draw with the mouse
As you can see, the script looks less and less like the original Drawing boxes on the fly in Box2D and it’s starting to become a custom one.
To create the restricted area, I simply create the area movieclip and check if the mouse in inside such movieclip with hitTestPoint method.
It works with three parameters:
x:Number – The x coordinate to test against this object.
y:Number -The y coordinate to test against this object. These coordinates are mouseX and mouseY
shapeFlag:Boolean (default = false) -Whether to check against the actual pixels of the object (true) or the bounding box (false). Obviously I want it to be true
Here it is the source code:
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 | 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 stabilize extends Sprite { public var m_sprite: Sprite = new Sprite(); public var m_world:b2World; // the_crate is the crate sprite public var the_crate:crate=new crate(); // droppable_area is the sprite representing the area your mouse // must overlap to drop a crate public var droppable_area:drop_area = new drop_area(); public function stabilize() { 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); m_sprite = new Sprite(); addChild(m_sprite); addChild(droppable_area); addChild(the_crate); debug_draw(); AddBox(250/30,350/30,10/30,10/30,0,false); AddBox(250/30,350/30,200/30,10/30,20,false); addEventListener(Event.ENTER_FRAME,Update); stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed); stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved); } public function mousePressed(e:MouseEvent) { // look at hitTestPoint... the final true value says it's going to to check against the actual pixels // instead of the bounding box if (droppable_area.hitTestPoint(mouseX,mouseY,true)) { AddBox(mouseX/30,mouseY/30,0.5,0.5,3,true); } } public function mouseMoved(e:MouseEvent) { the_crate.x=mouseX; the_crate.y=mouseY; if (droppable_area.hitTestPoint(mouseX,mouseY,true)) { the_crate.alpha=1; } else { the_crate.alpha=0.5; } } // function AddBox // px: x position // py: y position // _halfwidth: half of the box width // _halfheight: half of the box height // density: density of the box (0: static) // is_crate: if true, it's a crate (and you should render the proper movieclip public function AddBox(px:Number,py:Number,_halfwidth:Number,_halfheight:Number,density:Number,is_crate:Boolean) { var bodyDef:b2BodyDef = new b2BodyDef(); bodyDef.position.Set(px,py); var boxDef:b2PolygonDef = new b2PolygonDef(); boxDef.SetAsBox(_halfwidth,_halfheight); boxDef.density=density; boxDef.friction=0.3; boxDef.restitution=0.2; if (is_crate) { bodyDef.userData = new crate(); } var body:b2Body=m_world.CreateBody(bodyDef); body.CreateShape(boxDef); body.SetMassFromShapes(); if (is_crate) { addChild(bodyDef.userData); } } public function Update(e:Event) { m_world.Step(1/30,10); 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); } } } public function debug_draw() { var dbgDraw:b2DebugDraw = new b2DebugDraw(); var dbgSprite:Sprite = new Sprite(); m_sprite.addChild(dbgSprite); dbgDraw.m_sprite=m_sprite; dbgDraw.m_drawScale=30; dbgDraw.m_alpha=1; dbgDraw.m_fillAlpha=0.5; dbgDraw.m_lineThickness=1; dbgDraw.m_drawFlags=b2DebugDraw.e_shapeBit; m_world.SetDebugDraw(dbgDraw); } } } |
And this is the result:
Click inside the red area to drop a crate
Download the source code, Box2D library excluded
They can be easily customized to meet the unique requirements of your project.
6 Responses to “Creation of a Flash Stabilize! clone using Box2D – part 2”
Leave a Reply
- 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
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- 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)





Thanks, really simple and straight forward.
Note the you don’t have to create movieclips, you can define range of X and Y and in every click check if the X and Y of the mouse are in it, it will be better practice in my opinion.
I disagree, because if I want to provide some visual hint on the droppable area, I have to use a MC.
Moreover, with your method is not possible to detect regular drops if you want your droppable area to have a shape of a star, an elephant, and so on
Emanuele, maybe this: http://jobemakar.blogspot.com/2009/10/simple-spring-experimentation.html can be used as a guide to create a realistic rope?…
Looks like your site’s been hacked again…firefox gives me this whenever I visit it: “This web page at http://www.emanueleferonato.com has been reported as an attack page and has been blocked based on your security preferences.”
Also the pages are text-only.
Yeah i get the same message
yes, I am changing hosting service, should be fixed soon.
thank you