Basic Filler engine with Box2D – part 1

Do you remember Filler?

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 Box2DfleshMaker 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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 5.00 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.

12 Responses

  1. robby says:

    Amazing job Emanuele! Can’t wait for part 2.

  2. bindiry says:

    How to test the collision?

  3. bindiry says:

    How to test the overlap?
    world.Query()?

  4. bindiry says:

    b2ContactListener ?

  5. Shival says:

    Great. Can’t wait to see the final game.

  6. 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.

  7. kyong says:

    Hey Emanuele, could you make a Bejeweled-like tutorial?

    Thanks for all these wonderful tutorials ^^/

  8. [...] time ago I published Basic Filler engine with Box2D – part 1, now it’s time to see the next [...]

  9. Anand says:

    So good & Thanks

  10. [...] the ‘Testbed’, outside the Flash IDE and without the debugDraw calls so I made one from Emanuele Feronato’s code example. Emanuele also took this one step further and made a ‘Filler’ clone called [...]

  11. wirawan says:

    that cool,,,, ^^

Leave a Reply