Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

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

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (14 votes, average: 3.86 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 20 comments

  1. kartofelek

    on December 5, 2011 at 4:23 pm

    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. felix

    on December 5, 2011 at 5:50 pm

    cannot jump more then one block, how set the jump more high?
    (sorry for my bad english)

  3. felix

    on December 5, 2011 at 5:52 pm

    cannot jump more then one block, how set the jump more high?
    (sorry for my bad english)

    nb: please remove my first comment :)

  4. Adrian Tschubarov

    on December 5, 2011 at 6:46 pm

    cute!

  5. Emanuele Feronato

    on December 5, 2011 at 6:59 pm

    @felix: change the force in the “push self instantly” block

  6. Orlando

    on December 5, 2011 at 7:12 pm

    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

  7. Bence Dobos

    on December 7, 2011 at 4:20 pm

    Orlando: Box2d! And you can add boxes as you wrote.

  8. Vector

    on December 8, 2011 at 12:05 am

    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.

  9. Finalbossgamers

    on December 8, 2011 at 1:20 am

    Awesome tutorial as always. I also made a couple of tutorials on youtube let me know what you think.
    Stencyl Tutorial Basics part 1 of 3(How to add background music)
    http://youtu.be/QkNXB1NODPA
    Stencyl Tutorial Basics part 2 of 3(How to add Score and Lives attributes)
    http://youtu.be/-QEYeWP2mDQ
    Stencyl Tutorial Basics part 3 of 3(How to add Win and Lose conditions)
    http://youtu.be/LzSrQEllU9U

  10. Nikola

    on January 7, 2012 at 6:43 pm

    Cool program

  11. nicolas

    on February 2, 2012 at 6:31 am

    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,

  12. faisal

    on February 13, 2012 at 2:13 pm

    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 ???

  13. merlino

    on March 16, 2012 at 11:13 am

    Nice tutorial,
    want to know more on Custom Fonts.
    How you can create and import other type of Fonts?
    Is there a tutorial or something to do this?

  14. Evan

    on March 18, 2012 at 8:25 pm

    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.

  15. Paulo Fernandes Jr

    on March 23, 2012 at 10:21 pm

    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!

  16. Stencyl beginner

    on April 17, 2012 at 2:36 pm

    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!

  17. camilo a

    on May 6, 2012 at 7:30 pm

    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.

  18. camilo a

    on May 6, 2012 at 7:33 pm

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

  19. camilo a

    on May 6, 2012 at 8:16 pm

    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.

  20. Chaves

    on October 6, 2012 at 6:07 pm

    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.

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×