Using HTML5 To Power Your Game Production

Richard Hackett, Studio Technical Director

This is not a sales pitch

Tools Quality

User experience = super important

Tools development

Writing good tools is really hard work

Win32

Web Technologies

Documentation

Dashboard

Web Technologies

• Growth in web apps
• Potential other uses

Browser Platform

Browser layout engine

Browser Platform

Ability to style and customise

Browser Platform

Dynamic runtime interface building

Web Development

• Rapid iteration
• Live debug tools
• Open source frameworks

Browser Technologies

CSS 3

Canvas

JavaScript 2D rendering API

2D rendering area

Sprite rendering

Vector drawing

Canvas

• Flexible rendering
• Integrates well with HTML/JS
• Most well supported HTML5 tag
• Be careful about reinventing UI elements
• Multiple canvas

WebGL

JavaScript OpenGLES API

Hardware accelerated 3D

WebGL

• Flexible rendering
• Integrates well with HTML/JS
• Browser support an issue
• JS performance bottleneck

Plug-in

• Native code
• NPAPI, ActiveX
• Hardware access

Plug-in

• Can use existing code
• Flexible hardware/OS access
• Requires install
• Security issues
• Page/JavaScript integration issues

Native client

• Run native code
• Secure sandbox
• Cross platform virtualised machine
• Hardware acceleration

Browser Compatibility

Canvas 2D
WebGL 3D
Plug-in
NaCl

Browser Compatibility

• Shims - help patch over minor variation
• For games - still an issue today
• For tools - select browser/environment
• caniuse.com
• quirksmode.org

Tools as a web app

Embedded Web UI

Embedded browser

• Integrate single browser platform
• Chromium Embedded Framework
• Static version updates
• No 64-bit

Integrated web server

• Custom server
• Became more complex than file serving
• Lightweight alternatives are available
• Mongoose
• node.js

Interfacing

• Python API
• C++ implementation
• WSGI standard interface

Implementation Example

• Minimal code
• No rebuild required
• Rapid development

URL

http://blitztech/searchexample

Python Implementation

import blitztech
from werkzeug.routing import Map, Rule
from blitztech.webinterface import HttpResponse, UrlMapperApp, template
from blitztech import search

def register():
    blitztech.webinterface.register_application(
                'searchexample', 
                UrlMapperApp(Map([Rule('/', endpoint=search_example)]))
                )
		
def search_example(request):
    search_results = search.search_database("status:checkedout")
    return HttpResponse(template.expand("database/search.html",
                                        objects = search_results))

HTML Template

{% extends "file/base.html" %}

{% block content %}
<section class="grid">
    <h5 class="rounded block alt_2">Checked Out Objects</h5>
    <ul class="grid_list">
    {% for object in objects %}
    <li>
        <a href="/database/{{object.get_unique_id()}}/">
            <img src="/database/thumbnail/{{object.get_unique_id()}}/"
		class="rounded thumb" />
            <span class="caption">{{object.get_name()}}</span>
        </a>
    </li>
    {% endfor %}
    </ul>
</section>
{% endblock %}

Werkzeug

WSGI utilities

http://werkzeug.pocoo.org/

Jinja

Template expansion

http://jinja.pocoo.org/

Engine Integration

• Remote access direct with game
• Integrated runtime web server

Engine Integration

• Live Link over http
• Custom game debug UIs

UI Template

Style and appearance

less

Dynamic stylesheets

http://lesscss.org/

Bootstrap

UI style library

http://twitter.github.com/bootstrap/

Flot

Graphing library

http://code.google.com/p/flot/

JavaScript Development

• IDE
• JSlint / JShint
• WebStorm
• VS 2012

require.js

JS module loader

http://requirejs.org/

jQuery

DOM traversal

Simplifies AJAX requests

http://jquery.com/

backbone.js

Event handling

MVC

http://backbonejs.org/

Underscore.js

General utility library

Extends basic JS

http://underscorejs.org/

Debug tools

• Browser developer tools
• Live development process

We don't use these

but you might want to

• jQueryUI
• Sass
• HTML5 boilerplate
• node.js
• grunt
• AngularJS
• ember.js
• Web sockets

Lessons

Learning curve

Don't hack for too long

Dedicated web developers

Value of specialised devs

Designers

A little design goes a long way

Frameworks

Don't reinvent

Single browser

Reduce QA and dev effort

More than UI rework

Review implementation, usability

JSON everywhere

Easy data interchange

[
	{
		"Name": "The Moomins and the Great Flood",
		"Published": 1945,
		"Author": "Tove Jansson"
	},
	{
		"Name": "Comet in Moominland",
		"Published": 1946,
		"Author": "Tove Jansson"
	},
	{
		"Name": "Finn Family Moomintroll",
		"Published": 1948,
		"Author": "Tove Jansson"
	}
]

JS performance

Be careful at scale

Benefits

Rapid prototyping

Better UI

Thanks