I'm working on a "social" game that's about 90% completion. One of the remaining features is the tutorial mode.

Basically, the tutorial mode will restrict the user to access some parts of UI and limit the features (like store items). The tutorial will only progress if a certain event is triggered, specifically following the tutorial.

The code is ready and we already have an "almost" working game. The problem is I haven't foreseen the tutorial mode while I was doing those 90%. My requirement is there shouldn't be any loading/transition from tutorial mode to normal mode. This means I have to pick up the progress from the tutorial (no re-rendering of assets and stuff).

How should I design this in a way where I won't touch anything from my old code? I want it to be as easy as just plugging it in. I don't want to jam the tutorial in my old code since this will lead to many bugs.

  • \$\begingroup\$ You should give more details, like if you have a support for scripting and whether those scripts can alter GUI... Maybe throw in a diagram of classes. PS: you cannot 'foresee' everything so your code should always be refactorable. \$\endgroup\$ – Den Nov 14 '11 at 9:25
  • 2
    \$\begingroup\$ I'll say the obvious: If you want to enable or disable GUI elements in game you will need to add support for it. Only you can know how to implement that (or other people in your team). \$\endgroup\$ – Max Nov 14 '11 at 14:56
  • \$\begingroup\$ What language(s) are you using? \$\endgroup\$ – John McDonald Nov 14 '11 at 15:36
  • \$\begingroup\$ Objective C. I'm developing for iOS. Looks like that's the cleanest way to do it. I won't be able to post a diagram now since I left it at work. I'll post if ever I got stuck. Looks like that already rang the bell. \$\endgroup\$ – Sylpheed Nov 14 '11 at 17:59

Some more information would help you get better answers. Without knowing much about what type of game you have or what you level structure looks like, I can only make a stab in the dark.

That said, if I were doing something similar with my current project, I would create a special level that guides the user through the subjects in question. Your NPC's could be created with only the items you want available in the tutorial, for example.

As far as preventing access to certain UI elements, if you can't add or remove the elements you do/don't want in your tutorial, you may have to incorporate a filter into existing code in order to determine whether an element should exist or not (think "access restrictions").

  • \$\begingroup\$ Let's say it's like Sims City. I don't know much about the game but think of it having a tutorial that will guide the user how to play the game. Of course, you want to disable some UI elements and set limitations while in tutorial. So best way is to provide an interface for my UI? So I can disable and enable them when needed. \$\endgroup\$ – Sylpheed Nov 14 '11 at 8:56
  • \$\begingroup\$ You'll either need to be able to add / remove UI elements from your tutorial, or you'll need to build your UI such that it is conditional on "access restrictions." For example, if you have a "save game" button that you don't want available in your tutorial, you might wrap it in a statement like if ( canSaveGame()) { panel.add( saveButton ); } where canSaveGame() is part of your access restriction system. \$\endgroup\$ – notlesh Nov 14 '11 at 16:34
  • \$\begingroup\$ No need to remove them. I just need to disable them. I'll try refactoring the code so that it can be disabled/enabled through an interface. How will you treat each tutorial event? Do you suggest I create separate objects for each event? I'm afraid that my tutorial class may bloat. \$\endgroup\$ – Sylpheed Nov 14 '11 at 18:03
  • \$\begingroup\$ Not sure what you mean about tutorial events. Why do they need special treatment? \$\endgroup\$ – notlesh Nov 15 '11 at 3:13
  • \$\begingroup\$ Let's say the tutorial is split into different phases (events). The user can only move on to the next phase if he followed the instruction. Each "tutorial event" will wait for something interesting to happen. Once triggered, a new tutorial event will be instantiated which listens to a different event base on the current "tutorial phase". My concern is there are about 20 steps in the tutorial. I'm planning to split each step to different objects. \$\endgroup\$ – Sylpheed Nov 15 '11 at 9:13

I am working on a tutorial for my C# game right now. I'm separating the tutorial from the game by using events. In my game, I have a bunch of events that are triggered when the game state changes in a variety of ways: Entities moving, getting destroyed, being built, upgrade complete, etc. My tutorial listens to the events of interest and has the ability to manipulate the HUD. That's all you need. To make it perfectly clear, the game has no idea that the tutorial is happening.

This may also be important: My Tutorial is a subclass of Scenario, where the Game is always executing a Scenario. Since I'm using C#, I could feasibly take any of my Scenarios and toss them in a C# script file, but right now, all of my Scenarios are compiled directly into the game.

The class is a bit of a work in progress right now, but here's a slightly out of date version you can look at: http://asteroidoutpost.svn.sourceforge.net/viewvc/asteroidoutpost/trunk/Scenarios/TutorialScenario.cs?view=markup


I am also working on a tutorial for my flash game and this is how I have it set up. Each portion of the game checks a Tutorial object to check to see if an action is available for the player to do. If the tutorial module doesn't exist or is inactive, then we can assume that the player can do anything.

Using your Sim City game for example, let's say that when the tutorial starts you don't want the player to be able to do anything until the appropriate time. You could have flags in your tutorial object like, PLAYER_CAN_USE_TOOLBAR, PLAYER_CAN_SWITCH_VIEWS or PLAYER_CAN_DESIGNATE_ZONE etc all set to FALSE. As the player steps through your tutorial you can then start setting those flags to true.

For your UI portion, block the signal to the model or controller that actually performs the action if your tutorial flags aren't set:

// If our tutorial module/tracker exists, but the action flag is set to false
// then leave our method early
if (mTutorial.isActive() && !mTutorial.checkFlag(PLAYER_CAN_DESIGNATE_ZONE)) {
  return false;
//Do the rest of the action here

For wating for specific events you could pass event back into your tutorial object to validate that is what the player needs to do to continue that tutorial step. For example, if you needed the player to create a residential zone at a particular X,Y:

var evt:GameEvent = new GameEvent(EVENT_CREATE_ZONE, ZONE_TYPE_RESIDENTIAL, startX, startY, endX, endY);
if (mTutorial.isActive()) {
  if (!mTutorial.checkFlag(PLAYER_CAN_DESIGNATE_ZONE)) {
    return false;
  //Check to see if this event is okay
  if (!mTutorial.validateEvent(evt)) {
    //Show why the player can't do this via popup
    return false;
//Do the rest of the action here

I hope that helped. Unfortunately, you'll have to add the tutorial checks into your old code to get this to work. But by assuming that all actions are valid unless the tutorial object exists should ease this integration process and allow you to minimize your bugs.

  • \$\begingroup\$ I'll consider treating each tutorial event as separate objects. I'll try to design the code for tutorial from here. Thanks. \$\endgroup\$ – Sylpheed Nov 14 '11 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.