Emanuele Feronato

italian geek and PROgrammer

Talking about Platform game game, Actionscript 3, Flash and Game development.

Last week I showed you how to create a Flash platformer using Citrus Engine.

Before we continue, I would like you to remember there’s a 10% OFF for the readers of this blog.

Now, let’s add custom graphics as promised. To “skin” the game, I just added a series of images in the same folder where the final swf is built.

So, my output folder now looks like this:

Obviously every image has the same size of the element is going to represent. The crate is a 30×30 square, the left ramp is a 120×20 rectangle, and so on.

At this time adding the graphics is really easy as you just have to define which image you will use once you create the element.

Look at the code:

package {
	import com.citrusengine.core.State;
	import com.citrusengine.objects.platformer.Baddy;
	import com.citrusengine.objects.platformer.Coin;
	import com.citrusengine.objects.platformer.Crate;
	import com.citrusengine.objects.platformer.Hero;
	import com.citrusengine.objects.platformer.MovingPlatform;
	import com.citrusengine.objects.platformer.Platform;
	import com.citrusengine.physics.Box2D;
	public class GameState extends State {
		public function GameState() {
			super();
		}
		override public function initialize():void {
			super.initialize();
			
			var box2D:Box2D=new Box2D("Box2d");
			add(box2D);
			//box2D.visible=true;

			var hero:Hero=new Hero("Hero",{x:520,y:440,jumpHeight:10,view:"player.png"});
			add(hero);

			var platform:Platform=new Platform("floor",{width:640,height:20,x:320,y:470,view:"floorceil.png"});
			add(platform);
			platform=new Platform("ceil",{width:640,height:20,x:320,y:10,view:"floorceil.png"});
			add(platform);
			platform=new Platform("leftWall",{width:20,height:480,x:10,y:240,view:"walls.png"});
			add(platform);
			platform=new Platform("rightWall",{width:20,height:480,x:630,y:240,view:"walls.png"});
			add(platform);
			platform=new Platform("leftRamp",{width:120,height:20,x:60,y:350,view:"plat01.png"});
			add(platform);
			platform=new Platform("rightRamp",{width:280,height:20,x:540,y:120,view:"plat02.png"});
			add(platform);

			var crate:Crate=new Crate("crate",{x:320,y:440,width:30,height:30,view:"crate.png"});
			add(crate);

			var baddy:Baddy=new Baddy("baddy",{x:600,y:100,leftBound:400,view:"enemy.png"});
			add(baddy);

			var coin:Coin=new Coin("coin",{x:600,y:50,width:20,height:20,view:"coin.png"});
			add(coin);

			var movingPlatform:MovingPlatform=new MovingPlatform("moving",{x:220,y:350,width:100,height:20,startX:220,startY:350,endX:300,endY:120,view:"moving.png"});
			add(movingPlatform);
		}
	}
}

First, line 19 is commented to disable the debug draw, then at every element creation (baddy, coin, platform and so on) I declare the view property with the graphic filename.

And that’s it:

Now the platformer has custom graphics. Also notice how hero and enemy automatically flip their image when they are moving left or right.

Everything is made by Citrus at runtime, so you don’t have to worry about anything.

Next time, I’ll show you how to add animations and embed assets in the final swf.

Again remember there’s a 10% OFF for the readers of this blog