Web Game Development

33,796
-1

Published on

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

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.

×