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

1. Dr. Sabin Buraga
Faculty of Computer Science, “A. I. Cuza” University of Iasi, Romania
www.purl.org/net/busaco
Web
Game
Development 
♞

2. activity or contest governed by rules
♞ game
definition

3. activity or contest governed by rules
people engage in games for recreation and
to develop mental or physical skills
ludology
♞ game
definition

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. “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. “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. representation
interaction
conflict
safety
Chris Crawford
♞ game
characteristics

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. ♞ game
classification

10. ♞ game
classification
number of players
solitary games
versus
group (team) games

11. ♞ game
classification
goal
gain (gambling)
skills achievement

strategy

12. ♞ game
classification
theme
racing, deduction, sports, action,
language games,…

13. ♞ game
classification
support/equipment
board
terrain
virtual environment
…

14. ♞ game
classification
player category
children
youngsters
adults
elderly
people having special needs

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. ♞ 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. ♞ 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. ♞ 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. ♞ electronic
game
www.geekvintage.com

20. ♞ electronic
game
arcade games
video games
computer games
console games
online games
Web games

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. 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. mobile
game♞
CityQuest – an Imagine Cup 2012 Game Design Finalist
(Victor Porof & Alecsandru Grigoriu)
www.youtube.com/watch?v=l33obYYtpPQ

24. game
development
…so, I want to be a (Web) game developer!
What I must know?


25. game
development
game experience
physical reaction (perception, motor responses)
user focusgame flow
core mechanic
narration
player roles


26. game
development
game play
depends on narrative elements
(premise, back-story, synopsis, theme, setting, plot,
conflict, realism,…)
Jeannie Novak


27. game
development
game play
rules
implicit or explicit victory/loss conditions


28. game
development
challenges
explicit vs. implicit
perfect informationlogical challenges
versus
imperfect informationdeductions (inferences)


29. game
development
challenges
pattern recognition & matching
spatial awareness
micro-management (+game economy)
reaction time


30. game
development

31. game
development
game characters
playable characters
versus
non-playable characters (NPCs)


32. game
development
classical archetypes
hero, shadow, mentor, allies,
guardian, trickster, herald

Jeannie Novak

33. game
development
other archetypes
protagonist, antagonist, transformational,
mistaken, exaggerated, supporting characters

Jeannie Novak

35. game
development
points-of-view (POV)
first-person POV versus third-person POV


36. game
development
game character design
visual design
verbal design
character movement (+animation)
social & cultural aspects
naming


37. game
development
sprite-based animation
(a well-known technique used in the Web game context)

38. game
development
3D modeling of a guardian character
(requires important computational resources)

39. game
development
game level design
games could provide various grade of difficulties or
levels adjusted conforming to the user’s abilities


40. game
development
game level design
key ingredients:
action, exploring, resolving a “mystery” (puzzle),
storytelling, esthetics
generic approach vs. special cases


41. game
development
each scene of Angry Birds Rio for iPad
represents a “special case” of level design

42. 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


43. 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


44. game
development
using artificial intelligence (AI)
AI being intelligent vs. AI appearing intelligent
if it looks smart, it is smart


45. 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)


46. 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

47.  artificial
intelligence
http://qiao.github.io/PathFinding.js/visual/

48. 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

♞

49. game
team
game creative design vs. game software design
www.mobilegamearch.eu

♞

50. game
production
John P. Flynt & Omar Salem

♞

51. 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

♞

52. game
secondary sub-systems
Game configuration system
Menu system
Online instructions and help system
Music system
Andrew Rollings & Dave Morris

♞

53. game
architecture
B. Lau et al.

♞

54. game
architecture

♞
game kernel
available on client-side only – e.g., Web browser

55. 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)

56. game
architecture

♞
game kernel
available on client-side only – e.g., Web browser
typical case: single-player casual games

57. 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 ();
}

58. game
architecture

♞
game kernel
using a client-server approach
(a)synchronous communications
via Ajax/Comet, server-side events, WebRTC,…

59. game
architecture

♞
game kernel
using a client-server approach
examples: multi-user games, including MMORPGs

60. game
architecture

♞
game kernel
adopting parallel computing
using divide-et-impera techniques for various tasks
(for example, AI or animation)

61. game
architecture

♞
M. Zamith et al.

62. M. Zamith et al.
main loop of a game
running on a networked platform (e.g., cloud)

63. 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

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

65. 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

66. game
architecture
other aspects of interest:
application initialization & termination
high-level management of the game state
game flow control
updating main/secondary sub-systems

67. 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

68. game
resources
…oh, so many things to learn!
Several interesting Websites & tools?

69. game
resources
www.html5gamedevelopment.com

70. game
tutorials
www.youtube.com/playlist?list=PL290A4D2398C97186

71. game
tutorials
buildnewgames.com

72. 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

73. game
js engines
jster.net

74. game
js libraries
microjs.com

75. game
competitions
gameon.mozilla.org

76. game
competitions
js13kgames.com

77. Web
Game
Development 
Dr. Sabin Buraga
Faculty of Computer Science, “A. I. Cuza” University of Iasi, Romania
www.purl.org/net/busaco
♞