Scaling objects with Box2D – part 2

December 16, 2009 • Actionscript 3, Box2D, Flash by Emanuele Feronato • 7 Comments

In the first part I showed you how to scale a circle.

Now it’s time to scale a square… but before entering in the tutorial, I would like to do some cut/paste theory :)

In Euclidean geometry, uniform scaling or isotropic scaling is a linear transformation that enlarges or increases or diminishes objects; the scale factor is the same in all directions.

In Box2D, I said you can’t scale an object but you can replace the shape with a similar one

Two geometrical objects are called similar if they both have the same shape. More precisely, one is congruent to the result of a uniform scaling (enlarging or shrinking) of the other. Corresponding sides of similar polygons are in proportion, and corresponding angles of similar polygons have the same measure. One can be obtained from the other by uniformly “stretching” the same amount on all directions, possibly with additional rotation and reflection, i.e., both have the same shape, or one has the same shape as the mirror image of the other. For example, all circles are similar to each other, all squares are similar to each other, and all equilateral triangles are similar to each other. On the other hand, ellipses are not all similar to each other, nor are hyperbolas all similar to each other. If two angles of a triangle have measures equal to the measures of two angles of another triangle, then the triangles are similar.

Source: scaling and similarity on Wikipedia.

Now, even with my poor geometry skills, I know you can scale all the kind of shapes as long as you scale the triangles forming them… and you can scale every triangle with a bit of trigonometry.

But this is not the meaning of this tutorial… now I just want to have the same routine scaling both a circle and a rectangle.

The first thing to do when you select a body, is determining the kind of the shape attached to the body. This can be solved with GetType(): applied to a shape, it returns 0 if it’s a b2CircleShape (a circle) and 1 if it’s a b2PolygonShape, such as a rectangle in our example.

Another useful function is GetVertexCount()… it will return the number of vertex, and it’s very useful to determine if you are dealing with triangles, rectangles, or more complex polygons. Remember you should use regular polygons if you don’t want to drive yourself mad with geometry.

Last but not least, GetVertices() will return an array with all vertices… very useful to determine current width and height of our rectangle.

So the code used in the first part 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

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 shrink extends Sprite {
		var body:b2Body;
		public var m_world:b2World;
		private var mousePVec:b2Vec2 = new b2Vec2();
		public function shrink() {
			var worldAABB:b2AABB = new b2AABB();
			var bodyDef:b2BodyDef;
			var boxDef:b2PolygonDef;
			var circleDef:b2CircleDef;
			worldAABB.lowerBound.Set(-100.0, -100.0);
			worldAABB.upperBound.Set(100.0, 100.0);
			m_world=new b2World(worldAABB,new b2Vec2(0,10),true);
			// debug draw start
			var m_sprite:Sprite;
			m_sprite = new Sprite();
			addChild(m_sprite);
			var dbgDraw:b2DebugDraw = new b2DebugDraw();
			var dbgSprite:Sprite = new Sprite();
			m_sprite.addChild(dbgSprite);
			dbgDraw.m_sprite=m_sprite;
			dbgDraw.m_drawScale=30;
			dbgDraw.m_alpha=1;
			dbgDraw.m_fillAlpha=0.5;
			dbgDraw.m_lineThickness=1;
			dbgDraw.m_drawFlags=b2DebugDraw.e_shapeBit;
			m_world.SetDebugDraw(dbgDraw);
			// debug draw end
			// ground
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(10, 12);
			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(30, 3);
			boxDef.friction=0.3;
			boxDef.density=0;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
			// circle
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(4,5);
			circleDef = new b2CircleDef();
			circleDef.radius=3;
			circleDef.density=1;
			circleDef.friction=0.5;
			circleDef.restitution=0.2;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(circleDef);
			body.SetMassFromShapes();
			// box
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(12, 5);
			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(3, 4);
			boxDef.friction=0.5;
			boxDef.density=1;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
			//
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, GetBodyAtMouse);
		}
		public function GetBodyAtMouse(includeStatic:Boolean=false):b2Body {
			var mouseXWorldPhys = (mouseX)/30;
			var mouseYWorldPhys = (mouseY)/30;
			mousePVec.Set(mouseXWorldPhys, mouseYWorldPhys);
			var aabb:b2AABB = new b2AABB();
			aabb.lowerBound.Set(mouseXWorldPhys - 0.001, mouseYWorldPhys - 0.001);
			aabb.upperBound.Set(mouseXWorldPhys + 0.001, mouseYWorldPhys + 0.001);
			var k_maxCount:int=10;
			var shapes:Array = new Array();
			var count:int=m_world.Query(aabb,shapes,k_maxCount);
			var body:b2Body=null;
			for (var i:int = 0; i < count; ++i) {
				if (shapes[i].GetBody().IsStatic()==false||includeStatic) {
					var tShape:b2Shape=shapes[i] as b2Shape;
					var inside:Boolean=tShape.TestPoint(tShape.GetBody().GetXForm(),mousePVec);
					if (inside) {
						body=tShape.GetBody();
						break;
					}
				}
			}
			// if I selected a body...
			if (body) {
				var s:b2Shape=body.GetShapeList();
				var type:int=s.GetType();
				switch (type) {
					case 0 :
						// I know it's a circle, so I am creating a b2CircleShape variable
						var circle:b2CircleShape=body.GetShapeList() as b2CircleShape;
						// getting the radius..
						var r=circle.GetRadius();
						// removing the circle shape from the body
						body.DestroyShape(circle);
						// creating a new circle shape
						var circleDef:b2CircleDef;
						circleDef = new b2CircleDef();
						// calculating new radius
						circleDef.radius=r*0.9;
						circleDef.density=1.0;
						circleDef.friction=0.5;
						circleDef.restitution=0.2;
						// attach the shape to the body
						body.CreateShape(circleDef);
						// determine new body mass
						body.SetMassFromShapes();
						break;
					case 1 :
						// now I know it's a polygon (a square, in this case)
						var poly:b2PolygonShape=body.GetShapeList() as b2PolygonShape;
						// I know a box has 4 vertices, but it's useful to know
						// the number of vertices just in case I have triangles
						// on the stage
						var vertex_num:int=poly.GetVertexCount();
						// determining new with and height of the square
						var square_width = (poly.GetVertices()[1].x-poly.GetVertices()[0].x)/2*0.9;
						var square_height = (poly.GetVertices()[2].y-poly.GetVertices()[0].y)/2*0.9;
						// removing the existing shape
						body.DestroyShape(poly);
						// creating a new square
						var boxDef:b2PolygonDef;
						boxDef = new b2PolygonDef();
						boxDef.SetAsBox(square_width, square_height);
						boxDef.friction=0.5;
						boxDef.density=1;
						// attaching the shape to the body
						body.CreateShape(boxDef);
						body.SetMassFromShapes();
						break;
				}
			}
			return body;
		}
		public function Update(e:Event):void {
			m_world.Step(1/30, 10);
		}
	}
}

And the result is:

Click on shapes to scale them down. No need to download, simply cut/paste this code on the file you can find at first part and you’re done.

Any geometry hero willing to scale a triangle?

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

  1. Joe

    on December 16, 2009 at 1:12 am

    This is great … I just finished reading the first part ! Thanks for the great tutorials man.

  2. Colin Douch

    on December 16, 2009 at 9:48 am

    Lol You scale the ground and it makes it non static..because you are replacing the static shape with a non static one

  3. Monkios

    on December 16, 2009 at 5:29 pm

    Should I be able to make the floor disapear ?

  4. Yarden Refaeli

    on December 16, 2009 at 8:59 pm

    Haha try to scale the bottom box… It will collapse ;)

  5. Nathan

    on December 16, 2009 at 9:48 pm

    Can’t you just multiply each dimension by a scale factor to make it smaller?

    Every time you click the scale factor becomes smaller.

    for instance:

    var scale:Number = 1;

    on click:

    boxDef.SetAsBox(width * scale, height * 8);

    would that work?

    scale -= 0.1;

  6. Nathan

    on December 16, 2009 at 9:49 pm

    sorry

    boxDef.SetAsBox(width * scale, height * scale);

  7. Ilya

    on December 19, 2009 at 11:22 am

    Yeah! Why not to do so as Nathan offered. In this case you even shouldn’t know what the shape it is (except circle of course). Just:

    var scale:Number = .9;

    var vertCount:int = oldShape.GetVertexCount();
    var someAr:Array = oldShape.GetVertices();

    for each(var vert:b2Vec2 in someAr){
    vert.Multiply(scale);
    }

    var newShape:b2PolygonDef = new b2PolygonDef();
    newShape.vertexCount = vertCount;
    newShape.vertices = someAr;

    body.DestroyShape(oldShape);
    body.CreateShape(newShape);

    Will it be much slower or something else ugly?

< >