Category Archives: Citrus Engine

Playing with Cadet Editor 3D and AwayPhysics

The 3D part is a bit in stand-by this last weeks on the Citrus Engine, because I’m polishing the engine for the V3 which should be out this week!

I’ve never clearly introduced AwayPhysics in the Citrus Engine, so it’s the day! The idea is to have a similar pre-built platformer objects that we already have with Box2D and Nape but with AwayPhysics this time for 3D stuff! This work and Away3D support will evolve during the V3.

Now that 3D views and physics are supported, it’s time to give a look on which tool we can use as a 3D game Level Editor. At first, I thought to Prefab. This is the best tool to create a scene with Away3D, importing assets, add lights… But too complex for a simple level design, I mean : hey the Citrus Engine is not a concurrent to Unity3D (which I started to learn thanks to this awesome tutorial) 😀 Its 3D physics part is just here to create basic 3D game / puzzle. Also the level editor has to support object creation (physics object), this isn’t obvious with Prefab.
Then I gave a look to Cadet Editor, the 3D editor is very easy to handle. You can create quickly sphere, cube and plane objects, add lights… That’s the right tool to see what can be done!

Continue reading Playing with Cadet Editor 3D and AwayPhysics

Create combination of physics objects in Citrus Engine

Some days ago, I said that November will be an awesome month for the Citrus Engine. So what is coming?

We’re the 2nd, November is already here and something huge is already happened to the CE : a tutorial on gotoandlearn made by Lee Brimelow, an Adobe Game Developer Evangelist! Definitely, an excellent tutorial to get start with the Citrus Engine. There’ll be other tutorials later, a new website and the forum’ll move on Starling website. Most of the future game will use Starling so that’s a good move! We’re not forgetting the 3D part, don’t worry 😉

Everything should be ready for the next Adobe Game Jam in Chicago. So that’s the plan. Now let’s go for a small tutorial.

Continue reading Create combination of physics objects in Citrus Engine

Create a game like Tiny Wings

Tiny Wings is really a cute game and very fun to play thanks to physics content! It uses Box2D. If you’ve never played the game, give it a quick look :

Generate those type of hills with a physics engine is complicated for a novice. You’ll find cool tutorials on Emanuele Feronato’s website using Box2D and an other on Lorenzo Nuvoletta’s website using Nape.

Someone asks me if it was possible to create this type of game with the Citrus Engine, absolutely! So let’s go for a quick tutorial.

Continue reading Create a game like Tiny Wings

Moved from Box2D Alchemy to Box2D AS3


Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /homepages/8/d317303823/htdocs/blog/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

In the Citrus Engine, people knows that I’m very attached to the Box2D Alchemy version. Thanks to Alchemy we should have better performance than the pure AS3 version. Also this Alchemy version had some cool features mostly on the way you could manage collision : you don’t use a gobal contact listener like in any Box2D version, you use something very closer to AS3 event management. Example :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
override protected function createFixture():void
{
	super.createFixture();
 
	_fixture.m_reportBeginContact = true;
	_fixture.addEventListener(ContactEvent.BEGIN_CONTACT, handleBeginContact);
}
 
protected function handleBeginContact(e:ContactEvent):void
{
	_contact = e.other.GetBody().GetUserData() as Box2DPhysicsObject;
	if (!e.other.IsSensor())
		explode();
}

I love this way. Anyway, many users ask me to change it… let’s go!

Continue reading Moved from Box2D Alchemy to Box2D AS3

The Citrus Engine meets Away3D

Some days ago, I was thinking that my next post would be the annoucement of the Citrus Engine V3 stable release. Since Starling and Nape are well integrated in the engine and the API very stable, I didn’t see any new big features coming. Oh in fact, I imagined one : 3D support. This one was crazy, and now it is real! Welcome to the first 2D & 3D Flash game engine!

I’m not familiar with 3D. Last year I had a quick look with ThreeJS and then ported it in Away3D. That was my only experience with 3D until now, so don’t hesitate to correct me and to offer some suggestions. That’s lots of new stuff to learn, and that’s pretty exciting!
Also if you have links to free arts/assets Away3D friendly, share please 🙂

For the impatients, here is the demo! Note the Away3D support needs lots of work yet. Click on the red square to add boxes (I was a bit lazy to make a correct button). Use the mouse to move the camera, and right/left/down/space keys for the Hero.
I use Box2D for the physics (it could be Nape), to see the Box2D debug view press tab to open the console and write :

set box2D visible true

All the source code is available on GitHub (with samples) and on GoogleCode (engine code only). The Away3D part will evolve a lot in the next month, the 2D stuff is very stable to use!

Continue reading The Citrus Engine meets Away3D

Tiled Map Editor supported in the Citrus Engine


Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /homepages/8/d317303823/htdocs/blog/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /homepages/8/d317303823/htdocs/blog/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Some days ago, I received a mail from a guy working on a game with the Citrus Engine. It shows me the progress of his game… another blast!
Let me introduce CynicMusic’s game, one of the greatest platformer game I’ve ever seen made with Starling and the Citrus Engine! He hopes to finish it around Christmas, best wishes for Alex Smith. Play the game, graphics are pixel art, and the music is awesome! I really love the mood. I also want to highlight his work on the gameplay : water, reward box… managed by Box2D Alchemy. Take a look on the FPS, 60fps, yep guys I’m impressed!

I had some discussions with Alex about his workflow, he used the Tiled Map Editor to create his levels then export them as PNG files and finally import in Flash Pro. Using Starling, textures images aren’t bigger than 2048*2048. He has created several CitrusSprite with the different PNGs.

I knew the Tiled Map Editor before, but never gave it a serious look! Quickly it appears that it would be really nice to support it directly, but how can we handle the tmx format provided by the software for our map? I found an article on PixelPracht’s website, he wrote some useful classes to parse the map! He made a quick demo for Flixel game engine. It is also possible to create objects inside the software, great news!

So thanks to his work, all hail to him, I’ve been able to write a parser to handle the Tiled Map Editor’s map in the Citrus Engine! Click here to play the demo.
Graphics are free to use, they come from this website.

This is a screenshot of the level :
tiled map

Since the Citrus Engine is not based on grid for collisions detection, I’ve added platform objects. Mixing grid and physics is quick and really a good thing I think. It offers lots of flexibility : you may use both and keep grid interactivity.

Here is the demo code :
Main class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package tiledmap {
 
	import com.citrusengine.core.CitrusEngine;
 
	[SWF(frameRate="60")]
 
	/**
	* @author Aymeric
	*/
	public class Main extends CitrusEngine {
 
		[Embed(source="/../embed/tiledmap/map.tmx", mimeType="application/octet-stream")]
		private const _Map:Class;
 
		public function Main() {
 
            state = new TiledMapGameState(XML(new _Map()));
		}
	}
}

The TiledMapGameState 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
package tiledmap {
 
	import com.citrusengine.core.State;
	import com.citrusengine.math.MathVector;
	import com.citrusengine.objects.platformer.box2d.Hero;
	import com.citrusengine.objects.platformer.box2d.Platform;
	import com.citrusengine.physics.Box2D;
	import com.citrusengine.utils.ObjectMaker;
	import com.citrusengine.view.spriteview.SpriteArt;
 
	import flash.geom.Rectangle;
 
	/**
	 * @author Aymeric
	 */
	public class TiledMapGameState extends State {
 
		[Embed(source="/../embed/tiledmap/Genetica-tiles.png")]
		private const _ImgTiles:Class;
 
		private var _level:XML;
 
		public function TiledMapGameState(level:XML) {
			super();
 
			_level = level;
 
			var objects:Array = [Hero, Platform];
		}
 
		override public function initialize():void {
 
			super.initialize();
 
			var box2D:Box2D = new Box2D("box2D");
			//box2D.visible = true;
			add(box2D);
 
			ObjectMaker.FromTiledMap(_level, _ImgTiles);
 
			var hero:Hero = getObjectByName("hero") as Hero;
 
			view.setupCamera(hero, new MathVector(stage.stageWidth / 2, 240), new Rectangle(0, 0, 1280, 640), new MathVector(.25, .05));
 
			(view.getArt(getObjectByName("foreground")) as SpriteArt).alpha = 0.3;
		}
 
	}
}

Here it works on the classic flash display list. It works also on Starling if level dimensions are not above 2048*2048. I’m thinking to use the tile system made by Nick Pinkham (Citrus Engine contributor member) to handle bigger levels! It has been added to the CE, but it’s not 100% stable at the moment.

Again, all the Citrus Engine works & demo are available on its GitHub. Take a look on the map and the different files. Play with it. Don’t hesitate to test this parser and tell me if some important options are missing.

I’ve also gave a look to the Level Architect’s code (official CE’s level editor, created by Eric Smith), for the first time, and can assure that it needs to much work to keep it supported with the new CE version. I prefer to support format from serious tools (Flash Pro, Tiled Map Editor, Gleed) and continue to work hard on the Citrus Engine.

At the moment I’m working on something very huge for the Citrus Engine and I hope to be able to come back soon with very good news. Stay tuned!

Box2D Alchemy VS Nape, performance test on iPad3


Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /homepages/8/d317303823/htdocs/blog/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Edit: The Box2D AS3 pure version is quicker than Box2D Alchemy! Take a look there

Hey folks! Today I’m glad to share an important performance test for AIR mobile developers which want to use a physics engine in their games and applications.
The Box2D Alchemy version is used rather than the “simple” Box2D because it has better performance. Test on Allan Bishop’s blog.
I’ve already made a quick performance test comparing Box2D Alchemy & Nape concluding that with Nape you could create 60% more objects than Box2D and have the same FPS!

That was a simple test without different objects behaviors. So now it’s time to test in the small project game : Live4Sales, made with the Citrus Engine using Starling & AIR 3.4. In a previous post there were already project/code explanations and good practice with Box2D. I will not make code comparison with Nape since all the source are available on the CE’s GitHub.

To compile for one or the other engine just change one line in the Main :

// select Box2D Alchemy or Nape demo
state = new NapeLive4Sales();
//state = new Box2DLive4Sales();

And it will works! Most classes are common, just physics one changed. With the CE version on the repository, Nape use the same coordinates system than Box2D. It has never be so easy to switch! I’ve the same physics behaviors for Box2D & Nape in the game apart I didn’t success to cancel easily forces after collision with Nape.

The game videos :

The test is categoric, yep, Nape is blazing fast!! The Citrus Engine made a really good move adding Nape support!

In conlusion, if you want to target Web only? It doesn’t matter, both are very performant on a computer. Since the API are very differents select the one you prefer! You will find more code example with Box2D than Nape, however Nape is easier to handle. Also you have to know that Box2D Alchemy involves Adobe “Tax” if you use Starling too whereas Nape doesn’t (with the Nape’s debug view I’ve chosen). Don’t forget, if you want Adobe keeps its good work on Flash you’ve to support them!
Perhaps your game will be a mobile game? Go Nape, directly!
We are closed to the Citrus Engine V3 BETA3 which will be the last one!

Finally I’ve quickly added Nape to the CitruxEngine (Haxe NME port). It was so easy to add it from the AS3 version. This port is in stand-by at the moment : I still haven’t found an easy way to display a SpriteSheet with NME – HTML5. I’m upset!

Live4Sales, a Plant vs Zombies clone

Edit : Nape version

One week after the Osmos demo, I offer a new game made with the Citrus Engine based on an other popular game : Plant vs. Zombies!

If you have never played this game, try it now!

This is my clone made with the CE working as a browser game, air application, and on mobile devices :
The web demo. I didn’t make a preloader, to have the same source code between each version.
There is no end in the game to be used as a stress test!
Sources are available on the CE’s GitHub.


Continue reading Live4Sales, a Plant vs Zombies clone

Create a game like Osmos

2 days ago, I’ve offered a new beta for the Citrus Engine. I had really good feedbacks, thanks guys for having regard on the engine!
This new beta also introduced a new demo which was again a platfomer game. It’s time to show, thanks to a quick case study, that the Citrus Engine is not only made for platformer games! For this first example, we will create a game like Osmos. I really love this game, it’s zen, gameplay mechanics are easy and powerful, definitely a good indie game.

In 4 hours of work, this is what I made. You can drag & drop atoms.
Source are available on the CE’s GitHub, in the src/games package.

Continue reading Create a game like Osmos