¶ AR Symbol Grid Puzzle
Media Design 2 – the studio, SoSe 2025
| Name | Matriculation number | Role |
|---|---|---|
| Miriam Jüngling | ****641 | Dev, Game Design, Art, … |
¶ Overview
AR Puzzle Escape Room is an interactive augmented reality experience that blends digital puzzles with physical space. Players use their mobile devices to discover hidden symbols through AR markers, then solve arrangement puzzles to progress through multiple stages of increasing complexity.
The game combines the immersive physical exploration of traditional escape rooms with the engaging visual feedback of digital puzzles, creating a unique hybrid experience that's accessible on any modern smartphone or tablet.
¶ Key Features
- AR Symbol Discovery: Find and scan AR markers to reveal hidden symbols
- Intuitive Drag-and-Drop Interface: Arrange symbols in the correct pattern to solve each puzzle
- Progressive Difficulty: Multiple puzzle stages with increasing complexity
- Hint System: Get clues about symbol placement with our paper note hint system
- Fallback Mode: Can't scan markers? Manual discovery option available
- Responsive Design: Works on smartphones and tablets in any orientation
¶ Setup
1. Print QR-Code and AR Markers
2. Place QR-Code and AR Markers in the room
¶ How It Works
1. Scan AR Markers: Point your device at AR markers in the physical space
2. Discover Symbols: Each marker reveals a special symbol in the UI
3. Solve the Puzzle: Drag the symbols to their correct positions in the grid
4. Progress Through Stages: Complete all puzzles to finish the experience
¶ Demo and Media
¶ Video Demo
[video]
*Walkthrough of the AR Puzzle game in action, from symbol discovery to puzzle solution*
¶ Gallery
|
|
|
|
|
¶ Live Demo
For the best experience, use this demo on a mobile device and allow camera access when prompted.
Experience the AR Puzzle directly in your browser:
https://mirih2o.github.io/escaperoom_ar/ or via QR code
AR Markers:
|
|
|
¶ Competitor Analysis
¶ SWOT
| Strengths | Weaknesses | Opportunities | Threats |
|
Unique riddle gameplay Custom riddle design Focused scope Can be tailored for other rooms |
Limited team size Budget constraints No multiplayer Internet connection needed |
Growing market for AR/escape room apps Integration with physical props |
Established competitors Rapid tech changes |
¶ Unique Selling Point (USP)
- Seamless integration of physical symbols and digital puzzles.
- Designed specifically for live escape room enhancement.
- Lightweight, fast onboarding, minimal device requirements.
¶ Competitors
- Exit: The Game (App)
- Mystery Escape Room companion apps
- AR puzzle games (e.g. Mysterium AR)
- Generic puzzle/escape room apps
¶ Target Audience
¶ Personas
- Escape Room Enthusiast: 25-40, loves puzzles, tech-savvy, expects innovation.
- Casual Player: 18-35, visiting with friends/family, prefers easy onboarding.
- Facilitator: Staff member, wants reliable, simple tools.
¶ Use Scenarios
- Group arrives at escape room, find printed QR code and symbols. They scan the QR code to open the app, then use the app to scan each symbol and collaborate to solve the grid-based riddles.
- Facilitator sets up the game by printing and placing the symbols, ensures symbols and app function, and monitors progress.
¶ Project Management
¶ Budget
| Item | Cost (€) | Description |
|---|---|---|
| Development | 3600 | 90h at €40/h |
| Asset Design | 500 | Vector graphics |
| Testing Devices | 300 | Smartphone |
| Deployment/Server | 0 | Free hosting (GitHub) |
| Physical Setup | 5 | Printed symbols |
| Miscellaneous | ||
| Total | 4405 |
¶ Workload
| Phase | Hours | Description |
|---|---|---|
| Design & Planning | 15 | Gameplay, riddle, assets |
| Prototyping | 10 | Draggable objects, Proof-of-concept |
| Core Development | 30 | App logic, grid, riddle integration |
| Asset Creation | 10 | Symbol vector graphics, QR code |
| Testing & Refinement | 10 | QA, bug fixes, feedback integration |
| Documentation | 10 | Project documentation, wiki |
| Deployment | 5 | GitHub pages |
| Total | 90 |
¶ Development Process
|
Finding the idea, first sketches |
 |
||
| Setup: digital mockup |
 |
||
| Riddle flow: digital mockup |
 |
 |
 |
| Prototype in JS without symbol scanning |
 |
||
| Prototype in Unity | |||
| Prototype in JS with full functionality | |||
¶ Technical Details
¶ Architecture Overview
The AR symbol grid puzzle is built with web technologies to ensure maximum accessibility:
- Frontend: HTML5, CSS3, Tailwind, React 18.2 (via CDN)
- AR Technology: AR.js and Three.js (r128) for marker detection
- User Interface: Custom-designed UI with responsive controls
- Data Flow: Local state management with React hooks
¶ Key Components
1. AR Detection System: Identifies markers through the device camera
2. Symbol Management: Handles discovery and positioning of puzzle symbols
3. Grid Logic: Validates symbol positions against winning configurations
4. State Controller: Manages game progression through multiple stages
5. Fallback System: Provides alternative gameplay when AR detection fails
¶ Visual and atmospheric Design Principles
The visual and atmospheric design of the AR Puzzle Escape Room is carefully crafted to create an engaging and immersive experience that blends the physical and digital worlds. Key decisions include:
1. Antique Aesthetic: The game adopts a warm, inviting color palette of browns and creams, reminiscent of vintage detective stories. This creates a sense of nostalgia and mystery, drawing players into the puzzle-solving experience.
2. Paper Note Hints: Hints are presented on stylized "paper notes" with decorative tape and handwritten fonts. This design choice reinforces the escape room theme, making clues feel like discovered artifacts rather than simple UI elements.
3. Symbol Design: Each puzzle symbol (flame, gear, eye, etc.) is represented by a distinct emoji with a vibrant color. This ensures clear visual communication and allows players to quickly identify and differentiate between symbols.
4. Responsive Layout: The interface adapts seamlessly to various screen sizes and orientations, ensuring a consistent and enjoyable experience across devices. Touch-optimized controls and a clean layout make the game accessible and intuitive.
5. Subtle Animations and Transitions: Subtle animations and transitions provide visual feedback and enhance the sense of immersion. These effects are carefully chosen to be informative without being distracting, maintaining a smooth and engaging gameplay experience.
6. Marker-Triggered Symbol Reveal: Scanning real-world markers unlocks unique 2D symbols within the interface using AR technologies, connecting the player's environment and the puzzle's core elements. This marker-triggered reveal enhances the sense of discovery and sets the stage for spatial reasoning within the puzzle grid.
¶ Development Notes
¶ Current Status
- Stage 1 fully implemented (3 symbols)
- Stage 2 fully implemented (6 symbols)
- Further stages possible
¶ Known Limitations
- Internet connection required
- Marker detection requires stable lighting
- Older devices may experience frame drops
- Grid snapping may cause problems on small screens
¶ Future Features?
- More stages
- Custom puzzle creator
- 3D object integration (AR)
- Multiplayer features