Core Mechanic: Game Functions

The next challenge was brining everything together into a fully functional game loop. In this blog, I’ll walk through the process of creating the Answer Manager, Player Controller, and Game Manager while setting up the UI for a smooth experience.

Creating the Answer Manager

The Answer Manager script dynamically spawns answer bubbles with one correct answer and randomized wrong answers, ensuring a unique experience each round.

How It Works:

  1. Retrieves the correct answer from the Math Problem Generator.
  2. Generates wrong answers while ensuring no duplicates.
  3. Randomizes answer positions around the player in AR.
  4. Clears old bubbles before generating new ones.

Key Codes

1. Correct answer retrieval:

int correctAnswer = problemGenerator.GetCorrectAnswer();

Gets the correct answer for the current problem.

2. Wrong answer generation:

wrongAnswer = correctAnswer + Random.Range(1, 5) * (Random.value > 0.5f ? 1 : -1);

Creates wrong answers close to the correct one, ensuring a balance between challenge and accessibility.

3. Random Positioning:

Vector3 position = arCamera.position + new Vector3(
    Mathf.Cos(angle) * distance,
    height,
    Mathf.Sin(angle) * distance
);

Spawns each answer bubble at a random position around the player, using trigonometry to calculate the x, y, and z positions.


Creating the Player Controller

To allow players to aim and shoot answers, I created a simple Player Controller that uses Raycasting. When the player taps the Shoot Button, the game casts a ray from the camera to check if it hits an answer bubble. If a bubble is hit, it processes the answer.

Key Codes

1. Raycasting to detect bubbles:

Ray ray = new Ray(arCamera.transform.position, arCamera.transform.forward);
RaycastHit hit;

if (Physics.Raycast(ray, out hit, maxRayDistance))
{
    AnswerBubble bubble = hit.collider.GetComponent<AnswerBubble>();

Casts a ray from the camera forward, checking if it hits an Answer Bubble.

2. Shooting Mechanic:

if (shootButton != null)
{
    shootButton.onClick.AddListener(Shoot);
}

Links the Shoot Button to trigger the raycast and process the selected bubble.

Creating the Game Manager

With the core mechanics in place, I needed a Game Manager to handle:
  • Starting and resetting the game
  • Updating the timer
  • Tracking lives
  • Processing answers and handling game over conditions

Key Codes

1. Game initialization:

void StartGame()
{
    remainingTime = timeLimit;
    remainingLives = maxLives;
    isGameActive = true;

    UpdateHeartsDisplay();
    GenerateNewProblem();
}

Resets game variables, updates the heart UI, and generates the first problem when the game starts.


2. Time Management:

remainingTime -= Time.deltaTime;
timeText.text = $"Time: {Mathf.Ceil(remainingTime)}";

Updates the timer each frame, adding urgency to gameplay.

3. Answer Processing:

public void ProcessAnswer(bool isCorrect)
{
    if (isCorrect)
    {
        ShowFeedback(true);
        Invoke("GenerateNewProblem", 1f);
    }
    else
    {
        remainingLives--;
        UpdateHeartsDisplay();
        if (remainingLives <= 0) GameOver();
    }
}

Processes whether the player got the answer right or wrong, updating the UI and handling game over if lives run out.

4. Game Over Handling:

void GameOver()
{
    isGameActive = false;
    gameOverPanel.SetActive(true);
    answerManager.ClearAnswers();
}

Disables gameplay and shows the Game Over Panel when lives reach zero or time runs out.

Building the Game UI

To keep track of progress, I added a simple UI with:
  • Hearts representing lives

  • Timer to add urgency


  • Feedback messages to guid players


  • Game Over Panel with a restart button


Insights

One of the biggest takeaways was the importance of game flow control, as the Game Manager streamlined the process, making it easier to handle rounds, track time, and manage lives. The addition of instant feedback through visual cues like "Correct!" and "Wrong!" added a rewarding layer to the gameplay, making learning feel more interactive. Balancing difficulty was another key insight, with wrong answers generated close to the correct one to keep the challenge engaging without being frustrating. The use of Raycasting for AR interaction made selecting answers feel intuitive, especially when paired with the Aim Reticle for guidance. These systems combined to create a math learning experience that felt smooth, dynamic, and fun, marking a crucial step in making Pippo Math both educational and enjoyable for kids.

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