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 (11 votes, average: 5.00 out of 5)
Loading ... Loading ...
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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 12 comments

  1. robby

    on February 23, 2009 at 11:48 pm

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

  2. bindiry

    on February 24, 2009 at 4:59 am

    How to test the collision?

  3. bindiry

    on February 24, 2009 at 6:10 am

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

  4. bindiry

    on February 24, 2009 at 11:18 am

    b2ContactListener ?

  5. Shival

    on February 24, 2009 at 2:13 pm

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

  6. Monkios

    on February 24, 2009 at 6:01 pm

    I think I broke it …

    http://img26.imageshack.us/img26/2158/fillergame.jpg

  7. Augusto Flores

    on February 25, 2009 at 8:03 pm

    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.

  8. kyong

    on February 28, 2009 at 9:05 am

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

    Thanks for all these wonderful tutorials ^^/

  9. Basic Filler engine with Box2D – part 2 : Emanuele Feronato

    on July 20, 2009 at 12:29 pm

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

  10. Anand

    on March 28, 2010 at 10:21 am

    So good & Thanks

  11. Box2D – Growing Bouncy Balls – Flash Builder 4 Actionscript Project Example « Flash Life

    on March 30, 2010 at 8:08 am

    [...] 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 [...]

  12. wirawan

    on July 1, 2010 at 6:15 am

    that cool,,,, ^^