Making (console) games in the browser
Download as PPTX, PDF9 likes6,245 views
The document discusses the development of console games in the browser, highlighting the preference for native applications, particularly using a C++ backend with a Mongoose server and a range of JavaScript libraries such as jQuery, Angular.js, and Node.js. It outlines various tools and editors used for game creation, performance editing, and user interface guidelines, addressing complexities and the importance of optimization in DOM manipulation. The document also mentions the significance of data separation, session management, and undo/redo functionalities, along with a focus on future trends in game development.
Making (console) games in the browser
- 1. Making (console) games in the browser MIKE ACTON (INSOMNIAC GAMES) TWITTER @MIKE_ACTON
- 4. Why?
- 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
- 14. Chrome only --harmony (ECMAScript 6) :(
- 15. Model Editor
- 16. Vault
- 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)
- 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
- 38. performance editor phonemes (automatically generated)
- 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
- 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
- 73. Model Editor
- 74. Data change -> ddl.js -> delta json
- 76. Current state, undo queue
- 78. Picks up change (triggers builder)
- 80. Requests native built file Game (as client)
- 82. What’s newer?
- 83. Node.js scripts
- 85. Shared code between node.js and browser
- 90. FAQ#1 File-backed vs DB assets
- 91. FAQ#2 WebSockets
- 93. UI (javascript) guidelines 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?
- 112. UI Complexity / Cost Don’t underestimate it!
- 113. 2010…2014+
- 114. Q&A
Editor's Notes
- #24: Repeat for additional keys
- #25: here’s the new cinematics editor
- #26: game view (it *is* the game – running all update code)
- #27: the outliner – similar to the scene editor – shows everything in the cinematic
- #28: sound panel (shows all sound banks and sound events) – search / create favorites / audition events
- #29: properties panel (for currently selected thing)
- #30: timeline and playback controll
- #31: shots list (can be edited and rearranged)
- #32: tracks list
- #33: use performance editor to set up the performance (will be integrated into cinematics editor next project)
- #34: 3d view
- #35: clips in the performance set
- #36: animation palette (expressions + gestures)
- #37: phoneme -> viseme map
- #38: timeline
- #39: phonemes (automatically generated)
- #40: expressions
- #41: gestures