Quick Switch Flash game prototype made with Box2D

November 20, 2012 • Actionscript 3, Box2D, Flash, Game design by Emanuele Feronato • 1 Comment

A simple and addictive game which is interesting to deconstruct is Quick Switch. Use your mouse to hover over and activate platforms to guide your ball to the target.

In the making of this prototype, I’ll be using all body types Box2D allows me to use, so we have:

Static Bodies: will be used for platform which are always active

Dynamic Bodies: will be used for the ball

Kinematic Bodies: will be used for platform which need to be activated. If you don’t know what is a kinematic body, read understanding Box2D kinematic bodies.

To simplify the process of level design, I will start from the project basic Box2D editor using Flash movieclips.

So this is the final script:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.utils.*;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class Main extends Sprite {
		private var boxOriginalSize:int=40;
		private var editor:Editor = new Editor();
		private var world:b2World=new b2World(new b2Vec2(0,5),true);
		private var worldScale:int=30;
		public function Main():void {
			debugDraw();
			addChild(editor);
			for (var i:int=0; i<editor.numChildren; i++) {
				with (editor.getChildAt(i)) {
					switch (getQualifiedClassName(editor.getChildAt(i))) {
						case "Box" :
							addBox(x,y,boxOriginalSize*scaleX,boxOriginalSize*scaleY,rotation*0.0174532925,name);
							break;
						case "Sphere" :
							addSphere(x,y,width);
							break;
					}
				}
			}
			removeChild(editor);
			addEventListener(Event.ENTER_FRAME, update);
		}
		private function addSphere(pX:Number,pY:Number,r:Number):void {
			var bodyDef:b2BodyDef= new b2BodyDef();
			bodyDef.type=b2Body.b2_dynamicBody;
			bodyDef.position.Set(pX/worldScale,pY/worldScale);
			var circleShape:b2CircleShape = new b2CircleShape(r/2/worldScale);
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.density=1;
			fixtureDef.friction=0.5;
			fixtureDef.restitution=0.5;
			fixtureDef.shape=circleShape;
			var body:b2Body=world.CreateBody(bodyDef);
			body.CreateFixture(fixtureDef);
		}
		private function addBox(pX:Number,pY:Number,w:Number,h:Number,angle:Number,type:String):void {
			var bodyDef:b2BodyDef= new b2BodyDef();
			switch (type) {
				case "s" :
					bodyDef.type=b2Body.b2_staticBody;
					break;
				case "k" :
					bodyDef.type=b2Body.b2_kinematicBody;
					break;
			}
			var polygonShape:b2PolygonShape = new b2PolygonShape();
			polygonShape.SetAsOrientedBox(w/2/worldScale, h/2/worldScale, new b2Vec2(pX/worldScale,pY/worldScale),angle);
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.density=1;
			fixtureDef.friction=0.5;
			fixtureDef.restitution=0.5;
			fixtureDef.shape=polygonShape;
			var body:b2Body=world.CreateBody(bodyDef);
			body.CreateFixture(fixtureDef);
		}
		private function debugDraw():void {
			var debugDraw:b2DebugDraw=new b2DebugDraw();
			var debugSprite:Sprite=new Sprite();
			addChild(debugSprite);
			debugDraw.SetSprite(debugSprite);
			debugDraw.SetDrawScale(worldScale);
			debugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);
			debugDraw.SetFillAlpha(0.5);
			world.SetDebugDraw(debugDraw);
		}
		private function queryCallback(fixture:b2Fixture):Boolean {
			var touchedBody:b2Body=fixture.GetBody();
			for (var f:b2Fixture=touchedBody.GetFixtureList(); f; f=f.GetNext()) {
				f.SetSensor(false);
			}
			return false;
		}
		private function update(e : Event):void {
			world.Step(1/30,10,10);
			world.ClearForces();
			for (var b:b2Body=world.GetBodyList(); b; b=b.GetNext()) {
				switch (b.GetType()) {
					case b2Body.b2_dynamicBody :
						if (b.GetPosition().y>500/worldScale) {
							b.SetPosition(new b2Vec2(500/worldScale,-50/worldScale));
							b.SetLinearVelocity(new b2Vec2(0,0));
						}
						break;
					case b2Body.b2_kinematicBody :
						for (var f:b2Fixture=b.GetFixtureList(); f; f=f.GetNext()) {
							f.SetSensor(true);
						}
						break;
				}
			}
			world.QueryPoint(queryCallback,new b2Vec2(mouseX/worldScale,mouseY/worldScale));
			world.DrawDebugData();
		}
	}
}

100

101

102

103

104

package {

import flash.display.Sprite;

import flash.events.Event;

import flash.utils.*;

import Box2D.Dynamics.*;

import Box2D.Collision.*;

import Box2D.Collision.Shapes.*;

import Box2D.Common.Math.*;

public class Main extends Sprite {

private var boxOriginalSize:int=40;

private var editor:Editor = new Editor();

private var world:b2World=new b2World(new b2Vec2(0,5),true);

private var worldScale:int=30;

public function Main():void {

debugDraw();

addChild(editor);

for (var i:int=0; i<editor.numChildren; i++) {

with (editor.getChildAt(i)) {

switch (getQualifiedClassName(editor.getChildAt(i))) {

case "Box" :

addBox(x,y,boxOriginalSize*scaleX,boxOriginalSize*scaleY,rotation*0.0174532925,name);

break;

case "Sphere" :

addSphere(x,y,width);

break;

}

removeChild(editor);

addEventListener(Event.ENTER_FRAME, update);

}

private function addSphere(pX:Number,pY:Number,r:Number):void {

var bodyDef:b2BodyDef= new b2BodyDef();

bodyDef.type=b2Body.b2_dynamicBody;

bodyDef.position.Set(pX/worldScale,pY/worldScale);

var circleShape:b2CircleShape = new b2CircleShape(r/2/worldScale);

var fixtureDef:b2FixtureDef = new b2FixtureDef();

fixtureDef.density=1;

fixtureDef.friction=0.5;

fixtureDef.restitution=0.5;

fixtureDef.shape=circleShape;

var body:b2Body=world.CreateBody(bodyDef);

body.CreateFixture(fixtureDef);

}

private function addBox(pX:Number,pY:Number,w:Number,h:Number,angle:Number,type:String):void {

var bodyDef:b2BodyDef= new b2BodyDef();

switch (type) {

case "s" :

bodyDef.type=b2Body.b2_staticBody;

break;

case "k" :

bodyDef.type=b2Body.b2_kinematicBody;

break;

}

var polygonShape:b2PolygonShape = new b2PolygonShape();

polygonShape.SetAsOrientedBox(w/2/worldScale, h/2/worldScale, new b2Vec2(pX/worldScale,pY/worldScale),angle);

var fixtureDef:b2FixtureDef = new b2FixtureDef();

fixtureDef.density=1;

fixtureDef.friction=0.5;

fixtureDef.restitution=0.5;

fixtureDef.shape=polygonShape;

var body:b2Body=world.CreateBody(bodyDef);

body.CreateFixture(fixtureDef);

}

private function debugDraw():void {

var debugDraw:b2DebugDraw=new b2DebugDraw();

var debugSprite:Sprite=new Sprite();

addChild(debugSprite);

debugDraw.SetSprite(debugSprite);

debugDraw.SetDrawScale(worldScale);

debugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);

debugDraw.SetFillAlpha(0.5);

world.SetDebugDraw(debugDraw);

}

private function queryCallback(fixture:b2Fixture):Boolean {

var touchedBody:b2Body=fixture.GetBody();

for (var f:b2Fixture=touchedBody.GetFixtureList(); f; f=f.GetNext()) {

f.SetSensor(false);

}

return false;

}

private function update(e : Event):void {

world.Step(1/30,10,10);

world.ClearForces();

for (var b:b2Body=world.GetBodyList(); b; b=b.GetNext()) {

switch (b.GetType()) {

case b2Body.b2_dynamicBody :

if (b.GetPosition().y>500/worldScale) {

b.SetPosition(new b2Vec2(500/worldScale,-50/worldScale));

b.SetLinearVelocity(new b2Vec2(0,0));

}

break;

case b2Body.b2_kinematicBody :

for (var f:b2Fixture=b.GetFixtureList(); f; f=f.GetNext()) {

f.SetSensor(true);

}

break;

}

world.QueryPoint(queryCallback,new b2Vec2(mouseX/worldScale,mouseY/worldScale));

world.DrawDebugData();

}

And this is the result:

Hover the mouse over purple platform to make them solid and drive the ball into the green goal.

Now, let’s see the interesting part of this script, which is update function:

private function update(e : Event):void {
	world.Step(1/30,10,10);
	world.ClearForces();
	for (var b:b2Body=world.GetBodyList(); b; b=b.GetNext()) {
		switch (b.GetType()) {
			case b2Body.b2_dynamicBody :
				if (b.GetPosition().y>500/worldScale) {
					b.SetPosition(new b2Vec2(500/worldScale,-50/worldScale));
					b.SetLinearVelocity(new b2Vec2(0,0));
				}
				break;
			case b2Body.b2_kinematicBody :
				for (var f:b2Fixture=b.GetFixtureList(); f; f=f.GetNext()) {
					f.SetSensor(true);
				}
				break;
		}
	}
	world.QueryPoint(queryCallback,new b2Vec2(mouseX/worldScale,mouseY/worldScale));
	world.DrawDebugData();
}

private function update(e : Event):void {

world.Step(1/30,10,10);

world.ClearForces();

for (var b:b2Body=world.GetBodyList(); b; b=b.GetNext()) {

switch (b.GetType()) {

case b2Body.b2_dynamicBody :

if (b.GetPosition().y>500/worldScale) {

b.SetPosition(new b2Vec2(500/worldScale,-50/worldScale));

b.SetLinearVelocity(new b2Vec2(0,0));

}

break;

case b2Body.b2_kinematicBody :

for (var f:b2Fixture=b.GetFixtureList(); f; f=f.GetNext()) {

f.SetSensor(true);

}

break;

}

world.QueryPoint(queryCallback,new b2Vec2(mouseX/worldScale,mouseY/worldScale));

world.DrawDebugData();

}

Line 85: looping through all bodies

Line 86: now it’s time to make different things according to body type

Lines 87-92: it’s a dynamic body (the falling ball): I just put it in its starting place if it falls down the stage

Lines 93-97: it’s a kinematic body (an activable platform): I turn it into a sensor. It’s the best thing to do to make it “transparent”. It does not react to collision.

Line 100: Now it’s time to check for mouse position and check for bodies under the mouse with queryCallback function.

private function queryCallback(fixture:b2Fixture):Boolean {
	var touchedBody:b2Body=fixture.GetBody();
	for (var f:b2Fixture=touchedBody.GetFixtureList(); f; f=f.GetNext()) {
		f.SetSensor(false);
	}
	return false;
}

private function queryCallback(fixture:b2Fixture):Boolean {

var touchedBody:b2Body=fixture.GetBody();

for (var f:b2Fixture=touchedBody.GetFixtureList(); f; f=f.GetNext()) {

f.SetSensor(false);

}

return false;

}

This function simply scans for all fixtures inside the body under the mouse and does not make them sensors anymore.

And that’s it.

Download the source code.

Rate this post: 1 Star

(8 votes, average: 5.00 out of 5)

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 one comment

Quick Switch Flash game prototype made with Box2D – Emanuele Feronato « eaflash

on November 26, 2012 at 10:46 am

[...] on http://www.emanueleferonato.com Share this:TwitterFacebookLike this:LikeBe the first to like [...]

Emanuele Feronato

italian geek and PROgrammer

Quick Switch Flash game prototype made with Box2D

This post has one comment

Quick Switch Flash game prototype made with Box2D – Emanuele Feronato « eaflash