Html5game presentation

1,029
-1

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,029
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×