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!
Underwater Tomato Ninja - HTML5 Game Development & Design
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
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
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?
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
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
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
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
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?
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
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
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!
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