Implement Tutorial System for Your Unity3D Games

So, the Catum Lab has come to the point where I create a tutorial system, the one that will walk new players through the basic activities of the game. Some of my colleague programmers said they hated this task best. If you ever had to create one, there’s a good chance that you hated it too. To be honest, right before jumping into this task for Catum Lab, I was scared because I had a bad experience about it: it’s confusing, it messes up with old game logic and results in lots of new bugs. Well, but this time, as I already have more experience working with Unity3D, the task turned out fun!

The very purpose of this blog post is to introduce my approach to my very specific situation and hope that you will get the idea, generalize it and apply successfully to your project as well.

From now on, when I say “the tutorial” I mean the thing that is commonly perceived by players as “tutorial”. And when I say “the tutorial system” I mean the C# scripts, game objects,… that are under the hood and make the tutorial work as well as help you design it in the development process.

Catum Lab’s scene setup

The game has a couple of scenes but the tutorial takes place entirely in 1 scene (the Main scene). Every pixel you see in the final game are rendered by Unity canvas system. There are 2 canvases in the scene. From the player’s point of view, the game UI consists of tabs which they switch by tapping on the bottom buttons or the setting button on the top right corner.

Some activities in the game involve players waiting for animations to finish before being able to take more inputs.

What’s in the tutorial?

The tutorial is triggered right after the first time players enter the Main scene. It will walk players from collecting their first 2 cats to after they have done breeding those cats.

The tutorial does so by showing a character (the guide) with a chat bubble to talk with players, also highlighting the area in which players are required to take actions, and finally showing visual cue like a pointing hand.

What a classic tutorial, isn’t it?

How is the tutorial system architected?

The stages

The tutorial from the begin to the end is divided into many small stages (like: say hello -> Tap on Collect button -> Wait for Collecting animation -> Collect Keep button -> … and so on).

Each stage has their own visual setting (where the guide, the chat bubble, the pointing hand are; what’s text to be shown on the chat bubble; how many degree the pointing hand must rotate,…) and a condition to complete (player tapped on a button, an animation has finished, player scrolled to the next item on the list,…)

The manager

I didn’t name it SomeThingManager (I just named the class Tutorial, by the way), but it’s common sense to call it so, now you got the idea. The manager doesn’t care about the specific purpose, setting, and condition of each stage. But it knows how many stages there are (it holds the list, by the way), it triggers the first one and calls the next one whenever the current one signals that it’s completed. Also, the manager manages common resources like the guide, the chat bubble, the pointing hand,…so the stages can work more effectively.

The helpers

They are there to do the specific detailed tasks, like highlighting a button, storing visual setting data, re-creating visual setting from the data, determining when a specific stage is completed. And one of the helpers I wrote has the purpose of finding the object to be highlighted and pass it to the highlighter (to highlight it). It’s needed because I reached to the point when an object needed to be highlighted isn’t in the scene until after some time in the runtime.

Visualizing the tutorial system

How the tutorial system is implemented

Editor coding

I’m not talking about extending Unity editor, I’m talking about making use of “drag-and-drop” in the scene editor to build game logic. Yes, making use of it to exploit the full potential of Unity. But be careful, you and your team should develop good conventions so it won’t be a mess when it comes to debugging.

Main objects of the system

With that in mind, the tutorial system is made of MonoBehaviour objects, each of them exposes several methods, fields that can be set up by using Unity’s editor. Some of them even have ContextMenu so that I can call manually for the purpose of testing.

Tutorial is the manager, it holds references to common objects like the fog (opaque screen to dim not highlighted objects), and tutorial narrative objects (the guide, pointing hand,…). It exposes some key events like when the tutorial begins and when it finishes. The ContextMenu BeginTutorial makes it easier for us to test the system since when in the editor, we can trigger the tutorial whenever we want.

You can see there is a long list of children attached to the Tutorial, they are stages that the Tutorial will manage.

The screenshot above shows a selected stage which I named Swipe to Cat 2 and has the component TutorialStage added.  There are tasks that most stages need to perform, like highlighting some objects, show the fog, show the tutorial narrative objects (with different positions, texts, of course), the TutorialStage will handle those tasks and expose fields so we can change how the tasks should be done. Other tasks if needed would be included in onBegin and onFinish events.

The ContextMenu EditorBeginTutorialFromHere saves our time by letting us jump right into a specific stage from which we need to test.

Helper objects

One of the most important helpers in Catum Lab’s tutorial system is the TutorialObject. It can highlight a UI element, call next stage and expose events of begin or finish a stage.

TutorialNarrativeInstance store some visual setting data. As you change the values, the objects on the scene are updated immediately.

FirstCatInInventoryTutorialObject (what a name!) finds a TutorialObject that can only be created in runtime, passes it to the TutorialStage’s list of highlight objects.

Conclusion

The Catum Lab’s tutorial system is very easy to understand and implement and it just simply works! From the script side, the tutorial system is completely independent from the rest of the game. From the scene editor side, the tutorial system only listens to the signal from the normal game logic, never calls back. At no time I was considering the scene setup just because of the tutorial system. The system also makes it very easy to fully set up and test the game tutorial.

Finally, I do acknowledge that, so far, I was talking about a very specific situation – the Catum Lab’s tutorial. But I hope you can extract from this blog post useful information for your next Unity game.

Leave a Reply

Your email address will not be published. Required fields are marked *