Hidden Quest: Speed Up Your Development with Prefabs in Unity

Updating your navigation buttons across dozens of scenes can be frustrating — especially when you have to change them one by one. Imagine having to update the same button across 30 pages of your interactive story app!

That’s where Unity Prefabs come in.

In this tutorial, you’ll learn how to use Prefabs to save time, stay organized, and speed up your story app development.

If you missed the previous tutorial on setting up page navigation, read or watch it here: Hidden Quest: From Picture Book to Playable Story – Adding Page Navigation in Unity. It provides helpful context before diving into Prefabs.

What Are Prefabs?

A Prefab is like a master copy of a game object in Unity.
Once you create a Prefab, you can reuse it anywhere in your project — and if you make changes to the master copy, all its instances automatically update across every scene.

Why Prefabs Matter

Prefabs are a game-changer for interactive story apps because they:

• Save hours of repetitive setup

• Keep your scenes consistent

• Allow global updates with one edit

• Make your project cleaner and easier to maintain

This is especially powerful for projects like story apps, where you often reuse the same UI buttons, navigation elements, or character objects across multiple pages.

Step 1: Clean Up Your Scenes

Before creating Prefabs, it’s best to start fresh.

1. Remove all page controller game objects that contain your navigation script from each scene.
2. Keep the navigation buttons (Home, Next, Previous) on Page 1 — but remove their click events.
3. We’ll use these buttons to create our Prefabs.

Step 2: Set Up a Prefabs Folder

While not required, it’s best practice to keep your Prefabs organized.

• In your Assets folder, create a subfolder named Prefabs.
• This will store all your reusable objects — for example, your Home, Next, and Previous buttons.

You can also store other Prefabs here later (for example, character sprites, sounds, or UI panels).

Step 3: Create Your Page Navigation Button Prefabs

Now, let’s create Prefabs for each button.

1. In your Hierarchy, unhide any hidden buttons (for example, your Previous button).
2. Drag each button from the Hierarchy into your Prefabs folder in the Project window.
   • Start with the Next button.
   • Then repeat for Home and Previous buttons.

✅ You’ll notice that the button names turn blue in the Hierarchy.
That colour change means the object is now a Prefab instance — linked to its master copy in your Prefabs folder.

You now have:

• Master copies (in the Prefabs folder)
• Instances (blue copies in your Hierarchy)

Step 4: Add Navigation Logic to Your Prefabs

Currently, the buttons are reusable — but they don’t yet handle navigation. Let’s fix that by adding the navigation controller logic directly into the Prefabs.

Editing the “Next” Button Prefab

1. Double-click the Next Button Prefab to open it in isolation mode.
2. Create an empty GameObject and rename it NavController.
3. Attach your navigation script (e.g., HiddenQuestController) to the NavController.
   • Drag the script into the Inspector to attach it.
4. Select the Next Button, go to its Button component, and click the + icon under OnClick().
5. Drag the NavController into the empty field that appears.
6. Choose the script and select the function, e.g. GoToScene.

Leave the scene name field blank for now — because it will change depending on which page the button is on (e.g., Page 1 → Page 2, Page 2 → Page 3, etc.).

Editing the “Home” Button Prefab

Repeat the process for your Home button:

1. Double-click to open the Home Button Prefab.
2. Create an empty GameObject called NavController.
3. Attach the same navigation script.
4. Under the button’s OnClick() list, drag the NavController in, select the script, and choose the GoToScene function.
5. This time, enter “MenuScene” (or your menu scene name) in the scene name field — since the Home button should always go to the main menu.

Editing the “Previous” Button Prefab

Repeat again for the Previous button:

1. Create a NavController object.
2. Attach your navigation script.
3. Set up the button’s OnClick event with the GoToScene function.
4. Leave the scene name field empty for now — we’ll specify the previous scene name when placing it later.

This initial setup might feel long, but it’s a one-time process. From here on out, you’ll simply reuse these Prefabs instead of rebuilding your navigation each time.

Step 5: Add Prefabs Back Into Your Scenes

Now that your Prefabs are ready:

1. Exit Prefab editing mode.
2. In Page 1’s Hierarchy, delete the old navigation buttons.
3. From your Prefabs folder, drag the Home and Next buttons into your scene.
   • They’ll appear exactly where they were originally created.
   • You can reposition them freely — changes won’t affect the master Prefab.
4. For Page 1’s Next button, enter “Page2” (or your next scene’s name) in the scene name field.

Repeating for Other Pages

• Open Page 2, and drag in the Home, Next, and Previous buttons from the Prefabs folder.
• Reposition them if needed.
• Enter scene names:
  • Next: Page3
  • Previous: Page1

Repeat the same process for Pages 3 and 4.
Skip the Next button on the last page if it’s not needed.
✅ Don’t forget to save each scene when finished.

Step 6: Test Your Navigation

Click Play to test your app.

• Click Home → returns to your main menu.
• Click Next and Previous → move between scenes smoothly.

Everything should now work exactly as before — but with far less duplication and easier future maintenance.

Step 7: Update Once, Reflect Everywhere

Now for the magic of Prefabs:

If you want to change the text, style, or functionality of a button — just edit the Prefab once, and every instance will update automatically.

For example:

1. Double-click the Previous button Prefab.

2. Select the text child object.

3. Change its label from “Previous” → “Prev.”

4. Exit Prefab mode.

✅ All buttons in all scenes now show “Prev.” instantly!