PIXI app

• Will setup a stage with predefined size, and scale this stage to be "contain"ed in the canvas. This way, you will have a fixed coordinate system no matter what canvas/window size you use.
• Can automatically grow to window-size and inject itself to the DOM.
• You can add "layers" or "components".
• The pixi-app can show one or more layers using show()
• Layers have a lifecyle to manage resource loading and enter/leave animation.

USAGE

  var App = require('pixi-app');

  // Create app
  var app = new App({
    dpi: 1 // dpi (canvas pixels to screen pixels)
    canvasWidth: window.innerWidth,
    canvasHeight: window.innerHeight,
    stageWidth: 1920,
    stageHeight: 1080, // stage will be scaled to be "contain"ed in canvas

    // define layers
    layers: {
      id: {
        load: {
          name: url
        },
        setup: function(opts) { return new PIXI.Sprite() },
        enter: function(opts) { },
        laeve: function(opts) { }
      }
    },

    // define "route" - a shortcut for showing multiple layers
    routes: {
      name: [id,id,id]
    },

    // backgroudd color
    backgroundColor: 0x000000,
    // inject canvas to DOM when domready
    inject: true,
    // show route or layerIds when initialized
    show: []

    // file -- will a resource URL before passing it to the pixi resource loader
    file: function(url) { return url }
  });

  // Add layers
  app.add(id,{
     id: id //(set by app)
     element: null //(set by app)
     load: {
        name: url             // loaded by PIXI
     },      
     setup: function(opts){ } // setup pixi layer, return pixi displayobject or promise
     enter: function(opts){ } // enter animation, can return promise
     leave: function(opts){ } // leave animation, can return promise
     // all functions are bound to the app instance.
  })

  // remove a layer
  app.remove(id)

  // show layer(s)
  app.show([id,id,id,...])

  // render on next rAF
  app.render()

  // render NOW
  app.render(true)

  // Set state or emit an event
  app.set('stuff',{})
  app.emit('stuff',{})

  // Get state (sync)
  app.get('stuff')

  // Listen to state changes or events
  app.on('stuff', function(){ })
  app.once('stuff', function(){ })
  app.off('stuff', function(){ })

Lifecycle

PIXI App manages layers for you.

When showing a layer, it goes through a lifecycle that allows you to control loading of resources and enter/leave animations.

1. leave - leave old layers, wait for promises to resolve
2. load - load PIXI resources, wait for resources to be loaded
3. setup - run setup function (if layer.element is not yet set)
4. enter - run enter animation, wait for promises to resolve

These steps can be defined in the layer definition object (see app.add), or you can listen to them as events (app.on('leave',function(){})). If you pass a promise in the event-handler, the app will with for the promise to resolve.