How to create a Flash platformer using Citrus Engine

Read all posts about "" game

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers