Core Mechanics: Building the Answer Bubble

In Pippo Math, players interact with floating Answer Bubbles in an AR space. These bubbles display possible answers, and players must aim and select the correct one to solve the problem.

To create this mechanic, I designed a 3D Answer Bubble Prefab that dynamically spawns with each math problem. Here’s how I built it using Unity, C#, and TextMeshPro:

1. Creating the Answer Bubble Object

To start, I needed a simple, readable 3D object that players could interact with:

1. Create a sphere:

  • Add 3D Object Sphere
  • Scale it

2. 

Add a Text Component for the Answer:

  • Add Text
  • Adjust its position so it’s clearly visible in front of the sphere.
  • Set the font size for readability, align the text to center, and change to readable color.
























2. Writing the Answer Bubble Script

  • Setting up answer:
public void SetAnswer(int value, bool correct)
{
    answerValue = value;
    isCorrect = correct;
    answerText.text = value.ToString();
}

Assigns the number value to the Answer Bubble and determines if it’s the correct answer.

  • Checking if the answer is correct:
public bool IsCorrect()
{
    return isCorrect;
}

This function allows the game to check if the player selected the right answer when they interact with a bubble.

  • Destroying the bubble on interaction:
public void Hit()
{
    gameObject.SetActive(false);
    Destroy(gameObject, 0.5f);
}

When a player selects a bubble, it disappears and is destroyed after 0.5 seconds, giving visual feedback.

  • Keeping the bubble in consistent position:
void Update()
{
    transform.LookAt(Camera.main.transform);
    transform.Rotate(0, 180, 0);
}

Ensures that the answer text is always readable, even when the player moves around the AR space.

 3. Turning the Answer Bubble into a Prefab

To easily reuse Answer Bubbles, I converted it into a reusable Prefab:

  1. Drag AnswerBubble from the Hierarchy into the Project panel.

  2. I deleted the original AnswerBubble from the scene, as the game dynamically spawns new ones.


Troubleshooting

While testing, I ran into a few issues that prevented the bubbles from appearing correctly. Here’s what I found and fixed:

1. Scale Issue:

  • The Answer Bubbles were too large, making them appear off-screen or clipped by the camera.
  • Solution: Resized the bubbles to around (0.5, 0.5, 0.5).

2. Missing Collider (Is Trigger):

  • Without a collider, the bubbles couldn’t detect player interactions.
  • Solution: Added a Sphere Collider and enabled "Is Trigger".

3. Layer Issue:

  • The Answer Bubbles were accidentally set to the UI layer, preventing them from rendering properly in AR.
  • Solution: Changed the layer to "Default" to ensure proper visibility.
After applying these fixes, the Answer Bubbles spawned correctly, responded to player actions, and seamlessly integrated into the gameplay.

Insights

Throughout the development of the Answer Bubbles, I learned the importance of testing and iteration in AR environments. Small details, like adjusting the scale of the bubbles, had a big impact on visibility, ensuring they appeared correctly in the AR space. Adding a Sphere Collider with the Is Trigger option enabled was crucial for detecting player input, making the interaction feel smooth and responsive. Another key takeaway was understanding the difference between Unity's UI layer and the Default layer. Default layer ensured the Answer Bubbles rendered properly in 3D space. These insights reinforced the value of refining mechanics step by step, allowing me to create a more polished and engaging experience for players.

Comments

Post a Comment

Popular posts from this blog

Creating UI Elements

Image
Revamping Pippo Math After receiving feedback from my lecturers, I realized Pippo Math needed a stronger visual identity — one that felt playful, engaging, and reflective of its educational purpose . The original minimalist design, while clean, lacked the excitement that would captivate young learners. This led me to completely revamp the game’s aesthetic, embracing a papercut art style that added warmth, creativity, and personal branding to the app. Why Papercut? The choice of a papercut style came naturally when I reflected on the connection between math and paper . From scribbling equations in notebooks to folding paper into shapes, paper has always been part of the math learning experience. The layered, handcrafted feel of the papercut style added a sense of depth and texture , making each screen more inviting and immersive. It also aligned with the idea of hands-on learning , reinforcing the game’s interactive nature. Inspirations from Pinterest Building the UI Adobe Illustrator...
Read more

The User

Image
Who are Pips? In Pippo Math, the users will affectionately be called Pips. They  are children aged 6 to 10 who are eager to learn but often struggle with traditional math methods. Many Pips find math difficult, boring, or even frustrating , leading to disengagement and math anxiety. Pips Learning Behavior Short Attention Spans Pips lose focus quickly with repetitive exercises. Math Anxiety Many Pips feel intimidated by numbers and equations. Preference for Interactive Learning Pips engage more with hands-on, movement-based activities . Love for Gamification Rewards, challenges, and fun visuals increase motivation. User Persona The use of persona is to represent the needs of a larger group of users whose goals and characteristics are the similar. It reflects the lifestyle of users and give an idea of how to meet users' needs and challenges. As I create the persona, I use the group of age that needs the app more. Name: Sophia Wang Age: 6 Education: 1st grade Occupation: Student Goal...
Read more

Core Mechanics: Building the Math Problem Generator

Image
One of the key mechanics in Pippo Math is the ability to generate random math problems for players to solve. To make this happen, I created a Math Problem Generator in Unity using C# and TextMeshPro for UI text handling. Here’s a step-by-step look at how I built this core feature: 1. Setting Up the Equation Display The first step was to create a space in the UI where the math problems would appear: In Unity, I added a TextMeshPro Text to the scene, naming it EquationText . This text dynamically updates with new math problems as the game progresses. The text field was left empty in the editor because equations would be populated through code. 2. Creating the Math Problem Generator Next, I built a script to handle the generation of random math equations. Create the Script: In the Project panel , I right-clicked > Create > C# Script and named it MathProblemGenerator . Write the Code: Inside the script, I added logic to randomly generate addition and subtra...
Read more