Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
please fol                                                              d an                                              ...
rob stenzinger presents:Underwater Tomato Ninja HTML5 GameDevelopment & Design - a Daedal Mega  Mega Overdrive Games Produ...
Games for Learninghttp://www.flickr.com/photos/lilu12323/4028801424/sizes/l/in/photostream/                                ...
Immersive Learning                                                                      e                                 ...
Warning                                                                         in. g.                                    ...
Rob makes games & comics      stenzingergames, ux lean into art          Agz.me consulting          workshops & podcasts  ...
Guitar Fretter  http://guitarfretter.com
--> Decision!!        A      jump to page 12                        choose                                      B         ...
Welcome to the trial-by-fire Apprenticeship at Daedal Mega     Mega Overdrive Gameswe make games for anything and         ...
Im Not Daedelus                                      we                                    ne lcom                        ...
Daedal Mega Mega      Overdrive Games                                   s a ge                                s i ar      ...
Rules of our Game        Workshop Game                Questions andvote where to     Crafting      earn & collect  go next...
? ! Q A C D HQuestion    Answer    Craft   Demo   Hidden                      your    Your                      Game    Ga...
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 ...
Run the Game is there a ninja?  is there water?
!      A    jump to page 23                      choose                                   B                               ...
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       ...
Design Goals           uld                                   out          arr       ho                                    ...
Questions                              th ese are y. why am I the bad guy?                    d                           ...
m e limit,                                                                             2 min ti         o                 ...
!                --> Decision!                         choose      A    jump to page 27                          B        ...
Explore the Code &Editing Code Experience                    page 25
changing the code                             refresh the                             browser &                         te...
Breaking It                 http://www.flickr.com/photos/jupiterssj4/3954031705break the code   not the computer           ...
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.flic...
!               --> Decision!         Time to Explore Coding!        A      jump to page 32    intro to code              ...
computers only know what you tell them       im          ag        co ine i’          mp     m             ute a          ...
Intro to Coding              page 32
Conditional logic
Loops
functions!
Coding for a Web Browser              an HTML page brings              together many parts      text                      ...
Intro to HTML, CSS,      and Javascript     javascript                           css                  Browser’s DOM:      ...
connecting css or javascript to html elements     cssjavascript    document.getElementById(“avatar”)    document.getElemen...
!               --> Decision!                        Game Design!        A      jump to page 40    Lean about             ...
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               ma...
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          ...
Game Heartbeat             page 46
Frame Rate  per second...
!    --> Decision! Mess With                      Game Timing     A    jump to page 49    make it                         ...
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   ...
How Do They Get Into     the Game?
Use the Browser Developer Tools      to Find Something on Screen, Then                          in Code let’s use the Elem...
Find by Searching the        Code      Text editors give us                 tools like FIND, LINE                NUMBERS, ...
Lets Change an                      Asset                                          let’s ch                               ...
!    --> Decision! What kind         of Asset to change?!             Need the files? https://github.com/robstenzinger/HTM...
Art       Web browsers let us      load images in HTML,      JavaScript, and CSS!        Since we’re scripting so        m...
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.....
!                        Decision!                2 different topics!       A      jump to page 77                        ...
Game Looptick update > run rules > update display > get input >                      REPEAT!                              ...
Flowstart screen > level start > play level ( > sections    within a level) > level complete > REPEAT!
r to                        mo                          ve                               Parts            fa              ...
Synchronized,Working Together                    Score heatbeat + game loop        input
Looking at the Code                     and the Game                p!                 inst                               ...
!                        Decision!                2 different topics!        A      jump to page 55    game art, text,    ...
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,    ...
Animation            page 77
Coordinate System     0         x                 2005        7         7,5y                   we use coordinates X       ...
CSS3 Transforms  let’s check out the code  example css-transform-      playground.html    ch tick of the game  ea      tbe...
!               --> Decision!    game + workshop to make a game        A      jump to page 81     parallax                ...
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  ...
Animation Bonus    Levels
wobble         page 85
breathe          page 86
particles!         page 87
!      Boss Fight!           JUST ME.    • Game Testers Robot     Experiment - gone wrong                               pa...
Boss Fight!     JUST M  E. AND A FEW       FRIE NDS HERE TO                         T      TAK E - I MEAN TES          YOU...
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                          ...
Demos
I’ll check-in, comment,   and respond on the 11th, 13th, and 14th of    July 2012! Parental                               ...
More Resources•   Workshop source code files and assets    •   https://github.com/robstenzinger/HTML5-Game-Dev-        Wor...
High Score Board       & Custom URLThe version of the game we customized together will be downloadable from               ...
Continue?           69... 8... 7...   5... 4... 3
Future• HTML5 on Your TV• Google TV• XBox                  much                               of this                     ...
--> Decision! bonus                     unlock    A  jump to page 102 see a screen                     choose             ...
Bonus - Guitar Fretter  Lessons Learned                page 101
Bonus - Screenshot of   Rob’s 1st Game                page 102
Thank You For Playing!
Underwater Tomato Ninja - HTML5 Game Development & Design
Upcoming SlideShare
Loading in …5
×

Underwater Tomato Ninja - HTML5 Game Development & Design

4,138 views

Published on

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!

  • Be the first to comment

  • Be the first to like this

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
  2. 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/
  3. Games for Learninghttp://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 onhttp://www.flickr.com/photos/msvg/2670767610/sizes/l/in/photostream/ s
  6. Rob makes games & comics stenzingergames, 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 Gameswe make games for anything and everything. page 9
  10. Im Not Daedelus we ne lcom wt ale e, nt! *Just an every day purple dragonlibrarian, 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 andvote where to Crafting earn & collect go next achievements page 12
  13. ? ! Q A C D HQuestion Answer Craft Demo Hidden your Your Game Game10pts 10pts 100pts 150pts 15pts Achievements
  14. Get on the score board got achievements? add yourinitials & 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 Screensstart game levelcredits 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 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!
  22. Questions th ese are y. why am I the bad guy? d ts, budpick the crab over there castine instead.
  23. m e limit, 2 min ti o ments t achieve 10 and s cores > e! p scorhttp://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/3954031705break 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 ModelWhat 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 cssjavascript 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 Loopa flow of choices and feedback page 40
  41. Game Design - Fun LoopPac-Man
  42. Game Design - Fun Loop eat powerPac-Man eat pellet clear pellets maze chaseput in avoid ghostquarter ghosts
  43. Game Design - Howit’s related to Comics Narrative Flow, Narrative context page 43
  44. Game Design - Howit’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 Fasterboo! 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 Elementstab 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. 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
  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 MUSIClet’s look at how weLOAD and PLAY the sounds! page 62
  63. sound effects JUMP SOUNDlet’s look at how weLOAD and PLAY the sounds!
  64. sound effects COLLISION SOUNDlet’s look at how weLOAD 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 Looptick update > run rules > update display > get input > REPEAT! page 67
  68. Flowstart 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 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?
  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 ethe 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 inputtouch 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 2005 7 7,5y 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 gbase are belon to you
  91. Time to Craft ! ha-haarrrrrrwhat are you doing up there?
  92. Discussion mo ... re g er? dif fic ri sin arr rrr a si ult ! u rp rrre s !
  93. Demos
  94. 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/
  95. 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
  96. 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!
  97. Continue? 69... 8... 7... 5... 4... 3
  98. 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
  99. --> 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
  100. Bonus - Guitar Fretter Lessons Learned page 101
  101. Bonus - Screenshot of Rob’s 1st Game page 102
  102. Thank You For Playing!

×