Emanuele Feronato

italian geek and PROgrammer

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

More than a year ago I shows you how to create a little game prototype using Citrus Engine.

A year has passed, and now Citrus Engine is back with version 2.0 which promises to let us create complex games in a quick.

For all you specs maniacs, here it is a brief list of features:

* Blazing 50 FPS in the browser on current machines, and 250+ FPS on the desktop (or Adobe AIR).
* Integrated with Box2D physics, which allows for tumbling crates, pulleys, vehicles, and just about anything else you can imagine, without the limitations of a grid.
* Supports multiple rendering methods with very little code. Like blitting and sprite sheets? Citrus Engine’s got it. Prefer animating using the timeline? No problem.
* Hijack the Flash IDE and use it as a level editor, for easily laying out and iterating on level designs.
* Robust documentation includes and ASDoc API, tutorial videos, and a forum.
* Standards-based code API means developers and designers spend more time tweaking the fun stuff, and less time debugging.
* Level-based progressive downloading allows gamers to start playing the game quicker by only downloading what the next level needs.
* Pre-made commonly used objects, like a hero, coins, enemy, platforms, clouds, and more!
* Easily use embedded or dynamic graphics.
* Decoupled architecture allows for custom rendering methods, like blitting or 3D.
* Sound management
* Keyboard and input management
* Built-in particle system
* Intuitive Signals event framework

Ok, the boring part is over. Now take this little prototype I made in 20 minutes (yes, 20 minutes):

Look at what we have:

* The hero (on the bottom right)
* A pushable crate (on the bottom left)
* Some platforms around the stage
* A moving platform
* An enemy (on the upper right corner)
* A coin (on the upper right corner)

Move the hero with LEFT and RIGHT and jump with SPACE. Try to grab the coin. See what happens if you touch the enemy. The game mechanics are complex enough to represent a level of a good platformer. But it took me only a few lines to do it.

This is the main class:

package {
	import com.citrusengine.core.CitrusEngine;
	[SWF(width="640",height="480",frameRate="30",backgroundColor="#000000")]
	public class helloCitrus extends CitrusEngine {
		public function helloCitrus() {
			super();
			state=new GameState;
		}
	}
}

Here I am just creating a state instance bound to GameState class which handles the game itself:

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});
			add(hero);

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

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

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

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

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

That is. The entire game is here. Let’s examine the most interesting lines:

Lines 17-18: create a Box2D environment which will be used to handle physics

Line 19: draws something similar to Box2D debug draw

Lines 21-22: add the hero. Look how parameters are passed as an Object. In this case, x and y represent the position in pixels, while jumpHeight handles the jump. Yes, creating a jumping hero is that quick.

Lines 24-35: with the same concept, we are adding platforms and walls. width and height represent the width and height of the platform, in pixels. Think about the platform as a static Box2D object.

Lines 37-38: the crate is a Box2D dynamic object

Lines 40-41: this is the bad guy. The bad guy will start moving and patrolling the area, but it does not know when it’s about to fall down (not with these few lines at least), so leftBound puts an invisible bound marking a left limit to bad guy movement. This somehow scripted way of moving the bad guy gives the player the feeling the bad guy is patrolling the upper platform.

Lines 43-44: the coin is just an object the hero can collect

Lines 46-47: the moving platform will move from startX,startY to endX,endY and then back to startX,startY and so on.

That’s all, Citrus Engine takes care of the rest and you can have a prototype done in a few minutes.

The engine comes with a free version for learning purpose, then the commercial license starts from $249.

If you want to start playing with it, I suggest you to watch the first 10 minutes of this video to see which libraries you need to include in your Flash Builder project.

Next time, we will be adding graphics to the game.