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.

9 Responses to “Basic Filler engine with Box2D – part 1”

  1. robby on February 23rd, 2009 11:48 pm

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

  2. bindiry on February 24th, 2009 4:59 am

    How to test the collision?

  3. bindiry on February 24th, 2009 6:10 am

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

  4. bindiry on February 24th, 2009 11:18 am

    b2ContactListener ?

  5. Shival on February 24th, 2009 2:13 pm

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

  6. Monkios on February 24th, 2009 6:01 pm
  7. Augusto Flores on February 25th, 2009 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 28th, 2009 9:05 am

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

    Thanks for all these wonderful tutorials ^^/

Leave a Reply




Trackbacks

  1. Basic Filler engine with Box2D – part 2 : Emanuele Feronato on July 20th, 2009 12:29 pm

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

flash games company