How to create a Flash platformer using Citrus Engine – Adding graphics

Last week I showed you how to create a Flash platformer using Citrus Engine.

Before we continue, I would like you to remember there’s a 10% OFF for the readers of this blog.

Now, let’s add custom graphics as promised. To “skin” the game, I just added a series of images in the same folder where the final swf is built.

So, my output folder now looks like this:

Obviously every image has the same size of the element is going to represent. The crate is a 30×30 square, the left ramp is a 120×20 rectangle, and so on.

At this time adding the graphics is really easy as you just have to define which image you will use once you create the element.

Look at the code:

First, line 19 is commented to disable the debug draw, then at every element creation (baddy, coin, platform and so on) I declare the view property with the graphic filename.

And that’s it:

Now the platformer has custom graphics. Also notice how hero and enemy automatically flip their image when they are moving left or right.

Everything is made by Citrus at runtime, so you don’t have to worry about anything.

Next time, I’ll show you how to add animations and embed assets in the final swf.

Again remember there’s a 10% OFF for the readers of this blog

  • Moe

    Awesome stuff Emanuele! I have purchased your e-book yesterday & looking forward for the next tut! :-)

  • great lesson! Just them the lessons that can be read and immediately understand and use this knowledge and not ponder for a few hours.

  • patrik

    which engine do you prefer, Citrus or FlashPunk?

  • Emanuele Feronato

    They can’t be compared in my opinion because they are based upon different philosophies.

    FP should be compared with Flixel, while CE with PushButton engine.

    Anyway Citrus seems to be more powerful, but FP has a larger community of developers using it.

  • patrik

    Ok. Thanks.
    Then I have to start read about the differences :)


    better yet to program your own physics engine. I grew up learning flash by Emanuele’s tutorials. It would be cool if we can meet one day :)

  • Orlando

    Hi Emanuele, do you think it is possible you can teach us how to modify the classes included in CE, for instance to make the Player or Enemy fires. This is one of the doubts I have, how complicated it is to modify CE functionalities.
    Thanks in advance

  • fokion

    Great tutorial Emanuele !!! Can you show us how to create 2 levels and connect them with citrus engine?

  • Paul

    I was hopping to make a game utilizing both this tutorial and your box2d shape splitting engine to make a platformer that involves lots of physics and some splitting to complete each level

  • I used Citrus for a project, and I have to say I was disapointed.

    Graphic handling is messy…

    If you change view and animation property on the same tick (in my case, I changed the view for the “bonus-hero” movieClip, wich include all the animations with a different skin), Citrus will fail.

    And you can’t even use directly Class names as view, Citrus doesn’t cast the instance as a display object and will throw an exception. A simple line fixed it.

    I won’t talk about the “group” attribute… I coded a display stack way better on my second flash project, you can’t honestly sell a framework who don’t compute the stack anytime you add an item !

    But, once you understand the [messy] display system and fix it, the physic environment and the garbage collection are really nice…

  • Plakat

    Long time reader, first time commenter here.
    I’ve been looking and looking, but it doesn’t look like the subsequent tutorial to this one exists.

    I’m fervently trying to add .swf files (animations) to my Hero character.
    How do I do this?

  • Dimaz Arno

    Thanks emanuele.

    @plakat : you can use params view in hero object.

  • good tutorials