Underwater Tomato Ninja - HTML5 Game Development & Design

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

rob stenzinger presents:Underwater Tomato Ninja HTML5 GameDevelopment & 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/

Games for Learninghttp://www.ﬂickr.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

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.ﬂickr.com/photos/dnamichaud/372473978/sizes/l/in/photostream/

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

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

Guitar Fretter http://guitarfretter.com

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

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

Im Not Daedelus we ne lcom wt ale e, nt! *Just an every day purple dragonlibrarian, guide to the apprenticeships.

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.

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

? ! Q A C D HQuestion Answer Craft Demo Hidden your Your Game Game10pts 10pts 100pts 150pts 15pts Achievements

Get on the score board got achievements? add yourinitials & score after game over!

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?

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

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

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

Explore the Screensstart game levelcredits game over

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

Design Goals uld out arr ho ab igs, e s ess d mo ow s, p s to the rrrrrr er lth 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!

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

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

! --> 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

Explore the Code &Editing Code Experience page 25

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

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

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

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

! --> 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

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

Intro to Coding page 32

Conditional logic

functions!

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

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

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

! --> 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

Game Design - Fun Loopa flow of choices and feedback page 40

Game Design - Fun LoopPac-Man

Game Design - Fun Loop eat powerPac-Man eat pellet clear pellets maze chaseput in avoid ghostquarter ghosts

Game Design - Howit’s related to Comics Narrative Flow, Narrative context page 43

Game Design - Howit’s related to Comics

! --> 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

Game Heartbeat page 46

Frame Rate per second...

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

Make It Fasterboo! whe e! page 49

Make It Slower aw! page 50

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

How Do They Get Into the Game?

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

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

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

! --> 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

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

Art Text

Backgrounds

Actors

Objects

sound effects BACKGROUND MUSIClet’s look at how weLOAD and PLAY the sounds! page 62

sound effects JUMP SOUNDlet’s look at how weLOAD and PLAY the sounds!

sound effects COLLISION SOUNDlet’s look at how weLOAD and PLAY the sounds!

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

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

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!

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 ovam 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?

Synchronized,Working Together Score heatbeat + game loop input

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 ethe heartbeat! aka “tick”

! 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

Game Loop 2 2 page 73

Input keyboard mouse inputtouch screen and more...

Baddies - Computer Opponents

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

Animation page 77

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

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

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

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

Character Movement - Hop page 82

! 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

Animation Bonus Levels

wobble page 85

breathe page 86

particles! page 87

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

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

Victory! game lab time! bzzzt... all my gbase are belon to you

Time to Craft ! ha-haarrrrrrwhat are you doing up there?

Discussion mo ... re g er? dif ﬁc ri sin arr rrr a si ult ! u rp rrre s !

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 OnlineOn a Posterous Private Forum for This Kids Read comics Class 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

High Score Board & Custom URLThe 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!

Continue? 69... 8... 7... 5... 4... 3

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

--> Decision! bonus unlock A jump to page 102 see a screen choose B jump to page 101 hear about thefrom the first first release ofgame rob made* guitar fretter

Bonus - Guitar Fretter Lessons Learned page 101

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

Thank You For Playing!

http://agz.me	96
http://interactive-storyteller.com	8
http://us-w1.rockmelt.com	3
http://pinterest.com	2
http://localhost	2
https://si0.twimg.com	1
http://www.onlydoo.com	1
http://kpcompass.com	1

Underwater Tomato Ninja - HTML5 Game Development & Design

by Rob Stenzinger on Jul 05, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 114

Statistics

Underwater Tomato Ninja - HTML5 Game Development & Design Presentation Transcript