Implementing the Tutorial for Forage Friends

Hi foraging folks! I’m taking a break from Unity today to share some of the inner workings of Pie Trap with you. As a long time indie games fan I’ve always been super curious about how my favorite games are developed. If you’re a like-minded person I hope to scratch that itch for you here :) 

One of my main focuses since joining the team has been configuring the game’s tutorial. How are players supposed to enjoy the game if they don’t know how to play it?? This task has been perfect for me to get introduced to our lead programmer, Kei’s, codebase (he had been single handedly programming for Forage Friends for over a year before I joined up) and also to get used to communicating with other members of the team.

Translating design into implementation

Before I get into some of the nitty gritty implementation details, I think it might be interesting for you to know the workflow that I follow to even know how the tutorial is supposed to function. As a programmer on the team I’m rarely designing elements of the game, and instead am usually figuring out how to execute an idea that came from someone else. In this case it all starts with our concept artist and UI designer extraordinaire Rachel!

All of the UI in the game is first designed by them in Figma, and the tutorial mockup began similarly.

In this abstract you can see the town view in the background and a tutorial tip with a character profile image.

There are many options for how to integrate a tutorial into a game’s early gameplay. Our design uses a combination of character dialogue and tutorial tips like above. The tips allow us to point at and highlight different elements on the screen to guide the player, and the dialogue ties in the game’s story! 

Rachel wrote out the the flow of the whole tutorial sequence with cues so I know when we need to switch between dialogue and tips, what elements on the screen need to be highlighted, and the other specifics of each tutorial section.

Players can select what level of guidance they want in the tutorial. The blue text here indicates tutorial steps that will only appear if the player selected the most guided experience.

Following the outline from Rachel, we end up with this town tutorial sequence in the game! 

Ahhhh, much cozier.

But there’s quite a bit of behind the scenes work that goes into constructing each sequence… I think you’re ready to dig a little deeper.

Settings the tutorial up in Unity

Unity, the game engine we use to build Forage Friends, has many systems prebuilt to help us put the game together. But a system to develop a tutorial sequence is not one of them!! Kei created a homemade solution, developed to step through a chronological list of tutorial steps corresponding to input from the player, with different options for using dialogue, highlights, and all those other features we rely on to teach our new foragers. There’s a lot of possible configurations for each step!

Here you can see all the settings for a single step in a tutorial sequence. Not all of them are used for each step, but they’re all useful at some point in the sequence!

The tutorial flow is organized by section, with each section containing a list of tips like the one above. As the player advances through each step, the tutorial system keeps track of their progress and moves to the next step accordingly.

The list of the steps included in the town portion of the tutorial.

Many of these steps are pretty simple to set up, thanks to Kei’s system. Configuring a step can be as easy as taking the tip text from Rachel’s outline and pasting it into Unity, setting an arrow to point to a UI element, and making sure the tip appears at an appropriate location on the screen. But some moments in the sequence require quite a bit more work…

At certain points in the tutorial we want to walk the player through an action they’ll be performing as part of the gameplay loop in Forage Friends. At these moments we need to be aware of when a player clicks a particular button, for example, so we can then progress the tutorial to the next step. (Other tutorial steps are progressed by clicking anywhere on the screen, but that won’t work here! What if they don’t click the button we want them to?) To make this happen special configurations exist to lock or override UI elements on the screen. 

When a button is configured in the ‘Buttons Overridden During Tutorial Step’ section of a step, the result of pressing that button will be different than usual, and only during the step that’s specified. By overriding some buttons and disabling others we can create a guided experience for the player that restricts what they can do, and ensures they’re seeing the gameplay elements we want them to, in the order we want them to!

Example of using a Tutorial Button Override component to define different behavior for a button during a tutorial step.

There have been a handful of occasions that required the tutorial to deviate from normal gameplay extremely enough to require new custom behavior on the programming side. This is when I first got to dive into the codebase of Forage Friends and get my hands dirty adding in new functionality to complete the tutorial! For example, pausing in the middle of dialogue between the player and an NPC to insert a tutorial tip caused quite a bit of creative thinking.

I don’t think Rachel knew the headache they were causing me when they wrote this in the outline. But we got it working!

Working on the tutorial was a great intro to the game’s inner workings. Adding tutorial tie-ins to various areas of the game gradually exposed me to Forage Friends’ interconnected systems. You may be surprised how much code goes into a mobile game (or perhaps I was just unsuspecting)!

It hurts to say goodbye, but that’s all I have to share with you for the moment! To check out the tutorial in action, sign up for our upcoming closed beta on the website homepage. For more updates, be sure to follow us social @foragefriendsgame or join our Discord! Thanks for reading along :)