Emanuele Feronato http://www.emanueleferonato.com italian geek and PROgrammer Wed, 16 May 2012 19:40:52 +0000 en hourly 1 http://wordpress.org/?v= Simulating mud/slime with Box2D, bitmaps and filters http://www.emanueleferonato.com/2012/05/16/simulating-mudslime-with-box2d-bitmaps-and-filters/ http://www.emanueleferonato.com/2012/05/16/simulating-mudslime-with-box2d-bitmaps-and-filters/#comments Wed, 16 May 2012 19:40:52 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5460 This is an attempt to simulate something like mud/slime with Box2D for a game concept I am trying do develop.

I won’t go much in detail with the tutorial because at the moment I am still fine-tuning the effect, but I am showing you a step by step process to achieve a slime-looking effect.

First, let’s create some static objects:

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class Main extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,5),true);
		private var worldScale:Number=30;
		public function Main() {
			debugDraw();
			var polygonShape:b2PolygonShape = new b2PolygonShape();
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.restitution=0;
			fixtureDef.density=1;
			fixtureDef.friction=0.4;
			var bodyDef:b2BodyDef= new b2BodyDef();
			bodyDef.position.Set(320/worldScale,240/worldScale);
			var container:b2Body;
			container=world.CreateBody(bodyDef);
			polygonShape.SetAsOrientedBox(132/worldScale/2,12/worldScale/2,new b2Vec2(0/worldScale,144/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,200/worldScale/2,new b2Vec2(-60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,276/worldScale/2,new b2Vec2(60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			addEventListener(Event.ENTER_FRAME,update);
		}
		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 update(e:Event):void {
			world.Step(1/30,6,2);
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

I am just creating some kind of container with a hole in the bottom.

Then, I skin the container with a transparent image and create one little ball at every frame, someone would call them particle. I remove them when they leave the stage to the bottom, and I don’t place more than 200 balls at the same time, although I was able to place about 300 of them without stressing that much my CPU.

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class Main extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,5),true);
		private var worldScale:Number=30;
		public function Main() {
			debugDraw();
			var backgroundImage:BackgroundImage=new BackgroundImage();
			addChild(backgroundImage);
			var polygonShape:b2PolygonShape = new b2PolygonShape();
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.restitution=0;
			fixtureDef.density=1;
			fixtureDef.friction=0.4;
			var bodyDef:b2BodyDef= new b2BodyDef();
			bodyDef.position.Set(320/worldScale,240/worldScale);
			var container:b2Body;
			container=world.CreateBody(bodyDef);
			polygonShape.SetAsOrientedBox(132/worldScale/2,12/worldScale/2,new b2Vec2(0/worldScale,144/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,200/worldScale/2,new b2Vec2(-60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,276/worldScale/2,new b2Vec2(60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			addEventListener(Event.ENTER_FRAME,update);
		}
		private function addCircle(pX:Number,pY:Number,h:Number):void {
			var circleShape:b2CircleShape = new b2CircleShape(h/worldScale);
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.density=3;
			fixtureDef.friction=0.4;
			fixtureDef.restitution=0;
			fixtureDef.shape=circleShape;
			var bodyDef:b2BodyDef = new b2BodyDef();
			bodyDef.type=b2Body.b2_dynamicBody;
			bodyDef.position.Set(pX/worldScale,pY/worldScale);
			bodyDef.userData=new WaterCircle();
			var box:b2Body=world.CreateBody(bodyDef);
			box.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 update(e:Event):void {
			var waterParticles:Number=0;
			world.Step(1/30,6,2);
			world.ClearForces();
			for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
				if (b.GetUserData()!=null) {
					waterParticles++;
					if (b.GetPosition().y*worldScale>480) {
						world.DestroyBody(b);
					}
				}
			}
			if (waterParticles<300) {
				addCircle(320+1-Math.random()*2,-10,5);
			}
			world.DrawDebugData();
		}
	}
}

At this time I have a continuous flux of balls falling down the container.

Next steps consists in rendering balls on a separate DisplayObject using a Bitmap

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.geom.Matrix;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class Main extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,5),true);
		private var worldScale:Number=30;
		private var waterBitmapData:BitmapData=new BitmapData(640,480,false,0xFF333333);
		private var waterBitmap:Bitmap=new Bitmap(waterBitmapData);
		private var waterMatrix:Matrix=new Matrix();
		public function Main() {
			addChild(waterBitmap);
			var backgroundImage:BackgroundImage=new BackgroundImage();
			addChild(backgroundImage);
			var polygonShape:b2PolygonShape = new b2PolygonShape();
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.restitution=0;
			fixtureDef.density=1;
			fixtureDef.friction=0.4;
			var bodyDef:b2BodyDef= new b2BodyDef();
			bodyDef.position.Set(320/worldScale,240/worldScale);
			var container:b2Body;
			container=world.CreateBody(bodyDef);
			polygonShape.SetAsOrientedBox(132/worldScale/2,12/worldScale/2,new b2Vec2(0/worldScale,144/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,200/worldScale/2,new b2Vec2(-60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,276/worldScale/2,new b2Vec2(60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			addEventListener(Event.ENTER_FRAME,update);
		}
		private function addCircle(pX:Number,pY:Number,h:Number):void {
			var circleShape:b2CircleShape = new b2CircleShape(h/worldScale);
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.density=3;
			fixtureDef.friction=0.4;
			fixtureDef.restitution=0;
			fixtureDef.shape=circleShape;
			var bodyDef:b2BodyDef = new b2BodyDef();
			bodyDef.type=b2Body.b2_dynamicBody;
			bodyDef.position.Set(pX/worldScale,pY/worldScale);
			bodyDef.userData=new WaterCircle();
			var box:b2Body=world.CreateBody(bodyDef);
			box.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 update(e:Event):void {
			var waterParticles:Number=0;
			waterBitmapData.fillRect(waterBitmapData.rect,0xFF333333);
			world.Step(1/30,6,2);
			world.ClearForces();
			for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
				if (b.GetUserData()!=null) {
					waterParticles++;
					if (b.GetPosition().y*worldScale>480) {
						world.DestroyBody(b);
					}
					else {
						waterMatrix.tx=b.GetPosition().x*worldScale;
						waterMatrix.ty=b.GetPosition().y*worldScale;
						waterBitmapData.draw(b.GetUserData(),waterMatrix);
					}
				}
			}
			if (waterParticles<300) {
				addCircle(320+1-Math.random()*2,-10,5);
			}
			world.DrawDebugData();
		}
	}
}

Now I can remove the debug draw as all Box2D assets have their own DisplayObject representing them

And now, since I am using a Bitmap, I can add a blur filter to balls

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.geom.Matrix;
	import flash.filters.BlurFilter;
	import flash.filters.BitmapFilterQuality;
	import flash.geom.Point;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class Main extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,5),true);
		private var worldScale:Number=30;
		private var waterBitmapData:BitmapData=new BitmapData(640,480,false,0xFF333333);
		private var waterBitmap:Bitmap=new Bitmap(waterBitmapData);
		private var waterMatrix:Matrix=new Matrix();
		private var waterBlur:BlurFilter=new BlurFilter(15,15,flash.filters.BitmapFilterQuality.HIGH);
		public function Main() {
			addChild(waterBitmap);
			var backgroundImage:BackgroundImage=new BackgroundImage();
			addChild(backgroundImage);
			var polygonShape:b2PolygonShape = new b2PolygonShape();
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.restitution=0;
			fixtureDef.density=1;
			fixtureDef.friction=0.4;
			var bodyDef:b2BodyDef= new b2BodyDef();
			bodyDef.position.Set(320/worldScale,240/worldScale);
			var container:b2Body;
			container=world.CreateBody(bodyDef);
			polygonShape.SetAsOrientedBox(132/worldScale/2,12/worldScale/2,new b2Vec2(0/worldScale,144/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,200/worldScale/2,new b2Vec2(-60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,276/worldScale/2,new b2Vec2(60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			addEventListener(Event.ENTER_FRAME,update);
		}
		private function addCircle(pX:Number,pY:Number,h:Number):void {
			var circleShape:b2CircleShape = new b2CircleShape(h/worldScale);
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.density=3;
			fixtureDef.friction=0.4;
			fixtureDef.restitution=0;
			fixtureDef.shape=circleShape;
			var bodyDef:b2BodyDef = new b2BodyDef();
			bodyDef.type=b2Body.b2_dynamicBody;
			bodyDef.position.Set(pX/worldScale,pY/worldScale);
			bodyDef.userData=new WaterCircle();
			var box:b2Body=world.CreateBody(bodyDef);
			box.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 update(e:Event):void {
			var waterParticles:Number=0;
			waterBitmapData.fillRect(waterBitmapData.rect,0xFF333333);
			world.Step(1/30,6,2);
			world.ClearForces();
			for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
				if (b.GetUserData()!=null) {
					waterParticles++;
					if (b.GetPosition().y*worldScale>480) {
						world.DestroyBody(b);
					}
					else {
						waterMatrix.tx=b.GetPosition().x*worldScale;
						waterMatrix.ty=b.GetPosition().y*worldScale;
						waterBitmapData.draw(b.GetUserData(),waterMatrix);
					}
				}
			}
			if (waterParticles<300) {
				addCircle(320+1-Math.random()*2,-10,5);
			}
			waterBitmapData.applyFilter(waterBitmapData,waterBitmapData.rect,new Point(0,0),waterBlur);
		}
	}
}

At this time I’m getting a “smoke” effect, but this is not what I want

So the final step is to add a threshold to change some colors of my bitmap balls/smoke, play a bit with transparency and add a better background

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.geom.Matrix;
	import flash.filters.BlurFilter;
	import flash.filters.BitmapFilterQuality;
	import flash.geom.Point;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class Main extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,5),true);
		private var worldScale:Number=30;
		private var waterBitmapData:BitmapData=new BitmapData(640,480,true,0x00000000);
		private var waterBitmap:Bitmap=new Bitmap(waterBitmapData);
		private var waterMatrix:Matrix=new Matrix();
		private var waterBlur:BlurFilter=new BlurFilter(15,15,flash.filters.BitmapFilterQuality.HIGH);
		public function Main() {
			var realBg:RealBg=new RealBg();
			addChild(realBg);
			addChild(waterBitmap);
			var backgroundImage:BackgroundImage=new BackgroundImage();
			addChild(backgroundImage);
			var polygonShape:b2PolygonShape = new b2PolygonShape();
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.restitution=0;
			fixtureDef.density=1;
			fixtureDef.friction=0.4;
			var bodyDef:b2BodyDef= new b2BodyDef();
			bodyDef.position.Set(320/worldScale,240/worldScale);
			var container:b2Body;
			container=world.CreateBody(bodyDef);
			polygonShape.SetAsOrientedBox(132/worldScale/2,12/worldScale/2,new b2Vec2(0/worldScale,144/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,200/worldScale/2,new b2Vec2(-60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			polygonShape.SetAsOrientedBox(12/worldScale/2,276/worldScale/2,new b2Vec2(60/worldScale,0/worldScale),0);
			fixtureDef.shape=polygonShape;
			container.CreateFixture(fixtureDef);
			addEventListener(Event.ENTER_FRAME,update);
		}
		private function addCircle(pX:Number,pY:Number,h:Number):void {
			var circleShape:b2CircleShape = new b2CircleShape(h/worldScale);
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.density=3;
			fixtureDef.friction=0.4;
			fixtureDef.restitution=0;
			fixtureDef.shape=circleShape;
			var bodyDef:b2BodyDef = new b2BodyDef();
			bodyDef.type=b2Body.b2_dynamicBody;
			bodyDef.position.Set(pX/worldScale,pY/worldScale);
			bodyDef.userData=new WaterCircle();
			var box:b2Body=world.CreateBody(bodyDef);
			box.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 update(e:Event):void {
			var waterParticles:Number=0;
			waterBitmapData.fillRect(waterBitmapData.rect,0x00000000);
			world.Step(1/30,6,2);
			world.ClearForces();
			for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
				if (b.GetUserData()!=null) {
					waterParticles++;
					if (b.GetPosition().y*worldScale>480) {
						world.DestroyBody(b);
					}
					else {
						waterMatrix.tx=b.GetPosition().x*worldScale;
						waterMatrix.ty=b.GetPosition().y*worldScale;
						waterBitmapData.draw(b.GetUserData(),waterMatrix);
					}
				}
			}
			if (waterParticles<300) {
				addCircle(320+1-Math.random()*2,-10,5);
			}
			waterBitmapData.applyFilter(waterBitmapData,waterBitmapData.rect,new Point(0,0),waterBlur);
			waterBitmapData.threshold(waterBitmapData,waterBitmapData.rect,new Point(0,0),">",0X11444444,0x88FF00FF,0xFFFFFFFF, true);
		}
	}
}

And that’s it! Not the best slime ever seen, but it’s dynamically generated by Box2D, this means it has a real mass, which is quite awesome.

How would you improve it?

Download the source code of the last example.

]]> http://www.emanueleferonato.com/2012/05/16/simulating-mudslime-with-box2d-bitmaps-and-filters/feed/ 8 Understanding Box2D kinematic bodies http://www.emanueleferonato.com/2012/05/11/understanding-box2d-kinematic-bodies/ http://www.emanueleferonato.com/2012/05/11/understanding-box2d-kinematic-bodies/#comments Fri, 11 May 2012 21:46:21 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5452 So you are used to work with Box2D and know everything about body types, such as static bodies and dynamic bodies… why nobody talks about kinematic bodies?

I think kinematic bodies are great to do some tasks, but first let me briefly explain the difference among body types.

A dynamic body is a body which is affected by world forces and react to collisions. And you already met a million of them.

A static body is a body which isn’t affected by world forces it does not react to collisions. It can’t be moved. Fullstop.

A kinematic body is an hybrid body which is not affected by forces and collisions like a static body but can moved with a linear velocity like a dynamic body.

So I made this little, commented script where dynamic spheres fall down at every second in a world full of moving kinematic bodies. The effect is unique and can be used in some games.

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class Main extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,5),true);
		private var worldScale:Number=30;
		private var timer:Timer=new Timer(1000);
		public function Main() {
			debugDraw();
			for (var i:int=0; i<10; i++) {
				// building 10 kinematic spheres
				// five on the left side of the stage moving right
				// five on the right side of the stage moving left
				kinematicSphere(640*(i%2),50+40*i,10,(1-2*(i%2))*(Math.random()*10+5));
			}
			addEventListener(Event.ENTER_FRAME,updateWorld);
			// I will make a dynamic sphere fall from the top of the stage
			// at every second
			timer.start();
			timer.addEventListener(TimerEvent.TIMER,addSphere);
		}
		private function addSphere(e:TimerEvent):void {
			dynamicSphere(320,-10,10);
		}
		private function dynamicSphere(pX:int,pY:int,r:Number):void {
			var bodyDef:b2BodyDef=new b2BodyDef();
			bodyDef.position.Set(pX/worldScale,pY/worldScale);
			bodyDef.type=b2Body.b2_dynamicBody;
			var circleShape:b2CircleShape=new b2CircleShape(r/worldScale);
			var fixtureDef:b2FixtureDef=new b2FixtureDef();
			fixtureDef.shape=circleShape;
			var theDynamic:b2Body=world.CreateBody(bodyDef);
			theDynamic.CreateFixture(fixtureDef);
		}
		private function kinematicSphere(pX:int,pY:int,r:Number,hV):void {
			var bodyDef:b2BodyDef=new b2BodyDef();
			bodyDef.position.Set(pX/worldScale,pY/worldScale);
			// ************************** HERE IS THE MAGIC LINE ************************** \\
			bodyDef.type=b2Body.b2_kinematicBody;
			var circleShape:b2CircleShape=new b2CircleShape(r/worldScale);
			var fixtureDef:b2FixtureDef=new b2FixtureDef();
			fixtureDef.shape=circleShape;
			var theKinematic:b2Body=world.CreateBody(bodyDef);
			theKinematic.CreateFixture(fixtureDef);
			// look, I can set a linear velocity
			theKinematic.SetLinearVelocity(new b2Vec2(hV,0));
		}
		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);
			debugDraw.SetFillAlpha(0.5);
			world.SetDebugDraw(debugDraw);
		}
		private function updateWorld(e:Event):void {
			world.Step(1/30,10,10);
			world.ClearForces();
			for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
				// changing kinematic sphere linear velocity if it touches stage edges
				if (b.GetType()==b2Body.b2_kinematicBody) {
					var xSpeed:Number=b.GetLinearVelocity().x;
					var xPos:Number=b.GetWorldCenter().x*worldScale;
					if ((xPos<10&&xSpeed<0) || (xPos>630&&xSpeed>0)) {
						xSpeed*=-1;
						b.SetLinearVelocity(new b2Vec2(xSpeed,0));
					}
				}
				else {
					if (b.GetWorldCenter().y*worldScale>480) {
						world.DestroyBody(b);
					}
				}
			}
			world.DrawDebugData();
		}
	}
}

This is the result:

Also look how debug draw shows kinematic bodies.

Download the source code.

]]> http://www.emanueleferonato.com/2012/05/11/understanding-box2d-kinematic-bodies/feed/ 4 Box2d Flash advergame for Malibu Rum http://www.emanueleferonato.com/2012/05/09/box2d-flash-advergame-for-malibu-rum/ http://www.emanueleferonato.com/2012/05/09/box2d-flash-advergame-for-malibu-rum/#comments Wed, 09 May 2012 21:52:12 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5443 Developing Flash games does not mean just creating a game and trying to get it sponsored. If you are a good developer, sometimes you can be hired to create an advergame, a video game used to advertise a product.

That’s what happened to me a couple of weeks ago, when the guys at Mutado, one of the biggest creative studios in Italy, asked me to develop the Box2D engine for their Malibu Rum advergame.

The game is really easy, you just have to throw a coconut with a sling and make Malibu bottles fall down to be eligible to win some prizes, if you buy a bottle of Malibu.

You can play it at this link clicking on the 300×200 banner.

The engine of the game is a modification of the concept seen on Develop a Flash game like Angry Birds using Box2D, they saw the demo and they liked it. That’s why you should always, ALWAYS have at least one page around the web with your works.

The creation of an advergame has a monetization process which is similar to an exclusive sponsorship with no third-party ads: basically you get the money for the game and there isn’t any revenue share. Moreover, obviously no links or credits are allowed.

But hey, it’s a game, and making games is fun, and I want you to know that opportunities in game development come from different sides, that’s why you should always be up-to-date… anyway, if you are a regular reader, you already know it.

And if you like the look and feel of the game, the artist is Luca Cavalleri from Mutado.

]]> http://www.emanueleferonato.com/2012/05/09/box2d-flash-advergame-for-malibu-rum/feed/ 4 Creation of a Concentration game in 22 minutes using Stencyl http://www.emanueleferonato.com/2012/05/08/creation-of-a-concentration-game-in-22-minutes-using-stencyl/ http://www.emanueleferonato.com/2012/05/08/creation-of-a-concentration-game-in-22-minutes-using-stencyl/#comments Tue, 08 May 2012 07:49:00 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5435 I always say you can make game in a matter of minutes if you are using the right tools like Stencyl.

Today I decided to prove it so I made a Concentration game from scratch, recording the screen during the entire process (graphic creation excluded).

What I got is a 22 minutes video which demonstrates how easy was to create the game. You can also see I wasted some minutes dealing with a couple of mistakes I made with windows and behaviors… that was because I really made it from scratch.

Looking at the video, you can also learn how to make the game, and you will see how easy is to make games with Stencyl. All in all, it was harder to manage Camtasia to export it in the right format.

I suggest you to watch this video in 720p full screen, I tried to do my best to preserve a good quality.

Also tell me what do you think about screencasts like this one, could it be a good way to learn visual tools like Stencyl?

]]> http://www.emanueleferonato.com/2012/05/08/creation-of-a-concentration-game-in-22-minutes-using-stencyl/feed/ 5 Create a Flash game like Talesworth Adventure using Stencyl http://www.emanueleferonato.com/2012/05/04/create-a-flash-game-like-talesworth-adventure-using-stencyl/ http://www.emanueleferonato.com/2012/05/04/create-a-flash-game-like-talesworth-adventure-using-stencyl/#comments Fri, 04 May 2012 15:53:07 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5424 In these days millions of people are playing Talesworth Adventure: The Lost Artifacts, the sequel of Talesworth Adventure, a great game I dissected in Create a Flash game like Talesworth Adventure step 1, 2, 3 and 4.

So I thought it would be nice to publish the Stencyl version of the prototype, which uses some advanced features like custom blocks and the Tile API with some code directly written into proper blocks.

It’s very interesting as you can design levels directly into the scene editor, making level design easy and fun. Also, you can see how Stencyl can be used to make any kind of game regardless its nature of Flixel/Box2D engine.

This is what you’ll get:

Place the loot on the path where the hero can see it to make it change his way.

Since it’s quite a complex prototype, due to the custom blocks and the Tile API, I’ll publish a detailed tutorial later, when I’ll add some more feature, meanwhile I shared it on StencylForge, look for Talesworth prototype.

]]> http://www.emanueleferonato.com/2012/05/04/create-a-flash-game-like-talesworth-adventure-using-stencyl/feed/ 4 An one-button way to control the player coming from the past – Box2D version (introducing friction joints) http://www.emanueleferonato.com/2012/05/01/an-one-button-way-to-control-the-player-coming-from-the-past-box2d-version-introducing-friction-joints/ http://www.emanueleferonato.com/2012/05/01/an-one-button-way-to-control-the-player-coming-from-the-past-box2d-version-introducing-friction-joints/#comments Tue, 01 May 2012 20:28:01 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5412 This is a quick attempt to port the engine of the one-button way to control the player coming from the past using Box2D, introducing for the first time the friction joint, a type of joint which is poorly explained in the tutorial you can see around the web, and it’s a pity because it’s very useful when you have to handle with top down simulations.

Basically I created a world with no gravity, then I created a friction joint between the ball controlled by the player and the “ground”, in this case the world body.

The final result is a lot more realistic than any other result you can achieve using linear damping or other tricks.

This is the source code:

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.Joints.*;
	public class Main extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,0),true);
		private var worldScale:Number=30;
		private var theBall:b2Body;
		private var ball:Ball=new Ball();
		private var directionArrow:DirectionArrow=new DirectionArrow();
		private var powerText:TextField = new TextField();
		private var rotate:Boolean=true;
		private var power:Number=0;
		private var rotationSpeed:Number=5;
		public function Main() {
			debugDraw();
			createBall();
			addChild(ball);
			ball.x=320;
			ball.y=240;
			ball.addChild(directionArrow);
			powerText.textColor=0xffffff;
			powerText.y=-10;
			powerText.x=-5;
			powerText.visible=false;
			ball.addChild(powerText);
			addEventListener(Event.ENTER_FRAME,update);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,prepareLaunch);
			stage.addEventListener(MouseEvent.MOUSE_UP,launch);
		}
		private function createBall():void {
			var fixtureDef:b2FixtureDef = new b2FixtureDef();
			fixtureDef.restitution=0;
			fixtureDef.density=1;
			var circleShape:b2CircleShape=new b2CircleShape(10/worldScale);
			fixtureDef.shape=circleShape;
			var bodyDef:b2BodyDef=new b2BodyDef();
			bodyDef.userData=new Sprite();
			bodyDef.position.Set(320/worldScale,240/worldScale);
			bodyDef.type=b2Body.b2_dynamicBody;
			bodyDef.userData=ball;
			theBall=world.CreateBody(bodyDef);
			theBall.CreateFixture(fixtureDef);
			var frictionJointDef:b2FrictionJointDef = new b2FrictionJointDef();
			var anchorA:b2Vec2=new b2Vec2(0,0);
			var anchorB:b2Vec2=new b2Vec2(320/worldScale,240/worldScale);
			frictionJointDef.localAnchorA=anchorA;
			frictionJointDef.localAnchorB=anchorB;
			frictionJointDef.bodyA=theBall;
			frictionJointDef.bodyB=world.GetGroundBody();
			frictionJointDef.maxForce=0.5;
			frictionJointDef.maxTorque=5;
			world.CreateJoint(frictionJointDef as b2JointDef);
		}
		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 prepareLaunch(e:MouseEvent):void {
			powerText.visible=true;
			rotate=false;
		}
		private function launch(e:MouseEvent):void {
			if (! rotate) {
				powerText.visible=false;
				rotate=true;
				theBall.ApplyImpulse(new b2Vec2(power*Math.cos((directionArrow.rotation-90)*0.0174532925)/10,power*Math.sin((directionArrow.rotation-90)*0.0174532925)/10),theBall.GetWorldCenter());
				power=0;
				rotationSpeed*=-1;
			}
		}
		private function update(e:Event):void {
			world.Step(1/30, 10, 10);
			if (rotate) {
				directionArrow.rotation+=rotationSpeed;
			}
			else {
				power++;
				power=Math.min(power,50);
				powerText.text=power.toString();
			}
			for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
				if (b.GetUserData()!=null) {
					b.GetUserData().x=b.GetPosition().x*worldScale;
					b.GetUserData().y=b.GetPosition().y*worldScale;
				}
			}
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

and this is the result:

You know how to “play”: press and keep the mouse pressed to move the ball with a given direction and speed. Also look at the friction joint in the debug draw.

Download the source code

]]> http://www.emanueleferonato.com/2012/05/01/an-one-button-way-to-control-the-player-coming-from-the-past-box2d-version-introducing-friction-joints/feed/ 1 An one-button way to control the player coming from the past http://www.emanueleferonato.com/2012/04/26/an-one-button-way-to-control-the-player-coming-from-the-past/ http://www.emanueleferonato.com/2012/04/26/an-one-button-way-to-control-the-player-coming-from-the-past/#comments Thu, 26 Apr 2012 15:31:26 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5404 I always loved one-button games. First, they can be played with just one button. Second, in the mobile game era, it’s easy to port an on-button concept to an one-tap concept.

Almost five years ago (ages!!) I showed a strange way to move the player with Flash made with AS2, and I find it interesting to port it to AS3, to be ported again in other languages.

Since you can find the complete theory in the original post, I will just post the AS3 source code:

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	public class Main extends Sprite {
		private var ball:Ball=new Ball();
		private var directionArrow:DirectionArrow=new DirectionArrow();
		private var powerText:TextField = new TextField();
		private var rotate:Boolean=true;
		private var power:Number=0;
		private var xSpeed:Number=0;
		private var ySpeed:Number=0;
		private var friction:Number=0.975;
		private var rotationSpeed:Number=5;
		public function Main() {
			addChild(ball);
			ball.x=320;
			ball.y=240;
			ball.addChild(directionArrow);
			powerText.textColor = 0xffffff;
			powerText.y=-10;
			powerText.x=-5;
			powerText.visible=false;
			ball.addChild(powerText);
			addEventListener(Event.ENTER_FRAME,update);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,prepareLaunch);
			stage.addEventListener(MouseEvent.MOUSE_UP,launch);
		}
		private function prepareLaunch(e:MouseEvent):void {
			powerText.visible=true
			rotate=false;
		}
		private function launch(e:MouseEvent):void {
			if (! rotate) {
				powerText.visible=false;
				rotate=true;
				xSpeed+=power*Math.cos((directionArrow.rotation-90)*0.0174532925)/10;
				ySpeed+=power*Math.sin((directionArrow.rotation-90)*0.0174532925)/10;
				power=0;
				rotationSpeed*=-1;
			}
		}
		private function update(e:Event):void {
			if (rotate) {
				directionArrow.rotation+=rotationSpeed;
			}
			else {
				power++;
				power=Math.min(power,50);
				powerText.text=power.toString();
			}
			ball.x+=xSpeed;
			ball.y+=ySpeed;
			xSpeed*=friction;
			ySpeed*=friction;
		}
	}
 
}

and this is the result:

Press and keep the mouse pressed to move the ball with a given direction and speed

During next days I’ll port this prototype into the most famous formats.

Download the source code

]]> http://www.emanueleferonato.com/2012/04/26/an-one-button-way-to-control-the-player-coming-from-the-past/feed/ 4 Flash Toony prototype ported to Haxe http://www.emanueleferonato.com/2012/04/23/flash-toony-prototype-ported-to-haxe/ http://www.emanueleferonato.com/2012/04/23/flash-toony-prototype-ported-to-haxe/#comments Mon, 23 Apr 2012 15:09:05 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5392 It seems Flash Toony prototype is getting quite an interest because some days after the iPhone port made with Corona SDK, it’s the time for Julian Liebl from Nortlight Games to show us the Haxe port of the prototype.

Haxe can be compiled to all popular programming platforms with its fast compiler – JavaScript, Flash, NekoVM, PHP, C++, C# and Java (soon) – which means your apps will support all popular mobile devices, such as iOS, Android, Windows Mobile, webOS and more.

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

package;
 
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import haxe.Timer;
import flash.Lib;
import flash.Vector;
import flash.geom.Point;
 
/**
 * @author Emanuele Feronato ported by Julian Liebl from Flash to Haxe
 */
 
class Toony extends Sprite {
 
	var timer:Timer;
	var returnPoint:Point;
	var movingToony:Sprite;
	var draggableToonies:Array<Sprite>;
	var fallingToonies:Vector<Sprite>;
 
	public function new() {
		super();
		init();
		construct();
		create();
	}
 
	public function init(){
		movingToony = null;
		draggableToonies = new Array();
		fallingToonies = new Vector();
 
		//init Timer
		timer = new Timer(2000);
		timer.run = newToony;
	}
 
	public function construct(){
		//lets create a toony with the shape of a circle
		var circle:Sprite = constructShape(0);
 
		//lets create a toony with the shape of a rectangle
		var rectangle:Sprite = constructShape(1);
 
		//lets create a toony with the shape of a round rectangle
		var roundRectangle:Sprite = constructShape(2);
 
		draggableToonies.push(circle);
		draggableToonies.push(rectangle);
		draggableToonies.push(roundRectangle);
	}
 
	//let's code the shapes ourself. That's badass ;)
	public function constructShape(index:Int):Sprite{
		var returnSprite:Sprite = new Sprite();
		switch(index){
		    case 0:
		    	returnSprite.name = "circle";
				returnSprite.graphics.beginFill(0x0621a9);
				returnSprite.graphics.drawCircle(40, 40, 40);
				returnSprite.graphics.endFill();
			case 1:
				returnSprite.name = "rectangle";
				returnSprite.graphics.beginFill(0xff0000);
				returnSprite.graphics.drawRect(0 , 0, 80, 80);
				returnSprite.graphics.endFill();
			case 2:
				returnSprite.name = "round rectangle";
				returnSprite.graphics.beginFill(0xFFCC00);
				returnSprite.graphics.drawRoundRect(0 , 0, 80, 80,40,40);
				returnSprite.graphics.endFill();
		    default:
		        trace("Not known index. Returing empty Sprite.");
		}
		return returnSprite;
	}
 
	public function create(){
		// creation of the four draggable toonies
		var loops:Int = 0;
 
		for (toony in draggableToonies) {
			toony.x=loops*100+80;
			toony.y=370;
			toony.buttonMode=true;
 
			addChild(toony);
			toony.addEventListener(MouseEvent.MOUSE_DOWN,toonyClicked);
 
			loops++;
		}
		// main game loop
		addEventListener(Event.ENTER_FRAME,update);
 
		// event to be triggered when the player releases the mouse button
		Lib.current.addEventListener(MouseEvent.MOUSE_UP,toonyReleased);
	}
 
	private function newToony():Void {
		// it's simple: I just create a new Toony instance and place it
		// randomly in the game field with a random frame shown
		var toony:Sprite = constructShape(Math.ceil(Math.random()*draggableToonies.length)-1);
		addChild(toony);
		toony.x=Math.random()*580;
		toony.y=-32;
 
		toony.alpha=0.5;
		// pushing the newly created toony into toonies vector
		fallingToonies.push(toony);
	}
 
	private function toonyClicked(e:MouseEvent):Void {
		returnPoint = new Point(e.target.x, e.target.y);
		// if I am not moving any toony...
		if (movingToony==null) {
			// setting the toony I am about to move to the toony I just pressed the mouse on
			movingToony=e.target;
		}
	}
 
	private function toonyReleased(e:MouseEvent):Void {
		// if I am moving a toony...
		if (movingToony!=null) {
			// looping through toonies vector
			for (toony in fallingToonies) {
				// if I am touching a falling toony with the same shape as the toony I am currently moving...
				// (that is: if both toonies are showing the same frame...)
				if (toony.hitTestPoint(mouseX,mouseY,true) && movingToony.name==toony.name) {
					// the toonies match!! Highlighting the falling toony
					toony.alpha=1;
				}
			}
			// putting the moved toony back to its place
			movingToony.y=returnPoint.y;
			movingToony.x=returnPoint.x;
			// setting the variable which hold the moving toony to null
			// I am not moving any toony now
			movingToony=null;
		}
	}
 
	private function update(e:Event):Void {
		// if I am moving a toony...
		if (movingToony!=null) {
			// updating toony position according to mouse position
			movingToony.x=mouseX-movingToony.width/2;
			movingToony.y=mouseY-movingToony.height/2;
		}
 
		var loop:Int = 0;
 
		for (toony in fallingToonies) {
			// moving toonies down
			toony.y++;
			// removing toonies from the stage if they are too close to the bottom of the stage
			if (toony.y>280) {
				toony.parent.removeChild(toony);
				fallingToonies.splice(loop,1);
			}
			loop++;
		}
	}
 
	public static function main () {
		Lib.current.addChild(new Toony ());
	}
}

and the result, compiled as SWF, is:

You should know how to play, drag and drop the shapes in the bottom row to match falling shapes.

In the zipped archive Julian shares with us, you can find the complete source code as well as the Flash and Mac App builds.

]]> http://www.emanueleferonato.com/2012/04/23/flash-toony-prototype-ported-to-haxe/feed/ 8 InkTd Flash game source code released http://www.emanueleferonato.com/2012/04/19/inktd-flash-game-source-code-released/ http://www.emanueleferonato.com/2012/04/19/inktd-flash-game-source-code-released/#comments Thu, 19 Apr 2012 16:01:16 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5383 Ben Lowry from Playtomic shares with us the full source code of InkTd, a Flash tower defense game]]> Did you ever wonder how a complete tower defense source code looks like?

This is your lucky day.

A couple of years ago Ben Lowry, also known for being the founder of Playtomic, made a tower defense game with two game modes: path mode, which is the mode we all are used to play (minions running along a defined path, and towers to be placed on defined spots) and maze mode, where you can place towers anywhere and minions dynamically adjust their paths to reach the base.

Both modes have up to 100 levels, and the name of the game is InkTd

One of the things I liked the most is the feature to upgrade the cannons with various colors, to match with enemy colors. It adds strategy since red enemies can be hit by red towers, green enemies by green towers, and so on.

But I talked about the source code, because Ben shares with us the full source code, more than 40 classes to be studied to make your own tower defense game.

It’s a source code of a great value and I can’t thank enough Ben for giving it for free.

Download the source code.

]]> http://www.emanueleferonato.com/2012/04/19/inktd-flash-game-source-code-released/feed/ 11 Toony Flash game prototype ported to iPhone using Corona SDK http://www.emanueleferonato.com/2012/04/17/toony-flash-game-prototype-ported-to-iphone-using-corona-sdk/ http://www.emanueleferonato.com/2012/04/17/toony-flash-game-prototype-ported-to-iphone-using-corona-sdk/#comments Tue, 17 Apr 2012 13:59:52 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=5375 Yesterday I blogged about Toony Flash game and I said it would be interesting to port the game to mobile devices.

Some hours later, Jason Ian Green from PodWork sent me the Corona SDK version of the prototype I made with AS3.

This is what you’ll get:

and this is main.lua file, with the complete 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

-----------------------------------------------------------------------------------------
--
-- main.lua
--
-----------------------------------------------------------------------------------------
 
local toonyVector = {}
local toRemove = {}
local interface = display.newGroup()
local toonyTypes = {"square.png", "circle.png", "hexagon.png", "flower.png"}
 
local currentObj
local originX
local originY
 
local score = 0
 
local function onTouch(event) 
	if event.phase == "began" then
		--print("began")
		currentObj = event.target
		originX = currentObj.x
		originY = currentObj.y
	end
	if event.phase == "moved" then
		--print("moved")
		currentObj.x = event.x
		currentObj.y = event.y
	end
	if event.phase == "ended" or event.phase == "cancelled" then
		--print("ednded")
		for n = 1, #toonyVector, 1 do
			local diffx = currentObj.x - toonyVector[n].x
			local diffy = currentObj.y - toonyVector[n].y
			if currentObj.id == toonyVector[n].id then
				if math.abs(diffx) < 20 and math.abs(diffy) < 20 then
					toonyVector[n].alpha = 1.0
				end
			end
		end
		currentObj.x = originX
		currentObj.y = originY
 
	end
end
 
local function go(event) 
	for i = 1, #toonyVector, 1 do
		toonyVector[i].y = toonyVector[i].y + 1
		if toonyVector[i].y > 260 then
			if toonyVector[i].alpha == 1.0 then
				score = score + 1
				print(score)
			end
			toonyVector[i]:removeSelf()
			table.insert(toRemove,i)
		end
	end
	for j = #toRemove, 1, -1 do
		table.remove(toonyVector,j)
	end
	toRemove={}
end
 
local function newToony(event) 
	local rand = math.random(4)
	local newToon = display.newImage( toonyTypes[rand] )
	newToon.x = math.random(400) + 25
	newToon.y = 25
	newToon.id = rand
	newToon.alpha = 0.5
	table.insert(toonyVector,newToon)
end
 
local function main()
		local tSquare = display.newImage( toonyTypes[1] )
		tSquare.x=100
		tSquare.y=295
		tSquare.id = 1
		tSquare:addEventListener( "touch", onTouch )
		interface:insert(tSquare)
 
		local tCircle = display.newImage( toonyTypes[2] )
		tCircle.x=200;
		tCircle.y=295;
		tCircle.id = 2
		tCircle:addEventListener( "touch", onTouch )
		interface:insert(tCircle)
 
		local tHexagon = display.newImage( toonyTypes[3] )
		tHexagon.x=300;
		tHexagon.y=295;
		tHexagon.id = 3
		tHexagon:addEventListener( "touch", onTouch )
		interface:insert(tHexagon)
 
		local tFlower = display.newImage( toonyTypes[4] )
		tFlower.x=400;
		tFlower.y=295;
		tFlower.id = 4
		tFlower:addEventListener( "touch", onTouch )
		interface:insert(tFlower)
 
		Runtime:addEventListener( "enterFrame", go )
		timer.performWithDelay( 2000, newToony, 0 )
end
 
 
 
main()

You can also download the entire project to compile it on your own on Corona SDK.

If anyone wants to continue with the porting, I will be happy to host it on the blog.

]]> http://www.emanueleferonato.com/2012/04/17/toony-flash-game-prototype-ported-to-iphone-using-corona-sdk/feed/ 3