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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers