Mozilla が力を入れているゲームに関する活動をテクノロジの面からまとめています。各種 API、特にWeb Workers、Typed Arrayと asm.js、WebAssembly のような JavaScript の高速化手法について概観します。
This slide describes Mozilla's Web Game initiative from technological perspective. We can overview technologies for Web Game: Web Workers, Typed Array, asm.js and WebAssembly. Please refer Mozilla Developer Network (MDN) for each technologies' details.
19. window.addEventListener("gamepadconnected", function(e) {
console.log("connected at index %d: %s. %d buttons, %d axes.",
e.gamepad.index, e.gamepad.id,
e.gamepad.buttons.length, e.gamepad.axes.length);
});
window.addEventListener("gamepaddisconnected", function(e) {
console.log("Gamepad disconnected from index %d: %s",
e.gamepad.index, e.gamepad.id);
});
20. function pollGamepads() {
var gamepads = navigator.getGamepads() || [];
for (var i = 0; i < gamepads.length; i++) {
var gp = gamepads[i];
if (gp) {
gamepadInfo.innerHTML = "connected at index " + gp.index + ": " + gp.id +
". It has " + gp.buttons.length +
" buttons and " + gp.axes.length + " axes.";
gameLoop();
clearInterval(interval);
}
}
}
21.
22. canvas.onclick = function() {
canvas.requestPointerLock();
}
function canvasLoop(e) {
x += e.movementX;
y += e.movementY;
canvasDraw();
requestAnimationFrame(canvasLoop);
}
26. var myWorker = new Worker("worker.js");
myWorker.postMessage([first.value,second.value]);
onmessage = function(e) {
console.log('Message received from main script');
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
console.log('Posting message back to main script');
postMessage(workerResult);
}
27. var myWorker = new SharedWorker("worker.js");
myWorker.port.start();
myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
onconnect = function(e) {
var port = e.ports[0];
port.onmessage = function(e) {
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
port.postMessage(workerResult);
}
port.start(); // onmessage イベントを使用していますので必須ではありません
}
28.
29. var x = 42;
var y = "a string";
var z = x + y; // z = "42a string"
eval("z = z.substr(1, 2)"); // z = "2a"
[1, "two", { three: 3 }].forEach(function(item) {
if (typeof item === typeof z) console.log([z, item]);
}); // emits ["2a", "two"]
35. var ab = new ArrayBuffer(1024);
var uInt8Array = new Uint8Array(ab);
for (var i = 0; i < uInt8Array.length; ++i) {
uInt8Array[i] = i;
}
var worker = new Worker("worker.js");
console.log(uInt8Array.byteLength); // before transferring: 1024
worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
console.log(uInt8Array.byteLength); // after transferring: 0
36. var sab = new SharedArrayBuffer(1024);
// before transferring
console.log(sab.byteLength); // 1024
worker.postMessage(sab, [sab]);
// after transferring
console.log(sab.byteLength); // 1024