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 Progress Report 7) Prototype – Demo Video (WIP) 8) Evaluation Peng, Philip 9) Stretch Goals Fall , CIS 400, 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 Progress Report Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 3 Rhythm Game Examples Dance Dance Revolution Guitar Hero Progress Progress Report Beatmania IIDX AudioSurf Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 4 More Rhythm Game Examples DJMax Technika Taiko no Tatsujin Progress Progress Report PaRappa the Rapper THE iDOLM@STER Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 5 Even More Examples! Osu! Tatakae! Ouendan! Gitaroo Man Lives! Progress Progress Report Hatsune Miku: Project DIVA Jubeat Plus Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 6 Question Aren’t they all the same? Progress Progress Report Philip Peng, Philip , CIS 400, Fall , CIS 400, 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 Progress Report Beatmania IIDX AudioSurf Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 8 Multi-Column Interface Dance Dance Revolution Guitar Hero Progress Progress Report Beatmania IIDX AudioSurf Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 9 Moving/Point Focus Interface DJMax Technika Taiko no Tatsujin Progress Progress Report PaRappa the Rapper THE iDOLM@STER Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 10 Moving/Point Focus Interface DJMax Technika Taiko no Tatsujin Progress Progress Report PaRappa the Rapper THE iDOLM@STER Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 11 Fullscreen Covered Interface Osu! Tatakae! Ouendan! Gitaroo Man Lives! Progress Progress Report Hatsune Miku: Project DIVA Jubeat Plus Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 12 Fullscreen Covered Interface Osu! Tatakae! Ouendan! Gitaroo Man Lives! Progress Progress Report Hatsune Miku: Project DIVA Jubeat Plus Philip Peng, Philip , CIS 400, Fall , CIS 400, 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 Progress Report Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 14 Project Proposal Goal: Design, prototype, and evaluate different rhythm games interfaces for touchscreen devices. Progress Report Approach: Create a rhythm game prototype for Android tablets that demos various game interfaces Peng, Philip and collects usage data to evaluate their Fall , CIS 400, 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 Progress Report “A Study on Multi-Touch Interface for Game” – Chung-Ang University, Seoul, Korea Overlayed Multi-touch Screen + Peng, Philip Real-Time Strategy Game Fall , CIS 400, “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 Progress Report - Combined app? - What framework? - Common engine? Peng, Philip 3) Evaluation - Data Fall , CIS 400, - Measurable metrics? - Sample surveys? 2011/12/07 - Compare trends? 2011 17 Design – Interfaces #1-4 Progress Progress Report Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 18 Design – Interfaces #5-8 Progress Progress Report Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 19 Prototype – Application Layout Android App Demo #1 #2 #3 Interface Common Notes Obj Music Player Button Obj … Progress Progress Report Timer Hitbox Obj Score Keeper Touch Handler Peng, Philip Data Fall , CIS 400, Tracker Main Menu 2011/12/07 External 2011 Database 20 Prototype – Demo Video (WIP) Beats2: prototypes Progress Progress Report Philip Peng, Philip , CIS 400, Fall , CIS 400, 2011/12/07 2011 21 Evaluation Quantitative Measurements - Attention load: - Button presses count - Button press average frequency Progress Progress Report - Timing accuracy - Note hit/miss count - Note hit average score Peng, Philip Fall , CIS 400, - 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 Progress Report 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)? Peng, Philip Did you find the demo’s interface intuitive and Fall , CIS 400, 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 Progress Report - Virtual touch grid (depth-based) - Different input, same overall interface concepts Peng, Philip Beats2 Fall , CIS 400, - 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?) Progress Report 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 Peng, Philip Mass survey Large-scale surveying via Market publishing 3 weeks Fall , CIS 400, Evaluation Statistical analysis on collected results 1 week Report Write final report, update website 1 week 2011/12/07 2011 25 Progress Report, CIS 400, Fall 2011 Philip Peng, 2011/12/07 26 Questions?.