Create awesome Flash games in no time with StencylWorks – Selecting levels

Before we start, let me say one thing: I love StencylWorks. It’s an incredible tool which will allow you to save a lot of time, and you should definitively try it.

Now, let’s see how to make a level selection screen like the one I am making for my StencylWorks game called Kira the Witch. You will be able to create stuff like this:

And obviously clicking on the first cave will make you play level 1, clicking on the second cave you’ll be playing level 2, and so on.

First, you need to create a new actor which we’ll call “Level Icon”

Then, create a new scene called “Level select”…

… and fill it with as much “Level Icon” actors as you want

At this time, create a new behavior for the actor which will be bound to the “Level Icon” actor, and call it “Click to play level”

Create two attributes for this behavior called “scene to play” (type:Scene) and “level label” (type:Text), and don’t make them hidden.

Let’s place some “code” in the behavior:

The “when drawing” part just places the content of “level label” attribute horizontally centered as seen in this post, while the “always” part checks for the mouse, then switches with a transition to the content of “scene to play” attribute.

Now, where to define such attributes? Go back to Level Select scene, right click on a door actor and select “Customize Behavior”

Here you will be able to add the “Click to play level” behavior and edit the attributes you defined before. Place the right level label and the scene you want to play, and the game is done, you have your select level screen in less than five minutes.

Unfortunately I can’t show you the working example because it contains some behaviors related to the game I am making, but feel free to post questions if you don’t find it clear.

  • SM

    I prefer construct.

    You can make your own plugins, which I have!

    And its kinda similar to AS3. — I know that probably sounds odd. But the way you assign events…

  • BNG

    Amazing job as always. I was working on a level selector screen too, but your solution is much more easier and better.
    By the way, is there an easy method to lock levels on the level selector until the actor finish the previous stages?
    Thx for the tutorial and Stencyl.

  • Faris

    Iam not saying stencyl isnt great… but the program run slowly … plus I can make a select level screen in flash in 5 minutes … again Iam not saying stencyl dont save U alot of time ^^

  • Bitstream

    @BNG: Create a global variable (called “Game Attributes” in Stencyl) and on finishing a level set the variable to the level number if its not already greater.

    On the level selection screen in the “always” block check for game level <= global variable before the fade out block.

    You could also make an addidtional animation for the "Level Icon" with a closed door or chains as a visual indicator and set the corresponding animation in the "when created" block checking the global variable.

  • Itoshigo

    Wow! How topical, I was just constructing a level editor in Stencyl this morning. I’ve built mine in much the same way. Enjoying Stencyl so far. Thanks for sharing.

  • I have always read this blog for the Actionscript 3 code tutorials but if it has to be anything else then Stencyl would probably the next best thing.

    In my opinion Stencyl is much better than the other game maker programs, you can also easily re-use your own custom AS3 code so it’s probably the next best thing to using Flixel with Flash Develop.

  • BNG

    @Bitstream: Your solution worked perfectly, thanks a lot. You made my day!

  • Pingback: Cool Stuff with the Flash Platform – 12/16/2011 | Android Developers()

  • Thank you for this post I will try Stancyl at first for my new Flash MiniGame.

  • vice

    I’m new to Stencyl… i made your tutorial on Catapult Kit example… but it keeps playing level 1 and 2. How i make the level selection screen show first? Thanks!

  • Bernard

    This method does not work. I have posted a Question on the Stencyl forum,11335.msg68135.html#msg68135

    pointing to this tutorial. There is no Customize Behavior… menu option and the screen I posted in the link above, following this code shows how it looks. Have you left out some important parts?

    Your “When Drawing” code will produce the same number in all the boxes since there is no code used to change it.

  • Azeem Shabaz

    Hey, i could not fing behaviors to write the code??, Please help me !!