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.

1. Making (console)
games in the
browser
MIKE ACTON (INSOMNIAC GAMES)
TWITTER @MIKE_ACTON

3. Started
2010…

4. Why?

5. Why?
Native
Vs
Browser

6. 1. Inevitability

7. 1. Inevitability
2. UX and UI Research

8. 1. Inevitability
2. UX and UI Research
3. Forcing function
(data separation)

9. …but
mostly a
bet on the
future

10. How do
we use
the
browser?

13. Chrome only
--harmony (ECMAScript 6)

14. Chrome only
--harmony (ECMAScript 6)
:(

15. Model Editor

16. Vault

17. Anim Driver Editor

18. Build Monitor

19. Particle Editor

20. Material Editor

21. Script Editor

22. Run Game

23. Curve Editor

24. cinematic2

25. cinematic2
game view (it *is* the game – running all update code)

26. cinematic2
the outliner – shows everything in the cinematic

27. cinematic2
sound panel – search / create favorites / audition events

28. cinematic2
properties panel (for currently selected thing)

29. cinematic2
timeline and playback control

30. cinematic2
shots list (can be edited and rearranged)

31. cinematic2
tracks list

32. performance editor

33. performance editor 3d view

34. performance editor clips in the performance set

35. performance editor animation palette (expressions + gestures)

36. performance editor phoneme -> viseme map

37. performance editor timeline

38. performance editor phonemes (automatically generated)

39. performance editor expressions

40. performance editor gestures

41. What libs
do we
use?

42. What libs do we use?
 Jquery (less and less)

43. What libs do we use?
 Jquery (less and less)
 Angular.js (directives good; complexity/obfuscation bad)

44. What libs do we use?
 Jquery (less and less)
 Angular.js (directives good; complexity/obfuscation bad)
 Q.js (good)

45. What libs do we use?
 Jquery (less and less)
 Angular.js (directives good; complexity/obfuscation bad)
 Q.js (good)
 Require.js (good)

46. What libs do we use?
 Jquery (less and less)
 Angular.js (directives good; complexity/obfuscation bad)
 Q.js (good)
 Require.js (good)
 Bootstrap (OK)

47. 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)

48. How do
we put it
together?

51. LunaServer
 Native Application (C++) – mongoose server

52. LunaServer
 Native Application (C++) – mongoose server
 RESTful (*ish) API

53. LunaServer
 Native Application (C++) – mongoose server
 RESTful (*ish) API
 File I/O

54. LunaServer
 Native Application (C++) – mongoose server
 RESTful (*ish) API
 File I/O
 P4 integration

55. LunaServer
 Native Application (C++) – mongoose server
 RESTful (*ish) API
 File I/O
 P4 integration
 Session management

56. LunaServer
 Native Application (C++) – mongoose server
 RESTful (*ish) API
 File I/O
 P4 integration
 Session management
 Undo/Redo

57. LunaServer
 Native Application (C++) – mongoose server
 RESTful (*ish) API
 File I/O
 P4 integration
 Session management
 Undo/Redo
 File/Asset save/edit/revert

58. 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

59. 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

61. LunaServer (JSON)

62. LunaServer (JSON)

63. LunaServer (JSON)

64. DDLC
 Compiler -> JSON, C++, etc.

65. DDLC
 Compiler -> JSON, C++, etc.
 Node.js script (ejs)

66. DDLC
 Compiler -> JSON, C++, etc.
 Node.js script (ejs)
 (used to be native application)

67. DDLC
 Compiler -> JSON, C++, etc.
 Node.js script (ejs)
 (used to be native application)
 ddl.js (captures communication to lunaserver)

68. Vault

69. Delta JSON

70. Delta JSON

71. Delta JSON

72. Delta JSON
(undo/redo)

73. Model Editor

74. Data change -> ddl.js
-> delta json

75. /api/save/asset/{assetType}/{assetId}

76. Current state, undo queue

77. Canonical asset change

78. Picks up change
(triggers builder)

80. Requests native built file
Game
(as client)

81. Polls for changes

82. What’s
newer?

83. Node.js scripts

85. Shared code between
node.js and browser

86. Node.js scripts
Game
(JsonRPC)

87. Node.js scripts
Game
(JsonRPC)
Game
(RESTful server)

88. Node.js scripts
Game
(JsonRPC)
Game
(RESTful server)

89. Node.js scripts
Game
(JsonRPC)
Game
(RESTful server)
Game
(as client)

90. FAQ#1
File-backed vs DB assets

91. FAQ#2
WebSockets

92. UI (javascript) guidelines

93. UI (javascript) guidelines
Custom controls

94. DDL (specific)
Custom controls

95. DDL (specific)
ddl.js
Custom rules specific to data (constraints)
Custom controls

96. DDL (specific) Control (Source)
ddl.js
Custom rules specific to data (constraints)
Custom controls

97. DDL (specific) Control (Source) Control (Widget)
ddl.js
Custom rules specific to data (constraints)
Custom controls

98. DDL (specific) Control (Source) Control (Widget)
Custom Control
Custom Control Group (Manager)
ddl.js
Custom rules specific to data (constraints)
Custom controls

99. DDL (specific) Control (Source) Control (Widget)
Custom Control
Custom Control Group (Manager)
ddl.js
Custom rules specific to data (constraints)
Custom controls

100. DDL (specific) Control (Source) Control (Widget)
Custom Control
Custom Control Group (Manager)
ddl.js
Custom rules specific to data (constraints)
Custom controls

101. DDL (specific) Control (Source) Control (Widget)
Custom Control
Custom Control Group (Manager)
ddl.js
Custom rules specific to data (constraints)
Custom controls
Node.js

102. UI (javascript) guidelines
Editing DOM

103. Editing DOM
 #1 Minimize editing DOM!

104. Editing DOM
 #1 Minimize editing DOM!
 Group DOM edits into AnimationFrame callback

105. Editing DOM
 #1 Minimize editing DOM!
 Group DOM edits into AnimationFrame callback
 Minimize jquery

106. Editing DOM
 #1 Minimize editing DOM!
 Group DOM edits into AnimationFrame callback
 Minimize jquery
 jQuery accesses the DOM all the time

107. 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

108. 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

109. 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?

110. FAQ#3
Control Libraries?

111. UI (javascript) guidelines
Complexity

112. UI Complexity / Cost
Don’t
underestimate
it!

113. 2010…2014+

114. Q&A