Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Actionscript 3, Box2D and Flash.

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:

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?

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.