Underwater Tomato Ninja - HTML5 Game Development & Design

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!

Transcript

1. please fold an index card and write your 3 letter call-sign as a name card. Ready? anyone have a quarter? http://www.flickr.com/photos/robboudon/541896810 Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop
2. Underwater Tomato Ninja HTML5 Game Development & Design - a Daedal Mega Mega Overdrive Games Production rob stenzinger presents: workshop ©2012 rob stenzinger this slide deck licensed under creative commons http://creativecommons.org/licenses/by/3.0/
3. 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/
4. 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
5. Warning http://www.flickr.com/photos/msvg/2670767610/sizes/l/in/photostream/ brain. shutting. down. so many informations
6. Rob lean into art Agz.me games, ux makes games & comics workshops & podcasts comics consulting stenzinger
7. Guitar Fretter http://guitarfretter.com
8. --> Decision! choose A B Instructions Both instructions & story ! jump to page 12 jump to page 9
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 *Just an every day purple dragon librarian, guide to the apprenticeships. welcome, new talent!
11. Daedal Mega Mega Overdrive Games imagine sony, microsoft, nintendo, apple, all went voltron into one massive company. this is a rather large building miniscule.
12. Rules of our Game Workshop Game earn & collect achievements vote where to go next Questions and Crafting page 12
13. Achievements Question Answer Craft your Game Demo Your Game Hidden 10pts 10pts 100pts 150pts 15pts Q A C D H ? !
14. Get on the score board got achievements? add your initials & score after game over!
15. 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
16. Run the Game is there a ninja? is there water?
17. choose A B Play for Fun! Play for research and for fun! ! jump to page 23 jump to page 18
18. Play the Game for research Take notes... page 18
19. Explore the Screens credits game over start game level
20. Bugs arrrrrrrrrrrr! I don’t think it’s supposed to do that!
21. Design Goals there 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?
22. Questions why am I the bad guy? pick the crab over there instead. these are castinets, buddy.
23. Play for fun! 2 min time limit, achievements to scores > 10 and top score! page 23 http://www.flickr.com/photos/russellbernice/2890790642
24. choose A C break the code LEARN ABOUT CODING --> Decision! B tour the code, then break the code ! jump to page 27 jump to page 30 jump to page 25
25. Explore the Code & Editing Code Experience page 25
26. changing the code change & save the code Let’s Change the Game’s Title page refresh the browser & test the game
27. Breaking It break the code not the computer http://www.flickr.com/photos/jupiterssj4/3954031705 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 http://www.flickr.com/photos/dps/7161557/sizes/m/in/photostream/ “the jolly, shiny, candy-like button...”
30. --> Decision! Time to Explore Coding! choose A B intro to code & coding for a web browser coding for a web browser ! jump to page 32 jump to page 36 page 30
31. computers only know what you tell them imagine i’m a computer!
32. Intro to Coding page 32
33. Conditional logic
34. Loops
35. functions!
36. Coding for a Web Browser images text sound css html buttons javascript an HTML page brings together many parts page 36
37. Intro to HTML, CSS, and Javascript What kind of element Element’s Class Element ID status or situation of the Element Browser’s DOM: Document Object Model css javascript id: avatar class: (none) Type: DIV situation: (varies)
38. connecting css or javascript to html elements document.getElementById(“avatar”) document.getElementsByClassName(“container”) css javascript
39. --> Decision! Game Design! choose A B Lean about the fun loop How game design is related to making comics ! jump to page 40 jump to page 43
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 put in quarter avoid ghosts eat pellets eat power pellet chase ghost clear maze Pac-Man
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! choose A B what is a game heartbeat Explore game files in the workshop ! jump to page 46 jump to page 51
46. Game Heartbeat page 46
47. Frame Rate per second...
48. --> Decision! Mess With Game Timing choose A B make it faster make it slower ! jump to page 49 jump to page 50
49. Make It Faster boo! whee! page 49
50. Make It Slower aw! page 50
51. The Files You Have - You do Have Them, Right? page 51 Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop
52. How Do They Get Into the Game?
53. let’s use the Elements tab to explore the page Use the Browser Developer Tools to Find Something on Screen, Then in Code
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 art - sound - text a chance to add kitties or stars! let’s change the game! page 55
56. --> Decision! What kind of Asset to change?! choose A B art sound c Text ! Need the files? https://github.com/robstenzinger/HTML5-Game-Dev-Workshop jump to page 57 jump to page 65 jump to page 62
57. Since we’re scripting so much for the game, let’s use JavaScript... Art Web browsers let us load images in HTML, JavaScript, and CSS! page 57
58. Art Text
59. Backgrounds
60. Actors
61. Objects
62. sound effects let’s look at how we LOAD and PLAY the sounds! BACKGROUND MUSIC page 62
63. sound effects let’s look at how we LOAD and PLAY the sounds! JUMP SOUND
64. sound effects let’s look at how we LOAD and PLAY the sounds! COLLISION SOUND
65. Text lots of text in the game already... or add some more! page 65
66. Decision! 2 different topics! choose A B animation game loop ! jump to page 77 jump to page 67
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. 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!
70. Synchronized, Working Together heatbeat + game loop Score input
71. Looking at the Code and the Game the game loop! instructions to update all the parts of the game the heartbeat! aka “tick”
72. Decision! 2 different topics! choose A B game art, text, and sound more detail about the game loop ! jump to page 55 jump to page 73
73. Game Loop 2 2 page 73
74. Input input keyboard mouse touch screen and more...
75. Baddies - Computer Opponents
76. Decision! 2 different topics! choose A B game art, text, and sound animation ! jump to page 55 jump to page 77
77. Animation page 77
78. Coordinate System x y 0 0 20 20 7,5 7 5 we use coordinates X and Y to position game objects!
79. CSS3 Transforms let’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!
80. --> Decision! game + workshop to make a game choose A B parallax backgrounds character movement + hop ! jump to page 81 jump to page 82
81. Background Parallax scrolling speed B scrolling speed A Closer = Faster page 81
82. Character Movement - Hop page 82
83. time for a bonus level? choose A B no time! animation breathing c d animation wobble animation particles ! jump to page 85 jump to page 87 jump to page 88 jump to page 86
84. Animation Bonus Levels
85. wobble page 85
86. breathe page 86
87. particles! page 87
88. JUST ME. • Game Testers Robot Experiment - gone wrong Boss Fight! ! page 88
89. Boss Fight! JUST ME. AND A FEW FRIENDS HERE TO TAKE - I MEAN TEST YOUR GAME! • Defeat the Robot Army by Calling Out Accomplishments
90. Victory! game lab time! bzzzt... all my base are belong to you
91. Time to Craft what are you doing up there? ha-haarrrrrr!
92. Discussion easier? more difficult! arrrrrrrr! surprising...
93. Demos
95. More Discussion Online On 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/
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. 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 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? 9... 8... 7... 6 5... 4... 3
99. 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!
100. --> Decision! bonus unlock choose A B see a screen from the first game rob made* hear about the first release of guitar fretter jump to page 102 jump to page 101
101. Bonus - Guitar Fretter Lessons Learned page 101
102. Bonus - Screenshot of Rob’s 1st Game page 102
103. Thank You For Playing!