Dr. Sabin Buraga
Faculty of Computer Science, “A. I. Cuza” University of Iasi, Romania
www.purl.org/net/busaco
Web
Game
De...
activity or contest governed by rules
♞ game
definition
activity or contest governed by rules
people engage in games for recreation and
to develop mental or physical skills
ludol...
“A game is an activity among two or more
independent decision-makers seeking to achieve
their objectives in some limiting ...
“A game is a form of art in which participants,
termed players, make decisions in order to
manage resources through game t...
“A game is a system in which players engage
in an artificial conflict, defined by rules,
that results in a quantifiable ou...
representation
interaction
conflict
safety
Chris Crawford
♞ game
characteristics
“Game design is the process by which
a game designer creates a game,
to be encountered by a player,
from which meaningful ...
♞ game
classification
♞ game
classification
number of players
solitary games
versus
group (team) games
♞ game
classification
goal
gain (gambling)
skills achievement

strategy
♞ game
classification
theme
racing, deduction, sports, action,
language games,…
♞ game
classification
support/equipment
board
terrain
virtual environment
…
♞ game
classification
player category
children
youngsters
adults
elderly
people having special needs
♞ game
classification
strategy board games
tokens are placed/moved to capture
those of the opponent(s) or to accomplish ot...
♞ game
classification
role-playing games
each user is playing a character role
having distinct properties (attributes)
eve...
♞ game
other classic types
card games: Bridge, Hearts, Poker, Whist,…
chance games: Bingo, Lottery, Roulette, etc.
dice ga...
♞ electronic
game
based on an electronic device – arcade machine,
handheld device, TV-connected system,
computer,… – able ...
♞ electronic
game
www.geekvintage.com
♞ electronic
game
arcade games
video games
computer games
console games
online games
Web games
♞ electronic
game
action lots of frantic button pushing
adventure the story matters
strategy non-trivial choices
simulatio...
mobile
game
game
play
turn-based
real-time
scenario-based
connectivity
permanent
partial
not required
genre
arcade
jump & ...
mobile
game♞
CityQuest – an Imagine Cup 2012 Game Design Finalist
(Victor Porof & Alecsandru Grigoriu)
www.youtube.com/wat...
game
development
…so, I want to be a (Web) game developer!
What I must know?

game
development
game experience
physical reaction (perception, motor responses)
user focusgame flow
core mechanic
narrat...
game
development
game play
depends on narrative elements
(premise, back-story, synopsis, theme, setting, plot,
conflict, r...
game
development
game play
rules
implicit or explicit victory/loss conditions

game
development
challenges
explicit vs. implicit
perfect informationlogical challenges
versus
imperfect informationdedu...
game
development
challenges
pattern recognition & matching
spatial awareness
micro-management (+game economy)
reaction tim...
game
development
game
development
game characters
playable characters
versus
non-playable characters (NPCs)

game
development
classical archetypes
hero, shadow, mentor, allies,
guardian, trickster, herald

Jeannie Novak
game
development
other archetypes
protagonist, antagonist, transformational,
mistaken, exaggerated, supporting characters
...
game
development
points-of-view (POV)
first-person POV versus third-person POV

game
development
game character design
visual design
verbal design
character movement (+animation)
social & cultural aspec...
game
development
sprite-based animation
(a well-known technique used in the Web game context)
game
development
3D modeling of a guardian character
(requires important computational resources)
game
development
game level design
games could provide various grade of difficulties or
levels adjusted conforming to the ...
game
development
game level design
key ingredients:
action, exploring, resolving a “mystery” (puzzle),
storytelling, esthe...
game
development
each scene of Angry Birds Rio for iPad
represents a “special case” of level design
game
development
level structure
goal, flow, duration, availability, development,…
time
authentic, limited, variable, user...
game
development
using artificial intelligence (AI)
“AI is the application of simulated reasoning for
the purposes of maki...
game
development
using artificial intelligence (AI)
AI being intelligent vs. AI appearing intelligent
if it looks smart, i...
game
development
using artificial intelligence (AI)
challenge the player
modeling NPC behavior (not do dumb things)
perfor...
classification
neuronal nets, fuzzy logics, etc.
biologic system simulation (life systems)
genetic / systolic algorithms, ...
 artificial
intelligence
http://qiao.github.io/PathFinding.js/visual/
game
keywords
narration multiplayer physics inventory design
multiplatform component reward simulation vocal talents
story...
game
team
game creative design vs. game software design
www.mobilegamearch.eu

♞
game
production
John P. Flynt & Omar Salem

♞
game
main sub-systems
User interface
Bidirectional event handler
Data engine (graphics, level, miscellaneous data)
Dynamic...
game
secondary sub-systems
Game configuration system
Menu system
Online instructions and help system
Music system
Andrew R...
game
architecture
B. Lau et al.

♞
game
architecture

♞
game kernel
available on client-side only – e.g., Web browser
game
architecture

♞
game kernel
available on client-side only – e.g., Web browser
single-threaded, monolithic
multi-thre...
game
architecture

♞
game kernel
available on client-side only – e.g., Web browser
typical case: single-player casual gam...
game
architecture

♞
// main loop of a Web game
while (true) {
// gathering data from user, device, Internet,...
input_da...
game
architecture

♞
game kernel
using a client-server approach
(a)synchronous communications
via Ajax/Comet, server-side...
game
architecture

♞
game kernel
using a client-server approach
examples: multi-user games, including MMORPGs
game
architecture

♞
game kernel
adopting parallel computing
using divide-et-impera techniques for various tasks
(for exa...
game
architecture

♞
M. Zamith et al.
M. Zamith et al.
main loop of a game
running on a networked platform (e.g., cloud)
AI
Renderer
3D
Player Model
Sound
audio
Resource Loader
Player View
Queue
Façade
Resources
conceptual architecture of a ga...
interacting with the user
receiving events
on data transfer via network/Web
updating the game state and
generating a frame...
interacting with the user
receiving events
on data transfer via network/Web
updating the game state and
generating a frame...
game
architecture
other aspects of interest:
application initialization & termination
high-level management of the game st...
high-level game logic
game engine
additional components
(game frameworks & libraries)
rendering
engine
audio
engine
2D/3D
...
game
resources
…oh, so many things to learn!
Several interesting Websites & tools?
game
resources
www.html5gamedevelopment.com
game
tutorials
www.youtube.com/playlist?list=PL290A4D2398C97186
game
tutorials
buildnewgames.com
profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web game computing lectures – Client-side Web App
Development ...
game
js engines
jster.net
game
js libraries
microjs.com
game
competitions
gameon.mozilla.org
game
competitions
js13kgames.com
Web
Game
Development 
Dr. Sabin Buraga
Faculty of Computer Science, “A. I. Cuza” University of Iasi, Romania
www.purl.org...
Web Game Development
Upcoming SlideShare
Loading in...5
×

Web Game Development

33,509

Published on

Main aspects regarding Web game development, including several examples and resources of interest.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
33,509
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
86
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Web Game Development

  1. 1. Dr. Sabin Buraga Faculty of Computer Science, “A. I. Cuza” University of Iasi, Romania www.purl.org/net/busaco Web Game Development  ♞
  2. 2. activity or contest governed by rules ♞ game definition
  3. 3. activity or contest governed by rules people engage in games for recreation and to develop mental or physical skills ludology ♞ game definition
  4. 4. “A game is an activity among two or more independent decision-makers seeking to achieve their objectives in some limiting context.” Clark C. Abt ♞ game definition
  5. 5. “A game is a form of art in which participants, termed players, make decisions in order to manage resources through game tokens in the pursuit of a goal.” Greg Costikyan ♞ game definition
  6. 6. “A game is a system in which players engage in an artificial conflict, defined by rules, that results in a quantifiable outcome.” Katie Salen & Eric Zimmerman ♞ game definition
  7. 7. representation interaction conflict safety Chris Crawford ♞ game characteristics
  8. 8. “Game design is the process by which a game designer creates a game, to be encountered by a player, from which meaningful play emerges.” Katie Salen & Eric Zimmerman ♞ game design
  9. 9. ♞ game classification
  10. 10. ♞ game classification number of players solitary games versus group (team) games
  11. 11. ♞ game classification goal gain (gambling) skills achievement  strategy
  12. 12. ♞ game classification theme racing, deduction, sports, action, language games,…
  13. 13. ♞ game classification support/equipment board terrain virtual environment …
  14. 14. ♞ game classification player category children youngsters adults elderly people having special needs
  15. 15. ♞ game classification strategy board games tokens are placed/moved to capture those of the opponent(s) or to accomplish other goals: to gain a territory, to tile or align tokens Chess, Domino, Go, Monopoly, etc.
  16. 16. ♞ game classification role-playing games each user is playing a character role having distinct properties (attributes) eventually, a main player – called game-master – could exists to guide users through the game
  17. 17. ♞ game other classic types card games: Bridge, Hearts, Poker, Whist,… chance games: Bingo, Lottery, Roulette, etc. dice games paper & pencil – e.g., Tic-tac-toe puzzles target games: Bowling, Darts, Paintball,… tile games – Mah Jongg serious games
  18. 18. ♞ electronic game based on an electronic device – arcade machine, handheld device, TV-connected system, computer,… – able to facilitate the interaction between user(s) and software game(s) having human or computer-generated opponents
  19. 19. ♞ electronic game www.geekvintage.com
  20. 20. ♞ electronic game arcade games video games computer games console games online games Web games
  21. 21. ♞ electronic game action lots of frantic button pushing adventure the story matters strategy non-trivial choices simulation optimization exercises puzzle hard analytic thinking amusement software you just have fun with educational learning by doing Andrew Rollings & Dave Morris
  22. 22. mobile game game play turn-based real-time scenario-based connectivity permanent partial not required genre arcade jump & run shooting puzzle fight racing simulation construction history flight strategy turn-based real-time hybridRPG Hojin Cho & Jin-Seok Yang
  23. 23. mobile game♞ CityQuest – an Imagine Cup 2012 Game Design Finalist (Victor Porof & Alecsandru Grigoriu) www.youtube.com/watch?v=l33obYYtpPQ
  24. 24. game development …so, I want to be a (Web) game developer! What I must know? 
  25. 25. game development game experience physical reaction (perception, motor responses) user focusgame flow core mechanic narration player roles 
  26. 26. game development game play depends on narrative elements (premise, back-story, synopsis, theme, setting, plot, conflict, realism,…) Jeannie Novak 
  27. 27. game development game play rules implicit or explicit victory/loss conditions 
  28. 28. game development challenges explicit vs. implicit perfect informationlogical challenges versus imperfect informationdeductions (inferences) 
  29. 29. game development challenges pattern recognition & matching spatial awareness micro-management (+game economy) reaction time 
  30. 30. game development
  31. 31. game development game characters playable characters versus non-playable characters (NPCs) 
  32. 32. game development classical archetypes hero, shadow, mentor, allies, guardian, trickster, herald  Jeannie Novak
  33. 33. game development other archetypes protagonist, antagonist, transformational, mistaken, exaggerated, supporting characters  Jeannie Novak
  34. 34. game development points-of-view (POV) first-person POV versus third-person POV 
  35. 35. game development game character design visual design verbal design character movement (+animation) social & cultural aspects naming 
  36. 36. game development sprite-based animation (a well-known technique used in the Web game context)
  37. 37. game development 3D modeling of a guardian character (requires important computational resources)
  38. 38. game development game level design games could provide various grade of difficulties or levels adjusted conforming to the user’s abilities 
  39. 39. game development game level design key ingredients: action, exploring, resolving a “mystery” (puzzle), storytelling, esthetics generic approach vs. special cases 
  40. 40. game development each scene of Angry Birds Rio for iPad represents a “special case” of level design
  41. 41. game development level structure goal, flow, duration, availability, development,… time authentic, limited, variable, user-defined, altered location perspective & camera, terrains & materials, luminosity, effects, dimension, boundaries, realism, style 
  42. 42. game development using artificial intelligence (AI) “AI is the application of simulated reasoning for the purposes of making informed decisions and solving problems.” Brian Hall 
  43. 43. game development using artificial intelligence (AI) AI being intelligent vs. AI appearing intelligent if it looks smart, it is smart 
  44. 44. game development using artificial intelligence (AI) challenge the player modeling NPC behavior (not do dumb things) performing random actions (be unpredictable) giving support for storytelling assuring credibility (create a living world) 
  45. 45. classification neuronal nets, fuzzy logics, etc. biologic system simulation (life systems) genetic / systolic algorithms, swarm particle optimization,… path finding BFS, DFS, Dijkstra, heuristics – e.g., A* method decision making processes automata, decision trees, rule-based systems,…  artificial intelligence
  46. 46.  artificial intelligence http://qiao.github.io/PathFinding.js/visual/
  47. 47. game keywords narration multiplayer physics inventory design multiplatform component reward simulation vocal talents story speed avatar builder flocking adventure FPS trade-off UX stripe rules conflict theme map requirements conquest sound engine NPC scripting antagonist strategy static balance variable time patterns creative design Internet connectivity power consumption game framework 2D / 3D graphics optimization modeling security interaction engineering level template casual game testing database immersion  ♞
  48. 48. game team game creative design vs. game software design www.mobilegamearch.eu  ♞
  49. 49. game production John P. Flynt & Omar Salem  ♞
  50. 50. game main sub-systems User interface Bidirectional event handler Data engine (graphics, level, miscellaneous data) Dynamics system (collisions & general physics) Logic engine (the heart of the game) Graphics engine Sound engine Hardware abstraction layers (interfaces with graphics, sound & controller hardware) Andrew Rollings & Dave Morris  ♞
  51. 51. game secondary sub-systems Game configuration system Menu system Online instructions and help system Music system Andrew Rollings & Dave Morris  ♞
  52. 52. game architecture B. Lau et al.  ♞
  53. 53. game architecture  ♞ game kernel available on client-side only – e.g., Web browser
  54. 54. game architecture  ♞ game kernel available on client-side only – e.g., Web browser single-threaded, monolithic multi-threaded, co-operative/pre-emptive (for example, using WebWorkers)
  55. 55. game architecture  ♞ game kernel available on client-side only – e.g., Web browser typical case: single-player casual games
  56. 56. game architecture  ♞ // main loop of a Web game while (true) { // gathering data from user, device, Internet,... input_data_from_user_and_network (); // updating the game general state // (performing a simulation of its world), // plus checking the victory/loss conditions simulate_game_world (); // rendering 2D/3D visual content render_content (); // generating sound effects according to current state generate_sound_effects (); }
  57. 57. game architecture  ♞ game kernel using a client-server approach (a)synchronous communications via Ajax/Comet, server-side events, WebRTC,…
  58. 58. game architecture  ♞ game kernel using a client-server approach examples: multi-user games, including MMORPGs
  59. 59. game architecture  ♞ game kernel adopting parallel computing using divide-et-impera techniques for various tasks (for example, AI or animation)
  60. 60. game architecture  ♞ M. Zamith et al.
  61. 61. M. Zamith et al. main loop of a game running on a networked platform (e.g., cloud)
  62. 62. AI Renderer 3D Player Model Sound audio Resource Loader Player View Queue Façade Resources conceptual architecture of a game engine based on Jeff Ward NPC Model Externals Model Internals ModelInternals View Externals View NPC View 2D Input user device network
  63. 63. interacting with the user receiving events on data transfer via network/Web updating the game state and generating a frame of graphical content eventually, creating sound effects game main loop
  64. 64. interacting with the user receiving events on data transfer via network/Web updating the game state and generating a frame of graphical content eventually, creating sound effects game main loop mouse/keyboard/touch via DOM + APIs Ajax, notifications, WebSockets, WebRTC classic JavaScript, WebWorkers,… DOM, <canvas>, <video>, SVG, WebGL,… <audio>, WebAudio API
  65. 65. game architecture other aspects of interest: application initialization & termination high-level management of the game state game flow control updating main/secondary sub-systems
  66. 66. high-level game logic game engine additional components (game frameworks & libraries) rendering engine audio engine 2D/3D graphics libraries low-level sound libraries interaction I/O game runtime – Web browser infrastructure – cloud, virtual machine, OS, hardware
  67. 67. game resources …oh, so many things to learn! Several interesting Websites & tools?
  68. 68. game resources www.html5gamedevelopment.com
  69. 69. game tutorials www.youtube.com/playlist?list=PL290A4D2398C97186
  70. 70. game tutorials buildnewgames.com
  71. 71. profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html Web game computing lectures – Client-side Web App Development course, Faculty of Computer Science, UAIC Iasi
  72. 72. game js engines jster.net
  73. 73. game js libraries microjs.com
  74. 74. game competitions gameon.mozilla.org
  75. 75. game competitions js13kgames.com
  76. 76. Web Game Development  Dr. Sabin Buraga Faculty of Computer Science, “A. I. Cuza” University of Iasi, Romania www.purl.org/net/busaco ♞
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×