cpsc 427 video game programming - cs.ubc.ca
TRANSCRIPT
![Page 1: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/1.jpg)
© Alla Sheffer, Helge Rhodin
CPSC 427
Video Game Programming
Helge Rhodin
Human Computer Interaction
and User Experience
1
![Page 2: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/2.jpg)
© Alla Sheffer, Helge Rhodin
Observer Pattern – OOP
• Define a common interface
• All observers inherit from that interface
2
Called Subject
by GoF
![Page 3: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/3.jpg)
© Alla Sheffer, Helge Rhodin
Lambda Functions
Definition:
• auto y = [] (int first, int second) { return first + second; };
Call: int z = y(1+3);
• Infers return type for simple functions (single return statement)
• otherwiseauto y = [] (int first, int second) -> int { return first + second; };
• Can capture variables from the surrounding scope.
int scale;auto y = [] (int first, int second) -> int { return scale*first + second; };
3auto y = [&] (int first, int second) -> int { return scale*first + second; };
![Page 4: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/4.jpg)
© Alla Sheffer, Helge Rhodin
Observer Pattern – With Functions
• function with matching signature instead of class
4
?
![Page 5: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/5.jpg)
© Alla Sheffer, Helge Rhodin
A function that accepts a function
• Using std::function
• Using templates
• use templates to accept any argument with an operator()
5
![Page 6: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/6.jpg)
© Alla Sheffer, Helge Rhodin
Observer Pattern – With Functions
• function with matching signature instead of class
6
?
std::vector<std::function<void ()>> callbacks
attach(std::function<void ()> fn)
callbacks
![Page 7: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/7.jpg)
© Alla Sheffer, Helge Rhodin
A0 Important!!! Make use of &
Animal animal = ECS::registry<Animal>.get(fish);
animal.name = "Big " + animal.name;
• a copy
Animal& animal = ECS::registry<Animal>.get(fish);
animal.name = "Big " + animal.name;
• a reference
Animal animal = ECS::registry<Animal>.get(fish);
ECS::registry<Animal>.get(fish) = "Big " + animal.name;
• a map lookup, too complicated & slow!!7
![Page 8: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/8.jpg)
© Alla Sheffer, Helge Rhodin
A1 Released
• Collision
• Visual Debugging
• Very important for your team project too
• AI
• The AI task is simple, no need to wait for the Thursday lecture
8
![Page 9: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/9.jpg)
© Alla Sheffer, Helge Rhodin
CPSC 427
Video Game Programming
Helge Rhodin
Human Computer Interaction
and User Experience
9
![Page 10: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/10.jpg)
© Alla Sheffer, Helge Rhodin
Technical Designs
10
![Page 11: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/11.jpg)
© Alla Sheffer, Helge Rhodin
The Light Gun
11
http://www.arcadecab.com/News.htm
Classic: NES Zapper
![Page 12: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/12.jpg)
© Alla Sheffer, Helge Rhodin
The Light Gun (first glance)
• a laser?!
12
https://makingstudio.blog/2017/09/20/teardown-nintendo-zapper/
![Page 13: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/13.jpg)
© Alla Sheffer, Helge Rhodin
Principle I: Black&white target
https://mag.mo5.com/actu/101495/une-solution-pour-utiliser-les-light-guns-sur-les-tv-modernes/13
Normal frame Flash
![Page 14: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/14.jpg)
© Alla Sheffer, Helge Rhodin
The Light Gun
• the sensor (single-pixel-camera) is in the gun,
• receive light from the on-screen targets,
• flash the screen, and ??? 14
Light sensor!
laser
![Page 15: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/15.jpg)
© Alla Sheffer, Helge Rhodin
Principle II: Timing on Cathode Ray Tube (CRT) displays
15
![Page 16: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/16.jpg)
© Alla Sheffer, Helge Rhodin16
![Page 17: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/17.jpg)
© Alla Sheffer, Helge Rhodin17
![Page 18: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/18.jpg)
© Alla Sheffer, Helge Rhodin
Read the zoom chat?
https://github.com/tesseract-ocr/tesseract
• does optical character recognition
• works with c++
• works on windows and linux (not sure about mac)
• might be too slow?!
How to apply tesseract on a screen capture (zoom)?
• https://stackoverflow.com/questions/22924209/how-to-make-tesseract-ocr-read-from-coordinates-on-a-screen
18
![Page 19: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/19.jpg)
© Alla Sheffer, Helge Rhodin
Can we exploit the Zoom window?
• Multi player?
19
![Page 20: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/20.jpg)
© Alla Sheffer, Helge Rhodin
Read the zoom chat (hacks)
• Capture the screen
• https://github.com/smasherprog/screen_capture_lite
• Search for the zoom window
• Check for colored symbol
• red, green, gray, blue?
• only need to read a few pixels
• its fast!
• Recognize numbers?
• only 10 different ones, brute force?
20
![Page 21: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/21.jpg)
© Alla Sheffer, Helge Rhodin
Mouse gestures
Regression
• least squares fit
• linear, polynomial, and other parametric functions
Search
• brute force?
• binary search?
Detection
• key events
• pattern matching
21
t
velocity
![Page 22: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/22.jpg)
© Alla Sheffer, Helge Rhodin
Designing for People (DFP)
• https://dfp.ubc.ca/
22
![Page 23: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/23.jpg)
© Alla Sheffer, Helge Rhodin
What are HCI & UX?
• Human Computer Interaction (HCI)
• Research in designing & understanding the way humans and technology interact
• User Experience (UX)
• Perception of a particular product, system or service
• Part of user-centered design
![Page 24: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/24.jpg)
© Alla Sheffer, Helge Rhodin
Even Big Companies Get UX Wrong
• Easy & expensive to get UX wrong
Google Glass failed in
the market because it
wasn’t clear why people
should need it
and the privacy issue…
![Page 25: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/25.jpg)
© Alla Sheffer, Helge Rhodin
Connection to Game Design
• Impact of design on ease of use & engagement
• Design applications & philosophies are interconnected
In Wind Waker, the direction
Link looked indicated to the
player something of interest
was there
![Page 26: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/26.jpg)
© Alla Sheffer, Helge Rhodin
How do HCI and UX Connect to Game Design?
• Poor UX design can prevent players from experiencing games
as intended
For example, having to follow
in-game characters with
different walk speeds than
your characters
![Page 27: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/27.jpg)
© Alla Sheffer, Helge Rhodin
Game Design Philosophy
• User-centered game design = Put players needs first
• Make play easy (& fun)
• Good design is often invisible
– How to play is subtly implied
![Page 28: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/28.jpg)
© Alla Sheffer, Helge Rhodin
Design Concepts
• Design concepts: Basic ideas that help us understand &
design what’s happening in a user interface
• Norman’s Design Concepts:
• Constraints
• Visibility
• Consistency
• Affordances
• Mapping
• Feedback
![Page 29: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/29.jpg)
© Alla Sheffer, Helge Rhodin
Affordances
• Affordance is a physical characteristic that suggests function
– i.e. inviting interaction/use
• Chairs afford sitting, but so do tables, boxes, and floors
![Page 30: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/30.jpg)
© Alla Sheffer, Helge Rhodin
Example of Affordances in Games
Affordances
What does the
pipe afford?
![Page 31: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/31.jpg)
© Alla Sheffer, Helge Rhodin
Example of Affordances in Games
• What does the slingshot afford here?
• What do the blocks afford?
• What does the (pause) button afford?
![Page 32: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/32.jpg)
© Alla Sheffer, Helge Rhodin
Mapping
• Some controls are direct (slingshot), some indirect (button)
• Mapping is the relationship between look/feel of indirect
controls & their implied actions
Control Implied action
push button
twist knob
turn wheel
start/stop function
increase/decrease value
rotate left/right
![Page 33: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/33.jpg)
© Alla Sheffer, Helge Rhodin
Mapping Example
• Which is better?
![Page 34: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/34.jpg)
© Alla Sheffer, Helge Rhodin
Mapping Example
• Natural mapping minimizes the need for labeling relationships
![Page 35: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/35.jpg)
© Alla Sheffer, Helge Rhodin
Mapping Example in Games
Clear mapping between up,
down, right & left controls
and game in Zelda.
![Page 36: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/36.jpg)
© Alla Sheffer, Helge Rhodin
Feedback
• Feedback: response to action
• The color changes to inform us a connection has been made
• The sound of a ‘click’ tells us if it connected to the port
![Page 37: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/37.jpg)
© Alla Sheffer, Helge Rhodin
Feedback in Games
• Visual
– interaction between sprites
• Sound
– music on defeat
• Touch
– controller vibrating
• Feedback in games is continuous
![Page 38: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/38.jpg)
© Alla Sheffer, Helge Rhodin
Design Principles Example in Games
• Affordances?
• Mappings?
• Feedback?
![Page 39: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/39.jpg)
© Alla Sheffer, Helge Rhodin
Design Principles
• Affordances
• Mapping
• Feedback
![Page 40: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/40.jpg)
© Alla Sheffer, Helge Rhodin
Users
• Who are the players?
– Age: Children, adults, university students
– Culture
• Where will they be playing?
– Commuting, at home, remotely
• What do they need or want?
– Fulfilling plot, relaxing play
![Page 41: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/41.jpg)
© Alla Sheffer, Helge Rhodin
Examples
• Who is this game designed for?
(A) children
(B) adults
(C) elderly
(D) all ages
Why does it matter?
…. Design choices…
![Page 42: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/42.jpg)
© Alla Sheffer, Helge Rhodin
Examples
• Who is this game designed for?
![Page 43: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/43.jpg)
© Alla Sheffer, Helge Rhodin
Examples
• Who is this game designed for?
(A) children
(B) adults
(C) elderly
(D) all ages
Why does it matter?
![Page 44: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/44.jpg)
© Alla Sheffer, Helge Rhodin
Examples
• What do the players of this game want?
(A) fast-paced action
(B) relaxing play
(C) rich environments
(D) other
![Page 45: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/45.jpg)
© Alla Sheffer, Helge Rhodin
What Motivates Users?
• Work has been done to identify player types
• Users can be classified by preference for interacting/actingwith/on others/the world
• The four classifications tell us what motivates each player type
![Page 46: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/46.jpg)
© Alla Sheffer, Helge Rhodin
Think:
• Who is your game designed for (demographics/type)?
• What do the players of your game want?
• (How is your game going to stand out?)
![Page 47: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/47.jpg)
© Alla Sheffer, Helge Rhodin
The Design Process
Brainstorming Release
Low fidelity
prototyping
High fidelity
prototyping
![Page 48: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/48.jpg)
© Alla Sheffer, Helge Rhodin
Low Fidelity Prototyping
• Used for early stages of design
– Quick & cheap to deploy
– Easy to test
• Iterate on story and
core gameplay mechanics
• Sketches are a great way
to start designing
![Page 49: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/49.jpg)
© Alla Sheffer, Helge Rhodin
Testing Low Fidelity Prototypes
• Don’t commit to one approach, design a few prototypes & compare
• Invite someone to try them out
• Try to drill down on feedback
– If they just say it’s “fun”, ask why?
![Page 50: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/50.jpg)
© Alla Sheffer, Helge Rhodin
Fail Early, Fail Often, and Iterate on Feedback
• Designing something that people will use is both an art & a science
– Iteration is how you make it better
• Early feedback ensures design meets users’ needs
• Throwing around ideas is quick
– Fixing a bad design is expensive
• No idea is perfect the first time around
![Page 51: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/51.jpg)
© Alla Sheffer, Helge Rhodin
Medium Fidelity Prototyping
• Use medium fidelity prototyping for the early to middle stages of design
– Identify questions before coding
– Be selective with what gets built
– Get it right in black and white first
• Iterate on tone & feel of game
– Supplementary game mechanics
– Rough visuals & audio
– Feedback
![Page 52: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/52.jpg)
© Alla Sheffer, Helge Rhodin
Greyboxing
• Greyboxing blocks out all elements as shapes to test gameplay
![Page 53: CPSC 427 Video Game Programming - cs.ubc.ca](https://reader034.vdocuments.site/reader034/viewer/2022052501/628af1c35cd22b7016693269/html5/thumbnails/53.jpg)
© Alla Sheffer, Helge Rhodin
High Fidelity Prototyping
• High fidelity prototyping happens during the late stages of design
– Alpha & beta releases
– Polish artwork
– Perform playtesting
– Fix bugs
– Release
• Fine tuning before release