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.

Gotta code them all, a Pokémon and HTML5 love story!

19,422 views

Published on

How do you make an original GameBoy adventure available on mobile and desktop? In this session Bert explains how he made it happen using just HTML5 and Javascript, and which challenges he encountered. Who needs a girlfriend when there’s JavaScript?

Gotta code them all, a Pokémon and HTML5 love story!

  1. 1. @Berttimmermans
  2. 2. Bert TImmermans Application Designer @Digiti About me @Berttimmermans
  3. 3. @Berttimmermans
  4. 4. THE JOURNEY
  5. 5. The ConceptTHE JOURNEY
  6. 6. The Concept Expirements THE JOURNEY
  7. 7. The Concept Expirements Troubleshooting THE JOURNEY
  8. 8. The Concept Expirements Troubleshooting The Results THE JOURNEY
  9. 9. The Concept Expirements Troubleshooting What’s next? The Results THE JOURNEY
  10. 10. The ConceptSetting the scope 1
  11. 11. I RPG
  12. 12. <canvas></canvas>
  13. 13. HTML5<canvas></canvas>
  14. 14. 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1
  15. 15. [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ] 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 ] [
  16. 16. EXPIREMENTSConverting theory into practice 2
  17. 17. texture.png EXAMPLE
  18. 18. var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var map = [ [ 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1 ] ]; var image = new Image(); var grid = 20; var x = 0; var y = 0; EXAMPLE
  19. 19. EXAMPLE canvas.width = 140; canvas.height = 140; image.onload = function() { for (var i in map) { for (var j in map[i]) { context.drawImage(this, map[i][j]*grid, 0, grid, grid, (x*grid), (y*grid), grid, grid ); x ++; } x = 0; y ++; } }; image.src = ‘texture.png'; document.body.appendChild(canvas);
  20. 20. EXAMPLE
  21. 21. drawImage( this, map[i][j]*grid, 0, grid, grid, (x*grid), (y*grid), grid, grid ); drawImage( this, mask-x, mask-y, mask-width, mask-height, x-position, y-position, width, height ); EXAMPLE
  22. 22. Expirements Version 0.1 ✓ Single canvas ✓ Redraw on interaction ✓ Textures + walls ✓ Switches ✓ Keyboard input
  23. 23. ✓ Move map ✓ Only render what is
 visible inside the canvas ✓ Increased map size Expirements Version 0.2
  24. 24. ✓ Change maps ✓ Transitions ✓ Masks ✓ Switches Expirements Version 0.3
  25. 25. ✓ Complex triggers Expirements Version 0.4
  26. 26. Troubleshooting Getting it right 3
  27. 27. DesignING a Game is hard!
  28. 28. Preformance On mobile was bad!
  29. 29. Canvas Current setup
  30. 30. ‣ Drawing on canvas is expensive ‣ Use more then one canvas ‣ Max size of canvas on mobile Safari (3MP or 5MP) ‣ Buffer by drawing off screen ‣ Cache rendered screens for later use ‣ More tips:
 http://www.html5rocks.com/en/tutorials/canvas/performance/
 http://tinyurl.com/ioslimit Research results
  31. 31. Canvas - Foreground Current setup Canvas - Background Div - Mask Div - Player
  32. 32. Structure your JS Code!
  33. 33. Current setup var Game = { ! init : function (){ // init game }, start : function (){ // start game } } ! Game.init(); Game.start(); (function() { ! function Game(){ // init game }; Game.prototype.start = (function() { // start game }); window.Game = Game; })(); ! var game = new Game(); game.start(); New setup
  34. 34. BUILD new maps easily!
  35. 35. The ResultSolving the puzzle 4
  36. 36. Demo
  37. 37. ✓ Mask player ✓ CSS animation ✓ Create tracks FEATURES Walking in tall grass
  38. 38. ✓ Jump only down ✓ Extra animation details FEATURES Jump down ledges
  39. 39. ✓ Complex animations ✓ Leave and enter ✓ Dynamic FEATURES Transitions
  40. 40. ✓ Complex animations ✓ Leave and enter ✓ Dynamic FEATURES Transitions
  41. 41. ✓ Different styles ✓ Text animation ✓ Dynamic FEATURES Signs & messages
  42. 42. ✓ Specific location ✓ Random behaviour ✓ Interactions FEATURES Non-playable characters (NPC)
  43. 43. What’s next?Where are the Pokémons? 5
  44. 44. Demo
  45. 45. ‣ Build a new and better map editor ‣ Redraw more maps ‣ Retrieve missing data ‣ Find out how the battle system works ‣ Learn more about HTML audio ‣ … Next steps ! ‣ Don’t get sued by Nintendo®!
  46. 46. Thank you @Berttimmermans
  47. 47. One more thing...
  48. 48. Designers Frontend Developers Developers Project Managers We are looking for:
  49. 49. omorrowlApply now, get hired join us at Tomorrowland! and jobs@digiti.be
  50. 50. Thank youhttp://berttimmermans.com/game/ @Berttimmermans

×