Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making (console) games in the browser

5,536 views

Published on

From HTML5 Developers Conference (22 May 2014)

Making (console) games in the browser

Insomniac Games has been making AAA console games with an in-house suite of browser-based tools for the last few years. This talk will be a whirlwind review of the architectural choices, lessons learned and and other tidbits picked up along the way in supporting multiple large production teams and titles. Talk will include notes on server design, mixing native code and javascript, asset databases and real boots-on-the-ground production trade-offs.

Making (console) games in the browser

  1. 1. Making (console) games in the browser MIKE ACTON (INSOMNIAC GAMES) TWITTER @MIKE_ACTON
  2. 2. Started 2010…
  3. 3. Why?
  4. 4. Why? Native Vs Browser
  5. 5. 1. Inevitability
  6. 6. 1. Inevitability 2. UX and UI Research
  7. 7. 1. Inevitability 2. UX and UI Research 3. Forcing function (data separation)
  8. 8. …but mostly a bet on the future
  9. 9. How do we use the browser?
  10. 10. Chrome only --harmony (ECMAScript 6)
  11. 11. Chrome only --harmony (ECMAScript 6) :(
  12. 12. Model Editor
  13. 13. Vault
  14. 14. Anim Driver Editor
  15. 15. Build Monitor
  16. 16. Particle Editor
  17. 17. Material Editor
  18. 18. Script Editor
  19. 19. Run Game
  20. 20. Curve Editor
  21. 21. cinematic2
  22. 22. cinematic2 game view (it *is* the game – running all update code)
  23. 23. cinematic2 the outliner – shows everything in the cinematic
  24. 24. cinematic2 sound panel – search / create favorites / audition events
  25. 25. cinematic2 properties panel (for currently selected thing)
  26. 26. cinematic2 timeline and playback control
  27. 27. cinematic2 shots list (can be edited and rearranged)
  28. 28. cinematic2 tracks list
  29. 29. performance editor
  30. 30. performance editor 3d view
  31. 31. performance editor clips in the performance set
  32. 32. performance editor animation palette (expressions + gestures)
  33. 33. performance editor phoneme -> viseme map
  34. 34. performance editor timeline
  35. 35. performance editor phonemes (automatically generated)
  36. 36. performance editor expressions
  37. 37. performance editor gestures
  38. 38. What libs do we use?
  39. 39. What libs do we use?  Jquery (less and less)
  40. 40. What libs do we use?  Jquery (less and less)  Angular.js (directives good; complexity/obfuscation bad)
  41. 41. What libs do we use?  Jquery (less and less)  Angular.js (directives good; complexity/obfuscation bad)  Q.js (good)
  42. 42. What libs do we use?  Jquery (less and less)  Angular.js (directives good; complexity/obfuscation bad)  Q.js (good)  Require.js (good)
  43. 43. What libs do we use?  Jquery (less and less)  Angular.js (directives good; complexity/obfuscation bad)  Q.js (good)  Require.js (good)  Bootstrap (OK)
  44. 44. What libs do we use?  Jquery (less and less)  Angular.js (directives good; complexity/obfuscation bad)  Q.js (good)  Require.js (good)  Bootstrap (OK)  WebGL? (no)
  45. 45. How do we put it together?
  46. 46. LunaServer  Native Application (C++) – mongoose server
  47. 47. LunaServer  Native Application (C++) – mongoose server  RESTful (*ish) API
  48. 48. LunaServer  Native Application (C++) – mongoose server  RESTful (*ish) API  File I/O
  49. 49. LunaServer  Native Application (C++) – mongoose server  RESTful (*ish) API  File I/O  P4 integration
  50. 50. LunaServer  Native Application (C++) – mongoose server  RESTful (*ish) API  File I/O  P4 integration  Session management
  51. 51. LunaServer  Native Application (C++) – mongoose server  RESTful (*ish) API  File I/O  P4 integration  Session management  Undo/Redo
  52. 52. LunaServer  Native Application (C++) – mongoose server  RESTful (*ish) API  File I/O  P4 integration  Session management  Undo/Redo  File/Asset save/edit/revert
  53. 53. LunaServer  Native Application (C++) – mongoose server  RESTful (*ish) API  File I/O  P4 integration  Session management  Undo/Redo  File/Asset save/edit/revert  System and configuration information
  54. 54. LunaServer  Native Application (C++) – mongoose server  RESTful (*ish) API  File I/O  P4 integration  Session management  Undo/Redo  File/Asset save/edit/revert  System and configuration information  Crash proofing
  55. 55. LunaServer (JSON)
  56. 56. LunaServer (JSON)
  57. 57. LunaServer (JSON)
  58. 58. DDLC  Compiler -> JSON, C++, etc.
  59. 59. DDLC  Compiler -> JSON, C++, etc.  Node.js script (ejs)
  60. 60. DDLC  Compiler -> JSON, C++, etc.  Node.js script (ejs)  (used to be native application)
  61. 61. DDLC  Compiler -> JSON, C++, etc.  Node.js script (ejs)  (used to be native application)  ddl.js (captures communication to lunaserver)
  62. 62. Vault
  63. 63. Delta JSON
  64. 64. Delta JSON
  65. 65. Delta JSON
  66. 66. Delta JSON (undo/redo)
  67. 67. Model Editor
  68. 68. Data change -> ddl.js -> delta json
  69. 69. /api/save/asset/{assetType}/{assetId}
  70. 70. Current state, undo queue
  71. 71. Canonical asset change
  72. 72. Picks up change (triggers builder)
  73. 73. Requests native built file Game (as client)
  74. 74. Polls for changes
  75. 75. What’s newer?
  76. 76. Node.js scripts
  77. 77. Shared code between node.js and browser
  78. 78. Node.js scripts Game (JsonRPC)
  79. 79. Node.js scripts Game (JsonRPC) Game (RESTful server)
  80. 80. Node.js scripts Game (JsonRPC) Game (RESTful server)
  81. 81. Node.js scripts Game (JsonRPC) Game (RESTful server) Game (as client)
  82. 82. FAQ#1 File-backed vs DB assets
  83. 83. FAQ#2 WebSockets
  84. 84. UI (javascript) guidelines
  85. 85. UI (javascript) guidelines Custom controls
  86. 86. DDL (specific) Custom controls
  87. 87. DDL (specific) ddl.js Custom rules specific to data (constraints) Custom controls
  88. 88. DDL (specific) Control (Source) ddl.js Custom rules specific to data (constraints) Custom controls
  89. 89. DDL (specific) Control (Source) Control (Widget) ddl.js Custom rules specific to data (constraints) Custom controls
  90. 90. DDL (specific) Control (Source) Control (Widget) Custom Control Custom Control Group (Manager) ddl.js Custom rules specific to data (constraints) Custom controls
  91. 91. DDL (specific) Control (Source) Control (Widget) Custom Control Custom Control Group (Manager) ddl.js Custom rules specific to data (constraints) Custom controls
  92. 92. DDL (specific) Control (Source) Control (Widget) Custom Control Custom Control Group (Manager) ddl.js Custom rules specific to data (constraints) Custom controls
  93. 93. DDL (specific) Control (Source) Control (Widget) Custom Control Custom Control Group (Manager) ddl.js Custom rules specific to data (constraints) Custom controls Node.js
  94. 94. UI (javascript) guidelines Editing DOM
  95. 95. Editing DOM  #1 Minimize editing DOM!
  96. 96. Editing DOM  #1 Minimize editing DOM!  Group DOM edits into AnimationFrame callback
  97. 97. Editing DOM  #1 Minimize editing DOM!  Group DOM edits into AnimationFrame callback  Minimize jquery
  98. 98. Editing DOM  #1 Minimize editing DOM!  Group DOM edits into AnimationFrame callback  Minimize jquery  jQuery accesses the DOM all the time
  99. 99. Editing DOM  #1 Minimize editing DOM!  Group DOM edits into AnimationFrame callback  Minimize jquery  jQuery accesses the DOM all the time  Store selector results if you must use a selector
  100. 100. Editing DOM  #1 Minimize editing DOM!  Group DOM edits into AnimationFrame callback  Minimize jquery  jQuery accesses the DOM all the time  Store selector results if you must use a selector  Minimize angular
  101. 101. Editing DOM  #1 Minimize editing DOM!  Group DOM edits into AnimationFrame callback  Minimize jquery  jQuery accesses the DOM all the time  Store selector results if you must use a selector  Minimize angular  When does it create the DOM?
  102. 102. FAQ#3 Control Libraries?
  103. 103. UI (javascript) guidelines Complexity
  104. 104. UI Complexity / Cost Don’t underestimate it!
  105. 105. 2010…2014+
  106. 106. Q&A

×