Cross-platform

Video games

About me

Florian Rival 

@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

• JS output is quite heavy (not a problem when packaged, but on the web)

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 : Switch

Consoles : Xbox One

= 

UWP

• Docs on https://docs.microsoft.com/en-us/windows/uwp
• ID@Xbox approval needed
• Xbox Dev Mode to test your UWP game on your Xbox

IE ?

 +

Specific JS APIs

Consoles : PS4

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

var collidingEnemies = allEnemies.filter(function() {/**/}); // 😱 😱

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();
  }
}

Large functions?

Avoid very large functions

Avoided 0.5 seconds lags in my game engine with this

ES6 (with Babel)?

Can potentially create hidden functions, and generate garbage

Be sure to inspect the generated code

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)