Emanuele Feronato » Users contributions

Worms-like destructible terrain in Flash – Part 3

Emanuele Feronato — Wed, 18 Aug 2010 18:30:32 +0000

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:

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.

Create Box2D levels in a quick with Bison Kick

Emanuele Feronato — Mon, 16 Aug 2010 21:41:38 +0000

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:


  
    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'

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

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.

Create your own tween manager class in AS3

Emanuele Feronato — Mon, 09 Aug 2010 19:40:53 +0000

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:

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.

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.

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:

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.

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:

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:

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:

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.

Worms-like destructible terrain in Flash – Part 2

Emanuele Feronato — Thu, 05 Aug 2010 21:49:30 +0000

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:

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?

Create a Flash racing game – Flex version

Emanuele Feronato — Fri, 30 Jul 2010 15:12:51 +0000

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:

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.

Claytus Hood Tower Defense case study

Emanuele Feronato — Mon, 26 Jul 2010 21:54:45 +0000

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? »

PHP face detection class

Emanuele Feronato — Tue, 06 Jul 2010 15:04:30 +0000

Face detection is a computer technology that determines the locations and sizes of human faces in arbitrary (digital) images.

It detects facial features and ignores anything else, such as buildings, trees and bodies.

(source: Wikipedia)

There is so much to say about face detection and all its algorithms… I am planning a step by step tutorial about every branch of object detection in digital images, but first I want to publish Maurice Svay‘s PHP class.

Maurice, in his blog svay.com, explains he was looking for a face detection script for PHP, but wasn’t able to find one working without OpenCV (Open Source Computer Vision), an opensource lib that was originally developed by Intel.

OpenCV seems to perform well but you need to be able to install it on your server.

So he coded his own pure PHP solution, that does not require any library to be installed on the server.

And, obviously, that can be easily ported into any language. His class itself has been translated from a javascript code that actually is no longer available online

So this is the class:


// 
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
// 
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.     
// 
// @Author Karthik Tharavaad 
//         karthik_tharavaad@yahoo.com
// @Contributor Maurice Svay
//              maurice@svay.Com
 
class Face_Detector {
 
    protected $detection_data;
    protected $canvas;
    protected $face;
    private $reduced_canvas;
 
    public function __construct($detection_file = 'detection.dat') {
        if (is_file($detection_file)) {
            $this->detection_data = unserialize(file_get_contents($detection_file));
        } else {
            throw new Exception("Couldn't load detection data");
        }
        //$this->detection_data = json_decode(file_get_contents('data.js'));
    }
 
    public function face_detect($file) {
        if (!is_file($file)) {
            throw new Exception("Can not load $file");
        }
 
        $this->canvas = imagecreatefromjpeg($file);
        $im_width = imagesx($this->canvas);
        $im_height = imagesy($this->canvas);
 
        //Resample before detection?
        $ratio = 0;
        $diff_width = 320 - $im_width;
        $diff_height = 240 - $im_height;
        if ($diff_width > $diff_height) {
            $ratio = $im_width / 320;
        } else {
            $ratio = $im_height / 240;
        }
 
        if ($ratio != 0) {
            $this->reduced_canvas = imagecreatetruecolor($im_width / $ratio, $im_height / $ratio);
            imagecopyresampled($this->reduced_canvas, $this->canvas, 0, 0, 0, 0, $im_width / $ratio, $im_height / $ratio, $im_width, $im_height);
 
            $stats = $this->get_img_stats($this->reduced_canvas);
            $this->face = $this->do_detect_greedy_big_to_small($stats['ii'], $stats['ii2'], $stats['width'], $stats['height']);
            $this->face['x'] *= $ratio;
            $this->face['y'] *= $ratio;
            $this->face['w'] *= $ratio;
        } else {
            $stats = $this->get_img_stats($this->canvas);
            $this->face = $this->do_detect_greedy_big_to_small($stats['ii'], $stats['ii2'], $stats['width'], $stats['height']);
        }
        return ($this->face['w'] > 0);
    }
 
 
    public function toJpeg() {
        $color = imagecolorallocate($this->canvas, 255, 0, 0); //red
        imagerectangle($this->canvas, $this->face['x'], $this->face['y'], $this->face['x']+$this->face['w'], $this->face['y']+ $this->face['w'], $color);
        header('Content-type: image/jpeg');
        imagejpeg($this->canvas);
    }
 
    public function toJson() {
        return "{'x':" . $this->face['x'] . ", 'y':" . $this->face['y'] . ", 'w':" . $this->face['w'] . "}";
    }
 
    public function getFace() {
        return $this->face;
    }
 
    protected function get_img_stats($canvas){
        $image_width = imagesx($canvas);
        $image_height = imagesy($canvas);     
        $iis =  $this->compute_ii($canvas, $image_width, $image_height);
        return array(
            'width' => $image_width,
            'height' => $image_height,
            'ii' => $iis['ii'],
            'ii2' => $iis['ii2']
        );         
    }
 
    protected function compute_ii($canvas, $image_width, $image_height ){
        $ii_w = $image_width+1;
        $ii_h = $image_height+1;
        $ii = array();
        $ii2 = array();      
 
        for($i=0; $i<$ii_w; $i++ ){
            $ii[$i] = 0;
            $ii2[$i] = 0;
        }                        
 
        for($i=1; $i<$ii_w; $i++ ){  
            $ii[$i*$ii_w] = 0;       
            $ii2[$i*$ii_w] = 0; 
            $rowsum = 0;
            $rowsum2 = 0;
            for($j=1; $j<$ii_h; $j++ ){
                $rgb = ImageColorAt($canvas, $j, $i);
                $red = ($rgb >> 16) & 0xFF;
                $green = ($rgb >> 8) & 0xFF;
                $blue = $rgb & 0xFF;
                $grey = ( 0.2989*$red + 0.587*$green + 0.114*$blue )>>0;  // this is what matlab uses
                $rowsum += $grey;
                $rowsum2 += $grey*$grey;
 
                $ii_above = ($i-1)*$ii_w + $j;
                $ii_this = $i*$ii_w + $j;
 
                $ii[$ii_this] = $ii[$ii_above] + $rowsum;
                $ii2[$ii_this] = $ii2[$ii_above] + $rowsum2;
            }
        }
        return array('ii'=>$ii, 'ii2' => $ii2);
    }
 
    protected function do_detect_greedy_big_to_small( $ii, $ii2, $width, $height ){
        $s_w = $width/20.0;
        $s_h = $height/20.0;
        $start_scale = $s_h < $s_w ? $s_h : $s_w;
        $scale_update = 1 / 1.2;
        for($scale = $start_scale; $scale > 1; $scale *= $scale_update ){
            $w = (20*$scale) >> 0;
            $endx = $width - $w - 1;
            $endy = $height - $w - 1;
            $step = max( $scale, 2 ) >> 0;
            $inv_area = 1 / ($w*$w);
            for($y = 0; $y < $endy ; $y += $step ){
                for($x = 0; $x < $endx ; $x += $step ){
                    $passed = $this->detect_on_sub_image( $x, $y, $scale, $ii, $ii2, $w, $width+1, $inv_area);
                    if( $passed ) {
                        return array('x'=>$x, 'y'=>$y, 'w'=>$w);
                    }
                } // end x
            } // end y
        }  // end scale
        return null;
    }
 
    protected function detect_on_sub_image( $x, $y, $scale, $ii, $ii2, $w, $iiw, $inv_area){
        $mean = ( $ii[($y+$w)*$iiw + $x + $w] + $ii[$y*$iiw+$x] - $ii[($y+$w)*$iiw+$x] - $ii[$y*$iiw+$x+$w]  )*$inv_area;
        $vnorm =  ( $ii2[($y+$w)*$iiw + $x + $w] + $ii2[$y*$iiw+$x] - $ii2[($y+$w)*$iiw+$x] - $ii2[$y*$iiw+$x+$w]  )*$inv_area - ($mean*$mean);    
        $vnorm = $vnorm > 1 ? sqrt($vnorm) : 1;
 
        $passed = true;
        for($i_stage = 0; $i_stage < count($this->detection_data); $i_stage++ ){
            $stage = $this->detection_data[$i_stage];  
            $trees = $stage[0];  
 
            $stage_thresh = $stage[1];
            $stage_sum = 0;
 
            for($i_tree = 0; $i_tree < count($trees); $i_tree++ ){
                $tree = $trees[$i_tree];
                $current_node = $tree[0];    
                $tree_sum = 0;
                while( $current_node != null ){
                    $vals = $current_node[0];
                    $node_thresh = $vals[0];
                    $leftval = $vals[1];
                    $rightval = $vals[2];
                    $leftidx = $vals[3];
                    $rightidx = $vals[4];
                    $rects = $current_node[1];
 
                    $rect_sum = 0;
                    for( $i_rect = 0; $i_rect < count($rects); $i_rect++ ){
                        $s = $scale;
                        $rect = $rects[$i_rect];
                        $rx = ($rect[0]*$s+$x)>>0;
                        $ry = ($rect[1]*$s+$y)>>0;
                        $rw = ($rect[2]*$s)>>0;  
                        $rh = ($rect[3]*$s)>>0;
                        $wt = $rect[4];
 
                        $r_sum = ( $ii[($ry+$rh)*$iiw + $rx + $rw] + $ii[$ry*$iiw+$rx] - $ii[($ry+$rh)*$iiw+$rx] - $ii[$ry*$iiw+$rx+$rw] )*$wt;
                        $rect_sum += $r_sum;
                    } 
 
                    $rect_sum *= $inv_area;
 
                    $current_node = null;
                    if( $rect_sum >= $node_thresh*$vnorm ){
                        if( $rightidx == -1 ) 
                            $tree_sum = $rightval;
                        else
                            $current_node = $tree[$rightidx];
                    } else {
                        if( $leftidx == -1 )
                            $tree_sum = $leftval;
                        else
                            $current_node = $tree[$leftidx];
                    }
                } 
                $stage_sum += $tree_sum;
            } 
            if( $stage_sum < $stage_thresh ){
                return false;
            }
        } 
        return true;
    }
}

Using it is very easy, just write

$detector = new Face_Detector('detection.dat');
$detector->face_detect('your_file.jpg');
$detector->toJpeg();

once you unpacked and included detection.dat and the image in the same path as your class.

Do you want to see a result?

This was generated by the script, just changing the frame color from red to green, to make it more visible.

The class does not work that well on every photo, but it’s a good start for a journey into face detection

Worms-like destructible terrain in Flash

Emanuele Feronato — Fri, 25 Jun 2010 10:58:54 +0000

Do you remember Worms game and its destructible terrain?

Jordi Sanglas Molist explains us how to create a basic destructible terrain with AS3

« Today, browsing the “most popular” posts, I found “Create a flash artillery game – step 1“, where you talked about making a game similar to Worms.

Then, I thought: “How will I make a destructible terrain?”

After looking for some information, I realized I should use a Bitmap. So I started with a really basic prototype:

- The character falls if he doesn’t touch the ground
- You can press at any point of the terrain to make a hole (because I don’t still have weapons)

The code is fully commented (and there are only 59 miserable lines), so you won’t have any problem to understand it.

I’ll be three days on holiday, so on Sunday I’ll start writing the next part, which I think it may talk about moving the character.

I think I’ll do it in that way: if you press the right arrow and in the right the obstacle is less than X
pixels height, you can move. I’ll try if that works. »

I am looking forward for character movement, meanwhile this is the script:

package {
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.geom.Point;
	import flash.geom.Matrix;
	import flash.events.Event;
	import flash.events.MouseEvent;
	public class worms extends Sprite {
		public var terrain_bmpd=new BitmapData(550,200,true,0xFF00FF00);//This is the Bitmap of the terrain
		public var terrain_bmp=new Bitmap(terrain_bmpd);//and this the BitmapData
		public var character=new Sprite();//The character will work as a worm
		public var hole=new Sprite();//That's the hole we need
		public var hole_matrix:Matrix;//The hole_matrix is used to set the position of the hole
		public var left_foot:Point;
		public var right_foot:Point;//These are the feet of the character. We will use it to check collisions
		public function worms() {
			draw_objects();//This function draws the character, the terrain and the hole.
			stage.addEventListener(Event.ENTER_FRAME,fall);
			stage.addEventListener(MouseEvent.MOUSE_UP,mouse_up);
		}
		public function fall(e:Event) {
			/*This function will move down the character if there isn't a collision
			between the terrain and the "feet" of the character*/
			for (var i:int=0; i<10; i++) {//We want to check every pixel if there's acollision, so we won't move the character 10 pixels all at once
				left_foot=new Point(character.x-5,character.y+10);
				right_foot=new Point(character.x+5,character.y+10);
				if (!(terrain_bmpd.hitTest(new
				Point(terrain_bmp.x,terrain_bmp.y),0x01,left_foot))&&!(terrain_bmpd.hitTest(new Point(terrain_bmp.x,terrain_bmp.y),0x01,right_foot))) {
					character.y++;//If there aren't any collisions, make the character fall one pixel
				}
			}
		}
		public function mouse_up(e:MouseEvent) {
			hole_matrix=new Matrix();//We need to reset the matrix each new hole
			hole_matrix.translate(e.stageX-terrain_bmp.x,e.stageY-terrain_bmp.y);//and setthe coordinates of the hole
			terrain_bmpd.draw(hole,hole_matrix,null,BlendMode.ERASE);//Then, we can draw the hole in the BitmapData
		}
		public function draw_objects() {
			terrain_bmp.y=200;//The terrain shouldn't be at the top of the stage!
			stage.addChild(terrain_bmp);//We can make the terrain visible
			character.graphics.beginFill(0x0000FF);//Let's draw the character. It will be a blue rectangle.
			character.graphics.drawRect(-5,-10,10,20);
			character.x=250;
			stage.addChild(character);
			hole.graphics.beginFill(0x000000);//Now we draw the hole. It doesn't matter the colour.
			hole.graphics.drawCircle(0,0,30);
		}
	}
}

And this is the result:

Click on the terrain to create holes and watch your “worm” falling down.

Download the source code.

Integrate Mochi games in your custom arcade website

Emanuele Feronato — Fri, 21 May 2010 08:40:04 +0000

Do you want to create your custom arcade website without using popular arcade scripts or WordPress plugins? Maybe with a Mochi integration?

That’s what Gabriel Bianconi did, and he wants to share his script with us.

It’s a simple, interesting script dedicated to all developers looking for a quick way to integrate Mochi games into their custom arcade sites.

« Hello. My name is Gabriel Bianconi. I’m a 16 years old Brazilian student and I’m interested in game and web development.
I’ve recently launched my first arcade website, PlugB.com. I decided to create my own script for two reasons: to improve my PHP skills and to have a more customizable website.

One of the features I integrated to my admin was the MochiAds ‘Post Game to my Site’ button. Since I add games manually (I don’t want to import all Mochi games), this saves me a lot of time.

When I tried to search about this feature, I realized that there is no tutorial about this online (at least, I couldn’t find one). I searched a little more and found a few scripts about this.

They were integrated to some arcade scripts, so I couldn’t just copy and paste them. But it was a start.

The script that I most used was from Timothy E. Archer.

After a few tests, I’ve created a working script:

Firstly, you’ll need a MochiAds publisher account.

After registering and adding your website, go to the Settings page.

In the bottom of the page, below ‘Auto Post Settings’, set the ‘Auto Post Method’ to ‘Custom built script’ and the ‘Auto Post URL’ to the URL of your script.

Now the PHP part:


 
$game_tag = $_POST['game_tag'];
 
// Sample tag to fake a mochi request... Remove this line in final version...
$game_tag = 'cd698a06f727e887';
 
if(!$game_tag)
{
	die('No gametag.');
}
 
// This can be found in the settings page.
$mochi_pub_id = 'xxxxxxxxxxxxxxxxxxxxx';
 
$game_feed_url = "http://www.mochiads.com/feeds/games/$mochi_pub_id/$game_tag/?format=json";
 
//Retrieves and parses the JSON data of the game.	
$json_feed = file_get_contents($game_feed_url);
$json_items = json_decode($json_feed, TRUE);
 
$game = $json_items['games'][0];
 
/* Now you can access all variables about the game with $game['variable_name'];
 * For example: $game['name'] or $game['swf_url']
 * The full list of the variables can be found here: https://www.mochimedia.com/support/pub_docs#feed_3
 * I did not add how to save in a database because it changes from script to script.
 */
 
 
// Sample: (can be removed in final version)
 
echo $game['name'] . ' - ' . $game['swf_url'];
 
/* You should get: Sokobones - http://games.mochiads.com/c/g/sokobones_v1/Sokobones-MochiAds_Secure.swf
 * if you used the sample tag.
 * Remove that line in the final version.
 */
 
?>

Remember to remove the sample game tag in the final version.

Thank you for reading the tutorial. I hope this helps you. Please let me know what you think about this and visit my arcade website. »

Flash games and religion

Emanuele Feronato — Fri, 23 Apr 2010 04:06:15 +0000

I am used to see Flash educational games, but I don’t remember any Flash game based on religion.

And I don’t mean something like “you are God and must obliterate a village”, but a game entirely based on the Bible.

Now Gabriel Walter talks about Verse Vessel

« The working demo of Verse Vessel is ready now!

The idea now is to promote it and I’m open to suggestions as its a “casual-to-hardcore-rpg-word-matching-bible-game”, which is not the easiest “category” in the world to get across!

The technology used is mainly flash (css for text) because of its range of output for Pc, Mac, portable, and (most) browsers. It’s also the simplest to set up and export (no sdks).

But why did I select the bible? Before I explain here’s how I came up with the concept.

I have made games in the past of varying themes. One game I did for Neutrogena was a “clear the pores” mini-game! Another game I made revolved around a construction sim with Rts elements.

I have created other games I’d like to post in the future that are educational (which is a popular theme). But right now I felt there is a major subject missing.

I’ve played all types of games ranging from sports to music based, but the one factor I’d like to see more of has to do with the bible. One day my father suggested why don’t I do one based on the bible, and I thought “yes, I’d like to have a game representing the bible in these modern times”.

And I don’t mean a five minute kids game, or a wink-wink humorous satire thereof! I’d like to see a fully featured, accurate representation of the bible that’s done right.

This is important to me and making a game you like is always fun (even if others don’t like it) but only for one person- the game creator! At least “officially”, hopefully others will like it too. But that’s not just the focus in the case of Verse Vessel.

Even though I have one religion and the person helping with duel player code has another (coming soon God willing), and the qa tester has another, it all comes down to the bible going BEYOND religion.

And even beyond that, it reaches everyone in one way or another.

In other words, everyone has an opinion either for or against the bible.

The game is not set up to “preach at you”. There’s no “moral meter” (although I personally think that could be exciting if done well). Playing from a “non religious” view can be enjoyed as much as someone with religious background because there is no “interpretations”of the bible, it’s straight bible text.

If you know what your particular religion teaches about a particular verse that’s all well and good but different religions teach different views.

Here, the verse can’t be adapted differently- its still the same verse! So its “system independent” (hey its better than saying “religious agnostic”) and can reach not only certain religions, but as mentioned, someone with no religion at all.

You don’t have to know certain doctrines that comes with religion to select the right choices. Some of it is just common sense. You could be playing this from a scholarly standpoint or out of curiosity and not have to be concerned with anything but enjoying the game.

The fun of being an independent game developer is no one is going to dictate that the game has to appeal to certain religious leaders or take out certain things because some non/religious people don’t want it there. There are no advertisers to worry about having to please or any other specific group for that matter!

Another reason I wanted to focus in on the bible and not religion is that anyone can own a bible and I’m sure there are some in your/your parents house.

But how often is someone going to actually read it is another thing altogether! I know we live in a digital age and picking up a huge book is not going be at the top of the attention-getting list when there’s so much media available.

If there was some way to be able to pick up the bible digitally and be able to read it from any point AND have some in game goals then I figured it would be fun AND informative.

So far some of the immediate goals are to collect experience points by getting the most correct answers as well as collect inventory. Soon there will be options to trade and compete against another person.

Another is having the animals get off of Noah’s ark first and there are some unusual animals in that particular version! This is only the beginning.

More chapters will come soon hopefully. Of course I’ll always be open to feedback from suggestions for things I may not have thought of.

So I’m glad I could share a bit about the purpose behind verse vessel. Check out the demo at www.versevessel.com if you are interested or email zartan917 [at] aol [dot] com for feedback. »