HTML5 for Games

Table of Contents

1 HTML5 for Games

Joshua Sled <jsled@asynchronous.org>

2 html5

2.1 canvas

2.2 <audio>, <video> 

<audio src=foo.mp3 controls=false autoplay=true/>

<video src=foo.mp4 controls=true preload=true/>

<video controls autoplay>
  <source src='video.mp4'
          type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src='video.ogv'
          type='video/ogg; codecs="theora, vorbis"'>
  <embed clsid=""flash""/>
</video>

2.2.1 common audio/video DOM API

  • src attribute
  • ready state, network state, preload, buffered
  • time, duration, start offset, playback rate
  • load(), play(), pause()
  • timed tracks, cues
    • subtitles, captions, descriptions, chapters, metadata
    • cues can be used to play isolated sections from a larger file

2.2.2 audio mozilla data api proposal 

<audio src="song.ogg" controls="true"
       onaudiowritten="audioWritten(event);" />

<?javascript

function audioWritten(event) {
  var spectrum = event.mozSpectrum;
  var specSize = spectrum.length, magnitude;
  
  // Clear the canvas before drawing spectrum
  ctx.clearRect(0,0, canvas.width, canvas.height);
  
  for (var i = 0; i < specSize; i++) {
    var zoomMultiplier = 4000;
    magnitude = spectrum.item(i) * zoomMultiplier;
    // Draw rectangle bars for each frequency bin
    ctx.fillRect(i * 4, canvas.height, 3, -magnitude);
  }
}
?>

2.3 @font-face

  • yay real typography!
  • boo format soup!
  • boo browser brokeness! 
<?css
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}
?>

2.4 css3 features

  • rbga
  • border-radius
  • CSS Gradients
  • CSS Transforms
    • rotate, skew, scale
  • CSS Transitions
  • CSS Animations

2.5 local storage

2.5.1 WebStorage

  • key,value pairs
  • keys are strings
  • values are strings (!)
  • 5MB 
<?javascript

localstorage['are we running?'] = true;

localstorage['gameboard[' + x + '][' + y + ']'] = value;

?>

2.5.2 Web SQL DB (deprecated)

  • SQL store
    • SQLite store
    • safari, opera, webkit
  • deprecated
    • spec process problems
    • being "SQL"-based

2.5.3 Indexed DB API

  • object store
  • versioned, typed schema
  • javascript (idl+event) interface 
<?javascript
var request = window.indexedDB.open("CandyDB",
                                    "My candy store database");
request.onsuccess = function(event) {
  request = event.result.
        objectStore("kids").openCursor();
  request.onsuccess = function(event) {
    var cursor = event.result;
    if (!cursor) { return; /* no more results */ }
    var element = document.createElement("div");
    element.textContent = cursor.value.name;
    document.getElementById("kidList").appendChild(element);
    cursor.continue();
  };
};
?>

2.6 geolocation

  • yay GPS 
<?javascript

navigator.geolocation.getCurrentPosition(callback);
navigator.geolocation.watchPosition(callback);

navigator.geolocation.getCurrentPosition(callback, onerror,
    {maximumAge: ..., timeout: ...,
     enableHighAccuracy: ...});

?>

2.7 messaging

2.7.1 xhr, comet

  • http-based
    • request-response
    • unidirectional
  • comet
    • long poll
    • hack to allow server-pushed messages

2.7.2 websockets

  • bidirectional message-passing endpoints
  • event-driven
    • onopen, onclose, onerror, onmessage 
<?javascript

ws = new WebSocket('ws://example.org/updates');

ws.onmessage(function (evt) {
  var msg = jsonParse(evt.data);
  if (msg.error) { /* ... */ return; }
  $('<div class="message"/>')
   .text(msg.body)
   .appendTo('#messageScroll');
});

$('FORM#userInput').submit(function (e) {
    var $textInput = $(this)
        .find('INPUT[name=textline]');
    ws.send($textInput.val());
    $textInput.val('');
});

?>

2.8 webworkers

  • threads
  • same postMessage, onmessage event-driven messaging api
    • creator can postMessage to worker
    • worker can postMessage to creator 
<?javascript

compute = new Worker('heavylifting.js');

compute.onmessage(function (evt) {
   // ...
});

compute.postMessage('ready');

?>

2.9 offline apps/cache manifest 

<html manifest="app.manifest">
  <link rel=stylesheet href="app.css">
  <script src="app.js"></script>
...

app.manifest:

CACHE.MANIFEST
app.js
app.css

2.10 not covered

  • section, nav, aside, header, footer, article
  • new forms
    • input types
      • telephone, url, email, date/time, number, range, color,
    • datalist, keygen, progress, meter, output, device
  • details, summary
  • menu, command
  • link types
  • microdata
  • History
  • Undo
  • Drag and Drop

3 libraries

3.1 sfxr.js

  • http://vocamus.net/dave/?p=1166
  • 8-bit sound effects
    • "explosion", "jump", "laster shoot", "pickup coin", "powerup"
  • generates .wav files
  • js demo
  • FireFox 4 Audio Data api

3.2 box2d physics engine

  • box2d
    • C++ rigid-body simulation engine
    • shapes, bodies, constraints, fixtures, joints
    • does not draw
      • mapping of screen assets to box2d objects
      • step world, get new coordinates
      • iterate objects, draw to canvas
  • http://box2d-js.sourceforge.net/index2.html
    • a port of box2d C++ engine
    • requires prototype.js, IECanvas
  • http://box2d.thinkpixellab.com/
    • a clone of the sf.net one
    • uses Closure Compiler ("found a lot of bugs in the original javascript")

3.3 processing.js

  • http://processingjs.org/
  • javascript implementation of Processing
  • Processing is a language and framework for visual interactions.
    • setup()
    • draw()
    • mouseMoved(), keyPressed(), …
  • 2d: primitives, curves, text, color, drawing control, shapes
  • 3d: box, sphere, lights, camera
    • coordinate systems
    • material properties
  • text, fonts
  • Processing Tower Defense

3.4 GameQuery

3.5 Akihabara

  • http://www.kesiev.com/akihabara/
  • html5/javascript/modern browser game framework
    • safari, chrome, firefox, opera, konqueror, IE9 beta, iPhone/iPad, Wii, Android
  • gamebox
    • grouped objects moving simultaneously
    • collisions
    • rendering and moving objects
    • keyboard handling
    • double-buffering
    • FSEs
    • load/unload persistent data handling
    • audio api
  • gamecycle
    • generic game cycle: intro, menus, crossfading between stages/lifes, gameover and ending
  • toys
    • screen titles
    • hud handling
    • jumping characters
    • z-indexed objects
    • bullets, sparks
    • staff roll/credits
    • bonus screens
    • dialogues
  • utility code
    • math (moving objects, path following)
    • "touchpad/fretboard" for touch devices
  • bunches of demos
  • no high-level docs
    • documented code

3.6 Effect Games

  • http://www.effectgames.com/effect/
    • "Free online tools for building, sharing and playing browser-based games. Your games may include sound effects, music, and multiple layers of parallax-scrolling tiles and sprites".
  • DOM, not Canvas
  • fully abstracted engine
  • web based builder
    • metadata, asset handling, keyboard mapping, level definition
  • geometry, collision detection
  • sprites and tiles
  • fonts, audio, video
  • level editor

3.6.1 demo: Super Mario Bros (+Chrome, +FF3.6.12)

3.6.2 demo: Crystal Galaxy (+Chrome, +FF3.6.12)

3.6.3 "My HTML5/CSS3 Browser Wish List"

  • fullscreen any DOM element
  • audio/video live streaming
  • audio stereo panning
  • programmatic audio generation (FireFox Audio Data API)
  • record audio/video from line input, webcam (coming?)
  • screenshot DOM elements
  • DOM element composite operation
  • Specify Interpolation Algorithm for CSS Transforms
  • CSS Distort Transform
  • Hardware accel for (specific) DOM objects
  • DOM Redraw Control
  • HTML5 audio/video src caching
  • Human Interface Device (HID) Access
  • Accelerated Byte Array
  • Canvas Pixel Access
  • Progress Events for Form Submits and XHR POST
  • Native Hierarchical Menus
  • WebKit: fix HTML5 audio
  • WebKit: text field spellcheck disable
  • Firefox: CSS Masks

3.7 Rocket Engine

  • http://rocketpack.fi/engine/
  • Multi-platform
  • bunches of features
    • sprites
    • orthographic/isometric tile rendering
    • audio
    • collision detection
    • pathfinding
    • ai state machines
  • "Rocket Builder" web based editor
  • "Rocket Network" hosting infrastructure
    • "MMO-grade scaling"
    • analytics
    • "socially connected"
  • "Transparent client-server model"
  • beta?

4 games and stuff

4.1 classes of web based games

  • hypertextual games
  • html container including dom/canvas
  • html container for only dom/canvas / fully interactive
  • flash

4.2 Glitch

  • http://glitch.com/
  • massively-multiplayer
  • browser based
  • "built in the spirit of the web"
  • demo video

4.3 word² (née scrabb.ly)

  • wordsquared.com
  • multiplayer scrabble-style game
  • jQuery, html5 client
  • WebSockets
  • node.js server-side
  • MongoDB
    • geospatially indexed dataset
  • 3rd-party infrastructure (Pusher) to send json messages for game state updates
  • since both client and server are js, some game rules can be pushed to the client for execution (and re-evaluation on the server side, of course).
  • http://mozillalabs.com/gaming/2010/10/14/massive-fun-building-scrabb-ly/

4.4 Canvas Rider

  • http://canvasrider.com/
  • good mix of hypertext and interactive content
  • interactive level creation
  • social level sharing
  • simple canvas-based game

4.5 freeciv.net

4.6 Quake II GWT

4.7 canvas-based

4.8 emulation

4.8.1 JSNES

4.8.2 JSGB (JavaScript GameBoy)

4.8.3 JavaScript GameBoy color

4.8.4 Making jsGB (GameBoy emulator in js)

  • not the same as above
  • http://imrannazar.com/GameBoy-Emulation-in-JavaScript
  • Series of posts providing overview of pieces
  • CPU
    • js emulation
  • Memory
    • rom loading through "asynch file requests"
  • GPU timings
    • canvas
  • Graphics
    • game boy graphics handling
  • Integration
    • putting pieces together
  • Input
    • keystroke handling, event handling
  • Sprites
  • Interrupts

4.9 Asteroids

4.11 Kingdom of Loathing

4.13 ForumWarz

4.14 interactive fiction

4.15 node.js canvas implementation

4.16 0boxer

5 (meta)

5.2 the attic

5.2.1 jsGameSoup

  • http://mccormick.cx/projects/jsGameSoup/
  • What it provides:
    • Cross browser event handling
    • Rudimentary polygon collision detection
    • Auto-init to launch code attached to a specific HTML canvas
    • Game entity management
  • Game objects implement method-driven interface
    • draw()
    • key press, pointer movement, collision-detect
  • Game objects register with core engine
    • entity list/scene graph
    • engine takes over canvas, starts looping and drawing.
  • LGPL
  • 2009; seems abandoned

5.2.2 Aves Engine

5.2.3 Agent 008 Ball

Author: Josh Sled

Date: 2010-12-08 10:06:27 EST

HTML generated by org-mode 6.36c in emacs 23