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