Hidden Quest: From Picture Book to Playable Story – Adding Page Navigation in Unity
In my previous tutorial, we brought a children’s storybook to life by adding animations in Unity. Now, let’s take the next step: making the story interactive with working page navigation.
Right now, in the Hidden Quest demo project, clicking the Enter or Info buttons in the menu doesn’t do anything. That means readers can’t move from the menu to page one, or flip through the rest of the story. Let’s fix that with a simple script — and the best part is, it only takes only 10 lines of code!
Why We Need a Script
Unity already includes many built-in components (like physics or audio), but for custom behaviour — like telling a button which page to open — we need to write our own.
That’s where scripts come in. A script is a small program written in C# that you attach to a GameObject. When Unity runs your app, it follows the instructions in that script.
Don’t worry if you’re new to coding. We’ll use a free tool called Visual Studio Code (VS Code), which acts like a smart text editor for writing and testing scripts.
Setting Up VS Code in Unity
- Download and install Visual Studio Code.
- In Unity, go to Edit > Preferences > External Tools.
- Under “External Script Editor,” select Visual Studio Code.
That’s it! Unity will now use VS Code for all your scripting.
Creating the Navigation Script
To control navigation, we’ll create a custom script:
- In your Scripts folder, right-click → Create > C# Script.
- Rename it to
HiddenQuestController. - Attach it to an empty GameObject (I call mine Script Controller).
When you open the script in VS Code, you’ll see Unity’s default template. To enable page navigation, we’ll add a simple public method that loads a new scene when called.
using UnityEngine;
using UnityEngine.SceneManagement;
public class HiddenQuestController : MonoBehaviour
{
public void GoToScene(string sceneName)
{
SceneManager.LoadScene(sceneName);
}
}This is where the magic happens:
- Namespace: Brings in Unity’s built-in tools, like the Scene Manager.
- Class: The container that holds our script’s instructions.
- Public Method: The function that runs when a button is clicked (e.g.,
GoToScene).
In plain English: when called, this function tells Unity to load the page we specify.
Wiring Buttons to the Script
With the script ready, let’s connect it to our buttons:
- Select a button (e.g., Enter).
- In the Inspector, scroll to the On Click section.
- Click + to add a new event.
- Drag in your Script Controller GameObject.
- From the dropdown, choose your
GoToScenefunction. - Type in the name of the page (e.g.,
Page1).
Repeat the process for the Info button and the navigation buttons on each page (Next, Previous, Home). This way, Unity knows which scene to load whenever a button is clicked.
Populating the Scene List
Unity can only load scenes that are included in the Build Settings. Make sure all your pages (Menu, Page1–Page4, Info, etc.) are added to the build scene list. Otherwise, the navigation won’t work. To do that:
- Select the File menu.
- Click Build Profiles
- In the Build Profiles window, click Open Scene Lists
- Drag in your Scenes from your Assets folder
Testing the Navigation
Once everything is set up:
- Click the Info button → Unity loads the Info page.
- Click the Enter button → Unity loads Page 1.
- Use the Next, Previous, and Home buttons to navigate through all pages.
And just like that, your storybook app now has working page navigation!
Final Thoughts
With just a few lines of C# code, we’ve transformed a static picture book into an interactive story experience. Readers can now move seamlessly from page to page, making your story feel more like an app than a PDF.
This tutorial is part of the Hidden Quest series, where I show you how to repurpose a children’s storybook into an interactive Unity app.
👉 Next Step: If you’d like to add animations to bring your pages alive, check out my earlier tutorial: Animating a Children’s Storybook in Unity.
You can also grab the finished Hidden Quest demo app for free and explore it yourself — link in the description.
✅ By the end of this guide, you should feel confident wiring up page navigation in your own project. And remember: it only takes 10 lines of code to make your story interactive!
