Making an in-game tutorial with StencylWorks

If you are playing the latest Flash games, you will see the old “how to play” button no longer exists.

People don’t want to read detailed instructions before playing a Flash game, they want to dig into action.

That’s why we have the need to create in-game tutorials, which are easy levels to make players get used to the game design while keeping them in action.

In my upcoming Flash game Kira the Witch, the tutorial is made of signs you can find around the levels. Once you touch a sign, you will be able to “read” it this way:

I am going to show you how to do it in the painless way.

We have two actors: the small sign and the big sign. Small signs are placed in the scene during level design, while the big sign (one for all) will be created on the fly.

Also, the small sign is a sensor so it won’t react to physics and has its own collision group, called “sign”.

The big sign is a doodad, which means it’s a special actor never allowed to collide with anything else.

There is a big difference between a sensor and a doodad. The sensor does not react to physics forces but registers collisions, the doodad does not register collisions.

Now let’s create some behaviors: the first, and the easiest, is called “Big sign information” and does not contain any action, as you can see:

So it may seems useless, but I added to this behavior three not hidden attributes called “Text to display”, “Big sign x position” and “Big sign y position”.

When I customize the behavior of each small sign and add “Big sign information” behavior…

I can set the each sign content, and the x and y coordinates to be shown once Kira “reads” a sign. This way, “Big sign information” behavior acts like a new data type:

Also please notice I am using an asterisk as line break character since using “\n” won’t work at this stage.

Then, I need another behavior called “Write sign text” which will write text inside the big sign, so obvioulsy will be tied to it:

This is also very easy as I am only setting a font and writing some text in the sign. Notice how at this time I need to replace “*” with “\n” to do line breaks.

The difficult task to create the big sign, place it, and write text in it by changing “Text to write” attribute is (and then remove it) made by main player’s behavior called “Kira touches a sign”

I commented it to let you understand how it works.

Basically the key is the communication among different behaviors to get and set attributes on the fly.

And we can say “goodbye” to that old lame “How to play” buttons in a matter of minutes.

source : http://www.emanueleferonato.com/2012/01/31/making-an-in-game-tutorial-with-stencylworks/