Games give us other ways to think about tackling challenges from gardening to space battles. Why not play a game to make a game? In this hands-on workshop, game developer and cartoonist Rob Stenzinger will introduce you to HTML5 Game Development. Daedal Games Mega Mega Corp. needs your help to improve their latest game Underwater Tomato Ninja!

1. please fol
d an
index car
d and
write you
r 3 letter
call-sign a
http://www.flickr.com/photos/robboudon/541896810
sa
name car
d.
Ready?
anyone have a quarter?
Need the files?
https://github.com/robstenzinger/HTML5-Game-Dev-Workshop

2. rob stenzinger presents:
Underwater Tomato Ninja HTML5 Game
Development & Design - a Daedal Mega
Mega Overdrive Games Production
workshop ©2012 rob stenzinger
this slide deck licensed under creative commons
http://creativecommons.org/licenses/by/3.0/

3. Games for Learning
http://www.flickr.com/photos/lilu12323/4028801424/sizes/l/in/photostream/
e
dragons ar
a
s afer in
much
game
if a
vail
ren able,
rath tal wo drago
er e uld b n
xpe e
nsi
ve

4. Immersive Learning
e
slic
den za
hid piz
of
s te
wha pped
t’s h on
a ca ope
ndy fully
bar
http://www.flickr.com/photos/dnamichaud/372473978/sizes/l/in/photostream/

5. Warning
in. g.
ra in
b tt
hu wn.
s o
d
so
inf ma
orm ny
ati
on
http://www.flickr.com/photos/msvg/2670767610/sizes/l/in/photostream/
s

6. Rob makes games & comics
stenzinger
games, ux lean into art Agz.me
consulting
workshops & podcasts comics

7. Guitar Fretter
http://guitarfretter.com

8. --> Decision!
!
A
jump to page 12
choose
B
jump to page 9
Both
Instructions instructions &
story

9. Welcome to the trial-by-fire
Apprenticeship at Daedal Mega
Mega Overdrive Games
we make games for anything and
everything. page 9

10. I'm Not Daedelus
we
ne lcom
wt
ale e,
nt!
*Just an every day purple dragon
librarian, guide to the apprenticeships.

11. Daedal Mega Mega
Overdrive Games
s a ge
s i ar
thi r l g
he ldin
rat ui
b
imagine sony, microsoft, nintendo, apple,
all went voltron into one massive company.
miniscule.

12. Rules of our Game
Workshop Game
Questions and
vote where to Crafting earn & collect
go next achievements
page 12

13. ? !
Q A C D H
Question Answer Craft Demo Hidden
your Your
Game Game
10pts 10pts 100pts 150pts 15pts
Achievements

14. Get on the score board
got achievements? add your
initials & score after game over!

15. Ready?
Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop
a
is t a
this t, no r
o Go
os edit og
gh xt le C
te Ma hro
sco me
t* ’s
* why let firefox have the only browser animal?

16. Run the Game
is there a ninja?
is there water?

17. !
A
jump to page 23
choose
B
jump to page 18
Play for
Play for
research and
Fun! for fun!

18. Play the Game for
research
Take note
s ...
page 18

19. Explore the Screens
start game level
credits game over

20. Bugs
arr
do rrrrr
su n’t th rrrrr!
pp
os ink i I
ed t’s
tha to
t! do

21. Design Goals
uld out arr
ho ab igs,
e s ess d mo
ow s, p s to the rrrrrr
er l
th be y an r
re
kit h d ne nin rrrr!
te n ir boxe ? ed j
in’ a be
a vit oute s! b
d ash fas
gr re e! an sm ter to be
mo spac rrr
r!

22. Questions
th ese are y.
why am I the bad guy? d
ts, bud
pick the crab over there castine
instead.

23. m e limit,
2 min ti o
ments t
achieve 10 and
s cores > e!
p scor
http://www.flickr.com/photos/russellbernice/2890790642
to
Play for fun!
page 23

24. !
--> Decision!
choose
A
jump to page 27
B
jump to page 25
tour the code,
C
jump to page 30
break the LEARN ABOUT
then break
code CODING
the code

25. Explore the Code &
Editing Code Experience
page 25

26. changing the code
refresh the
browser &
test the game
change &
save the code
Let’s Change the Game’s
Title page

27. Breaking It
http://www.flickr.com/photos/jupiterssj4/3954031705
break the code not the computer
page 27

28. Google Chrome tells
you what broke
and if it’s an error in
JavaScript it’ll say
WHERE it broke!

29. Starting Over
“th
e jo
can lly, sh
dy- iny,
but like
ton
...”
http://www.flickr.com/photos/dps/7161557/sizes/m/in/photostream/

30. !
--> Decision!
Time to Explore Coding!
A
jump to page 32
intro to code
choose
B
jump to page 36
& coding for a
coding for a
web browser page 30
web browser

31. computers only know
what you tell them
im
ag
co ine i’
mp m
ute a
r!

32. Intro to Coding
page 32

33. Conditional logic

34. Loops

35. functions!

36. Coding for a Web Browser
an HTML page brings
together many parts
text
css
images
sound
javascript
html buttons
page 36

37. Intro to HTML, CSS,
and Javascript
javascript css
Browser’s DOM:
Document Object Model
What kind of id: avatar
Element’s Class
class: (none)
element Type: DIV
situation: (varies)
status or situation of
Element ID the Element

38. connecting css or
javascript to html elements
css
javascript
document.getElementById(“avatar”)
document.getElementsByClassName(“container”)

39. !
--> Decision!
Game Design!
A
jump to page 40
Lean about
choose
B
jump to page 43
How game design
is related to
the fun loop
making comics

40. Game Design -
Fun Loop
a flow of choices and feedback
page 40

41. Game Design - Fun Loop
Pac-Man

42. Game Design - Fun Loop
eat power
Pac-Man eat pellet clear
pellets maze
chase
put in avoid ghost
quarter ghosts

43. Game Design - How
it’s related to Comics
Narrative Flow, Narrative context
page 43

44. Game Design - How
it’s related to Comics

45. !
--> Decision!
2 different topics!
A
jump to page 46
what is a game
choose
B
jump to page 51
Explore game
heartbeat files in the
workshop

46. Game Heartbeat
page 46

47. Frame Rate
per second...

48. !
--> Decision! Mess With
Game Timing
A
jump to page 49
make it
choose
B
jump to page 50
make it
faster slower

49. Make It Faster
boo!
whe
e!
page 49

50. Make It Slower
aw!
page 50

51. The Files You Have - You
do Have Them, Right?
Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop
page 51

52. How Do They Get Into
the Game?

53. Use the Browser Developer Tools
to Find Something on Screen, Then
in Code
let’s use the Elements
tab to explore the page

54. Find by Searching the
Code Text editors give us
tools like FIND, LINE
NUMBERS, and CODE
HIGHLIGHTING to make
our job easier!

55. Let's Change an
Asset
let’s ch
ange
the gam
e!
art - sound - text
d
o ad
c e t tars!
an or s
ch s
a tie
kit
page 55

56. ! --> Decision! What kind
of Asset to change?!
Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop
choose
A
jump to page 57
B
jump to page 62
c
jump to page 65
art sound Text

57. Art
Web browsers let us
load images in HTML,
JavaScript, and CSS!
Since we’re scripting so
much for the game, let’s
use JavaScript...
page 57

58. Art Text

59. Backgrounds

60. Actors

61. Objects

62. sound effects
BACKGROUND MUSIC
let’s look at how we
LOAD and PLAY the
sounds!
page 62

63. sound effects
JUMP SOUND
let’s look at how we
LOAD and PLAY the
sounds!

64. sound effects
COLLISION SOUND
let’s look at how we
LOAD and PLAY the
sounds!

65. Text
or add some
more!
lots of text in the game
already...
page 65

66. !
Decision!
2 different topics!
A
jump to page 77
choose
B
jump to page 67
animation game loop

67. Game Loop
tick update > run rules > update display > get input >
REPEAT!
page 67

68. Flow
start screen > level start > play level ( > sections
within a level) > level complete > REPEAT!

69. r to
mo
ve
Parts
fa sh
how ow
to the u
the pd
sco ates
re
Score
e left,
! mov t!
jump e righ
mov
wh e?
tel ere i ov
am ling s th o move? e
I co me e p y t m t th
to laye wa to
if s llid
o d ing mo h ar pa
id v
r hic w f jum ?
I sq w/tom e? w o
h n to inja
uis a
h i to? input whe n
t?

70. Synchronized,
Working Together
Score
heatbeat + game loop
input

71. Looking at the Code
and the Game
p! inst
ruct
e loo upd ions
am part ate all to
theg s of
the
the
gam
e
the heartbeat!
aka
“tick”

72. !
Decision!
2 different topics!
A
jump to page 55
game art, text,
choose
B
jump to page 73
more detail about
and sound the game loop

73. Game Loop 2
2
page 73

74. Input
keyboard mouse
input
touch screen and more...

75. Baddies - Computer
Opponents

76. !
Decision!
2 different topics!
A
jump to page 55
game art, text,
choose
B
jump to page 77
and sound animation

77. Animation
page 77

78. Coordinate System
0 x 20
05 7
7,5
y we use coordinates X
and Y to position game
objects!
20

79. CSS3 Transforms
let’s check out the code
example css-transform-
playground.html
ch tick of the game
ea
tbeat, we use css3
hear
nsforms to update
tra
we want to move!
anything

80. !
--> Decision!
game + workshop to make a game
A
jump to page 81
parallax
choose
B
jump to page 82
character
backgrounds movement + hop

81. Background Parallax
Closer = Faster
scrolling speed A
scrolling speed B
page 81

82. Character Movement -
Hop
page 82

83. ! time for a bonus level?
A
jump to page 88
choose
B
jump to page 86
animation
no time! breathing
c
jump to page 85
animation
d
jump to page 87
animation
wobble particles

84. Animation Bonus
Levels

85. wobble
page 85

86. breathe
page 86

87. particles!
page 87

88. !
Boss Fight!
JUST ME.
• Game Testers Robot
Experiment - gone wrong
page 88

89. Boss Fight!
JUST M E. AND A FEW
FRIE NDS HERE TO
T
TAK E - I MEAN TES
YOUR GAME!
• Defeat the Robot Army by Calling
Out Accomplishments

90. Victory!
game lab time!
bzzzt... all my
g
base are belon
to you

91. Time to Craft
!
ha-haarrrrrr
what are you doing up
there?

92. Discussion
mo ...
re g
er?
dif
fic ri sin arr
rrr
a si ult
! u rp rrr
e s !

93. Demos

95. I’ll check-in, comment,
and respond on the
11th, 13th, and 14th of
July 2012! Parental
Sha
permission form gam re you
required! que es an r
stio d
ns!
More Discussion Online
On a Posterous Private Forum for This Kids Read comics Class
http://megamega-krc2012.posterous.com/

96. More Resources
• Workshop source code files and assets
• https://github.com/robstenzinger/HTML5-Game-Dev-
Workshop
• Lean Into Art
• Theory of Fun
• html5rocks.Com
• lostdecadegames.com
• interactive-storyteller.com
• History of Video Games

97. High Score Board
& Custom URL
The version of the game we customized together will be downloadable from
http://agz.me/krc2012/gameworkshop
congratulations!
to get your score on the high-score board
enter 3 initials/letters + your score on the paper high-score board!
I’ll add them to the game before I post it!

98. Continue?
6
9... 8... 7... 5... 4... 3

99. Future
• HTML5 on Your TV
• Google TV
• XBox much
of this
here a i
lready s
• Playstation 3 comin or
g very
soon!
• Wii
• Full Screen API
• Game Controller API

100. --> Decision! bonus
unlock
A
jump to page 102
see a screen
choose
B
jump to page 101
hear about the
from the first first release of
game rob made* guitar fretter

101. Bonus - Guitar Fretter
Lessons Learned
page 101

102. Bonus - Screenshot of
Rob’s 1st Game
page 102

103. Thank You For Playing!