HTML5 & JavaScript Games

Transcript

1. View Slide

2. View Slide

3. 1ST-CLASS HONOURS
   Interactive Media Production
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. THE TIME IS NOW
    Threshold of something cool
    

    View Slide

12. NOTABLE EVENTS
    Recent events in HTML5 gaming
    

    View Slide

13. * made by Phil Banks (@emirpprime)
    

    View Slide

14. WRITE ONCE
    Use anywhere
    

    View Slide

15. NO COMPILATION
    Save time with development and testing
    

    View Slide

16. LIGHTWEIGHT
    Text and image files take up little room
    

    View Slide

17. OPEN DEVELOPMENT
    Gives you a warm fuzzy feeling
    

    View Slide

18. View Slide

19. FULL COMPATIBILITY
    Not all browsers support everything
    

    View Slide

20. NO DRM
    These technologies aren’t made for it
    

    View Slide

21. TECHNOLOGY
    Some of the tech involved in Web gaming
    

    View Slide

22. CANVAS & WEBGL
    2D and 3D graphics
    

    View Slide

23. HTML5 AUDIO
    Sound effects and background music
    

    View Slide

24. WEBSOCKETS
    Multiplayer communication
    

    View Slide

25. NODE.JS
    JavaScript on the server
    

    View Slide

26. LOCAL STORAGE
    Storing data on the player device
    

    View Slide

27. MONGODB & REDIS
    Storing data on the server
    

    View Slide

28. EXISTING GAMES
    Some of my favourite and best examples
    

    View Slide

29. QUAKE II
    Google port using Web technologies
    

    View Slide

30. MINECRAFT
    We’ll see this fully working in JavaScript soon
    

    View Slide

31. WORD²
    Massively multiplayer Scrabble
    

    View Slide

32. View Slide

33. FREECIV
    Open source clone of Civilisation
    

    View Slide

34. RAWKETS
    Because I made it and it’s addictive
    

    View Slide

35. LOADS MORE
    Games directories are everywhere
    

    View Slide

36. FUNDAMENTALS
    Making games with HTML5
    

    View Slide

37. GAME LOOP
    The heart of the game
    

    View Slide

38. PHYSICS UPDATE
    Updating positions
    

    View Slide

39. GRAPHICS UPDATES
    Making things visible
    

    View Slide

40. NETWORKING
    Breaking out of single player
    

    View Slide

41. CONTROLS AND UI
    So important to get right
    

    View Slide

42. View Slide

43. PERFORMANCE
    Keeping things running smoothly
    

    View Slide

44. GAME ENGINES
    Making game development easy
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. ISOGENICENGINE
    Iso City demo
    

    View Slide

49. LIBRARIES & SERVICES
    Saving you time in the long run
    

    View Slide

50. BOX2DWEB
    JavaScript port of the Box2D physics engine
    

    View Slide

51. MOTION.JS
    Solving client-side prediction issues
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. KEY LESSONS
    What I’ve learnt so far
    

    View Slide

57. CUT DOWN LOOPS
    Less is more
    

    View Slide

58. NO TIMEOUTS
    Use requestAnimationFrame instead
    

    View Slide

59. NETWORK TRICKS
    Cutting down on communication
    

    View Slide

60. 1 1
    MESSAGES IN
    1
    MESSAGES OUT
    1
    

    View Slide

61. 1 2
    2 1
    MESSAGES IN
    2
    MESSAGES OUT
    4
    

    View Slide

62. 1 4
    4 1
    1
    4
    4
    1
    MESSAGES IN
    4
    MESSAGES OUT
    16
    

    View Slide

63. MESSAGES IN
    30
    MESSAGES OUT
    900
    1 30
    30 1
    1
    30
    30
    1
    

    View Slide

64. MESSAGES IN
    100
    MESSAGES OUT
    10000
    1 100
    100 1
    1
    100
    100
    1
    

    View Slide

65. CHEATERS
    You can’t avoid them completely
    

    View Slide

66. DOM OR CANVAS
    Which one should you use?
    

    View Slide

67. THE FUTURE
    What HTML5 gaming still needs
    

    View Slide

68. DOCUMENTATION
    Specific to HTML5 game development
    

    View Slide

69. WEBGL SUPPORT
    Support is shocking right now
    

    View Slide

70. MORE ENGINES
    Not many decent ones around right now
    

    View Slide

71. IMPROVED AUDIO
    More reliable looping
    

    View Slide

72. POWERFUL MOBILE
    Better hardware acceleration
    

    View Slide

73. BETTER CONTROLS
    Break away from the keyboard and mouse
    

    View Slide

74. View Slide

75. MONETISATION
    Making profit from games
    

    View Slide

76. Rawkets.com
    HTML5 & WebSockets game.
    Twitter sentiment analysis
    Delving into your soul.
    RECENT PROJECTS
    Rawkes.com
    Personal website and blog
    MORE COOL STUFF
    ExplicitWeb.co.uk
    Web development podcast.
    Mozilla Technical Evangelist
    My job
    ROB HAWKES
    @robhawkes
    

    View Slide

77. Become a canvas master
    FOUNDATION HTML5 CANVAS
    My amazing book on canvas, animation, and making games.
    RAWKES.COM/FOUNDATIONCANVAS
    Out now
    Paperback and digital formats
    Learn how to animate
    Make two cool space games
    

    View Slide

78. COFFEE FWD
    Mozilla Web FWD get together
    Innovation acceleration
    FRI JULY 15TH @ RED ROCK CAFE, MV
    Friday July 15th
    Red Rock Cafe, Mountain View
    Meet some great people
    Show off your stuff
    

    View Slide

79. DEV DERBY
    Experimenting with the latest Web technologies
    Manipulate video with canvas
    DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY
    Every month
    This month is HTML5 video
    Win prizes (like an Android)
    Next month is all about touch
    

    View Slide

80. View Slide