This package has been deprecated

Author message:

This

Saberjs

The first byor [bring your own renderer] js game framework

Foreward

I developed this library to scratch my own itch. I needed a game framework that didn't care which renderer it used. Mostly because I wanted to use my own custom renderer (e2d) and wasn't able to find anything worth using.

API

Game States

Game states are actually class-like. You define their prototype and this refers to the game state instance.

var saber = require('saber-js');
 
var state = new saber.GameState({
  //prototype functions goes here
  onCreate: function() {
    //runs before physics and runs only once
  },
  onPhysics: function() {
    //runs before render  
  },
  onRender: function() {
    //runs after physics
  }
});
 
var instance = state.createInstance();
 
instance.param = "value";

Asset Groups

Loading stuff and keeping track of what needs to be loaded can be tricky, so instead of worrying about asset counts, try using the functions returned by the AssetGroup prototype.

Prototype

imageGroup.assetLoaded This function returns a function that increments the loaded count and indexes the loaded asset onto imageGroup.index with the specified id.

It also takes an Object parameter (which will be indexed) or a function that accepts the parameters of the parent load event and returns the object to be indexed.

var imageGroup = new AssetGroup();
var img = new Image();
img.src = 'url';
 
//either
img.addEventListener('load', imageGroup.assetLoaded('id', img));
 
//or if you want to use a callback
function cb(e) {
  //e is the event object from the img.onload event
}
 
img.addEventListener('load', imageGroup.assetLoaded('id', cb, thisArg));

imageGroup.assetErrored

This function returns a function that increments the errored count and indexes the loaded asset onto imageGroup.erroredIndex with the specified id.

It also takes an Object parameter (which will be indexed) or a function that accepts the parameters of the parent load event and returns the object to be indexed.

Using the above example...

img.addEventListener('error', imageGroup.assetErrored('id', img));
 
img.addEventListener('error', imageGroup.assetErrored('id', cb, thisArg));

Events

asset-loaded

Called when an asset is loaded.

imageGroup.on('asset-loaded', function(id, object) {
  //id and object were passed to assetLoaded
});

asset-errored

Called when an asset errors.

imageGroup.on('asset-errored', function(id, object) {
  //id and object were passed to assetLoaded
});

loaded

Called after every asset is accounted for (errored or loaded.)

imageGroup.on('loaded', function(index, erroredIndex) {
  var erroredIds = Object.getOwnPropertyNames(erroredIndex);
  //index and erroredIndex have the assets
});

Game

The main object that represents a game.

The folowing example is pixi.js related bunny hello world. Basic.js example

var app = Game.create(); //new Game(); is also fine
var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
 
var helloWorld = new GameState({
  onCreate: function(stage, renderer) {
    
    //this is the state instance
    this.bunnyTexture = PIXI.Texture.fromImage('_assets/basics/bunny.png');
    
    this.bunnySprite = new PIXI.Sprite(this.bunnyTexture);
    this.bunnySprite.anchor.x = 0.5;
    this.bunnySprite.anchor.y = 0.5;
    
    this.bunnySprite.position.x = 200;
    this.bunnySprite.position.y = 150;
    
    return stage.addChild(this.bunnySprite);
  },
  onPhysics: function(stage, renderer) {
    this.bunnySprite.rotation += 0.1;
  },
  onRender: function(stage, renderer) {
    return renderer.render(stage);
  }
});
 
//add a state to the game
app.pushState(helloWorld.createInstance());
 
//set the parameters for the game states and the tick function
app.init(stage, renderer); 
 
function loop() {
  requestAnimationFrame(loop);
  return app.tick();
}
 
loop();