Designing Rhythm Game Interfaces for Touchscreen Devices
Project Progress Report Members: Philip H. Peng Advisor: Dr. Stephen H. Lane CIS 400, Fall 2011, University of Pennsylvania
1 Presentation Overview 1) Introduction 2) Project Proposal 3) Related Work 4) Project Outline 5) Design – Interfaces 6) Prototype – Application Layout ReportProgress 7) Prototype – Demo Video (WIP)
8) Evaluation PhilipPeng,
9) Stretch Goals 400, CIS , Fall 10) Remaining Work
2011/12/07
2011
2
Introduction Rhythm Games: genre of music games, notes and hitboxes, mix of puzzle/action
Touchscreen Devices: devices that use
touch for default input
Progress ReportProgress
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
3
Rhythm Game Examples
Dance Dance Revolution Guitar Hero Progress ReportProgress
Beatmania IIDX AudioSurf
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
4
More Rhythm Game Examples
DJMax Technika Taiko no Tatsujin Progress ReportProgress
PaRappa the Rapper THE iDOLM@STER
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
5
Even More Examples!
Osu! Tatakae! Ouendan! Gitaroo Man Lives! Progress ReportProgress
Hatsune Miku: Project DIVA
Jubeat Plus
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
6
Question
Aren’t they all the same?
Progress ReportProgress
PhilipPeng, , CIS 400, CIS , Fall
Looks and usage may differ but 2011/12/07
ultimately all do the same thing
2011
7
Multi-Column Interface
Dance Dance Revolution Guitar Hero Progress ReportProgress
Beatmania IIDX AudioSurf
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
8
Multi-Column Interface
Dance Dance Revolution Guitar Hero Progress ReportProgress
Beatmania IIDX AudioSurf
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
9
Moving/Point Focus Interface
DJMax Technika Taiko no Tatsujin Progress ReportProgress
PaRappa the Rapper THE iDOLM@STER
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
10
Moving/Point Focus Interface
DJMax Technika Taiko no Tatsujin Progress ReportProgress
PaRappa the Rapper THE iDOLM@STER
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
11
Fullscreen Covered Interface
Osu ! Tatakae! Ouendan! Gitaroo Man Lives! Progress ReportProgress
Hatsune Miku: Project DIVA
Jubeat Plus
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
12
Fullscreen Covered Interface
Osu ! Tatakae! Ouendan! Gitaroo Man Lives! Progress ReportProgress
Hatsune Miku: Project DIVA
Jubeat Plus
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
13
Touchscreen Devices Why? - New technology, becoming common - Touch-driven input paradigm - Games need to be redesigned
- Android tablets, iPads, Windows 8 Progress ReportProgress
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
14
Project Proposal Goal: Design, prototype, and evaluate different rhythm games interfaces for touchscreen devices.
ReportProgress Approach: Create a rhythm game prototype for Android tablets that demos various game interfaces PhilipPeng, and collects usage data to evaluate their 400, CIS , Fall
effectiveness.
2011/12/07
2011
15
Related Work Wiimote + Dance Game “Understanding Visual Interfaces for the Next Generation of Dance-Based Rhythm Video Games” – University of Central Florida, Orlando, FL
External Multi-touch Panel + Turn-
Based Strategy Game ReportProgress “A Study on Multi-Touch Interface for Game” – Chung-Ang University, Seoul, Korea
Overlayed Multi-touch Screen + PhilipPeng, Real-Time Strategy Game 400, CIS , Fall “One-handed Interface for Multi-Touch Enabled Real-Time Strategy Games” –
University of California, Santa Cruz, CA 2011/12/07
2011
16
Project Outline 1) Design – Draft - Interface visualization? - Categorize/compare? - Reduce variables?
2) Prototype – Code Progress ReportProgress - Combined app? - What framework? - Common engine?
PhilipPeng,
3) Evaluation - Data 400, CIS , Fall - Measurable metrics?
- Sample surveys? 2011/12/07
- Compare trends?
2011
17
Design – Interfaces #1-4
Progress ReportProgress
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
18
Design – Interfaces #5-8
Progress ReportProgress
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
19
Prototype – Application Layout Android App Demo #1 #2 #3 Interface Common Notes Obj Music Player
Button Obj …
Progress ReportProgress
Timer Hitbox Obj Score Keeper Touch Handler PhilipPeng,
Data 400, CIS , Fall Tracker
Main Menu
2011/12/07
External 2011
Database 20
Prototype – Demo Video (WIP)
Beats2: prototypes
Progress ReportProgress
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
21
Evaluation Quantitative Measurements
- Attention load: - Button presses count - Button press average frequency
Progress ReportProgress
- Timing accuracy - Note hit/miss count - Note hit average score PhilipPeng,
400, CIS , Fall
- Demo #1 “Falling Notes” = comparison baseline
2011/12/07
2011
22
Evaluation Qualitative Surveys * = compare perceived results with qualitative results Criteria Description Rating
Did the demo require lots of skill (e.g. timing Challenge* Easy --> Hard
with hand-eye coordination)? Progress ReportProgress Did the demo require a high amount of Concentration* Low --> High attention (e.g. less focus on hitting the buttons)? Did you enjoy playing the demo (relative to the Fun Boring --> Fun
other demos)? PhilipPeng,
Did you find the demo’s interface intuitive and 400, CIS , Fall Mastery Easy --> Hard easy to learn/use? Did you find the demo’s interface and gameplay
Uniqueness Old --> New 2011/12/07
new and unique?
2011
23
Stretch Goals Unity3 - Port to Unity3 engine - Add touch gestures (hold, slide, etc.) - 2.5D graphics with perspectives - Desktop and iOS support?
Kinect/Wiimote - Supported via Unity3 plugin ReportProgress - Virtual touch grid (depth-based) - Different input, same overall interface
concepts PhilipPeng,
Beats2 400, CIS , Fall - Support alternate interfaces based on the
results of study and user feedback 2011/12/07
- Use same base engine
2011
24
Remaining Work Work Item Description Estimation Complete interface demos #2, 4, 6, 7, 8 Interface Requires modifying hitbox behaviour 3 weeks demos Modify graphics loader or add rotation support Rhythm game Add synchronized music player 3 weeks engine Add notes data parser (borrow from Beats?) Add data tracking/survey feedback system (use Data tracker 2 weeks Google Analytics or custom server?) ReportProgress Graphics and Create better, publishable graphics 1 week documentation Cleanup and comment code, write documents
Sample survey Selective surveying of friends and classmates 1 week PhilipPeng,
Mass survey Large-scale surveying via Market publishing 3 weeks 400, CIS , Fall Evaluation Statistical analysis on collected results 1 week
Report Write final report, update website 1 week 2011/12/07
2011
25
Questions?
Progress ReportProgress
PhilipPeng,
, CIS 400, CIS , Fall
2011/12/07
2011
26