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

https://duelyst.com/

http://www.greenheartgames.com/app/game-dev-tycoon/

https://heroesofparagon.com/

http://store.steampowered.com/app/399820/

WIP

GamedevJS

By Krzysztof Jung

Made with Slides.com

GamedevJS

  • 1,638

More from Krzysztof Jung