Tag Archives: graphics

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 ?