Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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?

Bert Timmermans

June 11, 2014
Tweet

More Decks by Bert Timmermans

Other Decks in How-to & DIY

Transcript

  1. 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
  2. [ , , , , , , , , ,

    , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ], [ , , , , , , , , , , ] 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 ] [
  3. 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
  4. 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);
  5. 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
  6. Expirements Version 0.1 ✓ Single canvas ✓ Redraw on interaction

    ✓ Textures + walls ✓ Switches ✓ Keyboard input
  7. ✓ Move map ✓ Only render what is
 visible inside

    the canvas ✓ Increased map size Expirements Version 0.2
  8. ‣ 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
  9. 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
  10. ‣ 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®!