Your SlideShare is downloading. ×
  • Like
  • Save
Gotta code them all, a Pokémon and HTML5 love story!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 14,065 views
Published

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. …

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?

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @undefined okaay
    Are you sure you want to
    Your message goes here
  • @amhar I never had that problem, but I must admit that I don't test on Firefox ;-)
    Are you sure you want to
    Your message goes here
  • @Berttimmermans : woaaah thanks :-)
    umm one thing, are you experiencing Recursion error (firefox : 'too much recursion) when using lots of Tileset?
    How much tileset did you use?
    i'm sorry for late reply
    Are you sure you want to
    Your message goes here
  • The trick is to render the full map when you build up the map on load.
    When moving the map arround you just use the css property translate.
    Are you sure you want to
    Your message goes here
  • i met some difficulties to render only the things that visible to active canvas. for now I have to move map.x & y in every keydown. Is this right method?

    give me some references plz :'-(
    @amhar_fm
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
14,065
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
5
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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