• Public
  • Public/Protected
  • All

interface game GameLoader

You need to implement at least loadGameResources and createNewGame

This will called as part of etherplay.init in the game context

//renderer that can render the game passed in
//usefull to isolate the game logic in its own object and rendering in another
//it is optional but if you do not have it, you would need an alternative way to get access to the canvas so you can display the game state.
//this can be done by instantiating the canvas yourself and keep reference to it while adding to the conf object when calling "etherplay.GameInIFrame.init" so it is displayed correctly
function Renderer() {
  var self = this;

  var _ctx;
  var _canvas;

  //called once the game is created, just before game.start
  self.setupRendering = function(game,canvas){
      _canvas = canvas;
      _ctx = _canvas.getContext('2d');    
    _ctx.fillRect(0, 0, _canvas.width, _canvas.height);

  //called every frame (including just after game.start) if implemented
  self.render = function(game, input, elapsed){ //input is given here but using it in the render do not trigger recording of inputs. provided as a convenience
    _ctx.fillRect(0, 0, _canvas.width, _canvas.height);

    for(var i = 0; i < input.touch.currentTouches.length; i++){
      var touch = input.touch.currentTouches[i];
      var color = "#0000FF";
      _ctx.arc(touch.x, touch.y, 4, 0, 2 * Math.PI, false);  // a circle at the start
      _ctx.fillStyle = color;

    // _ctx.fillRect(Math.random() * _canvas.width, Math.random() * _canvas.height, Math.random() * 100, Math.random() * 100);//TODO remove : Math.radom will be returning 0 all the time

  //can be used to stop looping as the game will not run anymore
  //TODO self.stopRendering = function(){} ?
  self.stopRendering = function(){
    console.log("Renderer : stop renderring...");

//game factory
//using a new instance help you make sure no old state affect a new run session
//this will be called for every new game session
function createNewGame(){
  return new Game();

//called only once the page load
//since by default, the page is reloaded for every new game session, this will be called each of these times
//can be used to load assets. Once reportProgress is called with a value >= 1 the loading is assumed to be done and the game factory function "createGame" will be called
var loadGameResources = function(reportProgress){
  //can load assets,
  //here is just fake delay:
  var delay = 2500;
  var startTime = performance.now();
  function loading(now){
    var elapsed = now - startTime;
    var progress = Math.min(1,elapsed / delay);

var gameLoader = {
    loadGameResources : loadGameResources,
    createNewGame : createNewGame,
    renderer : new Renderer()




createNewGame: function

This method only responability is to return a Game object which has all the property defined Game

Type declaration


loadGameResources: function

This method need to call reportProgress with a number between 0 and 1

1 indicate that game's resources has been loaded and the game is ready to be created

Note that because of the need to verify the player's game, all the external resources need to be loaded at this point

Type declaration

    • (reportProgress: function): void
    • Parameters

      • reportProgress: function
          • (progress: number): void
          • Parameters

            • progress: number

            Returns void

      Returns void

Optional renderer

renderer: Renderer

This optional object contain the method to request rendering