How are you creating in-game tutorials for your games?

I’d like to here how you are creating in-game tutorials and “How to Play” scripts, animation, etc.

What technologies (SpriteDeck) are you using, and how are you creating gameplay tutorials for your games? [import]uid: 295 topic_id: 9282 reply_id: 309282[/import]

I haven’t gotten to this point yet (tutorials) but I have planned it out somewhat. In my opinion, the more “visual” the better. Less text = better, especially for (typically impatient) mobile gamers. :slight_smile:

Visuals vs. text also means you instantly bridge the language gap. Take a look at the old standby Angry Birds (I’ve grown sick and tired of this game but it’s still relevant for UI design purposes). Their “tutorials” are just a picture, so basically anybody can deciper it no matter what language(s) they understand. That being said, a simple picture or even several pictures/animations won’t be enough for most games… definitely the more complex the game concept, the more you’ll need to elaborate, and text will be necessary. But still, the less the better, I think!

As for the tech, I guess I’ll use SpriteDeck or similar and just lay out the pages in Director, one after the next (or if it’s just one page, I’ll have it pop up over the game screen and a user click on “done” or “OK” will make it fade out and return to the game).

Brent Sorrentino
Ignis Design LLC [import]uid: 9747 topic_id: 9282 reply_id: 33965[/import]

Thanks

Isn’t director just for page transitions. [import]uid: 295 topic_id: 9282 reply_id: 33970[/import]

Technically yes, the current version of Director is for page transitions, one Lua module to the next, showing a new one while clearing the previous one. This is great for most needs, but one lacking feature (up to this point, version 1.2) is that it can’t place a new scene module over the existing one without clearing the underlying one… at least not by any method I can determine.

In terms of a tutorial screen or pop-up, this could be a problem. If you want to pop up a “tutorial window” or a pause screen in-game, which is its own complete and comprehensive Lua module, Director apparently can’t do this. Instead, it will clear the current scene (the level, presumably) and skip to the tutorial, and the player could not return to the game.

Thus, I am in the process of writing a modified version of Director for this specific purpose. It’s about 90% complete right now, and it allows overlay pop-ups using the same basic premise that Ricardo built Director upon. It just doesn’t “force clear” the original scene, which (in my opinion) is a very useful feature. :slight_smile:

If you’re interested in tinkering with this, I should have it done within 1-2 days, and I can give you copy of my modified code.

In the meantime, the current Director 1.2 is still very capable of doing a tutorial which is separate from your game. It would just flip “scene to scene”, and you could construct each scene as complex or as simple as you wish, with animations or transitions or whatever else.

[import]uid: 9747 topic_id: 9282 reply_id: 33977[/import]

Yes! As I’m about to start on the tutorial for my game I’d love to give your tool a try. I’d like to use it and SpriteDeck which I’m about to purchase. [import]uid: 295 topic_id: 9282 reply_id: 33981[/import]

Hi Dan,

Just curious, have you used Director before? Also, for your specific tutorials, do you plan to implement them on top of other scenes? For example, placing them inside floating pop-up screens that I described before?

This overlay usage is really where my modified version of Director (let’s say “Director Lite”) would be useful to you. I’m working on a few other enhancements, but that’s the key difference at this point.

If you are doing tutorials that are totally separate from your game, and separate from “main.lua”, you might be better served by the current Director 1.2. For one thing, it has more screen transitions than my version… I took most of them out of the original code because I simply don’t need them. Ricardo has coded in slide-from-direction, flip, and other nifty effects. My version basically has pop_in + pop_out (instant) and delayed_in + delayed_out (on timers). These can easily be extended to accomplish transition fades (cross_fade + fade_in + fade_out), but unlike Ricardo’s version, I perform these within each individual Lua module, not in the Director Lite code.

Just to recap: Director essentially works “aside from” other scenes. My version will work more “on top” of other scenes. :slight_smile:

Just let me know. I’m happy to share my code, but I want to point out the key differences in advance.
[import]uid: 9747 topic_id: 9282 reply_id: 34057[/import]

I havent used director as I can easily code screen transitions myself. I don’t want a bunch of transitions between pages.

What I want is, for example, an image of a game screen, while stepping the the tutorial, various overlays (with text explaining some game feature/rule) pop up, and then a short animation occurs that graphically demonstrates that feature/rule.

But I got some feedback that 99% of people don’t view the tutorial, or bail out about 10% thru) and they aren’t worth the effort. That it’s probably better to include a short 1-minute movie. Now I’m also looking for software that allows me to create such a movie with text overlays. [import]uid: 295 topic_id: 9282 reply_id: 34165[/import]

I havent used director as I can easily code screen transitions myself. I don’t want a bunch of transitions between pages.

What I want is, for example, an image of a game screen, while stepping the the tutorial, various overlays (with text explaining some game feature/rule) pop up, and then a short animation occurs that graphically demonstrates that feature/rule.

But I got some feedback that 99% of people don’t view the tutorial (or bail out about 10% thru) so they aren’t worth the effort… it’s probably better to include a short 1-minute movie. Now I’m also looking for software that allows me to create such a movie with text overlays. [import]uid: 295 topic_id: 9282 reply_id: 34166[/import]

Hi,

I’m using simple dialogs that pop up and guide the user to do various things in the game. These dialogs pop up when the game recognizes that it’s the first time the player opened the game.

Basically, my tutorial is integrated into the gameplay itself.

So far, the small amount of folks that have played with the tutorial like it…makes things a lot more clear :slight_smile: [import]uid: 12700 topic_id: 9282 reply_id: 34168[/import]

What game is that? I’d like to take a look.
BTW. Are you the Experimental Game Dev Podcast? [import]uid: 295 topic_id: 9282 reply_id: 34170[/import]

Hi Dan,

By your description/needs, I think Director might be “overkill”. :slight_smile: If you don’t need full modules loading on top of another scene, or one after the next, you’re probably better off coding a tutorial system yourself.

One thing I implemented recently is step-by-step score screen. It’s all contained within one Lua module, with a function that calls upon itself in a series of timers. A local “status” variable simply holds which step the user is currently at, and it gets updated in each new step.

For example:

local nextTimer ; local nextStep = "howToMove"  
  
local function tutorialStep()  
  
 if ( nextStep == "howToMove" ) then  
  
 if ( nextTimer) then timer.cancel( nextTimer ) end  
 -- show tutorial, animations, etc. for this step only  
 nextStep = "howToFight"  
 nextTimer = timer.performWithDelay( 8000, tutorialStep )  
 -- a button would probably be better to trigger the next step, versus a timer!  
  
 elseif ( nextStep == "howToFight" ) then  
  
 --copy above code and adjust as necessary  
  
 end  
end  
  
tutorialStep() -- start the sequence  

Of course, the issue here is that you have to manually clean up the contents of each step, or else make them invisible and clean them all up at the end (or on exit). The beauty of Director, and one reason it’s so widely used, is that it cleans up everything as it goes along. But it requires each new “step” to be a new Lua module.

You might want to implement a system like @indiegamepod suggested: in-game pop windows quickly showing what the user should do at that time. I might do exactly this in my own game, versus a comprehensive tutorial series, especially if you say 99% of users bail out on the thing before finishing!

Brent
[import]uid: 9747 topic_id: 9282 reply_id: 34171[/import]

In Match Game Magic I watch and see if it’s the first time played and, if so, I pop up a couple little tips on the screen that fade away after a brief period.

Yesterday I played Cut The Rope HD and noticed they do something similar. Here’s the first puzzle:

That picture of the finger swiping fades away after about 5 seconds, so they tell the user what to do and then back off and let them do it.

The game I’m building now, Roly-Polies, will do something similar. If you’re doing the first puzzle/level it will fade in/out some instructions. Plus, when you reach higher levels where different player objects are introduced, I’ll do the same for those. Other than that, I don’t think I’ll have a help or tutorial section. At least not on the game. I’ll probably make an intro video and put it on the website just for people who like more hand-holding.

Jay
[import]uid: 9440 topic_id: 9282 reply_id: 34173[/import]

@indiegamepod

I like your idea of pop windows integrated into the game itself. I considered this briefly in the past but haven’t reached the point where I want to code it.

Here’s some theoretical questions to ponder:

In your game, you turn off the tutorials presumably after the player has seen them. This makes sense, and I understand how to code it (i.e. a flag “showTutorials” gets saved to a local game settings file). However, what do you do if multiple players might be playing the game on one device? Let’s say a family has an iPad they share. If one person plays your game and sees the tutorials, they’ll be switched off for the next person who plays, and thus the new player isn’t aware how to play the game, and perhaps not even aware that tutorials exist!

One option might be a little button on each pop-up that says “Don’t show again”. This would ensure that it continues to pop up until somebody explicitly turns it off. But then you almost have to micro-manage the whole system, i.e. which tutorials have been turned off, which are still active, etc.

Perhaps the best idea is a global on/off in the game settings? In this case, the tutorial bubbles would continue to show until they were globally turned off in the settings screen. Another user learning the game could easily reactivate them.

Opinions from other developers? Other ideas? Please share.
[import]uid: 9747 topic_id: 9282 reply_id: 34174[/import]

I like the indiegamepod and J.A. Whye ways of doing it too. But I’m lazy and don’t like doing any work if it’ll not be appreciated.

My game has a simple “How To Play” button on the start screen. And it’s always there. Clicking it causes the tutorial screen to slide in. Right now it is blank. To save time and wasted effort I may just put a short “How to” video there. I wonder how ‘heavy’ this would make my game.

https://skitch.com/tokyodan/rh812/tot [import]uid: 295 topic_id: 9282 reply_id: 34180[/import]

I like the indiegamepod and J.A. Whye ways of doing it too. But I’m lazy and don’t like doing any work if it’ll not be appreciated.

My game has a simple “How To Play” button on the start screen. And it’s always there. Clicking it causes the tutorial screen to slide in. Right now it is blank. To save time and wasted effort I may just put a short “How to” video there. I wonder how ‘heavy’ this would make my game.

https://skitch.com/tokyodan/rh812/tot [import]uid: 295 topic_id: 9282 reply_id: 34181[/import]

J.A. Whye How’d you get that image in your post. I tried with the tags but it didn’t work. [import]uid: 295 topic_id: 9282 reply_id: 34183[/import]

I like the indiegamepod and J.A. Whye ways of doing it too. But I’m lazy and don’t like doing any work if it’ll not be appreciated.

My game has a simple “How To Play” button on the start screen. And it’s always there. Clicking it causes the tutorial screen to slide in. Right now it is blank. To save time and wasted effort I may just put a short “How to” video there. I wonder how ‘heavy’ this would make my game.

https://skitch.com/tokyodan/rh812/tot [import]uid: 295 topic_id: 9282 reply_id: 34182[/import]

How the heck did my post get there three times??I didn’t post it 3 times I just tried to edit it. I wish there were a way to delete posts on this forum. [import]uid: 295 topic_id: 9282 reply_id: 34184[/import]