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.
Coding Your First HTML5 Game     Randy Hoyt       @randyhoyt
randyhoyt.com/launchgame                    @randyhoyt
Overview• Code• HTML5• Games              @randyhoyt
Overview• Games• HTML5• Code              @randyhoyt
Games
Games• Games are fun                   I love games!                  @randyhoyt
A Theory of Fun (2004), by Ralph Koster
Games• Games are fun• Games are everywhere                          I love games!                         @randyhoyt
Homo Ludens (1938), by Johan Huizinga
Games• Games are fun• Games are everywhere• Games exercise the brain                              I love games!           ...
Play engages the prefrontal cortex, responsible for your highest-level cognitive functions – including self- knowledge, me...
Brain Workout, Life Optimizer, http://trhou.se/WHkaR7
Games• Games are fun• Games are everywhere• Games exercise the brain• Games are practice for     the real world           ...
7 TED Talks on Gaming, http://trhou.se/gamesTED
Games And Me               @randyhoyt
HTML5
!      rd AlertBuzzwo
HTML5 and Related Technologies• Canvas                                     @randyhoyt
HTML5 and Related Technologies• Canvas• WebGL   http://trhou.se/whyWebGL                                     @randyhoyt
HTML5 and Related Technologies• Canvas• WebGL   http://trhou.se/whyWebGL• WebSocket   http://trhou.se/introwebsockets     ...
HTML5 and Related Technologies• Canvas• WebGL   http://trhou.se/whyWebGL• WebSocket   http://trhou.se/introwebsockets• SVG...
HTML5 Games
It’s official: with HTML5 today the browser has become a full- fledged gaming platform.HTML5 Gaming, http://html5rocks.com...
Behind the Scenes, http://www.cuttherope.ie/dev/
HTML5 Games• Top 10 HTML5 games of 2012     http://trhou.se/gamesin2012• Goko• Game Closure Devkit• Famo.us - http://tcrn....
Code
Project StructureHTML                CSS   JavaScript                            @randyhoyt
Project StructureHTML                CSS   JavaScript                            @randyhoyt
Project StructureHTML                CSS   JavaScript                            @randyhoyt
Project StructureHTML                CSS   JavaScript                            @randyhoyt
HTML
CSS
Canvas Preview
Canvas and Context
Image in JavaScript
requestAnimationFrame
update function
update function
Game Logic: Init (Once), Update (Loop)init            update
fillRect
One wall in the browser
fillRect
Five walls in the browser
drawImage
Frog variables
Frog in the browser
Five walls in the browser
clearRect
clearRect
Game Logic: Init (Once), Update (Loop)init            update
Game Logic: Move               updateinit
Game Logic: Update, Render, Loop                updateinit                                   render
Game Logic• Init    - Place Frog    - Place Obstacles• Update    - Move• Render                        @randyhoyt
Game Logic: Bind Events• Init    - Bind Events    - Place Frog    - Place Obstacles• Update    - Move• Render             ...
Game Logic: Place Badges• Init      - Bind Events      - Place Frog      - Place Obstacles      - Place Badges• Update... ...
Game Logic: Update...• Update      - Check for Movement      - Check for Obstacles      - Move      - Check for Badges• Re...
Game Logic: Check for Victory...• Update      ...      ...• Render• Check for Victory                                     ...
Game Preview
HTML5 Game Frameworks• Impact• LimeJS• Crafty• GameClosure                                                  !• CocoonJS   ...
HTML5 Game Frameworks • Impact • LimeJS • Crafty • GameClosure • CocoonJSGame Engine Comparison, http://trhou.se/gamecompa...
LimeJS• Free and Open Source• Uses DOM or Canvas• Built on Google Closure• Requires Python• Incompatible with CocoonJS    ...
> bin/lime.py create treehouse
HTML
Starting JavaScript File
Create Director
Director Settings
Scene
Blank Canvas
Comments
Game Background Sprite
appendChild
Create Analog Stick Sprite
Preview Game
Preview Game With Inspector
Preview Game With Console
Add Four Button Sprites
Frog Constructor
Frog Properties
Require Frog
> bin/lime.py update
Constants
appendChild Frog
Game Logic: Init, Renderinit                           render
Create Walls and Badges
appendChild: Walls and Badges
Game Preview
Add Event for UP Button
Frog: startMovement
Game Logic: Schedule Managerinit           update                               render
Schedule Manager
Game Logic: Check Movement              updateinit              ?                             render
Add Events to All Buttons
checkMovement
Game Logic: Check Movement              updateinit              ?                             render
Game Logic: Check Movement              updateinit              ?                             render
Game Logic: Check for Obstacle                update                         ?init                ?                       ...
Determine all four corners
Loop through all the walls
Determine the wall’s corners
If the frog’s right would be right of the wall’s left ...
... and if the frog’s left would be left of the wall’s right ...
... and if the frog’s top would be above the wall’s bottom ...
... and if the frog’s bottom would be below the wall’s top ...
... then the frog and the wall would overlap.
Checking for a collision
Early return on collision
Game Logic: Check for Obstacle                update                         ?init                ?                       ...
Game Logic: Check for Obstacle                update                         ?init                ?                       ...
Game Logic: Check for Obstacle                update                         ?init                ?                       ...
Game Logic: Check for Badge               update                        ?     ?init               ?                       ...
Keep track of badges earned
Check for collision with badge
Increment badges earned
Game Logic: Check for Badge               update                        ?     ?init               ?                       ...
Game Logic: Check for Badge               update                        ?     ?                                  +init    ...
Game Logic: Check for Victory            update                                   ?   ?                                   ...
Check for a victory
Check for a victory
Game Logic: Check for Victory            update                                   ?   ?                                   ...
Game Logic: Reset on Victory            update                                   ?   ?                                    ...
> bin/lime.py build treehouse -o     treehouse/treehouse-min.js
randyhoyt.com/launchgame                    @randyhoyt
Html5game presentation
Html5game presentation
Html5game presentation
Html5game presentation
Html5game presentation
Html5game presentation
Html5game presentation
Upcoming SlideShare
Loading in …5
×

Html5game presentation

1,584 views

Published on

  • Be the first to comment

Html5game presentation

  1. 1. Coding Your First HTML5 Game Randy Hoyt @randyhoyt
  2. 2. randyhoyt.com/launchgame @randyhoyt
  3. 3. Overview• Code• HTML5• Games @randyhoyt
  4. 4. Overview• Games• HTML5• Code @randyhoyt
  5. 5. Games
  6. 6. Games• Games are fun I love games! @randyhoyt
  7. 7. A Theory of Fun (2004), by Ralph Koster
  8. 8. Games• Games are fun• Games are everywhere I love games! @randyhoyt
  9. 9. Homo Ludens (1938), by Johan Huizinga
  10. 10. Games• Games are fun• Games are everywhere• Games exercise the brain I love games! @randyhoyt
  11. 11. Play engages the prefrontal cortex, responsible for your highest-level cognitive functions – including self- knowledge, memory, mental imagery, and incentive and reward processing.Brain Workout, Life Optimizer, http://trhou.se/WHkaR7
  12. 12. Brain Workout, Life Optimizer, http://trhou.se/WHkaR7
  13. 13. Games• Games are fun• Games are everywhere• Games exercise the brain• Games are practice for the real world games! I love @randyhoyt
  14. 14. 7 TED Talks on Gaming, http://trhou.se/gamesTED
  15. 15. Games And Me @randyhoyt
  16. 16. HTML5
  17. 17. ! rd AlertBuzzwo
  18. 18. HTML5 and Related Technologies• Canvas @randyhoyt
  19. 19. HTML5 and Related Technologies• Canvas• WebGL http://trhou.se/whyWebGL @randyhoyt
  20. 20. HTML5 and Related Technologies• Canvas• WebGL http://trhou.se/whyWebGL• WebSocket http://trhou.se/introwebsockets @randyhoyt
  21. 21. HTML5 and Related Technologies• Canvas• WebGL http://trhou.se/whyWebGL• WebSocket http://trhou.se/introwebsockets• SVG @randyhoyt
  22. 22. HTML5 Games
  23. 23. It’s official: with HTML5 today the browser has become a full- fledged gaming platform.HTML5 Gaming, http://html5rocks.com/gaming
  24. 24. Behind the Scenes, http://www.cuttherope.ie/dev/
  25. 25. HTML5 Games• Top 10 HTML5 games of 2012 http://trhou.se/gamesin2012• Goko• Game Closure Devkit• Famo.us - http://tcrn.ch/ZfCuNh  @randyhoyt
  26. 26. Code
  27. 27. Project StructureHTML CSS JavaScript @randyhoyt
  28. 28. Project StructureHTML CSS JavaScript @randyhoyt
  29. 29. Project StructureHTML CSS JavaScript @randyhoyt
  30. 30. Project StructureHTML CSS JavaScript @randyhoyt
  31. 31. HTML
  32. 32. CSS
  33. 33. Canvas Preview
  34. 34. Canvas and Context
  35. 35. Image in JavaScript
  36. 36. requestAnimationFrame
  37. 37. update function
  38. 38. update function
  39. 39. Game Logic: Init (Once), Update (Loop)init update
  40. 40. fillRect
  41. 41. One wall in the browser
  42. 42. fillRect
  43. 43. Five walls in the browser
  44. 44. drawImage
  45. 45. Frog variables
  46. 46. Frog in the browser
  47. 47. Five walls in the browser
  48. 48. clearRect
  49. 49. clearRect
  50. 50. Game Logic: Init (Once), Update (Loop)init update
  51. 51. Game Logic: Move updateinit
  52. 52. Game Logic: Update, Render, Loop updateinit render
  53. 53. Game Logic• Init - Place Frog - Place Obstacles• Update - Move• Render @randyhoyt
  54. 54. Game Logic: Bind Events• Init - Bind Events - Place Frog - Place Obstacles• Update - Move• Render @randyhoyt
  55. 55. Game Logic: Place Badges• Init - Bind Events - Place Frog - Place Obstacles - Place Badges• Update... @randyhoyt
  56. 56. Game Logic: Update...• Update - Check for Movement - Check for Obstacles - Move - Check for Badges• Render @randyhoyt
  57. 57. Game Logic: Check for Victory...• Update ... ...• Render• Check for Victory @randyhoyt
  58. 58. Game Preview
  59. 59. HTML5 Game Frameworks• Impact• LimeJS• Crafty• GameClosure !• CocoonJS nd ma ny more ... a @randyhoyt
  60. 60. HTML5 Game Frameworks • Impact • LimeJS • Crafty • GameClosure • CocoonJSGame Engine Comparison, http://trhou.se/gamecompare @randyhoyt
  61. 61. LimeJS• Free and Open Source• Uses DOM or Canvas• Built on Google Closure• Requires Python• Incompatible with CocoonJS @randyhoyt
  62. 62. > bin/lime.py create treehouse
  63. 63. HTML
  64. 64. Starting JavaScript File
  65. 65. Create Director
  66. 66. Director Settings
  67. 67. Scene
  68. 68. Blank Canvas
  69. 69. Comments
  70. 70. Game Background Sprite
  71. 71. appendChild
  72. 72. Create Analog Stick Sprite
  73. 73. Preview Game
  74. 74. Preview Game With Inspector
  75. 75. Preview Game With Console
  76. 76. Add Four Button Sprites
  77. 77. Frog Constructor
  78. 78. Frog Properties
  79. 79. Require Frog
  80. 80. > bin/lime.py update
  81. 81. Constants
  82. 82. appendChild Frog
  83. 83. Game Logic: Init, Renderinit render
  84. 84. Create Walls and Badges
  85. 85. appendChild: Walls and Badges
  86. 86. Game Preview
  87. 87. Add Event for UP Button
  88. 88. Frog: startMovement
  89. 89. Game Logic: Schedule Managerinit update render
  90. 90. Schedule Manager
  91. 91. Game Logic: Check Movement updateinit ? render
  92. 92. Add Events to All Buttons
  93. 93. checkMovement
  94. 94. Game Logic: Check Movement updateinit ? render
  95. 95. Game Logic: Check Movement updateinit ? render
  96. 96. Game Logic: Check for Obstacle update ?init ? render
  97. 97. Determine all four corners
  98. 98. Loop through all the walls
  99. 99. Determine the wall’s corners
  100. 100. If the frog’s right would be right of the wall’s left ...
  101. 101. ... and if the frog’s left would be left of the wall’s right ...
  102. 102. ... and if the frog’s top would be above the wall’s bottom ...
  103. 103. ... and if the frog’s bottom would be below the wall’s top ...
  104. 104. ... then the frog and the wall would overlap.
  105. 105. Checking for a collision
  106. 106. Early return on collision
  107. 107. Game Logic: Check for Obstacle update ?init ? render
  108. 108. Game Logic: Check for Obstacle update ?init ? render
  109. 109. Game Logic: Check for Obstacle update ?init ? render
  110. 110. Game Logic: Check for Badge update ? ?init ? render
  111. 111. Keep track of badges earned
  112. 112. Check for collision with badge
  113. 113. Increment badges earned
  114. 114. Game Logic: Check for Badge update ? ?init ? render
  115. 115. Game Logic: Check for Badge update ? ? +init ? render
  116. 116. Game Logic: Check for Victory update ? ? +init ? ? ` render
  117. 117. Check for a victory
  118. 118. Check for a victory
  119. 119. Game Logic: Check for Victory update ? ? +init ? ? ` render
  120. 120. Game Logic: Reset on Victory update ? ? +init ? ? ` render
  121. 121. > bin/lime.py build treehouse -o treehouse/treehouse-min.js
  122. 122. randyhoyt.com/launchgame @randyhoyt

×