Way of an Idea Box2D prototype – Step 2
- January 7, 2010 by Emanuele Feronato
- Filed under Actionscript 3, Box2D, Flash, Game design | 6 Comments
It’s time to apply the concepts seen at Pausing a Box2D simulation with Way of an Idea Box2D prototype to create a paused Box2D simulation that will start only when you’ll press SPACE, and meanwhile you can draw paths, just like in the original game.
The only problem with this technique is you can’t use the debug draw to test your projects, because debug draw draws only after Step function has been executed, and since the game starts with the simulation paused, you can’t see the Box2D boxes you are drawing (and you can’t even see other assets too) until you start the simulation.
So the trick is: placing the Box2D boxes, the ones debug draw won’t draw, and attaching the movieclips to them. The movieclips will be rendered because I am adding them to stage, and they will remain in position until the simulation starts.
So the script becomes:
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 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 | package { import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.events.KeyboardEvent; import Box2D.Dynamics.*; import Box2D.Collision.*; import Box2D.Collision.Shapes.*; import Box2D.Common.Math.*; public class draw extends Sprite { public var drawing:Boolean=false; public var canvas:Sprite = new Sprite(); public var points_array:Array; public var pixel_dist:int=20; public var saved_x:int; public var saved_y:int; public var m_world:b2World; public var body:b2Body; public var bodyDef:b2BodyDef = new b2BodyDef(); public var circleDef:b2CircleDef= new b2CircleDef(); // radians to degrees conversion public var rad_to_deg:Number=57.2957795; // simulation timestep. We start at zero. public var timestep:Number=0; public function draw():void { // world creation var worldAABB:b2AABB = new b2AABB(); worldAABB.lowerBound.Set(-100.0, -100.0); worldAABB.upperBound.Set(100.0, 100.0); m_world=new b2World(worldAABB,new b2Vec2(0,10),true); // // *** IMPORTANT: NOTICE THERE ISN'T ANY DEBUG DRAW ROUTINE *** // // placing the ball bodyDef.position.Set(20/30,20/30); circleDef.radius=15/30; circleDef.density=1; circleDef.friction=0.5; circleDef.restitution=0.2; // ball's movieclip attachment bodyDef.userData = new sphere(); bodyDef.userData.x=20; bodyDef.userData.y=20; bodyDef.userData.width=30; bodyDef.userData.height=30; addChild(bodyDef.userData); // end ball's movieclip attachment body=m_world.CreateBody(bodyDef); body.CreateShape(circleDef); body.SetMassFromShapes(); // addChild(canvas); canvas.graphics.lineStyle(5); stage.addEventListener(MouseEvent.MOUSE_DOWN,mouse_pressed); stage.addEventListener(MouseEvent.MOUSE_MOVE,mouse_moved); stage.addEventListener(MouseEvent.MOUSE_UP,mouse_released); addEventListener(Event.ENTER_FRAME, Update, false, 0, true); stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down); } public function mouse_pressed(e:MouseEvent):void { drawing=true; canvas.graphics.moveTo(mouseX,mouseY); points_array=new Array(); saved_x=mouseX; saved_y=mouseY; points_array.push(saved_x); points_array.push(saved_y); } public function mouse_moved(e:MouseEvent):void { if (drawing) { var dist_x:int=mouseX-saved_x; var dist_y:int=mouseY-saved_y; if (dist_x*dist_x+dist_y*dist_y>pixel_dist*pixel_dist) { canvas.graphics.lineTo(mouseX,mouseY); saved_x=mouseX; saved_y=mouseY; points_array.push(saved_x); points_array.push(saved_y); } } } public function mouse_released(e:MouseEvent):void { drawing=false; var sx:int; var ex:int; var sy:int; var ey:int; var dist_x:int; var dist_y:int; var dist:Number; var angle:Number; var segments:int=points_array.length/2-1; for (var i:int=0; i<segments; i++) { sx=points_array[i*2]; sy=points_array[i*2+1]; ex=points_array[i*2+2]; ey=points_array[i*2+3]; dist_x=sx-ex; dist_y=sy-ey; dist=Math.sqrt(dist_x*dist_x+dist_y*dist_y); angle=Math.atan2(dist_y,dist_x); create_box((sx+ex)/60,(sy+ey)/60,Math.abs(dist)/60,2/30,angle); } canvas.graphics.clear(); canvas.graphics.lineStyle(5); } // function to be called if the player presses space // switching timestep public function key_down(event:KeyboardEvent):void { if (event.keyCode==32) { if (timestep) { timestep=0; } else { timestep=1/30; } } } public function create_box(px,py,w,h,a):void { var body:b2Body; var bodyDef:b2BodyDef; var boxDef:b2PolygonDef; bodyDef = new b2BodyDef(); bodyDef.position.Set(px,py); bodyDef.angle=a; boxDef = new b2PolygonDef(); boxDef.SetAsBox(w,h); boxDef.friction=0.3; boxDef.density=0; // box's movieclip attachment bodyDef.userData = new chalk(); bodyDef.userData.x=px*30; bodyDef.userData.y=py*30; bodyDef.userData.width=w*60; bodyDef.userData.height=h*60; bodyDef.userData.rotation=a*rad_to_deg; addChild(bodyDef.userData); // end box's movieclip attachment body=m_world.CreateBody(bodyDef); body.CreateShape(boxDef); body.SetMassFromShapes(); } public function Update(e:Event):void { // executing Step function and updating movieclips positions only // if timestep != 0 if (timestep) { m_world.Step(timestep, 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); } } } } } } |
and this is the result:
draw with the mouse and press SPACE to play/pause the simulation.
Next step, chalk management and goal.
They can be easily customized to meet the unique requirements of your project.
6 Responses
Leave a Reply
TUTORIAL SERIES:
- Una guida completa al gioco del poker online e una selezione dei migliori casino online.
- casino online
- migliori casino online
- BlackJack online
- casinò online

(5 votes, average: 4.20 out of 5)

Looking a lot like line rider, but with box2d…if you replaced the circle with a compound object and added an eraser…I think that’d make an interesting game…
[...] to the 3rd part. In part 2 we allowed the player to draw the chalk track in a “paused” Box2D environment and then [...]
Hi, there..
Thank you for this article, because of it i am making new game that will use this concept…
Problem is that i am stuck ^^…
When i draw on screen and drawing transforms to b2 objects they don’t appear exactly where trace of “pen” is, but they appear a little down and to the right.. Closer i draw to the right part of the screen objects move more to the right…
I am sure this doesn’t have anything with gravity..
What is interesting is that this happens even when update of b2World is not running.. :/
And btw, pause will not be solution since i need to draw objects while b2World is running because i am creating action game that will use this drawing object technique…
Thanks in advance for your answer.. Please email me.
Cheers,
Kristian
I think this could be connected with ratio..
U are dividing positions by 60…
I tried to use my RATIO that i use everywhere but it doesn’t work, though i get different placements then…
Any idea how to make this work?
p.s. u really should have that value as constant it would be easier to understand what’s happening :p
Cheers!
Sigh now it starts too look like i am spamming you..
But u might get some extra traffic because of this :D
Anyway i played a little with values and it seems part of problem is in this part :
create_box((sx+ex)/World.RATIO,(sy+ey)/World.RATIO,Math.abs(dist)/World.RATIO,2/30,angle);
When i change sx+ex to sx and sy+ey to sy then body its placed where it should be placed, BUT…
Bodies are not 1 after another but they are more like half of each inside of other..Not sure how to explain it…I tried reducing width by 2 but it didnt help..
Screenshot of problem :
http://tinypic.com/r/eambzk/5