Category Archives: Citrus Engine

Citrus Engine V3 Beta2

Hey there! On this hot summer day, I’m happy to share a new major beta for the Citrus Engine! There are lots of new features, improvements, bug fixes and a new demo for mobile devices. It is also updated on the last version of each library.

Download it on Google Code or GitHub.

Continue reading Citrus Engine V3 Beta2

An entity/component system’s attempt using Box2D

One year ago, I heard about the Entity/Component Model for the first time. It seemed to be awesome for game design / development. This is 3 links/resources for a good introduction : Gamasutra the Entity Component Model, Entity Systems are the future of MMOG development, Entity Systems. Then Richard Lord has made a very good blog post with code example using his own framework : Ash. And finally, Shaun Smith’s experience using Ash.

All the code example is available on the new Citrus Engine’s GitHub repository. Compile the src/entity/Main.as

During this year, entity/component system has always been something I wanted to try… but that was scary : this is not OOP, that’s a new way of programming. I wanted to add this system to the Citrus Engine as an option to handle complex object. For basic object OOP is great and easy to set up, but for complex game object which may have new abilities on the fly, you’ve quickly a Class with 700 lines of code and conditions. Not easy to maintain some weeks later. The Citrus Engine handles physics engine (Box2D & Nape) & a simple math-based collision-detection system. However it comes built-in with a “platformer” starter-kit based on Box2D, so I made my entity/component system’s experiments using Box2D. And that was not simple.

Continue reading An entity/component system’s attempt using Box2D

Citrus Engine on Nape and physics performance improvement

Hi folks! Since my studies are over and my new portfolio online, I have time to focus on personal projects. Yep, it was time to contribute again to the Citrus Engine. I’ve worked 3 days at full time focusing on its big issue : mobile performances. I’m glad to say that now they are just an old memories!

6 months ago, I’ve made the CE compatible with Stage3D thanks to Starling and added some cool stuff. CitrusEngineV3 BETA 1 has been downloaded 3047 in 6 months, that’s not bad! However it didn’t see lots of Stage3D game, because it was missing the point : people wants to make mobile games.

You will find all the sources at the end.

Continue reading Citrus Engine on Nape and physics performance improvement

The Citrus Engine goes on Haxe NME, welcome to the CitruxEngine

One month ago I started to work on the CitruxEngine. I was very confident with Haxe performance on mobile and NME cross platform opportunities. And now, I can say those are awesome!

In April 14-15th, I was in Paris to assist to the Haxe conf 2012. It was really cool, Silex Labs has made a good job! Conferences were very interested and the community greatly friendly. And I had the opportunity to make a lightning talk concerning my contribution to the Citrus Engine 2D game framework and its port on Haxe NME. The presentation was a bit from scratch, but that was a good experience! I’m very happy to be the first to start the lightning talk, since there were very serious projects ๐Ÿ˜€

CitruxEngine Github.
CitruxEngine Demo. Simple demo which have been tested on Flash & CPP (using left/right key and spacebar) and iOS (touch & accelerometer). There are sound, animations (idle, walk and jump) and physics.
The port is currently not finished!

I will not present some code here. If you are already familiar with the Citrus Engine, there will be no problem. Take a look on the example on Github.

HTML5
When I started the port, I would the CitruxEngine be as cross platform as possible. HTML5 is promising, and Niel Drummond the man behind Jeash has made an incredible job! However I found that the Haxe NME Box2D port has not very good performance with HTML5. So I’ve dropped the HTML5 target at the moment, but I keep an eye on Jeash!

Box2D
Thanks to Haxe NME, Box2D runs very well on mobile! This is mostly the reason why I’ve started the CitruxEngine. The Citrus Engine uses the AS3 Alchemy version of Box2D which has some differences with the original. It seems there is a bug with the Haxe NME Box2D port : the beginContact & endContact listeners are fired all the time if a dynamic body is on a static body (like a hero on a platform), whereas it fires only once if there are 2 dynamics bodies. This behavior is blocking me.

SpriteSheets
I made my test with the spritesheet haxelib which uses SpriteLoq. At the moment it works well. I’ve not made serious test with animations.

Level Editor
I love how the Citrus Engine handles Flash Pro as a Level Editor. I would like the Haxe NME version handles it as well. But at the moment we can’t read AS3 code in a SWF file (it is the way that class and properties are defined), so I need to think to an external way. Maybe it’s time to reconsider the Level Architect!

Console
The console is really a cool feature of the Citrus Engine, it will be available in the CitruxEngine too. I’ve started to implement it, but it’s not ready yet.

I will continue to work on the CitruxEngine, but now I’ve to focus on my school project using Objective-C, it’s really hard to get back when you have tested Haxe power ! In less than two months I will be graduate and looking for a job, future is exciting.

Thanks to postite & elsassph for their help!

CitrusEngine goes Stage3D with Starling

Hey folks, happy new year! My previous post go back from 1st december, I’ve been really busy : adding Starling in the CitrusEngine, learning iOS and working on my 2nd year school project. And obviously some great holidays between christmas & the new year.

Today I’m very pleased to share with you the Citrus Engine working on Starling! For those who don’t know it, it’s a platformer game engine using Box2D Alchemy and Signal libraries. However, it’s not only made for platformer games, you can use it for every 2D contents even if it isn’t a game thanks to its great Box2D management. So before this update, it has supported : Box2D physics, Signals event, a Sound Manager, a Console for quick debugging & tools, Input management, lots of defined objects like Hero, Baddy, Platform, Coin, Sensor, Moving Platform…, parallax, a Loader manager, level editors thanks to its own (the Level Architect made with Air), or using Flash Pro, or Gleed2D. 2 views : the flash display list and blitting, and a layer management!

Thanks to this update, the CitrusEngine now support the great stage3d framework Starling and I’ve also added 3 new objects Cannon, Teleporter & Treadmill, a Level Manager and an abstract class to store the game’s data. This two last things are optional you may use it or not. In this blog post I will explain how I’ve adapted the CE for Starling, and my updates with some examples. For a quick getting start with the engine please refer on its website or to the tutorials on this blog.

But let’s stop chatting, it’s time to test the demo :
Click here for the demo.

Continue reading CitrusEngine goes Stage3D with Starling

Box2D Sound Spectrum

This week is really challenging : my second year school project has started this week. It’s a team project with a graphic designer, a designer, a project manager and me as a developer. Our concept sounds very promising!

No matter, this short introduction explained that I’m really busy, so this experimentation is not perfect due to a lack of time…
Anyway, click here to see a sound spectrum made with Box2D and the Citrus Engine using BitmapData.

Continue reading Box2D Sound Spectrum

PhysicsEditor template for the Citrus Engine

Some months ago, I bought two softwares from code ‘n’ web : TexturePacker to create SpriteSheet and PhysicsEditor to create easily box2d object from png file.

Today, I’m happy to share my first extension / template for PhysicsEditor’s software : I’ve created a template to export physics object for the Citrus Engine.

This is a quick usage example
.
Click on the physical object and press tab. The console is now open. Then write : set Box2D visible false and you will see its picture. It matches really well to the physical object!

Continue reading PhysicsEditor template for the Citrus Engine

Finally using SWC for art in the Citrus Engine

Two days ago, I introduced a way to target iOS with the Citrus Engine using the metadata tag Embed. Forget that way, it is really painful.

Instead of using Embed everywhere and probably rewrite method for the CE’s ObjectMaker, we will use a SWC file. Refering to Wikipedia, an Adobe SWC file is a package of precompiled Flash symbols and ActionScript code that allows a Flash or Flex developer to distribute classes and assets, or to avoid recompiling symbols and code that will not change. SWC files can be generated by the Flash authoring tool, and by Flex. They are sometimes referred to as class libraries and cannot be directly executed by the Flash Player.

So in this file, there will be our level with all its graphics, animations, sounds… We will not have anymore external datas. Moreover our level in the flash IDE will not contain only rectangle shape like previously, but our graphics and animations :
Screenshot of the level
It’s more user friendly isn’t it ? My hero is always a rectangle shape because I’ve not the orignal fla right now.

So to do that just import your graphics and animations into your fla’s library. I recommend to create a movie clip named Level and put it on the stage, name it and add a simple trace code into it to inform what is your current level. We will add all our layers and objects in!
Then put the graphics inside your original Background movie clip for example. Next, inside the movie clip’s properties check export for ActionScript3 and set as class Background. Finally add this code into the movie clip :

var className = "com.citrusengine.objects.CitrusSprite";
var params = {
	view: Background
}

Before, we had a background.jpg now we have a class!

For animation it’s the same, but be careful : if you use it in code after it may have a problem of duplicate name, so in my case with the “Roseau” animation, my view is set up as RoseauAnimation. My library :
library screenshot

Now that your level is set up export it as SWC, then import it in your project. And finally to create your level in the Citrus Engine :

package {
 
	import com.citrusengine.core.CitrusEngine;
 
	import LevelA1_fla.Level_1;
 
	public class Main extends CitrusEngine {
 
		public function Main() {
 
			super();
 
			state = new GameState(new Level_1());
		}
	}
}

Et voilร ! You can download my zip. There is still the problem with hero deplacement coming from the new version, anyway if you start a new project from scratch with this one, all will work fine!

Now you just have to import sounds/videos in your SWC too…
Be careful if you use a SWC and target the Web, because the swf becomes heavy and if there isn’t an external preloader, people may leave before played your game!

Finally if you want to have great performance on your mobile game, you should take a look on CE blitting method. And you may use Embed metadata tags to add your assets to your game state. I recommend to add them directly in your class, don’t use the level editor. Programming is not always easy ๐Ÿ˜‰

Rugby game, AS3 – CE – haXe versions

Two weeks ago at school we made a simple rugby game with graphics provided.
I take this opportunity to compare how I develop the game if I use different framewok :

– in AS3 with linked list and object pooling (refers to this previous tutorial). Obviously it is a little game, and we don’t need complex optimization, but that was a good implementation exercice. Moreover I’ve updated my class ๐Ÿ˜‰

– with the Citrus Engine, managing Box2D. It was not easy to handle physics to have the same result that the basic AS3 version, and actually it is not the same (there is some inertia), but I really like how Box2d handle collision. We can manage before collision, the beginning and the ending. It is really more precise than a hitTestObject. Moreover we can separate art from physic body, and so change easily the “collision box”.

– last night, with lbineau we made a programming evening around haXe (and some beers ๐Ÿ™‚ ). The idea was really simple : make the same game, using existing AS3 classes with haXe. I have already given a chance to haXe previously and saw how powerful it is. This time, I see how easy it is to use previous AS3 code. I didn’t rewrite my Opponent and Player class! And I used the fla to link graphics without any trouble! However I’m a bit disappointed : I used most of the time original AS3 objects instead of haXe primary objects. What I need right now is FDT5 with its full haXe support! Can’t wait for it… Oh! If you’re interesting by haXe, you should take a look on NME, it seems to be amazing.

The zip with the three versions.

Introduction to Embed art in the Citrus Engine

Update : using metadata tag Embed is not the easiest path if you want to target iOS, take a look on this post using SWC.

Today this is a quick post based on an older one : Create objects and art in the citrus engine.

If you want to target iOS platform for your game, you must know that you can’t load swf at runtime. Indeed all your data must be “packaging” in one file an .ipa. So you are not able to load external data. To pass over that restriction, you need to use the metadata tag Embed properties. This is a blog post for Embedding Ressources with AS3.

So, what we will do today is to adapt the previous post to be able to target iOS. I don’t have enough time to do it entirely, so this will only be an introduction, sorry.

Let’s start now : on your level.fla add AS code to embed some assets :

[Embed(source="../../assets/grass.png")]
var GrassPic:Class;
Grass.picture = GrassPic;
 
[Embed(source="../../assets/elements.png")]
var BackgroundElementPic:Class;
BackgroundElement.picture = BackgroundElementPic;
 
[Embed(source="../../assets/background.png")]
var BackgroundPic:Class;
Background.picture = BackgroundPic;
 
[Embed(source="../../assets/objects/Roseau.swf")]
var RoseauAnim:Class;
Roseau.animation = RoseauAnim;

Here we are using the dynamic property of MovieClip, more information about it : Adobe doc. Don’t forget to name your stage MovieClip!
Then into your background MovieClip add this code :

var className = "com.citrusengine.objects.CitrusSprite";
var params = {
	view: this.picture
}

Don’t forget the this or it will not work! Now, your asset is embed ๐Ÿ˜‰
It is really easy to embed graphics, but what about SWF ? How can we handle animation on this ?

Go back into our two older methods : roseauTouche & roseauFin. And change the code for :

private function _roseauTouche(cEvt:ContactEvent):void {
 
	if (cEvt.other.GetBody().GetUserData() is Hero) {
 
		 ((MovieClip(SpriteArt(view.getArt(cEvt.fixture.GetBody().GetUserData())).content).getChildAt(0) as DisplayObjectContainer).getChildAt(0) as MovieClip).gotoAndPlay("white");
	}
}
 
private function _roseauFin(cEvt:ContactEvent):void {
 
	if (cEvt.other.GetBody().GetUserData() is Hero) {
 
		var roseauMC:MovieClip = MovieClip(SpriteArt(view.getArt(cEvt.fixture.GetBody().GetUserData())).content);
		var loader:Loader = roseauMC.getChildAt(0) as Loader;
		var mc:MovieClip = (loader as DisplayObjectContainer).getChildAt(0) as MovieClip;
		mc.gotoAndPlay("black");
	}
}

Dammit!! It is the same code for this two functions, the first is just more condensed. I will not explain more, because I’m always surprised of those lines… ๐Ÿ˜€ However you can find informations here and there.

My zip. There is some problem with hero movement (jump and move to travel) due to the update on the last CE’s version. I don’t know where it comes from, but you can use it without problem. I made some test from scratch and it works ๐Ÿ˜‰

I know that there is lot of works to do from there, but that’s a good start. You need to put your level into an asset in your state finally, and see what happen. You would write a new function to ObjectMaker to enable that, probably.

I wouldn’t dig into it more, because I’m not sure it is the best way… It is a bit complex if you want to manage animation. The updateAnimation method of PhysicsObject class doesn’t work this way. And moreover there is an other method to embed data :
“Remember you can specify a MovieClip linkage ID as your view property rather than a path to a SWF/PNG. If you’re using Flash Develop, FDT or Flash Builder, you can embed your MovieClip graphics that you made in the Flash IDE using SWCs”.

Anyway that was a cool introduction to embed assets, isn’t it ?