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

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

Transcript

1. @Berttimmermans
2. Bert TImmermans Application Designer @Digiti About me @Berttimmermans
3. @Berttimmermans
4. THE JOURNEY
5. The Concept THE JOURNEY
6. The Concept Expirements THE JOURNEY
7. The Concept Expirements Troubleshooting THE JOURNEY
8. The Concept Expirements Troubleshooting The Results THE JOURNEY
9. The Concept Expirements Troubleshooting What’s next? The Results THE JOURNEY
10. The Concept Setting the scope 1
11. I RPG
12. <canvas></canvas>
13. HTML5 <canvas></canvas>
18. 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
19. [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ] 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 ] [
20. EXPIREMENTS Converting theory into practice 2
21. texture.png EXAMPLE
22. 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
23. 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);
24. EXAMPLE
25. 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
26. Expirements Version 0.1 ✓ Single canvas ✓ Redraw on interaction ✓ Textures + walls ✓ Switches ✓ Keyboard input
27. ✓ Move map ✓ Only render what is
 visible inside the canvas ✓ Increased map size Expirements Version 0.2
28. ✓ Change maps ✓ Transitions ✓ Masks ✓ Switches Expirements Version 0.3
29. ✓ Complex triggers Expirements Version 0.4
30. Troubleshooting Getting it right 3
31. DesignING a Game is hard!
33. Preformance On mobile was bad!
34. Canvas Current setup
35. ‣ 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
36. Canvas - Foreground Current setup Canvas - Background Div - Mask Div - Player
37. Structure your JS Code!
38. 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
39. BUILD new maps easily!
41. The Result Solving the puzzle 4
42. Demo
43. ✓ Mask player ✓ CSS animation ✓ Create tracks FEATURES Walking in tall grass
44. ✓ Jump only down ✓ Extra animation details FEATURES Jump down ledges
45. ✓ Complex animations ✓ Leave and enter ✓ Dynamic FEATURES Transitions
46. ✓ Complex animations ✓ Leave and enter ✓ Dynamic FEATURES Transitions
47. ✓ Different styles ✓ Text animation ✓ Dynamic FEATURES Signs & messages
48. ✓ Specific location ✓ Random behaviour ✓ Interactions FEATURES Non-playable characters (NPC)
49. What’s next? Where are the Pokémons? 5
50. Demo
51. ‣ 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®!
52. Thank you @Berttimmermans
53. One more thing...
55. Designers Frontend Developers Developers Project Managers We are looking for:
56. omorrowl Apply now, get hired join us at Tomorrowland! and jobs@digiti.be
57. Thank you http://berttimmermans.com/game/ @Berttimmermans