Emanuele Feronato » Actionscript 3 http://www.emanueleferonato.com italian geek and PROgrammer Thu, 02 Sep 2010 09:32:52 +0000 en hourly 1 http://wordpress.org/?v=abc Creation of new data types in AS3: Linked List http://www.emanueleferonato.com/2010/09/02/creation-of-new-data-types-in-as3-linked-list/ http://www.emanueleferonato.com/2010/09/02/creation-of-new-data-types-in-as3-linked-list/#comments Thu, 02 Sep 2010 09:32:52 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3274 In computer programming, a data type (or datatype) is a classification identifying one of various types of data, such as floating-point, integer, or Boolean, stating the possible values for that type, the operations that can be done on that type, and the way the values of that type are stored. (source: Wikipedia).

Obviously any language is capable to create new data structures. I did not find any complete AS3 complete tutorial to create a new data type from scratch with AS3, so I am writing it by myself.

We are going to define a simple linked list data type.

A linked list is a data structure that consists of a sequence of data records such that in each record there is a field that contains a reference (i.e., a link) to the next record in the sequence.

(source and image: Wikipedia. Yes, I made a donation so I feel free to copy/paste :)).

In this example, we are going to reproduce the same linked list you see in the picture. Usually the “records” Wikipedia is talking about are called “nodes”, so we’ll define a node datatype.

This is the class, in a file called node.as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package triqui{
	public class node {
		public var node_data:*;
		public var next_node:node;
		public function node(node_content:*) {
			node_data=node_content;
			next_node=null;
		}
		public function get_node_data():* {
			return node_data;
		}
		public function insert_prev(n:node):void {
			n.next_node=this;
		}
		public function insert_next(n:node):void {
			next_node=n;
		}
		public function get_next_node():node {
			return next_node;
		}
	}
}

Line 1: package definition. Notice there is a name after the package to preserve class name uniqueness. Whithout boring you with useless theory, just remember that since package name is triqui, you will need to save it in a triqui folder in the same path of you main .fla file. Refer to the downloadable source code available at the end of the post for a concrete example.

Line 2: definition of the class. It’s called node.

Line 3: node_data is the container of the information we need to store. Referring to Wikipedia example, the numbers 12, 99 and 37. Giving * as data type makes it capable of having any data type, such as strings, arrays, integers or even other nodes.

Line 4: next_node is the link to the next node in the list and obviously is a node type.

Line 5: the main function, or constructor. It wants the content of the node (12, 99 or37 in the example) as argument. Notice the type is * because we said it will accept any kind of data types.

Line 6: assigning node_content (the constructor argument) value to node_data (the information container of the node).

Line 7: assigning null to next_node. The node will not link any other node.

Line 9: function to retrieve the information stored in a node (notice the *: you should know why).

Line 10: simply returning the content of node_data variable.

Line 12: function to insert the previous node to a node, that is the node in the argument will link the current node.

Line 13: assigning the current node to next_node variable of the node passed in the argument.

Line 15: function to insert the next node to a node, that is the node in the argument will be linked by the current node.

Line 16: assigning the node passed as argument to next_node variable

Line 18: function to get the next node of a node. Returns (obviously) a node.

Line 19: returning next_node content

And this is an example of the class at work… in a file called datatype.as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package {
	import flash.display.Sprite;
	import triqui.node;
	public class datatype extends Sprite {
		public function datatype() {
			var n1:node=new node(12);
			var n2:node=new node(99);
			var n3:node=new node(37);
			n2.insert_prev(n1);
			n2.insert_next(n3);
			trace(n1.get_next_node().get_next_node().get_node_data());
		}
	}
}

Line 3: importing node library

Lines 6-8: creating the three nodes as in the example

Line 9: setting n1 node as the previous of n2

Line 10: setting n3 node as the next of n2

Line 11: This will output the content of n3 node starting from n1… 37.

Download the source code.

During next days we’ll see various more complex data types such as double linked lists and trees.

]]> http://www.emanueleferonato.com/2010/09/02/creation-of-new-data-types-in-as3-linked-list/feed/ 1 Create a Flash game like Blockage – Movement prototype http://www.emanueleferonato.com/2010/08/21/create-a-flash-game-like-blockage-movement-prototype/ http://www.emanueleferonato.com/2010/08/21/create-a-flash-game-like-blockage-movement-prototype/#comments Sat, 21 Aug 2010 17:55:10 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3254 This is one of those days when you want to make a thing work that way FULLSTOP.

And that’s it… this is the typical Blockage movement:

I wanted to do it without any timeline tween or tricks to change registration point on the fly, just using localToGlobal method. If you aren’t familiar with this method, read understanding AS3 localToGlobal method first.

So here it is the uncommented and unoptimized prototype. While comments and tutorial will come when I’ll integrate it into the making of the game, I think this can be useful to someone of you to have a sneak peak of what’s going on.

This is the main class:

1
2
3
4
5
6
7
8
9
10
11

package {
	import flash.display.Sprite;
	public class blkg extends Sprite {
		private var block:block_mc=new block_mc();
		public function blkg() {
			block.x=0;
			block.y=50;
			addChild(block);
		}
	}
}

and this is block_mc class:

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	public class block_mc extends Sprite {
		public var point:Point=new Point(50,50);
		public var defpoint:Point=new Point(50,100);
		public var rotation_dir=5;
		public var steps:uint=0;
		public function block_mc() {
			addEventListener(Event.ENTER_FRAME,on_enter_frame);
		}
		private function on_enter_frame(e:Event) {
			rotation+=rotation_dir;
			if (rotation%90==0) {
				rotation=0;
				steps++;
				if (steps==9) {
					steps=0;
					rotation_dir*=-1;
					if (rotation_dir>0) {
						point=new Point(50,50);
					} else {
						point=new Point(0,50);
					}
				} else {
					if (rotation_dir>0) {
						defpoint=new Point(50,0).add(defpoint);
					} else {
						defpoint=new Point(-50,0).add(defpoint);
					}
				}
			}
			var tmp_point:Point=localToGlobal(point);
			tmp_point=defpoint.subtract(tmp_point);
			x+=tmp_point.x;
			y+=tmp_point.y;
		}
	}
}

Just remember I am using a 50 pixel sided square with origin at 0,0 and that steps==9 at line 18 is used only to make the square go back and forth.

Download the source code and solve the mystery… or wait for next step.

]]> http://www.emanueleferonato.com/2010/08/21/create-a-flash-game-like-blockage-movement-prototype/feed/ 3 Worms-like destructible terrain in Flash – Part 3 http://www.emanueleferonato.com/2010/08/18/worms-like-destructible-terrain-in-flash-part-3/ http://www.emanueleferonato.com/2010/08/18/worms-like-destructible-terrain-in-flash-part-3/#comments Wed, 18 Aug 2010 18:30:32 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3247 After another truck of Aspirin, Jordi Sanglas Molist is back with the 3rd step of his Worms tutorial.

I’ve finished part 3. I almost got a headache. Forgive me if there are some mistakes, I wrote this post and the comments quickly.

Now the character is affected by the explosions. To do that, I added an horizontal speed and a friction. However, I don’t want the character to slide when I’m using the arrow keys, so:

* The arrow keys won’t use horizontal speed
* If the horizontal speed is different than 0 (an explosion is moving the character), I can’t use the arrow keys

To calculate the impulse, we will need to use trigonometry:

I’ve also solved another bug: if the character was falling (without using the space bar), it could jump in the air. Here I removed the jumping variable and I check if the character is on the ground.

Pay attention!!! Sometimes I check if the character is ON the ground (character.y+10) and sometimes I check if the character is TOUCHING the ground (character.y+9).

KNOWN BUGS:

* The horizontal speed won’t decrease faster or more slowly if the character is on a slope.
* The for loop isn’t exact when the horizontal speed is a decimal number (I think).

What should I do in the next part? I must do it before I start school, or I won’t have time.

While you think about the next part to request, here it 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
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

package {
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.geom.Matrix;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
 
	public class worms extends Sprite {
 
		public var terrain_bmpd:BitmapData=new BitmapData(550,200,true,0xFF00FF00);
		public var terrain_bmp:Bitmap=new Bitmap(terrain_bmpd);
		public var character:Sprite=new Sprite();
		public var x_speed:Number=0;
		public var y_speed:Number=0;
		public var hole:Sprite=new Sprite();
		public var hole_matrix:Matrix;
		public var left_key:Boolean;
		public var right_key:Boolean;
		public var space_key:Boolean;
		public var i:int;
		public var x_diff:Number;//x_diff and y_diff will be the difference between the character and the explosion centre
		public var y_diff:Number;
		public var explosion_radius:Number=100;//That's the radius of the explosion. If the character is inside the radius, it will move away.
		public var explosion_intensity:Number=10;//The explosion intensity is the speed (pixels/frame) that the character will
		//get if the distance between the explosion and the character is 0 (the closest one).
		public var distance:Number;//We will use that variable to store the distance between the character and the explosion
		public var angle:Number;//and that one to store the angle
		public var applied_speed:Number;//That will be the total speed we need to apply (the vector length).
		public var applied_x:Number;//Then, we will separate the applied_speed in applied_x
		public var applied_y:Number;//and applied_y
		public var ground_friction:Number=0.2;//The ground has more friction than the air,
		public var air_friction:Number=0.05;//so I have used different variables
		public function worms() {
			draw_objects();
 
			stage.addEventListener(Event.ENTER_FRAME,move_character);
			stage.addEventListener(MouseEvent.MOUSE_UP,mouse_up);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP,key_up);
		}
 
		public function move_character(e:Event) {
			if (left_key&&x_speed==0) {//If the player is moving, we won't be able to control it
				for (i=0; i<3; i++) {
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-6,character.y-10,1,17))) {
						character.x--;
						while (terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+9,10,1))) {
							character.y--;
						}
					}
				}
			}
			if (right_key&&x_speed==0) {//Let's do the same with the right key...
				for (i=0; i<3; i++) {
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x+5,character.y-10,1,17))) {
						character.x++;
						while (terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+9,10,1))) {
							character.y--;
						}
					}
				}
			}
			if (x_speed<0) {//This block is similar; however, we don't know the speed,
				for (i=0; i<Math.abs(x_speed); i++) {//so the for loop will use x_speed (there's a bug, read KNOWN BUGS)
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-6,character.y-10,1,17))) {
						character.x--;
						while (terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+9,10,1))) {
							character.y--;
						}
					} else {//If the player hits a wall, it must stop(!). Otherwise, when the wall is removed,
						//the player will continue moving
						x_speed=0;
					}
				}
			} else {//That's the same, but with left key
				for (i=0; i<x_speed; i++) {
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x+5,character.y-10,1,17))) {
						character.x++;
						while (terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+9,10,1))) {
							character.y--;
						}
					} else {
						x_speed=0;
					}
				}
			}
			if (space_key&&terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+10,10,1))) {
				y_speed=-10;//Instead of using the jumping variable, I check if the character is on the ground
			}
			if (terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+10,10,1))) {
				x_speed*=1-ground_friction;//Again, I check if the character is on the ground (to apply ground or air friction)
			} else {
				x_speed*=1-air_friction;
			}
 
			if (Math.abs(x_speed)<0.1) {
				x_speed=0;
			}/*I don't want the character to move at 0.0000000001 pixels/frame,
			so if the x_speed is less than 0.1 we will stop it*/
			y_speed++;
			if (y_speed>0) {
				for (i=0; i<y_speed; i++) {
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+10,10,1))) {//I changed character.y+9--> character.y+10
						character.y++;
					} else {
						y_speed=0;
					}
				}
			} else {
				for (i=0; i<Math.abs(y_speed); i++) {
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y-10,10,1))) {
						character.y--;
					} else {
						y_speed=0;
					}
				}
			}
		}
 
		public function mouse_up(e:MouseEvent) {
			hole_matrix=new Matrix();
			hole_matrix.translate(e.stageX-terrain_bmp.x,e.stageY-terrain_bmp.y);
			terrain_bmpd.draw(hole,hole_matrix,null,BlendMode.ERASE);
			//Let's calculate the impulse. You'll have to understand trigonometric functions
			x_diff=character.x-e.stageX;//If we invert that, the character will move to the centre of the explosion instead of moving away
			y_diff=character.y-e.stageY;
			angle=Math.atan2(y_diff,x_diff);//We calculate the angle
			distance=Math.sqrt(x_diff*x_diff+y_diff*y_diff);//Then, we use Pythagorean theorem
			if (distance<explosion_radius) {
				applied_speed = (1 - distance / explosion_radius) * explosion_intensity;
				//Maybe that's difficult to understand:
				//How_far_is_the_character = distance / explosion_radius
				//How_near_is_the_character = 1 - How_far_is_the_character
				//applied_speed = How_near_is_the_character * explosion_intensity
 
				applied_x=Math.cos(angle)*applied_speed;//We separate the applied_speed in x...
				applied_y=Math.sin(angle)*applied_speed;//... and y
				y_speed+=applied_y;
				x_speed+=applied_x;
			}
		}
 
		public function key_down(e:KeyboardEvent) {
			if (e.keyCode==37) {
				left_key=true;
			}
			if (e.keyCode==39) {
				right_key=true;
			}
			if (e.keyCode==32) {
				space_key=true;
			}
		}
		public function key_up(e:KeyboardEvent) {
			if (e.keyCode==37) {
				left_key=false;
			}
			if (e.keyCode==39) {
				right_key=false;
			}
			if (e.keyCode==32) {
				space_key=false;
			}
		}
 
		public function draw_objects() {
			terrain_bmp.y=200;
			stage.addChild(terrain_bmp);
 
			character.graphics.beginFill(0x0000FF);
			character.graphics.drawRect(-5,-10,10,20);
			character.x=250;
			stage.addChild(character);
 
			hole.graphics.beginFill(0x000000);
			hole.graphics.drawCircle(0,0,30);
		}
	}
}

And this is the result:

As usual, left and right to move the character, spacebar to make it jump and mouse click to create explosions.

Download the source code and don’t forget to request the next part.

]]> http://www.emanueleferonato.com/2010/08/18/worms-like-destructible-terrain-in-flash-part-3/feed/ 12 Create Box2D levels in a quick with Bison Kick http://www.emanueleferonato.com/2010/08/16/create-box2d-levels-in-a-quick-with-bison-kick/ http://www.emanueleferonato.com/2010/08/16/create-box2d-levels-in-a-quick-with-bison-kick/#comments Mon, 16 Aug 2010 21:41:38 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3235 Some time ago I published a Basic Box2D editor using Flash movieclips.

Now it’s time to show you something way more interesting called Bison Kick by Jacob Schatz who runs the blog jacobschatz.com (bookmark it! It contains a lot of useful information).

It’s an online Box2D editor with live preview.

Besides it’s still under development, with more options to be added and a few bugs to be removed, it’s very fun and simple to use.

I tried to design a level to be used in a game like Totem Destroyer and I managed to export it both in AS3:

//order: x , y , height, width, rotation, isDynamic, shape, friction,density,restitution,ID 
 var map:Array = [
[175,324,50,50,0,true,'SQUARE' , 1,0.5,0.5,'normal']
,[325,325,50,50,0,true,'SQUARE' , 1,0.5,0.5,'normal']
,[250,375,50,500,0,false,'SQUARE' , 1,0.5,0.5,'ground']
,[250,275,50,300,0,true,'SQUARE' , 1,0.5,0.5,'normal']
,[250,200,100,150,0,true,'SQUARE' , 1,0.5,0.5,'normal']
,[125,225,50,50,0,true,'SQUARE' , 1,2,0.5,'heavy']
,[250,125,50,50,0,true,'SQUARE' , 1,2,0.5,'heavy']
,[375,225,50,50,0,true,'SQUARE' , 1,2,0.5,'heavy']
,[250,50,100,50,0,true,'SQUARE' , 1,0.25,0.5,'totem']
];

and in XML:

<level>
  <completeShape>
    <xprop>175</xprop>
    <yprop>324</yprop>
    <height>50</height>
    <width>50</width>
    <rotation>0</rotation>
    <isDynamic>true</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,0.5,0.5,'normal'</physicsandID>
  </completeShape>
  <completeShape>
    <xprop>325</xprop>
    <yprop>325</yprop>
    <height>50</height>
    <width>50</width>
    <rotation>0</rotation>
    <isDynamic>true</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,0.5,0.5,'normal'</physicsandID>
  </completeShape>
  <completeShape>
    <xprop>250</xprop>
    <yprop>375</yprop>
    <height>50</height>
    <width>500</width>
    <rotation>0</rotation>
    <isDynamic>false</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,0.5,0.5,'ground'</physicsandID>
  </completeShape>
  <completeShape>
    <xprop>250</xprop>
    <yprop>275</yprop>
    <height>50</height>
    <width>300</width>
    <rotation>0</rotation>
    <isDynamic>true</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,0.5,0.5,'normal'</physicsandID>
  </completeShape>
  <completeShape>
    <xprop>250</xprop>
    <yprop>200</yprop>
    <height>100</height>
    <width>150</width>
    <rotation>0</rotation>
    <isDynamic>true</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,0.5,0.5,'normal'</physicsandID>
  </completeShape>
  <completeShape>
    <xprop>125</xprop>
    <yprop>225</yprop>
    <height>50</height>
    <width>50</width>
    <rotation>0</rotation>
    <isDynamic>true</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,2,0.5,'heavy'</physicsandID>
  </completeShape>
  <completeShape>
    <xprop>250</xprop>
    <yprop>125</yprop>
    <height>50</height>
    <width>50</width>
    <rotation>0</rotation>
    <isDynamic>true</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,2,0.5,'heavy'</physicsandID>
  </completeShape>
  <completeShape>
    <xprop>375</xprop>
    <yprop>225</yprop>
    <height>50</height>
    <width>50</width>
    <rotation>0</rotation>
    <isDynamic>true</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,2,0.5,'heavy'</physicsandID>
  </completeShape>
  <completeShape>
    <xprop>250</xprop>
    <yprop>50</yprop>
    <height>100</height>
    <width>50</width>
    <rotation>0</rotation>
    <isDynamic>true</isDynamic>
    <shape>SQUARE</shape>
    <physicsandID>1,0.25,0.5,'totem'</physicsandID>
  </completeShape>
</level>

Then, creating a Box2D world from these data was really easy thanks to the snippet of code provided by Jacob:

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

package 
{	
	import Box2D.Dynamics.Joints.*;
	import flash.display.Sprite;
	import flash.events.KeyboardEvent;
	import flash.events.Event;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
 
	public class Main extends Sprite {
		public var world:b2World=new b2World(new b2Vec2(0,10.0),true);
		public var world_scale:int = 30;
 
		public static const SQUARE:String = "SQUARE";
		public static const CIRCLE:String = "CIRCLE";
		public var fixtureDef:b2FixtureDef = new b2FixtureDef();
 
		public var specialB2Body:b2Body;
 
		public var motorOn:Boolean;
 
		//order: x , y , height, width, rotation, isDynamic, shape, friction,density,restitution,ID 
 var map:Array = [
[175,324,50,50,0,true,'SQUARE' , 1,0.5,0.5,'normal']
,[325,325,50,50,0,true,'SQUARE' , 1,0.5,0.5,'normal']
,[250,375,50,500,0,false,'SQUARE' , 1,0.5,0.5,'ground']
,[250,275,50,300,0,true,'SQUARE' , 1,0.5,0.5,'normal']
,[250,200,100,150,0,true,'SQUARE' , 1,0.5,0.5,'normal']
,[125,225,50,50,0,true,'SQUARE' , 1,2,0.5,'heavy']
,[250,125,50,50,0,true,'SQUARE' , 1,2,0.5,'heavy']
,[375,225,50,50,0,true,'SQUARE' , 1,2,0.5,'heavy']
,[250,50,100,50,0,true,'SQUARE' , 1,0.25,0.5,'totem']
];		//
		public function Main():void 
		{
			debug_draw();
 
			for (var i:uint = 0; i < map.length; i++)
			{
				var sx:Number = map[i][0];
				var sy:Number = map[i][1];
				var sizerh:Number = map[i][2];
				var sizerw:Number = map[i][3];
				var srot:Number = map[i][4];
				var sIsDynamic:* = map[i][5];
				var sShape:String = map[i][6];
				var sFric:Number = map[i][7];
				var sMass:Number = map[i][8];
				var sRest:Number = map[i][9];
				var boxId:int = map[i][10];
 
				if (sShape == SQUARE)
				{	
					draw_box(sx, sy, sizerw, sizerh, sIsDynamic,srot,sFric,sMass,sRest,boxId);
				}
				else if (sShape == CIRCLE)
				{
					draw_circle(sx, sy, sizerw / 2, sIsDynamic,srot,sFric,sMass,sRest,boxId);
				}
			}
			addEventListener(Event.ENTER_FRAME, update);
		}
 
		public function draw_circle(px:Number, py:Number, r:Number, d:Boolean, rot:Number,
		fric:Number,mass:Number,rest:Number,boxId:int):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px / world_scale, py / world_scale);
			if (d) 
			{
				my_body.type=b2Body.b2_dynamicBody;
			}
			my_body.angle = rot;
			var my_circle:b2CircleShape=new b2CircleShape(r/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.density = mass;
			my_fixture.friction = fric;
			my_fixture.restitution = rest;
			my_fixture.shape=my_circle;
			var world_body:b2Body = world.CreateBody(my_body);
			world_body.CreateFixture(my_fixture);
		}
 
		public function draw_box(px:Number, py:Number, w:Number, h:Number, d:Boolean, rot:Number,
		fric:Number,mass:Number,rest:Number,boxId:int):void {
			var my_body:b2BodyDef = new b2BodyDef();
 
			my_body.position.Set(px / world_scale, py / world_scale);
			my_body.angle = rot;
			if (d) 
			{
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_box:b2PolygonShape = new b2PolygonShape();
			my_box.SetAsBox(w/2/world_scale, h/2/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.density = mass;
			my_fixture.friction = fric;
			my_fixture.restitution = rest;
			my_fixture.shape=my_box;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.CreateFixture(my_fixture);
		}
 
		public function debug_draw():void {
			var debug_draw:b2DebugDraw = new b2DebugDraw();
			var debug_sprite:Sprite = new Sprite();
			addChild(debug_sprite);
			debug_draw.SetSprite(debug_sprite);
			debug_draw.SetFillAlpha(0.3);
			debug_draw.SetDrawScale(world_scale);
			debug_draw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(debug_draw);
		}
		public function update(e : Event):void {
			world.Step(1 / 30, 10, 10);			
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

… and this is what you’ll get:

This the same scene of the screenshot you can see at the beginning of this post.

Next time, I’ll show you how to generate the same thing reading an external XML, and how to add more features.

Download the source code.

]]> http://www.emanueleferonato.com/2010/08/16/create-box2d-levels-in-a-quick-with-bison-kick/feed/ 1 Create a Flash game like Blockage http://www.emanueleferonato.com/2010/08/11/create-a-flash-game-like-blockage/ http://www.emanueleferonato.com/2010/08/11/create-a-flash-game-like-blockage/#comments Wed, 11 Aug 2010 16:24:27 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3228 Did you play Blockage?

It’s a perfect game to make a tutorial series because at every level it introduces a new feature, so level after level you will see something new both in the game and in the prototype.

Other than that, it’s a tile based puzzle.

This first part will focus on level data. Since it’s a tile based game, you know we should create a bidimensional array, map all levels assigning each tile type a value such as zero for the empty space and one for the walls, and start creating the array tile after tile, just like in Create a Flash game like Rebuild Chile.

In this prototype I will try to “compress” the level packing it in a string containing comma separated values.

Let me explain the idea: count, from left to right, from upper to bottom corners, the number of contiguous walls.

There are 49 walls. Then, 14 empty spaces. Then, two walls. And so on. Exluding the actors (the square and the goal), create a string like this one:

49,1,14,0,2,1,14,0,2,1,14,0,8,1,1,0,56,1

That means the level has 49 walls (marked with 1), 14 empty spaces (marked with 0), then 2 walls, 14 spaces and so on.

So this 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

package {
	import flash.display.Sprite;
	public class blockage extends Sprite {
		private const LEVEL_WIDTH:int=16;
		private const LEVEL_HEIGHT:int=10;
		private var leveldata:String="49,1,14,0,2,1,14,0,2,1,14,0,8,1,1,0,56,1";
		private var tmp_level:Array=new Array();
		private var level:Array=new Array();
		private var wall:wall_mc;
		public function blockage() {
			tmp_level=leveldata.split(",");
			for (var i:int=0; i<tmp_level.length; i+=2) {
				for (var j=1; j<=tmp_level[i]; j++) {
					level.push(tmp_level[i+1]);
					if (tmp_level[i+1]==1) {
						wall = new wall_mc();
						addChild(wall);
						wall.x=32*((level.length-1)%LEVEL_WIDTH);
						wall.y=32*Math.floor((level.length-1)/LEVEL_WIDTH);
					}
				}
			}
		}
	}
}

Draws the level and stores it in level array, starting from leveldata that is the “compressed” level data.

Line 11: splits leveldata into tmp_level array. It’s just as if I did

tmp_level = [49,1,14,0,2,1,14,0,2,1,14,0,8,1,1,0,56,1];

But starting with a string I can easily import levels from an external editor.

Line 12: loops through all tmp_level even elements.

Lines 13-21: creating the level itself in level array pushing i times i+1 value, and if such value is a wall (1), then adding the wall movieclip.

This is the result:

The same old thing made in a different way. Does it make any sense to you?

Download the source code.

]]> http://www.emanueleferonato.com/2010/08/11/create-a-flash-game-like-blockage/feed/ 8 Create your own tween manager class in AS3 http://www.emanueleferonato.com/2010/08/09/create-your-own-tween-manager-class-in-as3/ http://www.emanueleferonato.com/2010/08/09/create-your-own-tween-manager-class-in-as3/#comments Mon, 09 Aug 2010 19:40:53 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3220 I publish this tutorial with the permission of Krasimir Tsonev, from Bulgaria, who runs krasimirtsonev.com (take a look at the light bulbs: don’t you think it can be done using a basic Box2D rope?). It’s an amazing tutorial with clean and well commented code that will guide you through the process of the creation of a custom tween manager class with AS3.

There are some features in Flash that we can’t work without. Tween classes are among the most used ones. They give you ability to animate objects without using the timeline, to change the animation fast and easy. The idea of these classes is very simple. That’s why I think that it is a good idea to have your own tween manager that you can modify to fit into your needs.

The basic structure of our tween manager:

1
2
3
4
5
6
7
8
9
10
11

package {
	import flash.display.MovieClip;
	public class TweenManager extends MovieClip {
		private var _objectToModify:Object;
		private var _properties:Object;
		public function TweenManager(objectToModify:Object, properties:Object) {
			_objectToModify = objectToModify;
			_properties = properties;
		}
	}
}

We are going to pass the object that we want to modify and the properties that we want to change. The idea is to create a function that calls every frame. All the magic will be done there. As you can see in the code below I created a public function – start, which adds listener for ENTER_FRAME event. So now we have a repeated method, i.e. loop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	public class TweenManager extends MovieClip {
		private var _objectToModify:Object;
		private var _properties:Object;
		public function TweenManager(objectToModify:Object, properties:Object) {
			_objectToModify = objectToModify;
			_properties = properties;
		}
		public function start():void {
			addEventListener(Event.ENTER_FRAME, loop);
		}
		public function loop(e:Event):void {
		}
	}
}

What are we going to pass as properties parameter? I think it is a good idea to use JSON object, because it’s really flexible and we can add/remove properties really fast without changing anything in our class. Here is an example of the creation of an object from our tween class.

1
2
3
4
5
6
7
8
9
10
11

package {
	import flash.display.MovieClip;
	public class App extends MovieClip {
		public var clip:MovieClip;
		public function App() {
			var properties:Object = {x:{start:50,end:390,steps:100}};
			var t:TweenManager = new TweenManager(clip,properties);
			t.start();
		}
	}
}

There are two things that you have to notice. The first one is that you should have a movie clip on the stage that you can use for the tween. The second thing is the properties object. As you can see we are going to change the “x” property of the clip from 50 to 390 for 100 steps, i.e. 100 frames. To be able to do that we need the value of “x” for each one of these 100 frames. The function “calculateValues” will do that for us:

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

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	public class TweenManager extends MovieClip {
		private var _objectToModify:Object;
		private var _properties:Object;
		public function TweenManager(objectToModify:Object, properties:Object) {
			_objectToModify = objectToModify;
			_properties = properties;
		}
		public function start():void {
			for (var i:* in _properties) {
				_properties[i].values = calculateValues(_properties[i].start,_properties[i].end,_properties[i].steps);
			}
			addEventListener(Event.ENTER_FRAME, loop);
		}
		public function loop(e:Event):void {
		}
		private function calculateValues(startPos:Number, endPos:Number, steps:Number):Array {
			var values:Array = [];
			for (var i:int=0; i<steps+1; i++) {
				values.push(startPos + (((endPos - startPos) / steps)*i));
			}
			return values;
		}
	}
}

As you can see we are adding dynamically a new array for every property in our properties object. “values” is an array with all the values of “x” for each of these 100 frames. The last thing that we should make is to pass the values to our clip, i.e. to write the content of the “loop” method.

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.MovieClip;
	import flash.events.Event;
	public class TweenManager extends MovieClip {
		private var _objectToModify:Object;
		private var _properties:Object;
		public function TweenManager(objectToModify:Object, properties:Object) {
			_objectToModify = objectToModify;
			_properties = properties;
		}
		public function start():void {
			for (var i:* in _properties) {
				_properties[i].values = calculateValues(_properties[i].start,_properties[i].end,_properties[i].steps);
				_properties[i].valueIndex = 0;
				_properties[i].isItDone = false;
			}
			addEventListener(Event.ENTER_FRAME, loop);
		}
		public function loop(e:Event):void {// looping through the properties  
			for (var i:* in _properties) {// checking if the properties tween is done     
				if (! _properties[i].isItDone) {// checking if the current value is the last one            
					if (_properties[i].valueIndex == _properties[i].steps + 1) {// marking the tween as a done 
						_properties[i].isItDone = true;
					}
					else {// applying the value     
						_objectToModify[i] = _properties[i].values[_properties[i].valueIndex];// incrementing the values' index 
						_properties[i].valueIndex +=  1;
					}
				}
			}// checking if all the tweens are done   
			var areAllDone:Boolean = true;
			for (i in _properties) {
				if (! _properties[i].isItDone) {
					areAllDone = false;
				}
			}// if yes then remove the listener    
			if (areAllDone) {
				removeEventListener(Event.ENTER_FRAME, loop);
			}
		}
		private function calculateValues(startPos:Number, endPos:Number, steps:Number):Array {
			var values:Array = [];
			for (var i:int=0; i<steps+1; i++) {
				values.push(startPos + (((endPos - startPos) / steps)*i));
			}
			return values;
		}
	}
}

Please notice lines 18 and 19. We added a flag (isItDone) that indicates when the tween is finished and “valueIndex”, which we used to go through all the values.
When you run the flash you will see that the circle is moving from x=50 to x=390 for 100 frames. Let’s add some other properties and see how it looks:

1
2
3
4
5
6
7
8
9
10
11

package {
	import flash.display.MovieClip;
	public class App extends MovieClip {
		public var clip:MovieClip;
		public function App() {
			var properties:Object = {x:{start:50,end:390,steps:70},y:{start:50,end:390,steps:70},rotation:{start:0,end:180,steps:30},alpha:{start:1,end:0.5,steps:10}};
			var t:TweenManager = new TweenManager(clip,properties);
			t.start();
		}
	}
}

We can change as many properties as we want and obviously to set different steps for each one of them.

Ok, the Tween class looks good so far but it isn’t as cool as we wanted. It’s because there is no easing. We used only a linear type of motion. To add other types we’re going to use some maths by Robert Penner. We will just change the calculateValues method and it will support different types of motions. Here is the final version of the class:

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

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	public class TweenManager extends MovieClip {
		private var _objectToModify:Object;
		private var _properties:Object;
		public function TweenManager(objectToModify:Object, properties:Object) {
			_objectToModify = objectToModify;
			_properties = properties;
		}
		public function start():void {
			for (var i:* in _properties) {
				_properties[i].values = calculateValues(_properties[i].start,_properties[i].end,_properties[i].steps,_properties[i].method);
				_properties[i].valueIndex = 0;
				_properties[i].isItDone = false;
			}
			addEventListener(Event.ENTER_FRAME, loop);
		}
		public function loop(e:Event):void {// looping through the properties          
			for (var i:* in _properties) {// checking if the properies twee it's done 
				if (! _properties[i].isItDone) {// checking if the current value is the last one    
					if (_properties[i].valueIndex == _properties[i].steps + 1) {// marking the tween as a done          
						_properties[i].isItDone = true;
					}
					else {// applying the value 
						_objectToModify[i] = _properties[i].values[_properties[i].valueIndex];// incrementing the values' index     
						_properties[i].valueIndex +=  1;
					}
				}
			}// checking if all the tweens are done 
			var areAllDone:Boolean = true;
			for (i in _properties) {
				if (! _properties[i].isItDone) {
					areAllDone = false;
				}
			}// if yes then remove the listener  
			if (areAllDone) {
				removeEventListener(Event.ENTER_FRAME, loop);
			}
		}
		private function calculateValues(startPos:Number, endPos:Number, steps:Number, mtd:String):Array {
			var arr:Array = new Array();
			var calcEndPos:Number;
			for (var i:Number=0; i<=steps; i++) {
				calcEndPos = (endPos-startPos);
				switch (mtd) {
					case "InBack" :
						arr[i] = Ease.InBack(i,startPos,calcEndPos,steps,1.70158);
						break;
					case "OutBack" :
						arr[i] = Ease.OutBack(i,startPos,calcEndPos,steps,1.70158);
						break;
					case "InOutBack" :
						arr[i] = Ease.InOutBack(i,startPos,calcEndPos,steps,1.70158);
						break;
					case "OutBounce" :
						arr[i] = Ease.OutBounce(i,startPos,calcEndPos,steps);
						break;
					case "InBounce" :
						arr[i] = Ease.InBounce(i,startPos,calcEndPos,steps);
						break;
					case "InOutBounce" :
						arr[i] = Ease.InOutBounce(i,startPos,calcEndPos,steps);
						break;
					case "InCirc" :
						arr[i] = Ease.InCirc(i,startPos,calcEndPos,steps);
						break;
					case "OutCirc" :
						arr[i] = Ease.OutCirc(i,startPos,calcEndPos,steps);
						break;
					case "InOutCirc" :
						arr[i] = Ease.InOutCirc(i,startPos,calcEndPos,steps);
						break;
					case "In" :
						arr[i] = Ease.In(i,startPos,calcEndPos,steps);
						break;
					case "Out" :
						arr[i] = Ease.Out(i,startPos,calcEndPos,steps);
						break;
					case "InOut" :
						arr[i] = Ease.InOut(i,startPos,calcEndPos,steps);
						break;
					case "InElastic" :
						arr[i] = Ease.InElastic(i,startPos,calcEndPos,steps,0,0);
						break;
					case "OutElastic" :
						arr[i] = Ease.OutElastic(i,startPos,calcEndPos,steps,0,0);
						break;
					case "InOutElastic" :
						arr[i] = Ease.InOutElastic(i,startPos,calcEndPos,steps,0,0);
						break;
					case "InExpo" :
						arr[i] = Ease.InExpo(i,startPos,calcEndPos,steps);
						break;
					case "OutExpo" :
						arr[i] = Ease.OutExpo(i,startPos,calcEndPos,steps);
						break;
					case "InOutExpo" :
						arr[i] = Ease.InOutExpo(i,startPos,calcEndPos,steps);
						break;
					case "Linear" :
						arr[i] = Ease.Linear(i,startPos,calcEndPos,steps);
						break;
					case "InLinear" :
						arr[i] = Ease.InLinear(i,startPos,calcEndPos,steps);
						break;
					case "OutLinear" :
						arr[i] = Ease.OutLinear(i,startPos,calcEndPos,steps);
						break;
					case "InOutLinear" :
						arr[i] = Ease.InOutLinear(i,startPos,calcEndPos,steps);
						break;
					case "InQuad" :
						arr[i] = Ease.InQuad(i,startPos,calcEndPos,steps);
						break;
					case "OutQuad" :
						arr[i] = Ease.OutQuad(i,startPos,calcEndPos,steps);
						break;
					case "InOutQuad" :
						arr[i] = Ease.InOutQuad(i,startPos,calcEndPos,steps);
						break;
					case "InQuart" :
						arr[i] = Ease.InQuart(i,startPos,calcEndPos,steps);
						break;
					case "OutQuart" :
						arr[i] = Ease.OutQuart(i,startPos,calcEndPos,steps);
						break;
					case "InOutQuart" :
						arr[i] = Ease.InOutQuart(i,startPos,calcEndPos,steps);
						break;
					case "InQuint" :
						arr[i] = Ease.InQuint(i,startPos,calcEndPos,steps);
						break;
					case "OutQuint" :
						arr[i] = Ease.OutQuint(i,startPos,calcEndPos,steps);
						break;
					case "InOutQuint" :
						arr[i] = Ease.InOutQuint(i,startPos,calcEndPos,steps);
						break;
					case "InSine" :
						arr[i] = Ease.InQuint(i,startPos,calcEndPos,steps);
						break;
					case "OutSine" :
						arr[i] = Ease.OutQuint(i,startPos,calcEndPos,steps);
						break;
					case "InOutSine" :
						arr[i] = Ease.InOutQuint(i,startPos,calcEndPos,steps);
						break;
					default :
						arr[i] = Ease.Linear(i,startPos,calcEndPos,steps);
						break;
				}
			}
			return arr;
		}
	}
}

And the usage:

1
2
3
4
5
6
7
8
9
10
11

package {
	import flash.display.MovieClip;
	public class App extends MovieClip {
		public var clip:MovieClip;
		public function App() {
			var properties:Object = {x:{start:50,end:390,steps:170,method:"OutBack"},y:{start:50,end:390,steps:170,method:"OutBounce"},rotation:{start:0,end:180,steps:300,method:"OutElastic"},alpha:{start:1,end:0.5,steps:100}};
			var t:TweenManager = new TweenManager(clip,properties);
			t.start();
		}
	}
}

Together with “start”, “end” and “steps” we are passing a new property “method” which is used by the “calculateValues” function. The class “Ease” contains mathematics methods that calculate the values. No need to understand it, just have to know how to use it.

And this is an example:

You may need to reload the page to see it in action.

Of course the class is not fully functional. I mean there are no checks if some of the properties like “start” or “end” are missing. We can also add an ability to call a callback method when some of the tweens finish. It’s just a basic manager that you can develop.

Download the source code.

]]> http://www.emanueleferonato.com/2010/08/09/create-your-own-tween-manager-class-in-as3/feed/ 8 Worms-like destructible terrain in Flash – Part 2 http://www.emanueleferonato.com/2010/08/05/worms-like-destructible-terrain-in-flash-part-2/ http://www.emanueleferonato.com/2010/08/05/worms-like-destructible-terrain-in-flash-part-2/#comments Thu, 05 Aug 2010 21:49:30 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3213 After having some troubles with the email, I am finally able to post Jordi Sanglas Molist‘s second step of Worms-like destructible terrain in Flash.

Now the character can jump and move. I’ve also solved a bug: in the last script I checked a collision using the feet, so if the terrain was between both feet the character would fall.

Now, instead of using a hitTest between a BitmapData and a point I use a hitTest between a BitmapData and a Rectangle.

We have to check more collisions, so I used four rectangles:

* The rectangle below the character is used to check if the character must fall

* The rectangle above the character is used to check if the character hit the ground (while he was jumping)

* The rectangles at the sides are used to check if the character can move.

These rectangles aren’t as long as the character, they’re 17 pixels height instead of 20. That’s because, if the character wants to move left and the obstacle isn’t high enough (high enough to reach the rectangle), the character will be able to move. A similar strategy is used in “Create a flash draw game like line rider or others – part 5“, where a point (the knee point) is used to check if the character can move.

I renamed the function “fall”: now it’s “move_character”. I only commented the new lines. Now I’m working on part 3, but I still don’t know how to calculate the explosion impulse. I looked for some information, but now I’m thinking about maths (an explosion is a growing circle).

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
118
119
120
121
122
123
124
125
126
127
128
129
130

package {
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.geom.Matrix;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
 
	public class worms extends Sprite {
 
		public var terrain_bmpd:BitmapData=new BitmapData(550,200,true,0xFF00FF00);
		public var terrain_bmp:Bitmap=new Bitmap(terrain_bmpd);
		public var character:Sprite=new Sprite  ;
		public var character_speed:Number=0;//That number is the y speed that the character has
		public var hole:Sprite=new Sprite  ;
		public var hole_matrix:Matrix;
		public var left_key:Boolean;
		public var right_key:Boolean;
		public var space_key:Boolean;
		public var jumping:Boolean=true;//When that variable is true, the character is in the air
		public var i:int;//We will use this variable to make a loop
 
		public function worms() {
			draw_objects();
 
			stage.addEventListener(Event.ENTER_FRAME,move_character);
			stage.addEventListener(MouseEvent.MOUSE_UP,mouse_up);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP,key_up);
		}
 
		public function move_character(e:Event) {
			//If left key is pressed, we'll move the character to the left
			if (left_key) {
				for (i=0; i<3; i++) {//Do you remember when we made the character fall? We had to move the character pixel by pixel
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-6,character.y-10,1,17))) {
						character.x--;	/*If the character doesn't hit the ground, we can move left. However,
										the character may be sunk under the ground. We have to lift it*/
						while (terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+9,10,1))) {
							character.y--;
						}
					}
				}
			}
			if (right_key) {//Well, that's the same for the right key
				for (i=0; i<3; i++) {
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x+5,character.y-10,1,17))) {
						character.x++;
						while (terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+9,10,1))) {
							character.y--;
						}
					}
				}
			}
			if (space_key&&! jumping) {//That's easy: if he isn't jumping and you press space, his speed will be negative and he'll jump
				character_speed=-10;
				jumping=true;//Now the character can't jump again
			}
 
			character_speed++;//Every frame we will increase character's speed
			if (character_speed>0) {
				//If the speed is positive, we will check a collision between the terrain and the rectangle below the character
				for (i=0; i<character_speed; i++) {//We check the collision pixel by pixel...
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y+9,10,1))) {
						character.y++;//If there isn't a collision, the character will fall
					} else {
						jumping=false;//If there's a collision with the ground, the character isn't jumping
						character_speed=0;//The speed is 0, because the character hit the ground
					}
				}
			} else {
				for (i=0; i<Math.abs(character_speed); i++) {//If the speed is negative, the for loop won't work. We have to use Math.abs().
				//Now we will check the collision between the terrain and the rectangle above the character
					if (! terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,new Rectangle(character.x-5,character.y-10,10,1))) {
						character.y--;
					} else {
						character_speed=0;//Well, that's the same: the character hit the ground
					}
				}
			}
		}
 
		public function mouse_up(e:MouseEvent) {
			hole_matrix=new Matrix  ;
			hole_matrix.translate(e.stageX-terrain_bmp.x,e.stageY-terrain_bmp.y);
			terrain_bmpd.draw(hole,hole_matrix,null,BlendMode.ERASE);
 
		}
 
		public function key_down(e:KeyboardEvent) {
			if (e.keyCode==37) {
				left_key=true;
			}
			if (e.keyCode==39) {
				right_key=true;
			}
			if (e.keyCode==32) {
				space_key=true;
			}
		}
		public function key_up(e:KeyboardEvent) {
			if (e.keyCode==37) {
				left_key=false;
			}
			if (e.keyCode==39) {
				right_key=false;
			}
			if (e.keyCode==32) {
				space_key=false;
			}
		}
 
		public function draw_objects() {
			terrain_bmp.y=200;
			stage.addChild(terrain_bmp);
 
			character.graphics.beginFill(0x0000FF);
			character.graphics.drawRect(-5,-10,10,20);
			character.x=250;
			stage.addChild(character);
 
			hole.graphics.beginFill(0x000000);
			hole.graphics.drawCircle(0,0,30);
		}
	}
}

And this is the result:

Move the player with left – right arrow keys and click on the terrain to create an explosion.

Download the source code. Now Jordi is trying to manage explosion impulse but he’s having some problems. Any blog-bomber reader willing to read?

]]> http://www.emanueleferonato.com/2010/08/05/worms-like-destructible-terrain-in-flash-part-2/feed/ 19 Changing a Movieclip registration point on the fly with AS3 http://www.emanueleferonato.com/2010/08/04/changing-a-movieclip-registration-point-on-the-fly-with-as3/ http://www.emanueleferonato.com/2010/08/04/changing-a-movieclip-registration-point-on-the-fly-with-as3/#comments Wed, 04 Aug 2010 09:49:57 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3198 Do you know what is a Movieclip registration point? If you ever played with Flash drawing tools, you should.

The registration point is like the origin in a Cartesian coordinate system, the default point of a Movieclip from which its x and y coordinates are calculated.

In the example we are about to see, I created this square with a 100 pixel side and placed at (-50,-50), so its center of rotation is at (0,0), as you can see from the tiny white crosshair in the centre of the square.

Now the question is: can I change dynamically the registration point with AS3?

The answer is: NO. No code to download, and see you later.

Anyway, there is a little trick.

Look at this 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

package {
	import flash.display.Sprite;
	public class registration extends Sprite {
		private var square:square_mc;
		private var static_square:static_square_mc
		public function registration() {
			square = new square_mc(100,100);
			square.x = 100
			square.y = 100
			addChild(square);
			static_square = new static_square_mc()
			addChild(static_square);
			static_square.x = 100
			static_square.y = 100
			static_square.alpha=0.3
			//
			square = new square_mc(50,50);
			square.x = 250
			square.y = 100
			addChild(square);
			static_square = new static_square_mc()
			addChild(static_square);
			static_square.x = 250
			static_square.y = 100
			static_square.alpha=0.3
			//
			square = new square_mc(0,0);
			square.x = 400
			square.y = 100
			addChild(square);
			static_square = new static_square_mc()
			addChild(static_square);
			static_square.x = 400
			static_square.y = 100
			static_square.alpha=0.3
		}
	}
}

In a very lazy way (because it’s not the focus of this post) it creates three squares and three static squares.

Let’s concentrate on square_mc class constructor:

square = new square_mc(x,y);

Where x and y represent the coordinates of the new registration point. So (0,0) will mean the upper left corner, (50,50) the center and (100,100) the lower right corner.

Let’s see square_mc.as

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;
	public class square_mc extends Sprite {
		private var new_reg_x,new_reg_y:int;
		private var pin:pin_mc=new pin_mc();
		public function square_mc(reg_x,reg_y) {
			new_reg_x=reg_x;
			new_reg_y=reg_y;
			addEventListener(Event.ENTER_FRAME,on_enter_frame);
			addEventListener(Event.ADDED_TO_STAGE,on_added);
		}
		public function on_added(e:Event) {
			var rect:Rectangle=getBounds(this);
			var x_offset=new_reg_x+rect.x;
			var y_offset=new_reg_y+rect.y
			// updating container position
			x+=x_offset;
			y+=y_offset;
			// just adding a pin to highlight registration point
			var par:registration=this.parent as registration
			par.addChild(pin);
			pin.x=x;
			pin.y=y
			for (var i:uint=0; i<numChildren; i++) {
				// updating children position
				getChildAt(i).x-=x_offset;
				getChildAt(i).y-=y_offset;
			}
		}
		public function on_enter_frame(e:Event) {
			rotation+=2;
		}
	}
}

First, I get the bounds rectangle of the object (not necessary since I know it’s a square, but I could be anything else), then I determine the offset adding to new registration coordinates the origin of the bounds rectangle. This will work because I drew the square centered on movieclip origin.

Once I found the offset, it’s just a matter of adding the offset to square position and subtracting from all its children’s (the square shape) position.

And that’s it:

Obviously you can set the new registration point anywhere you want, and it will work anyway.

Download the source code.

Just a quick question: what game prototype I am going to show you using this feature?

]]> http://www.emanueleferonato.com/2010/08/04/changing-a-movieclip-registration-point-on-the-fly-with-as3/feed/ 5 Create a Flash racing game – Flex version http://www.emanueleferonato.com/2010/07/30/create-a-flash-racing-game-flex-version/ http://www.emanueleferonato.com/2010/07/30/create-a-flash-racing-game-flex-version/#comments Fri, 30 Jul 2010 15:12:51 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3191 Hamilton Lombardi is a brazilian Flex programmer who decided to rewrite the code you can find in the original post for Flex 4.

Moreover he added a splash screen, as you can see:

The source code is clearly formatted and commented as you can see from Level class:

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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259

package
{
	import flash.geom.*;
	import flash.media.*;
	import flash.net.*;
	import flash.utils.*;
 
	import mx.containers.Canvas;
	import mx.controls.Alert;
	import mx.controls.Label;
	import mx.controls.Text;
	import mx.core.*;
 
	public class Level
	{
		protected static var instance:Level = null;	
		public static var player:Player = null;
		public static var track:Track = null;
 
		//this is the max number of laps
		public const totalLaps:Number = 3;
 
		// Moment the race started
		public var initialTime:Date;
		// Current lap time
		public var lapTime:Date;
		// Current fastest lap
		public var bestLap:Number = 0;
		// Current lap number
		public var currentLap:int = 0;
		// Current checkpoint - 1 Start Line , 2 - Mid track
		public var currentCheckpoint:int = 1;
		// History of all the lap times
		public var raceHistory:String;
 
		static public function get Instance():Level
		{
			if ( instance == null )
				instance = new Level();
			return instance;
		}
 
		public function Level(caller:Function = null )
		{
			if ( Level.instance != null )
			throw new Error( "Only one Singleton instance should be instantiated" );
		}
 
		public function startup():void
		{
			// Start all clock timers
			startupTimeClocks();
 
			// Start time display
			startupTimeDisplay();
 
			// Creates the race track
			track = new Track();
			track.startupTrack();	
 
			// Creates the racer
			player = new Player();
			player.startupPlayer();			
		}
 
		public function shutdown():void
		{			
		}
 
		public function enterFrame():void
		{
			// Check if the lap had been completed
			checkPoints();
 
			// Update total race time display
			setTimes();				
		}
 
		public function setTimes():void {
 
			var timeElapsed:Number = 0;
			var milliseconds:Number = 0;
			var seconds:Number = 0;
			var minutes:Number = 0;
 
			var minutesTXT:Number = 0;
			var secondsTXT:Number = 0;
			var tensTXT:Number = 0;
 
			var totalTXT:String;
 
			var totalTimeLabel:Label;
			var timeCanvas:Canvas;
 
			// Only starts the timer if the car cross the start line for the first time
			if (this.currentLap != 0) {
				//we calculate the time elapsed from the moment the race started in millisecond
				var thisTime:Date = new Date();
				timeElapsed = (thisTime.getTime() - initialTime.getTime());
 
				//we calculate the minutes, seconds and tens of seconds and set them to their respective variables
				milliseconds = timeElapsed;
				seconds = Math.floor(milliseconds/1000);
				minutes = Math.floor(seconds/60);
				minutesTXT = minutes;
				secondsTXT = seconds-minutes*60;
				tensTXT = Math.round((milliseconds-seconds*1000)/10);
				//if the minutes, seconds or the tens of seconds number has only one character we add a "0" before it - that's just because we want the time to look good ;)
				if (minutesTXT<10) totalTXT = "0" + minutesTXT;
				else totalTXT = "" + minutesTXT;
 
				if (secondsTXT<10) totalTXT = totalTXT + "." + "0" + secondsTXT;
				else totalTXT = totalTXT + "." + secondsTXT;
 
				if (tensTXT<10) totalTXT = totalTXT + "." + "0" + tensTXT;
				else totalTXT = totalTXT + "." + tensTXT;
 
				//Update total time label 
				timeCanvas = FlexGlobals.topLevelApplication.timeDisplay;
				totalTimeLabel = (Label) (timeCanvas.getChildByName("totalTimeTXT"));			
				totalTimeLabel.text = totalTXT;
			}
		}
 
		//and the second function
		public function setBestLap():void {
 
			//this function does the exact same thing as the first one, only here we will use the time elapsed from the last time the car has passed the finish line
			var currentTime: Date = new Date();
			var currentLap:Number = 0;
			currentLap = currentTime.getTime()- this.lapTime.getTime();
 
			var seconds:Number = 0;
			var minutes:Number = 0;			
			var minutesTXT:Number = 0;
			var secondsTXT:Number = 0;
			var tensTXT:Number = 0;			
			var bestLapTXT:String;
			var bestLapLabel:Label;
			var timeCanvas:Canvas;			
 
			seconds = Math.floor(currentLap/1000);
			minutes = Math.floor(seconds/60);
			minutesTXT = minutes;
			secondsTXT = seconds-minutes*60;
			tensTXT = Math.round((currentLap-seconds*1000)/10);
			//if the minutes, seconds or the tens of seconds number has only one character we add a "0" before it - that's just because we want the time to look good ;)
			if (minutesTXT<10) bestLapTXT = "0" + minutesTXT;
			else bestLapTXT = "" + minutesTXT;
 
			if (secondsTXT<10) bestLapTXT = bestLapTXT + "." + "0" + secondsTXT;
			else bestLapTXT = bestLapTXT + "." + secondsTXT;
 
			if (tensTXT<10) bestLapTXT = bestLapTXT + "." + "0" + tensTXT;
			else bestLapTXT = bestLapTXT + "." + tensTXT;
 
			//we don't calculate the lap time if the car passes the finish/start line for the first time
			if ( (this.bestLap>currentLap) || (this.bestLap == 0) ) {
 
				this.bestLap = currentLap;
				//Update best lap time label 
				timeCanvas = FlexGlobals.topLevelApplication.timeDisplay;
				bestLapLabel = (Label) (timeCanvas.getChildByName("bestLapTXT"));			
				bestLapLabel.text = bestLapTXT;
			}
 
			// Save race history
			if (this.raceHistory == null) this.raceHistory = "Lap: " + this.currentLap + " - " + bestLapTXT + "\n";
			else this.raceHistory = this.raceHistory  + "Lap: " + this.currentLap + " - " + bestLapTXT + "\n"; 
 
			//we set the initial time to the moment the car passed the finish line 
			this.lapTime = new Date();
		}
 
		public function checkPoints():void 
		{
			var currentLapTXT:String;
			var currentLapLabel:Label;
			var timeCanvas:Canvas;
			var levelEndCanvas:Canvas;
			var historyText:Text;
 
			//we check to see if the car "touches" the checkpoint1 - start/finish line)
			if (FlexGlobals.topLevelApplication.finishLine.hitTestPoint(player.position.x, player.position.y, true)) {
				// 
				if (this.currentLap == 0) {
					this.initialTime = new Date();
					this.lapTime = new Date();
					this.currentLap = 1;
				}
				//if the current checkpoint is the mid track line - increase the lap number				
				if (this.currentCheckpoint === 2) {
					//check if this is the best lap
					this.setBestLap();					
					//if this is the final lap, move to the "finish" frame 
					if (this.currentLap == totalLaps) {
						historyText = new Text();
						historyText.text = this.raceHistory;
						historyText.x = 10; historyText.y = 115;	
						FlexGlobals.topLevelApplication.currentState = "LevelEnd";
						FlexGlobals.topLevelApplication.levelEndCanvas.addChild(historyText);
 
					} else {
						//if the current checkpoint is the start line - increase the lap number					
						this.currentLap++;
					}					
					currentLapTXT = this.currentLap + "/" + totalLaps;
 
					//Update cuurent lap label 
					timeCanvas = FlexGlobals.topLevelApplication.timeDisplay;
					currentLapLabel = (Label) (timeCanvas.getChildByName("currentLapTXT"));			
					currentLapLabel.text = currentLapTXT;
 
					//we set to checkpoint to be checked to the next checkpoint 
					this.currentCheckpoint = 1;					
				}				
			}
 
			//we check to see if the car "touches" the checkpoint2 - mid track line)
			if (FlexGlobals.topLevelApplication.checkpoint.hitTestPoint(player.position.x, player.position.y, true)) {
				//if the current checkpoint is the start line - reached the mid track point				
				if (this.currentCheckpoint === 1) {					
					//we set to checkpoint to be checked is the next checkpoint 
					this.currentCheckpoint = 2;					
				}				
			}
		}
 
		public function startupTimeClocks():void 
		{			
			this.initialTime = new Date();			
			this.lapTime = new Date();
			this.bestLap = 0;
			this.currentLap = 0;
			this.currentCheckpoint = 1;			
			this.raceHistory = "";			
		}
 
		public function startupTimeDisplay():void 
		{
 
			var timeCanvas:Canvas;
			var currentLapLabel:Label;
			var bestLapLabel:Label;
			var totalTimeLabel:Label;
 
			//Update time display labels 
			timeCanvas = FlexGlobals.topLevelApplication.timeDisplay;
			currentLapLabel = (Label) (timeCanvas.getChildByName("currentLapTXT"));			
			currentLapLabel.text = (this.currentLap + 1) + "/" + totalLaps;
			bestLapLabel = (Label) (timeCanvas.getChildByName("bestLapTXT"));			
			bestLapLabel.text = "00.00.00";
			totalTimeLabel = (Label) (timeCanvas.getChildByName("totalTimeTXT"));			
			totalTimeLabel.text = "00.00.00";			
 
		}
 
	}
}

Really a nice conversion.

Download the full source code.

]]> http://www.emanueleferonato.com/2010/07/30/create-a-flash-racing-game-flex-version/feed/ 9 Claytus Hood Tower Defense case study http://www.emanueleferonato.com/2010/07/26/claytus-hood-tower-defense-case-study/ http://www.emanueleferonato.com/2010/07/26/claytus-hood-tower-defense-case-study/#comments Mon, 26 Jul 2010 21:54:45 +0000 Emanuele Feronato http://www.emanueleferonato.com/?p=3180 I always loved games that revive an old concept with new features, and Claytus Hood Tower Defense is one of them.

Based on the old “tower defense” theme, it introduces new strategy options with large, scrollable maps and the capability to block some paths to make enemies take a larger route to attack you base.

Roux Raphaël, the author, shares with us his experience:

« Why did I decide to work on Claytus?

Before that, I used to be a developer for a web agency, coding online shops or institutional communication websites… not that fun!

After I lost my job at the end of 2009, I decided to increase my knowledges in AS3, to code funny stuff like games for example!

I always learnt programming by myself (the geekish way), with books, resources found on the web and personal experience…

I thus decided to read Keith Peters’ book “AS3 animation – Making Things Move” to fill my gaps in maths, and I saw lots of quite useful things to code games I had forgotten.

After reading this book, I managed to learn AI and Pathfinding, I thus studied A* algorithm.

Here are the examples I inspired myself of to learn A* :
http://www.remixtechnology.com/view/AStar-haXe.

Well, I reviewed trigonometry, I know A*, what can I do with it? A Tower Defense game! Let’s code!

Claytus is thus my very first game, and I learnt lots of things about AS3 best practices while developing it.

Here are a few technical informations about Claytus’ realization and technics I used for its design :

- it’s a full AS3 project developed with Flex Builder 3, a great software that allows to gain plenty of time as soon as you master it (spelling, auto import, debugging, profiling, etc.).

- I had to establish a good workflow between Flash for graphic assets and Flex for AS3 coding (do you Flax??). With the Embed tag, I succeeded into compiling the game in a single swf and I didn’t have to load external assets.

- Setting up the AS3 project in FlexBuilder 3 so that the MochiAds works well is really very tricky, with the add of a Preloader class before the Main class and compiler arguments (-frame 2 Main) so that the Main class is added to stage only on the second frame!

- I managed to set up optimization strategies for AS3, thanks to G Skinner tricks and benchmarks. (http://gskinner.com/talks/quick/)

For the first level, the use of A* isn’t so blatant; it’s gonna be much more in the following levels where you can block your enemies’ way.

Today, my challenge is to avoid cheaters on my leader boards :’(

About the TD wannamake

I didn’t use the easiest way to code a TD game, it’s thus quite hard to give you basic tips. Here is a list of a few basics for coding TD :

- The game takes place on a Tilemap, with a Boolean for each tile which holds isWalkable for the A* and isBuildable for the turret build.

- When an Enemy spwans, it asks its path to A* and I put its reference on an Array (enemyArray).

- The turrets go through the enemyArray in search of an enemy on its range and then open fire if their Boolean isReloaded == true.

- To estimate the distances and so check the range, I use Manhattan distance formula, less accurate but faster than Euclidian distance.

- The non-reloaded turrets reload during a few frames to simulate the firerate and then start again to look for a potential target.

Of course the process is far more complex, if you need more information about a precise point, don’t hesitate to ask me!

Easier methods than A* exist to build a TD, if the level has only a single way, no need for A* but to give an information about the direction to take when going out of the tile, such as hard coded waypoints.

Claytus’ graphism

In the beginning, Claytus used to be quite ugly, as a game skeleton with circles for the turrets and triangles for enemies, as for any experimental game skeleton I guess!

I thus offered to friends of mine who are illustrators to work with me on the project, to give life to my circles and triangles ! They were just finishing their studies and I think Claytus has been a good opportunity for them to increase their knowledges in Flash and add a valuable project to their portfolio. They learnt a lot about technical constraints that represents the integration of a drawing into a video game.

All of the Claytus’ artworks were so designed on a graphics tablet coupled to Photoshop. I didn’t wanna use vectorial drawing to economize resources and keep an artistic look. Only using bitmaps, I get very good performances on an old computer on which Bloons TD 4 freezes =D.

Claytus’ music

The music for Claytus TD was exclusively composed by friends of mine! The musicians didn’t know video games field that well, and they brought their point of view and an acoustic soundtrack. I love it!

How to give freshness to an old concept

It’s true it’s difficult to create something new in TD game because lots of things have already been done.

Lots of TD only send lots of waves and lots of enemies with a huge arsenal…

Finally, this gameplay type is much more of a massacre timekiller that you win whatever you do!

I wanted to create a much more challenging game with Claytus TD. I agree it can raise an issue to some of the players, but the fact that is challenging makes others happy!

The game begins with a single way, and only three different turrets, which poses Claytus as a real strategy and positioning game, you have to think every move you make!

In the other levels, we bring each time a novelty in gameplay : stage with other possibilities as multiple ways possible, new turrets and new upgrades in addition to gameplay elements of the stage.

I wanted every turret unique with a precise goal, that’s why you can’t do anything if you wanna win.

About the funding

Claytus wasn’t made to raise money at first thought, it was more of a project to help me learning to code in AS3 and manage a project with high quality standards.

I’m thus just incoming into flash game field and Mochimedia helps broadcasting the game on tenths of the websites of their partners.

Website

Claytus TD have its own website at http://www.claytus-towerdefense.com.

I made it to showcase the game in a nice looking website with drawn background.

The website introduce the team, the French version have a forum (I will add an english forum asap), and people can mail me via the contact form.

I also upload preview pictures of the next levels and the next soundtracks because Claytus TD intend to have six levels and more, but its takes a lot of time to create all of this stuff!

To stay tuned, players can become fan on Facebook and subscribe to my
newsletter.

Level Editor

I have build a level editor to help me making level and learning tool programming, coded in Flex, MXML & AS3, great technology to deploy rich applications (RIA).

It’s not released for the public at this day, but if I have time i’ll code a friendly user version for the people can make their own level and why not create a level contest? »

]]> http://www.emanueleferonato.com/2010/07/26/claytus-hood-tower-defense-case-study/feed/ 16