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

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

on

  • 12,753 views

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?

Statistics

Views

Total Views
12,753
Views on SlideShare
12,575
Embed Views
178

Actions

Likes
5
Downloads
0
Comments
5

2 Embeds 178

https://twitter.com 174
http://www.slideee.com 4

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @undefined okaay
    Are you sure you want to
    Your message goes here
    Processing…
  • @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
    Processing…
  • @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
    Processing…
  • 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
    Processing…
  • 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
    Processing…
Post Comment
Edit your comment

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

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