Media Design 2 – the studio, SoSe 2025
| Name | Matriculation number | Role |
|---|---|---|
| Miriam Jüngling | ***7641 | Dev, Game Design, Art, Documentation … |
¶ 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 complex puzzles, tech-savvy, expects innovation and challenging gameplay.
Needs: Fast onboarding, minimal hints, advanced riddle logic, smooth scanning and responsive controls. - Casual Player: 18-35, visiting with friends/family, seeking fun and social engagement, prefers easy onboarding.
Needs: Clear instructions, visual guidance, rewarding feedback, option for hints, easy retry/reset. - Child Player: 8-14, young participant accompanied by adults, enjoys visual and playful puzzles, may have limited reading and puzzle solving skills.
Needs: Simple UI, colorful design, forgiving error handling, step-by-step progress, encouragement for experimentation. - Facilitator: Staff member, wants reliable, simple tools.
Needs: Reliable scanning, simple setup, quick reset for next group, minimal support required.
¶ 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, monitors progress and provides troubleshooting.
¶ 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 | 10 | Printed symbols |
| Miscellaneous | ||
| Total | 4410 |
¶ 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, working title “The console of the lost colony” |
 |
||
|
Setup: digital mockup Using self made vector graphics for the symbols (eye, gear, flame) |
 |
||
| Riddle flow: digital mockup |
 |
 |
 |
|
Prototype in Unity (discarded, |
 |
 |
 |
|
Prototype in HTML/JS with puzzle logic, without symbol scanning Using emojis for the symbols in the UI |
 |
 |
 |
|
 |
 |
||
| Final version with symbol scanning, puzzle logic, | See Demo & Media | ||
¶ 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 via camera
- User Interface: Custom-designed UI with responsive controls
- Data Flow: Local state management with React hooks
- Assets: Eye, Gear and Flame created as vector graphics with Inkscape
→ patt files for pattern recognition system, png files for printed markers
¶ 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