Building Shape Popper: A Kid-Friendly iOS Game with SwiftUI & Claude Code

Building Shape Popper: A Kid-Friendly iOS Game with SwiftUI & Claude Code

A step-by-step case study on building Shape Popper — a high-performance, accessible iOS game designed for children ages 4-6. Learn how Claude Code, SwiftUI's Canvas API, and MVVM architecture come together to create smooth 60fps animations and an engaging gameplay experience.

TL;DR: Key Takeaways

• Target Audience: Ages 4-6, designed with accessibility and kid-friendly UX in mind
• Performance: 60fps animations using SwiftUI Canvas API for optimal rendering
• Architecture: Folder-by-Feature structure with MVVM pattern for SpriteKit/SwiftUI coordination
• Accessibility: Full VoiceOver support, Dynamic Type, and color-blind friendly design
• Development: Built with Claude Code for rapid iteration and clean code generation
• Tech Stack: SwiftUI, SpriteKit, MVVM, Canvas API, iOS Accessibility APIs

The Challenge: Building a Game Kids Actually Want to Play

Creating a game for young children (ages 4-6) requires balancing multiple constraints:

• Performance: Smooth 60fps animations to keep kids engaged
• Accessibility: VoiceOver support, Dynamic Type, and intuitive touch interactions
• Educational Value: Progressive difficulty that grows with the child
• Kid-Friendly Design: Large touch targets, clear visual feedback, and simple interactions

Shape Popper solves all of these challenges using modern SwiftUI patterns and Claude Code for rapid development.

The Tech Stack

Architecture: Folder-by-Feature with MVVM

The project follows a Folder-by-Feature structure, organizing code by game features rather than by technical layers. This makes the codebase more maintainable and easier to navigate.

ShapePopper/
├── Features/
│   ├── Game/
│   │   ├── GameView.swift
│   │   ├── GameViewModel.swift
│   │   └── GameModels.swift
│   ├── Shapes/
│   │   ├── ShapeRenderer.swift
│   │   ├── ShapeViewModel.swift
│   │   └── ShapeTypes.swift
│   └── Score/
│       ├── ScoreView.swift
│       └── ScoreViewModel.swift
├── Core/
│   ├── Canvas/
│   │   └── CanvasRenderer.swift
│   └── Accessibility/
│       └── AccessibilityManager.swift
└── Resources/
    ├── Assets.xcassets
    └── Sounds/

Why MVVM for SpriteKit/SwiftUI Coordination?

MVVM (Model-View-ViewModel) was chosen specifically to bridge SpriteKit's imperative game engine with SwiftUI's declarative UI framework:

• ViewModel: Manages game state, shape positions, and score logic
• View: SwiftUI components that observe ViewModel state
• Model: Pure data structures for shapes, scores, and game configuration

This separation allows SpriteKit to handle high-performance rendering while SwiftUI manages the UI layer, with the ViewModel coordinating between them.

Canvas-Based Rendering: The Performance Secret

The game uses SwiftUI's Canvas API for rendering shapes instead of traditional VStack layouts. Here's why:

Canvas Rendering Implementation

struct ShapeCanvas: View {
    @ObservedObject var viewModel: GameViewModel
    
    var body: some View {
        Canvas { context, size in
            // Render all shapes in a single draw pass
            for shape in viewModel.activeShapes {
                context.fill(
                    Path(shape.path),
                    with: .color(shape.color),
                    style: FillStyle(eoFill: false, antialiased: true)
                )
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .onReceive(viewModel.timer) { _ in
            viewModel.updateShapes()
        }
    }
}

TimelineView for Smooth Animations

For time-based animations, TimelineView ensures smooth frame updates:

TimelineView(.periodic(from: .now, by: 0.016)) { timeline in
    ShapeCanvas(viewModel: viewModel)
        .onChange(of: timeline.date) { newDate in
            viewModel.updateAnimationFrame(at: newDate)
        }
}

This creates a 60fps update loop (1/60 ≈ 0.016 seconds per frame) that keeps animations buttery smooth.

Progressive Difficulty System

The game adapts to the child's skill level with a progressive difficulty system:

Adaptive Algorithm: The game tracks success rate and automatically adjusts difficulty:

• High Success Rate (>80%): Increases speed and shape count
• Low Success Rate (<50%): Reduces speed, adds more time
• Balanced (50-80%): Maintains current difficulty

Key Features

🎨 60fps Animations

Using Canvas API ensures consistent 60fps rendering, even with multiple animated shapes on screen. The game maintains smooth performance across all iOS devices.

♿ Accessibility First

• VoiceOver Support: Full screen reader compatibility
• Dynamic Type: Text scales with system accessibility settings
• Color Blind Friendly: Uses shape patterns, not just colors
• Large Touch Targets: Minimum 44x44pt touch areas for small fingers
• Haptic Feedback: Tactile responses for shape interactions

👶 Kid-Friendly Design

• Simple Gestures: Single tap to pop shapes
• Clear Visual Feedback: Immediate animations on interaction
• No Text Required: Icon-based navigation for pre-readers
• Parental Controls: Time limits and difficulty settings
• No Ads or In-App Purchases: Pure gameplay experience

Building with Claude Code

Claude Code accelerated development significantly:

1. Initial Scaffold: Generated complete MVVM structure from a single prompt
2. Canvas Implementation: Provided optimized rendering code with performance tips
3. Accessibility Integration: Added VoiceOver and Dynamic Type support automatically
4. Game Logic: Implemented progressive difficulty algorithm with clear documentation

Development Time: ~3 hours from concept to playable prototype using Claude Code.

What I Learned

Shape Popper was a rewarding educational exercise in modern iOS development that reinforced several key principles:

• Performance Matters: Canvas API is essential for smooth game animations
• Accessibility is Non-Negotiable: Every interaction must work with VoiceOver
• Progressive Difficulty: Adaptive algorithms keep kids engaged longer
• MVVM Bridges Frameworks: Clean architecture makes SpriteKit + SwiftUI work seamlessly
• Claude Code Accelerates: Rapid iteration with AI assistance enables faster prototyping

View the Project

📦 GitHub Repository — View the complete source code
🎮 Demo Video — Watch gameplay in action

---

Built by Suneet Malhotra with Claude Code | Sr. Manager, Test Engineering at Motorola Solutions | Exploring AI-driven development for mobile games

Connect: GitHub | Portfolio | LinkedIn