Underwater Tomato Ninja - HTML5 Game Development & Design

please fold an index card and write your 3 letter call-sign as a name card.

Ready?anyone have a quarter?

http

://w

ww

.flic

kr.c

om/p

hoto

s/ro

bbou

don/

5418

9681

0

Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop

Underwater Tomato Ninja HTML5 Game Development & Design - a Daedal Mega

Mega Overdrive Games Production

rob stenzinger presents:

workshop ©2012 rob stenzingerthis slide deck licensed under creative commons

http://creativecommons.org/licenses/by/3.0/

Games for Learning

dragons are

much safer in a

game

if available, dragon rental would be

rather expensive

http://www.flickr.com/photos/lilu12323/4028801424/sizes/l/in/photostream/

Immersive Learning

http://www.flickr.com/photos/dnamichaud/372473978/sizes/l/in/photostream/

hidden slice

of pizza

stepped on what’s hopefully

a candy bar

Warning

http://www.flickr.com/photos/msvg/2670767610/sizes/l/in/photostream/

brain.

shutting.

down.

so many informations

Rob

lean into art Agz.megames, ux

makes games & comics

workshops & podcasts comicsconsulting

stenzinger

Guitar Fretterhttp://guitarfretter.com

--> Decision!

chooseA BInstructions

Both instructions &

story

!

jump to page 12 jump to page 9

Welcome to the trial-by-fire Apprenticeship at Daedal Mega

Mega Overdrive Games

we make games for anything and everything. page 9

I'm Not Daedelus

*Just an every day purple dragon librarian, guide to the apprenticeships.

welcome, new talent!

Daedal Mega Mega Overdrive Games

imagine sony, microsoft, nintendo, apple, all went voltron into one massive company.

this is a

rather large

building

miniscule.

Rules of our Game Workshop Game

earn & collect achievements

vote where to go next

Questions and Crafting

page 12

Achievements

Question Answer Craft your Game

Demo Your Game

Hidden

10pts 10pts 100pts 150pts 15pts

Q A C D H? !

Get on the score board

got achievements? add your initials & score after game over!

Ready?

this is a

ghost, not a

text editor Google Chrome’s Mascot*

* why let firefox have the only browser animal?

Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop

Run the Game

is there a ninja? is there water?

chooseA BPlay for

Fun!

Play for research and

for fun!

!

jump to page 23 jump to page 18

Play the Game for research

Take notes...

page 18

Explore the Screens

credits game over

start game level

Bugsarrrrrrrrrrrr! I

don’t think it’s

supposed to do that!

Design Goalsthere should

be less

gravity and

more outer

space!

more kittens!

arrrrrrrrrrrr!the ninja be

needin’ to be fasterrrrr!

how about

birds, pigs,

and boxes to

smash?

Questionswhy am I the bad guy?

pick the crab over there instead.

these are

castinets, buddy.

Play for fun!

2 min time limit,

achievements to

scores > 10 and

top score!

page 23

http

://w

ww

.flic

kr.c

om/p

hoto

s/ru

ssel

lber

nice

/289

0790

642

Workshop Game Start!

choose

A Cbreak the

codeLEARN ABOUT

CODING

--> Decision!

Btour the code,

then break the code

!

jump to page 27 jump to page 30jump to page 25

Explore the Code & Editing Code Experience

page 25

changing the code

change & save the code

Let’s Change the Game’s Title page

refresh the browser &

test the game

Breaking It

break the code not the computer

http://www.flickr.com/photos/jupiterssj4/3954031705

page 27

Google Chrome tells you what broke

and if it’s an error in JavaScript it’ll say WHERE it broke!

Starting Over

http://www.flickr.com/photos/dps/7161557/sizes/m/in/photostream/

“the jolly, shiny, candy-like button...”

--> Decision!Time to Explore Coding!

chooseA Bintro to code

& coding for a web browser

coding for a web browser

!

jump to page 32 jump to page 36

page 30

computers only know what you tell them

imagine i’m a computer!

Intro to Coding

page 32

Conditional logic

Loops

functions!

Coding for a Web Browser

images

text

sound

css

html buttonsjavascript

an HTML page brings together many parts

page 36

Intro to HTML, CSS, and Javascript

What kind of element

Element’s Class

Element IDstatus or situation of

the Element

Browser’s DOM: Document Object Model

cssjavascript

id: avatarclass: (none)

Type: DIVsituation: (varies)

connecting css or javascript to html elements

document.getElementById(“avatar”)document.getElementsByClassName(“container”)

css

javascript

--> Decision!Game Design!

chooseA BLean about

the fun loopHow game design

is related to making comics

!

jump to page 40 jump to page 43

Game Design - Fun Loop

a flow of choices and feedback

page 40

Game Design - Fun Loop

Pac-Man

Game Design - Fun Loop

put in quarter

avoid ghosts

eat pellets

eat power pellet

chase ghost

clear maze

Pac-Man

Game Design - How it’s related to Comics

Narrative Flow, Narrative context

page 43

Game Design - How it’s related to Comics

--> Decision!2 different topics!

chooseA Bwhat is a game

heartbeat

Explore game files in the workshop

!

jump to page 46 jump to page 51

Game Heartbeat

page 46

Frame Rateper second...

--> Decision! Mess With Game Timing

chooseA Bmake it faster

make it slower

!

jump to page 49 jump to page 50

Make It Faster

boo!

whee!

page 49

Make It Slower

aw!

page 50

The Files You Have - You do Have Them, Right?

page 51

Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop

How Do They Get Into the Game?

let’s use the Elements tab to explore the page

Use the Browser Developer Tools to Find Something on Screen, Then

in Code

Find by Searching the Code

Text editors give us tools like FIND, LINE

NUMBERS, and CODE HIGHLIGHTING to make

our job easier!

Let's Change an Asset

art - sound - text

a chance to add

kitties or stars!

let’s change the game!

page 55

--> Decision! What kind of Asset to change?!

choose

A Bart sound

cText

!

Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop

jump to page 57 jump to page 65jump to page 62

Since we’re scripting so much for the game, let’s

use JavaScript...

ArtWeb browsers let us

load images in HTML, JavaScript, and CSS!

page 57

Art Text

Backgrounds

Actors

Objects

sound effects

let’s look at how we LOAD and PLAY the

sounds!

BACKGROUND MUSIC

page 62

sound effects

let’s look at how we LOAD and PLAY the

sounds!

JUMP SOUND

sound effects

let’s look at how we LOAD and PLAY the

sounds!

COLLISION SOUND

Text

lots of text in the game already...

or add some more!

page 65

Decision!2 different topics!

chooseA Banimation game loop

!

jump to page 77 jump to page 67

Game Looptick update > run rules > update display > get input >

REPEAT!

page 67

Flowstart screen > level start > play level ( > sections

within a level) > level complete > REPEAT!

Parts

Score

how far to move

show the updates

to the score

which way to move?

how far to move?

when to jump at the

ninja?

where is the player

telling me to move?

am I colliding w/tomato?

if so did I squish it?input

jump! move left,

move right!

Synchronized, Working Together

heatbeat + game loop

Score

input

Looking at the Code and the Game

the game loop! instructions to update all the

parts of the game

the heartbeat! aka “tick”

Decision!2 different topics!

chooseA Bgame art, text,

and soundmore detail about

the game loop

!

jump to page 55 jump to page 73

Game Loop 2

2page 73

Input

input

keyboard mouse

touch screen and more...

Baddies - Computer Opponents

Decision!2 different topics!

chooseA Bgame art, text,

and sound animation

!

jump to page 55 jump to page 77

Animation

page 77

Coordinate Systemx

y

00 20

20

7,5

7

5

we use coordinates X and Y to position game

objects!

CSS3 Transformslet’s check out the code example css-transform-

playground.html

each tick of the game

heartbeat, we use css3

transforms to update

anything we want to move!

--> Decision!game + workshop to make a game

chooseA Bparallax

backgroundscharacter

movement + hop

!

jump to page 81 jump to page 82

Background Parallax

scrolling speed B

scrolling speed ACloser = Faster

page 81

Character Movement - Hop

page 82

time for a bonus level?

chooseA B

no time!animation breathing

c danimation

wobbleanimation particles

!

jump to page 85 jump to page 87

jump to page 88 jump to page 86

Animation Bonus Levels

wobble

page 85

breathe

page 86

particles!

page 87

JUST ME.

• Game Testers Robot Experiment - gone wrong

Boss Fight!!

page 88

Boss Fight!JUST ME. AND A FEW

FRIENDS HERE TO

TAKE - I MEAN TEST YOUR GAME!

• Defeat the Robot Army by Calling Out Accomplishments

Victory!game lab time!

bzzzt... all my base are belong

to you

Time to Craft

what are you doing up there?

ha-haarrrrrr!

Discussion

easier?more difficult!

arrrrrrrr!surprising...

Demos

More Discussion OnlineOn a Posterous Private Forum for This Kids Read comics Class

I’ll check-in, comment, and respond on the

11th, 13th, and 14th of July 2012! Parental

permission form required!

Share your games and

questions!

http://megamega-krc2012.posterous.com/

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

congratulations!

High Score Board & Custom URL

The version of the game we customized together will be downloadable from http://agz.me/krc2012/gameworkshop

to get your score on the high-score boardenter 3 initials/letters + your score on the paper high-score board!

I’ll add them to the game before I post it!

Continue?

9... 8... 7...6

5... 4... 3...

Future• HTML5 on Your TV

• Google TV

• XBox

• Playstation 3

• Wii

• Full Screen API

• Game Controller API

much of this is here already or coming very soon!

--> Decision! bonus unlock

chooseA Bsee a screen

from the first game rob made*

hear about the first release of guitar fretter

jump to page 102 jump to page 101

Bonus - Guitar Fretter Lessons Learned

page 101

Bonus - Screenshot of Rob’s 1st Game

page 102

Thank You For Playing!