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?

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>

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. EXPIREMENTSConverting 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 ResultSolving 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. omorrowlApply now, get hired
join us at Tomorrowland!
and
jobs@digiti.be

57. Thank youhttp://berttimmermans.com/game/
@Berttimmermans