Create UI, menu and meet the LevelManager

In this tutorial we’ll create a basic User Interface for a game using several methods (flash pro, Starling, Feathers) and learn how to use the LevelManager class.

Theory
We’re creating a game using Starling framework. It means that it runs on Stage3D technology. So the first thing you have to take care of is : don’t mix flash display list elements with Stage3D content, or there will be bad performances. The game HUD must use Starling elements or Feathers.
For the menu, there is an other deal : you may create it inside Flash Pro and use it quickly. If there isn’t any fancy effect, performances will be fine.

StarlingState class extends starling Sprite class, so it means you can easily addChild HUD elements which will be on top of your game. Don’t use StarlingState class as a menu or anything which is not the game.

By default, the game state will be displayed at index 0. It can be easily changed thanks to the _stateDisplayIndex protected property from CitrusEngine class. Don’t forget that the state is added once a new one is created.

Finally, if you use Starling for your menu, be sure that the Context3D has been created before adding any object to Starling. You just need to override the protected _context3DCreated method from StarlingCitrusEngine.

Level Manager
In many games, you can choose a level. Most of the code can be similar between each level : the way they are created, camera target, the logic itself… The Citrus Engine, thanks to the LevelManager class, helps you to create quickly new levels. The LevelManager is based on an abstract class : in this class you will create everything which is common to each level. Keep in mind that everything should be overridable. Then you create one class by level which extends your abstract class and you’ll be able to redefine what you need and add new stuff.
There is a snippet which explains how to set up the LevelManager. It is a bit complex to handle at first since there are many things to set up, but very powerful later. Use it, or create your own.

38 thoughts on “Create UI, menu and meet the LevelManager

  1. Can you really use normal States in a StarlingCitrusEngine. I can’t get it to work because StarlingCitrusEngine is trying to cast the State to StarlingState:
    _starling.stage.addChildAt(_state as StarlingState, _stateDisplayIndex);

  2. Just wanna ask more about the levelmanager snippet. Do i have to create a LevelManager class?? what will it contain?? is it different from the ALevel?

    • Hi, no you don’t need to create your own LevelManager class. Using the class provided by the engine should work perfectly. The ALevel class in my example is an abstract game state, Level1 and Level2 extends. In most of the game between different levels you have some similarities, the ALevel class helps to define them once.

  3. Aymeric there’s an error :
    “You just need to override the protected _context3DCreated method from StarlingState.”

    it’s a StarlingCitrusEngine method, not a StarlingState one :)
    (makes sense since you explicitly tell us not to use StarlingState to do the title / credits screens etc)

    BTW congrats on CitrusEngine : started using it at the game jam in Lyon a few weeks ago and I’m really impressed with it !

    • It is explained in the first part. There isn’t any problems using Feathers since the StarlingStatte class extends Sprite, you can add there whatever you want.

  4. Hello,

    I’m trying to figure out what you mean, but i think i don’t really get it. So i want to use an preloader. But does the main class needs to extend from the StarlingCitrusEngine class? Then i want a menu. So if i’m reading right, i need to extend from the starling.Sprite. Wich i can’t addChild.

    • Hi, yes in most cases your main class should extends StarlingCitrusEngine. Then it depends if you want to use Starling for your menu or not. If you don’t use Starling, it’s very easy to addChild Sprite because the Main class extends MovieClip. If you want to use Starling or Feathers stuff, it isn’t a problem since you have an access to starling.

      StarlingState class extends Starling Sprite so you won’t have problem to add UI using Starling or Feathers. Is it more clear?

  5. No, you can use a Sprite. State is mostly used for game state. Just code your menu as you wish and add it to Starling. You may use stateDisplayIndex for z-sorting.

    • Yes, now i tried, my main class is an movieclip. When the preload is over it goes to the application class where i want to do the setup of starling. But it won’t work.

  6. Hi!

    I got a beautiful : ArgumentError: Error #1063: Argument count mismatch, with the LevelManager.
    I got a LevelOne class wich extends ALevel class :

    public class LevelOne extends ALevel
    {
    override public function initialize():void
    {
    super.initialize();
    }
    }

    but the constructor of ALevel is :
    public function ALevel(level:MovieClip = null)

    so ? I don’t get it…

      • OW, what a fool…

        I copy/paste the definition of LevelOne’s constructor from his parent :
        ALevel(level:MovieClip = null)
        so I guess it was like LevelOne had no constructor at all…

        Fixed !

        Thanks for your answer and for your awesome work with Citrus !

  7. Hi again !

    This time I got a : TypeError: Error #1009: Cannot access a property or method of a null object reference
    from this function : ObjectMaker2D.FromMovieClip(_level);

    I passed the MoveClip as a parameter in the constructor of the class like your exemple :
    public function ALevel(level:MovieClip = null)
    and I placed a good ol’ MovieClip named Platform on LevelOne (wich extends ALevel) stage with flash pro…

    Is there something wrong with this ?

    • Ah!
      LevelOne cannot compile well, this must be the problem :
      Error #5000: The class must subclass since it is linked to a library symbol of that type.

      LevelOne is just a .fla linked to LevelOne class. Maybe that’s not the good way to do that…

    • No problem with a class that directly extends StarlingState. The problem is with my class LevelOne wich extends ALevel.

      No prob with ALevel. For exemple if I do that :
      _levels = [[ALevel, "levels/LevelOne.swf"]], it works.
      But : _levels = [[LevelOne, "levels/LevelOne.swf"]], it does not.

      So it’s a pure OOP problem.

      Here’s my LevelOne class :

      public class LevelOne extends ALevel
      {
      public function LevelOne(level:MovieClip = null)
      {
      super();
      }

      override public function initialize():void
      {
      super.initialize();
      }
      }

      so just a clone of ALevel…

    • shhhhhhhffffffuuuuuu…….( the wind in my brain…)

      I forgot to put level as a parameter…

      Ok so now that works perfectly. Thanks Aymeric!

  8. Hi,

    Is there a way to pass a variable from the Main class (StarlingCitrusEngine) to the GameState, when using the LevelManager to instanciate it ?

  9. Hey, quick question here.. How do we swap from screen to screen.

    _ce.state = welcomeScreen;

    onScreenChange(event:Event):void
    {
    _ce.state = gameScreen;
    }

    Is this a good way?

  10. Hi, tnx for CitrusEngine!!!

    But I have not found an example, how i can use embed swc level in LevelManager.
    Swc file i added in FlashBuilder path.
    Please help :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>