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