Upload
mike-acton
View
3.208
Download
3
Embed Size (px)
DESCRIPTION
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.
Citation preview
Making (console) games in the browserMIKE ACTON (INSOMNIAC GAMES)TWITTER @MIKE_ACTON
Started 2010…
Why?
Why?Native
VsBrowser
1. Inevitability
1. Inevitability2. UX and UI
Research
1. Inevitability2. UX and UI
Research3. Forcing function
(data separation)
…but mostly a
bet on the future
How do we use the browser?
Chrome only--harmony (ECMAScript 6)
Chrome only--harmony (ECMAScript 6)
:(
Model Editor
Vault
Anim Driver Editor
Build Monitor
Particle Editor
Material Editor
Script Editor
Run Game
Curve Editor
cinematic2
cinematic2game view (it *is* the game – running all update code)
cinematic2the outliner – shows everything in the cinematic
cinematic2sound panel – search / create favorites / audition events
cinematic2properties panel (for currently selected thing)
cinematic2timeline and playback control
cinematic2shots list (can be edited and rearranged)
cinematic2tracks list
performance editor
performance editor 3d view
performance editor clips in the performance set
performance editoranimation palette (expressions + gestures)
performance editor phoneme -> viseme map
performance editor timeline
performance editor phonemes (automatically generated)
performance editor expressions
performance editor gestures
What libs do we use?
What libs do we use?
Jquery (less and less)
What libs do we use?
Jquery (less and less) Angular.js (directives good; complexity/obfuscation bad)
What libs do we use?
Jquery (less and less) Angular.js (directives good; complexity/obfuscation bad) Q.js (good)
What libs do we use?
Jquery (less and less) Angular.js (directives good; complexity/obfuscation bad) Q.js (good) Require.js (good)
What libs do we use?
Jquery (less and less) Angular.js (directives good; complexity/obfuscation bad) Q.js (good) Require.js (good) Bootstrap (OK)
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)
How do we put it together?
LunaServer
Native Application (C++) – mongoose server
LunaServer
Native Application (C++) – mongoose server RESTful (*ish) API
LunaServer
Native Application (C++) – mongoose server RESTful (*ish) API File I/O
LunaServer
Native Application (C++) – mongoose server RESTful (*ish) API File I/O P4 integration
LunaServer
Native Application (C++) – mongoose server RESTful (*ish) API File I/O P4 integration Session management
LunaServer
Native Application (C++) – mongoose server RESTful (*ish) API File I/O P4 integration Session management Undo/Redo
LunaServer
Native Application (C++) – mongoose server RESTful (*ish) API File I/O P4 integration Session management Undo/Redo File/Asset save/edit/revert
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
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
LunaServer (JSON)
LunaServer (JSON)
LunaServer (JSON)
DDLC
Compiler -> JSON, C++, etc.
DDLC
Compiler -> JSON, C++, etc. Node.js script (ejs)
DDLC
Compiler -> JSON, C++, etc. Node.js script (ejs) (used to be native application)
DDLC
Compiler -> JSON, C++, etc. Node.js script (ejs) (used to be native application) ddl.js (captures communication to lunaserver)
Vault
Delta JSON
Delta JSON
Delta JSON
Delta JSON
(undo/redo)
Model Editor
Data change -> ddl.js-> delta json
/api/save/asset/{assetType}/{assetId}
Current state, undo queue
Canonical asset change
Picks up change(triggers builder)
Requests native built file
Game (as client)
Polls for changes
What’s newer?
Node.js scripts
Shared code betweennode.js and browser
Node.js scripts
Game (JsonRPC)
Node.js scripts
Game (JsonRPC)
Game (RESTful server)
Node.js scripts
Game (JsonRPC)
Game (RESTful server)
Node.js scripts
Game (JsonRPC)
Game (RESTful server)
Game (as client)
FAQ#1File-backed vs DB assets
FAQ#2WebSockets
UI (javascript) guidelines
UI (javascript) guidelinesCustom controls
DDL (specific)
Custom controls
DDL (specific)
ddl.js
Custom rules specific to data (constraints)
Custom controls
DDL (specific) Control (Source)
ddl.js
Custom rules specific to data (constraints)
Custom controls
DDL (specific) Control (Source) Control (Widget)
ddl.js
Custom rules specific to data (constraints)
Custom controls
DDL (specific) Control (Source) Control (Widget)
Custom Control
Custom Control Group (Manager)
ddl.js
Custom rules specific to data (constraints)
Custom controls
DDL (specific) Control (Source) Control (Widget)
Custom Control
Custom Control Group (Manager)
ddl.js
Custom rules specific to data (constraints)
Custom controls
DDL (specific) Control (Source) Control (Widget)
Custom Control
Custom Control Group (Manager)
ddl.js
Custom rules specific to data (constraints)
Custom controls
DDL (specific) Control (Source) Control (Widget)
Custom Control
Custom Control Group (Manager)
ddl.js
Custom rules specific to data (constraints)
Custom controls
Node.js
UI (javascript) guidelinesEditing DOM
Editing DOM
#1 Minimize editing DOM!
Editing DOM
#1 Minimize editing DOM! Group DOM edits into AnimationFrame callback
Editing DOM
#1 Minimize editing DOM! Group DOM edits into AnimationFrame callback Minimize jquery
Editing DOM
#1 Minimize editing DOM! Group DOM edits into AnimationFrame callback Minimize jquery
jQuery accesses the DOM all the time
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
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
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?
FAQ#3Control Libraries?
UI (javascript) guidelinesComplexity
UI Complexity / CostDon’t underestimateit!
2010…2014+
Q&A