Gamedev JS
History
Java Applets
Flash apps
Silverlight apps
Unity Web Player
HTML5
<= require plugin
<= require plugin
<= require plugin
<= require plugin
<= no plugins, just browser!
Why to bother at all?
- build once and deploy everywhere
- no installs, no plugins, just instant gaming right in the browser
- millions of potential users/clients
- millions of potential developers
APIs
Chapter 1
CSS
JS
HTML5
DOM
- simple interface
- CSS styling
- SVG for complex elements
- CSS animations
- CSS filters
- CSS shaders
- CSS transforms for simple 3D
- bad performance
Canvas
- 2D image manipulation context
- draw lines and shapes
- draw pictures -> spritesheets
- + timeouts = animation
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();requestAnimationFrame
- async request to run callback once
- timing is up to browser
- leans toward 60 fps
requestAnimationFrame
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
var x = 10;
var y = 10;
function paint() {
ctx.fillRect(x, y, 100, 100);
}
function update() {
x += 2;
y += 2;
}
function step() {
update();
paint();
window.requestAnimationFrame(step);
}
step();WebGL
- based on OpenGL ES 2.0
- Canvas 3D context
- gives access to GPU API
- allows to render 3D graphic
- shaders postprocessing
- parallel computing
Fullscreen API
- document size = screen size - window wrapper
- no screen resolution adjustment yet
- used by players, slideshows, editors
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}Pointer Lock API
- used for FirstPerson view controls
- hides mouse cursor
- allows unlimited mouse movement
canvas.requestPointerLock()
if(document.pointerLockElement === canvas) {
console.log('The pointer lock status is now locked');
} else {
console.log('The pointer lock status is now unlocked');
}
document.exitPointerLock();
document.addEventListener('pointerlockchange', lockChangeAlert, false)Gamepad API
- for FPS games use mouse, for arcade style - gamepad
- plug your pad(s) in and handle all inputs
- any OS recognized pad is fine
- device detected after first interaction
- 'connect'/'disconnect' events + button/axis state checking
<audio> <video>
- browser native media players
- can bu used just as JS objects
- multiple active players
- support for
- mp4/mp3/H.264
- ogg/vorbis/theora
- WebM
- simple use cases
WebAudio
- audio context
- audio streams, nodes & buffers
- audio generation & modulation
- synthesizing music and sound effects by code
WebSockets
- two way server communication
- for real-time multiplayer gameplay
- TCP based (as HTTP)
- prepare WebSockets server for authoritative network architecture
- remember to have proper network abstractions (for latency compensation)
WebRTC
- P2P browser connections
- for real-time multiplayer gameplay
- can use TCP or UDP
- WebRTC server for connection initialization
- able to send data streams
- exchange binary data or setup video/voice chat
WebWorkers
- allows to spawn parallel processes
- communication through postMessage API
- performance heavy calculation
- 1frame = 16.6 ms
- AI (decision making, path finding, etc.)
Device orientation API
- mostly used on mobile phones and tablets
- accelerometer input
- can be used as non-standard controller
Local storage
- save game progress
- cache game data and assets
TOOLS
Chapter 2
How about libraries?
Pure Vanilla is fine, but takes time
Canvas 2D
- fabric.js
- processing.js
- PlayCanvas
- Three.js
- TWGL
- GLBoost
Canvas 3D
Pixi.js (2D API for WebGL)
Games are simulation
Coding physics is hard
Physics simulation libraries
- Box2DJS
- Physics.js
- MatterJS
Rigid body dynamics, collision detection, soft body dynamics, fluid dynamics, etc.
- Cannon.js
- ammo.js (bullet port)
- Oimo.js
FRAMEWORKS
- Phaser
- ImpactJS
- Cocos2D
- PlayCanvas
- BabylonJS
- Turbulenz
- physics engine
- assets loader & manager
- state managers
- scene managers
- controllers
- animations
- entities systems
JS is sloooow!
Games need performance!
How about some speedup?
asm.js
- speed race since V8 by Google
- JS: dynamic, untyped, and interpreted
- JIT - Just In Time Compiler
- compilation at execution
- adaptive optimization
- asm.js - strict subset of JS, generated by source to source compilers
- ex. C / C++ -> Emscripten -> asm.js
Result?
Up to 66% of native speed
On a browser!!!
Who uses it?
- as a proof of concept Mozilla ported simple
Unreal Engine game (asm.js+WebGL interface) - some heavy-performance JS libs use it
- game engines like Unity, Godot or Unreal allow to export game to HTML5
Is that all?
Nope
Web Assembly is on the way
= native browser sandbox to run bytecode
ElectronJS
- chromium + node.js (by Github)
- desktop (web) apps
- easy to build for Win/OSX/Linux
- OS integrations
So where are those games?
- mobile games
- games markets &
- promo sites
- Steam
WIP
