Create awesome Flash games in no time with StencylWorks – adding intro, jumping and more

Emanuele Feronato Actionscript 3, Flash, Game design, Stencyl

After a couple of days messing around with StencylWorks, I came out with an interesting (I hope) game design concept I am developing in these hours.

Meanwhile, I am adding some features to the demo I showed you last week.

We are going to add:

* Intro scene
* Centered text with custom fonts
* Improved character walking
* Character jumping

Let’s show all new features:

INTRO SCENE

You’ll love StencylWorks, as you will be able to create your intro scene in three easy steps:

First, create a new blank scene and make it as starting scene (look at the star in the upper left corner)

Then, the new scene will have a Cutscene behavior I called “splash to game”…

… which handles the transition once the player presses UP key.

StencylWorks will handle transitions and do the dirty job for you.

CENTERED TEXT WITH CUSTOM FONTS

Since we don’t want the new scene to be completely empty, we are adding some text. First, you will create some font specifications, it’s very easy as it reminds the million font family/color/size selectors you are used to deal with for ages.

Once you are done with font creation, let’s see the behavior needed to place them horizontally centered:

Using the “Game name” and “Press to play” attributes helps us to set texts in a quick and easy way:

And now we also have some content in our intro scene.

IMPROVED CHARACTER WALKING + JUMPING

To make Kira walk better and jump, this is the behavior I suggest:

And this is the result we’ll get:

Use UP, LEFT and RIGHT arrow keys to play.

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 20

  1. kartofelek

    Yep. This app is very good, but has some isues. For example coding in “graphic style” is in my opinion not comfortable. And i cant find sprite editor.
    Game Maker is better in this plane, but Stencil is for free.

  2. Post
    Author
  3. Orlando

    Thanks Emanuele. I have a question, what Stencyl uses for collisions and force/impulse is Box2d? If so, in your example it is possible to add, for instance, boxes or moving platforms affected by physics? Please continue with your great work!!

    Thanks

  4. Vector

    Stencyl is a great program and you can also use as3 code with it.

    They are releasing iStencyl tomorrow also (free and pro versions) which lets you make iOS games.

  5. nicolas

    mm… 2 things:
    1. in my pc, and in the mac of one friend mine, the program don’t show me the categories of behaviors, like it show it to you in the pictures… you know why ? :/ it’s that a big trouble ?
    2. your a boy or a girl? (i feel like prof oak XD) , i mean, emanuele is name for boy and girl, and the draw about yourselfe in the head of the page confuse me XD…

    PD: sorry if i had a bad english,

  6. faisal

    hey, nice tutorial , however i m facing a problem when i press key up the actor is going upwards and never came down ? also i have set can jump variable to false but its not working ???

  7. Evan

    Hey, I’m new to using stencylworks and I keep having problems with coding behaviors. I have my jump behavior set up exactly as you’ve posted here but it lets you double jump if you press the key again. I want it to only be a single jump like in your demo here. any advise on what I might be getting wrong?
    Thanks for your help.

  8. Paulo Fernandes Jr

    Hi Emanuele!

    First of all, congratulations for your posts! Could you explain better how you developed the Jump Behavior of your demo? Did you used gravity or something like that?
    I tried something like you did, but when I press the jump button my character only walks upwards. And those getters, why you use them?

    Thanks in advance!

  9. Stencyl beginner

    I second that.
    This tutorial is great but a bit too complicated for us beginners.
    Maybe some other stencyl jockey out there could help us fill out the gaps.
    Thanks all!

  10. camilo a

    I think that the previous Stencyl tutorial was well detailed, but I think that this tutorial was made with less care. for example the behavior code is not explained and have new things regarding the behavior code of the previous tutorial.

  11. camilo a

    Thanks for build tutorials related with Stencyl, in the web does not exist good Stencyl tutorials for begginers with Stencyl.

  12. camilo a

    one comment, about “when created” section of behavor, is using “attributes” that in this case have boolean values. please begginers (as me) read attributes in stencyl documentation.

  13. Chaves

    Hi guys! I had problem with the jump too. But i fixed it, in your scene go at the events and apply gravity in there. Thank you for the tutorial Emanuele.

Leave a Reply

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