Hidden Quest: Bringing Story Text into a Children’s Book App

In this post, we continue the Turning a Book into an App series using the demo children’s story Hidden Quest. This time, the focus is on one of the most important parts of any storybook app: adding readable, well-positioned story text.

This article is designed to support the embedded video tutorial above. In the video, I walk through how to add narrative text to multiple pages of a children’s book app using Unity’s UI system and TextMesh Pro. Rather than repeating every click and setting, it gives you the context, key ideas, and workflow so you can follow along comfortably while watching the video.

What You’ll Learn in This Tutorial

By following along with the video, you’ll learn how to:

  • Add story text to a children’s book app using TextMesh Pro

  • Use UI panels as text backgrounds for better readability

  • Position and anchor text so it doesn’t interfere with navigation buttons

  • Auto-size text to prevent cut-offs across different screen sizes

  • Style text using font size, alignment, colour, and spacing

  • Highlight words or phrases using TextMesh Pro tags

This workflow is aimed at authors, illustrators, educators, and publishers who want to explore interactive storytelling without needing advanced coding skills.

The Core Approach

The basic idea is simple:

  1. Create a UI Panel to act as the text background and container

  2. Add a TextMesh Pro object as a child of the panel

  3. Stretch the text to fill the panel and add padding for readability

  4. Adjust anchors depending on where the text sits on the page

Using a panel as the parent gives your text an invisible boundary. Even when the panel is transparent, it helps prevent text from overlapping artwork or navigation elements.

Styling and Flexibility

TextMesh Pro makes it easy to adapt your text to different pages and layouts. In the video, you’ll see examples of:

  • Bottom-aligned text panels

  • Centre-aligned narrative blocks

  • Top-corner text that blends into the illustration

You’ll also see how small changes to transparency, text colour, and material presets can dramatically improve readability while keeping the focus on the artwork.

Auto-sizing is used throughout to ensure the text adapts cleanly to different screen sizes — an important consideration for storybook apps.

Working Across Multiple Pages

Each page in Hidden Quest uses the same core setup, with small adjustments to anchoring, alignment, and styling. This makes it easy to maintain consistency while still adapting the layout to each illustration.

If your text placement stays the same across pages, you can take this a step further by turning your text panel into a Prefab and reusing it throughout your book.

Final Thoughts

Adding story text to a children’s book app in Unity doesn’t need to be complicated. With a clear structure, TextMesh Pro, and a few thoughtful layout choices, you can create text that’s readable, flexible, and well integrated with your illustrations.

Watch the video above to see the full process in action, and check out the linked prefab tutorial if you’d like to speed up your workflow even further.

This post is part of the Hidden Quest series, where we explore practical steps for turning a printed children’s book into an interactive app.

Continue reading