Core Mechanic: Expanding

Enhancing Pippo Math: Creating a Polished Game Flow with Mission and Results Panels

One of the most important lessons I've learned during the development of Pippo Math is that great gameplay alone isn't enough. Players—especially young learners—need clear context and meaningful feedback to fully engage with the experience. Today, I want to share how I enhanced the overall game flow by implementing two crucial UI elements: the Mission Panel and the Results Panel.

The Mission Panel: Setting the Stage

Every good game needs to establish clear objectives from the start. For Pippo Math, I created a Mission Panel that:

• Introduces the player's goal in a child-friendly way
• Builds anticipation through a countdown sequence
• Creates a smooth transition into the AR gameplay

Implementation Process

The Mission Panel implementation involved both UI design and code development:

1. UI Setup: I designed a clean, papercut-style panel with mission text, a countdown display, and an "OK" button that matched the overall visual style of the game.

2. Behavior Logic: I created a dedicated MissionPanelManager.cs script to handle all panel behaviors. The key functionality includes:

// When player clicks the OK button
public void OnOkButtonClicked()
{
    if (countdownStarted) return;
    
    countdownStarted = true;
    okButton.gameObject.SetActive(false);
    missionText.gameObject.SetActive(false);
    countdownText.gameObject.SetActive(true);
    
    StartCoroutine(StartCountdown());
}

// Countdown sequence with dramatic timing
private IEnumerator StartCountdown()
{
    for (int i = countdownDuration; i > 0; i--)
    {
        countdownText.text = i.ToString();
        yield return new WaitForSeconds(1.0f);
    }
    
    countdownText.text = goText;  // Shows "GO!" text
    yield return new WaitForSeconds(goTextDisplayTime);
    
    missionPanel.SetActive(false);
    gameManager.StartGame();
}

The Results Panel: Meaningful Feedback

Equally important to how a game begins is how it ends. The Results Panel was designed to:

• Show performance metrics in a child-friendly way
• Motivate players to improve their scores
• Provide clear next steps (retry option)

Implementation Process

1. UI Design: I created a results box with percentage display, fraction showing correct answers out of total problems, hearts remaining indicator, and a restart button.

2. Score Calculation Logic: I enhanced the GameManager.cs script to handle results presentation:

void ShowResults()
{
    isGameActive = false;
    float percentage = (float)correctAnswers / totalProblems * 100f;
    
    if (resultsText != null)
    {
        resultsText.text = $"{correctAnswers}/{totalProblems}";
    }
    if (percentageText != null)
    {
        percentageText.text = $"{Mathf.RoundToInt(percentage)}%";
        percentageText.color = percentage >= passingScorePercentage ? goodScoreColor : badScoreColor;
    }
    
    if (heartsRemainingText != null)
    {
        heartsRemainingText.text = remainingLives.ToString();
    }
    
    // Display the Results Panel
    if (resultsPanel != null)
    {
        resultsPanel.SetActive(true);
    }
    
    answerManager.ClearAnswers();
}

Troubleshooting an Important Bug

While implementing the Results Panel, I encountered an important issue: the percentage calculation was based on questions attempted rather than total possible questions. For example, if a player answered 5 out of 7 questions correctly, they'd see 71% instead of the intended 50% (5 out of 10 possible questions).

This required a simple but critical change to ensure the calculation used the total number of problems as the denominator, giving players an accurate reflection of their overall performance rather than just their accuracy on attempted questions.

The Impact on Gameplay Experience

These two UI elements transformed Pippo Math from a collection of AR math exercises into a cohesive, game-like experience. The Mission Panel creates structure and purpose, while the Results Panel provides the satisfaction of seeing concrete progress.

During testing, I observed that children were more likely to replay the game when they received clear feedback on their performance. The percentage display and color-coding (green for good scores, red for scores that needed improvement) created an intuitive understanding of their performance without requiring adult interpretation.

Technical Insights

From a development perspective, these features reinforced important principles:

1. State Management: Clearly defining game states (pre-game, active gameplay, results) helped create a more stable experience.

2. Consistent Design Language: Using the same visual style and interaction patterns across all panels reduced cognitive load for young users.

3. Proper Feedback Timing: The transition timing between states proved crucial for maintaining engagement, with too quick or too slow transitions potentially breaking immersion.

The addition of these panels significantly elevated the quality of Pippo Math, creating a more complete and satisfying experience for young learners. Sometimes it's these "framing" elements, rather than the core gameplay itself, that can make the difference between an app that feels like a prototype and one that feels polished and professional.