Writing a system for a tutorial
I am currently doing the tutorial system which is one of those things that always feels a bit, well I don’t know what to call it, tedious I guess.
I want to say that to some people this post might contain information somewhat resembling spoilers, so further reading will teach you a bit about the tutorial system and how it works in the game.
A tutorial system is more or less always a custom system that only handles just that, and it’s mainly special cases and special case use of items.
For Smelly Memories I wanted to make it as transparent as I could and a system that as much as possible adhere to the open-closed principle, which basically means to be open to extension but closed to change. I wanted this because I have common systems used by different levels and I really don’t want the tutorial to affect anything but the tutorial level. Another pretty good reason is that I didn’t think much about the tutorial until I started implement it :P
Sometimes I am just too honest.
Anyhow I made it like this. You need a overlay, this overlay is put between the camera and the level objects, so any input will be stolen by this overlay. This way I can hinder any unwanted interaction.
I appologize, this part will be rather technical, I will give a more abstract view in the next part. I have an item of the type TutorialItem which is a base for all type of tutorial items, and derive any item from that to create special behavior. To make use of polymorphism through inheritance this makes it open to extension, so that I can follow the open-closed principle. This item has three distinct responsibilies:
1. setting up and explaining the step to the player
“show text: ‘click item X to pick it up’”
2. some condition it’s waiting for to be fullfilled
“on pickup for item X notify me so I know this item is done”
3. the next item in the tutorial.
“now I am happy, so tell the next item to run it’s three steps”
So what did all of that mean?
You might think of it like a chain where every link in the chain is a tutorial item. you need the link to have some basic properties, such as it should be attachable to the previous link.
It might however be made of any material, it could be made from metal, plastic or yarn as long as you can use it as a link it’s fine.
This system is quite flexible, any link could be made the first link, just call it first. The order of the links doesn’t matter, you just need to tell each link which link is after it. And you could even create a new link made from porcelain, then you can put it in anywhere in the chain without other change and it will keep working.
So example, you create a chain with 3 links:
then you decide that you need to have the yarn link before the metal link, no problem just tell the yarn link that it’s next link is metal, and tell the metal link that yarn no longer is it’s next link and you will have this.
now you realize that the first link should be a paper link, no problem, add paper link and tell it that it’s next link is the plastic one.
paper -> plastic -> yarn -> metal
So typically a tutorial item has some information, some item that it want to teach you how to interact with (which is moved between the overlay and the camera, making it stand out and making it interactable at the same time. This is followed by a condition and a way to start the next tutorial item.
Phew, I will stop here for now.
The coordinate axles on the right hand side of the image is where the camera is placed, the outlined box is the orthographic projection of the camera.
The black plane is the overlay stealing the input and to the left is the scene.
So when clicking on the screen a ray is sent straight down the z (blue) axis, as soon as it hits something it will be evaluated, and as it will always hit the black overlay you can’t do anything while the tutorial is running.
In this image a tutorial item is active, it has moved an item in front of the overlay (the coordinate axis in the image), so if you click it now, you will hit that object before you hit the black overlay. In this specific example the item is a pickupable object so clicking it will pick up the item, and an event is triggered which the tutorial item is listening to. So once the item is picked up it will notify the tutorial item which in turn sais: “well, that’s all I wanted” it then cleans up and call the next item, and once the chain is done, (i.e. there is no next tutorial item to start) the overlay is deleted and you are dropped exactly in the current state in the “real” game.
