I would like share a few thoughts about designing tutorials for an Android game app. The game, which is a space war game, is not extremely complex but there is enough there that a casual player might have trouble getting started. Commanding a starship is, after all, not a simple task.
In this article, I will tell you what I did about that problem. I will tell you about what I learned about game tutorials from Angry Birds and how I built that into my own app. Figures 1 shows the end result in the Starship game. Figure 2 is an Angry Birds tutorial. To see the animations, there is a YouTube video later in this article.
There is a little bit more to the story than Angry Birds. I also have been studying gamification and found several good presentations with advice from game designers about what helps you make good design decisions related to onboarding new players. I will discuss that too.
LESSONS FROM ANGRY BIRDS
Several months ago, I decided that I needed something to introduce players to the game that was more engaging and easier to grasp than written instructions on a screen. I looked around, but I didn’t find any advice that was particularly compelling about how to do this for an app. Looking on my phone, I asked myself: “What do other games do to get people engaged in the game and get them started?” Two old favorites do a great job with some simple animations: Fruit Ninja and Angry Birds.
Take a closer look at Angry Birds. When you first install and start, the game does two things for you early on. First, they tell you the story of what your task is, in only two screens — pictures, no words. The nest is empty; the eggs are missing; the pigs have the eggs; you must get them back.
Then comes the one and only bit of instruction. You see a simple animation that shows you how to touch the screen and pull back on the slingshot. That animation repeats until you, the player, get it and hit the next button (a checkmark). At that point, you are ready and the games start.
Angry Bird became my model, at least as far as tutorials are concerned. A tutorial view pops up on top of the game and runs an animation. In the animation, a finger moves, screen touches are shown, and the resulting action is illustrated. The animation repeats until the player touches the Next button, ideally indicating that the instructions are understood. Two screenshots from my Starship game are shown below.
Unlike Angry Birds, there is a lot to learn in the Starship game. To command a starship, you have know these things: how to move, how to fire weapons, how to repair, how to scan for aliens, how to locate starbases, etc. Originally, I had thought that a few pages of help would be good enough. You’d read a few pages to learn what commands were available to you as a starship captain and off you’d go. Well, it didn’t take long to realize that there are way too many commands to qualify as “a few pages of help”. Besides, most people don’t want to read. They just want to shoot some aliens.
I adopted the Angry Birds style of tutorials and found ways to make use of them in the overall onboarding experience for new players. Level 1 of the game is where new players see them. (More on that in the next section.) In total, there are over ten different tutorial animations in the Starship app. You’ve seen a few screenshots above. If you want to see them in action, you can see several of them in the following short demo video.
LESSONS FROM GAME DESIGN
I have done a lot of research on game design and gamification lately. Some links are provided in the References section below. One of the most useful references was a presentation by Amy Jo Kim titled “Smart Gamification: Seven Core Concepts“. The topic is gamification, but what Amy Jo Kim does is share tips and advice that are based on her experience as a game designer.
The most important lesson for me was the concept of a player lifecycle. There are three stages: novices, regular, and enthusiasts expert. Amy Jo Kim suggests that you design the player journey from novice to expert.
For that point in the presentation, go here: http://www.youtube.com/watch?v=F4YP-hGZTuA#t=501. The whole presentation is great. Be sure to listen to it.
Amy Jo Kim also says: ”Newbies need to learn the ropes … think about the first 1-2 months of the player’s experience”. She urges you to figure out the “arc of learning” that you will guide newbies along.
I took that to heart and made the entire first level of the Starship game be the training level for newbies. I incorporated that into the flow of the game. The game begins with you in training. You take on training missions which allow you to advance through the ranks of Weapons Officer, Navigator, Commander, and finally, Captain. Upon promotion to Captain, you are given command of a very powerful starship. Your mission as Captain is to find and destroy alien starships that have invaded the galaxy.
Even as Captain, your first few missions are in region of the galaxy that is smaller in size and that has few alien ships to destroy. That, I hope, further smooths the transition from newbie to regular.
DOES IT WORK? IS IT EFFECTIVE?
I have told you a little about what I did and why. Two main things were tried:
- Angry Birds tutorial style
Difference – many tutorials, not just one.
- Amy Jo Kim’s suggestions for player lifecycle
I tried to make onboarding interesting by having the player advance through the ranks. I tried to create a sense of achievement and reinforce that with badges for individuals and ranks.
The following questions are unanswered, and I was hoping that some of you Android developers and other blog readers could help me out.
- Does an Angry Birds style tutorial work? Do you really know what to touch to make something happen?
- Is it effective to earn ranks while you learn the game?
- Or does it make it look like the game is not interesting?
In other words, does it take too long to get to a game that’s fairly challenging?
You will have a better sense of the game experience if you try the app. It’s available in the Google Play store as an Alpha test app. To get the app, just visit the Starship app community on Google+. Click the image below or the link below it. Once you get to the community page, click the “Ask to Join” link on that page to request an invitation. Download instructions are on the community page.
If you have any general thoughts on game tutorials or comments about the tutorials in Starship, I’d appreciate hearing from you in the Comments section below or within the Alpha test community.
DEMO EXAMPLE AND SOURCE CODE
In a future article on this blog, I will explain how I built the tutorials. I started with the animation examples in Android API Demo sample app and saw how they had a set of objects define drawing operations on a Canvas. I built on that idea so I could have several animations working in combination for a tutorial.
I have been studying game design, gamification, and other topics over the last 18-24 months. Many of the ideas for tutorials and onboarding that I am trying in the Starship app were inspired by the following presentations.
Fun is Future: Mastering Gamification
Some of his points:
- Onboarding tutorials should be built into the first level of the game.
- “The early days of any game are super important …”
- “What we used to call the tutorial level, but now we just call it level 1″:
- “in the olden days …” and ”… reveal the complexity of the game in slow steps”.
Amy Jo Kim
Smart Gamification: Seven Core Concepts for Creating Compelling Experiences.
For the key points, see the “Lessons From Game Design” section above.