Way of an Idea Box2D prototype – Step 2

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.

Download the source code.

Next step, chalk management and goal.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 4.20 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

2 Responses to “Way of an Idea Box2D prototype – Step 2”

  1. Vadersapien on January 8th, 2010 1:45 am

    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…

Leave a Reply




Trackbacks

  1. Way of an Idea Box2D prototype – Step 3 : Emanuele Feronato - italian geek and PROgrammer on January 19th, 2010 6:56 pm

    [...] to the 3rd part. In part 2 we allowed the player to draw the chalk track in a “paused” Box2D environment and then [...]

flash games company