Javascript &

cross-platform video games

Cross-platform

About me

Florian Rival 

Architect-Developer @

Developer of

and

@Florianrival

github.com/4ian

Lil BUB

Game engines

HTML5 game engines

WebView

HTML5 on mobile

= 

Native app

Embedded browser

+

Custom canvas on mobile

= 

Native app

JS engine

+

Canvas compatible API

+

Electron

HTML5 on desktop

= 

Node

Chromium

(V8)

+

• Runs on Windows, macOS, all major Linux distro

• Installers/packagers available to distribute your game

• supports code signing (stores)

• automatic updates

Hybrid game engines

= 

Native rendering

JS engine

+

• SpiderMonkey JS engine is embedded

• Runs on iOS, Android, Windows, macOS, linux

AAA game engines

= 

C++ cross-compiled to JS

Consoles : Wii U

= 

WebKit

 +

Specific JS APIs

• HTML5 should be able to run with few changes!

• Registration needed

• Custom dev Wii U needed ($2000)

Consoles : Xbox One

What about audio?

Javascript performance for games

Rendering 

• Desktop :

• Android :

JS Performance

The garbage collector

Avoiding garbage

function updatePlayerPosition() {
  var mousePos = getMousePosition(); 

  var test = function(obj) {  // 😱
    return obj.isCollidingWithPlayer() && obj.isHarmful();
  }

  var collidingEnemies = allEnemies.filter(test); // 😱
  if (collidingEnemies.length) {
    player.lastCollision = {enemy: collidingEnemies[0]} // 😱
  }
}

function getMousePosition() {
  return [mouseApi.getX(), mouseApi.getY()]; // 😱
}

Each frame, 1 function, 2 arrays and 1 object are added to garbage

Avoiding garbage

Use static objects, arrays, avoid functions returning new objects

function updatePlayerPosition() {
  var mousePos = getMousePosition(); 

  updatePlayerPosition.collidingEnemies = updatePlayerPosition.collidingEnemies 
    || []; // 0 garbage 😙
  updatePlayerPosition.collidingEnemies.length = 0;

  filter(allEnemies, collidingEnemies, Enemy.collisionTest); // 0 garbage? 🤔
  if (collidingEnemies.length) {
    player.lastCollision.enemy = collidingEnemies[0]; // 0 garbage 😙
  }
}

function getMousePosition() { // 0 garbage 😙
  getMousePosition.mousePos = getMousePosition.mousePos || [0, 0]; 
  getMousePosition.mousePos[0] = mouseApi.getX();
  getMousePosition.mousePos[1] = mouseApi.getY();

  return getMousePosition.mousePos;
}

Avoiding garbage

function filter(array, result, func) {
  for(var i = 0;i < array.length; i++) {
    if (func(array[i])) {
      if (result.length <= k) result.push(array[i]);
      else result[k] = array[i];

      k++;
    }
  }

  result.length = k;
}

https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

Avoiding garbage

Use objects pool

function launchBullet() {
  var bullet = Bullets.getNewBullet();
  bullet.setSpeed(500);
}

function onBulletCollision(bullet, enemy) {
  Bullets.recycle(bullet);
}

Bullets.prototype.recycle = function(bullet) {
  Bullets.pool.push(bullet);
}

Bullets.prototype.getNewBullet = function(bullet) {
  if (Bullets.pool.length) {
    return Bullets.pool.pop();
  } else {
    return new Bullet();
  }
}

Game [engine] 

architecture

Game loop

Manage inputs

Update world

Update physics

Render

Update time

Physics

Collisions

• Either use a physics engine

• Roll your own logic:

• Bounding boxes (very simple collision detection)

• Hitboxes made with polygons (use an algorithm like SAT)

• If necessary, divide the space
  to avoid collision checks
  (spatial hashing, quadtree)