How to use pixi.js without Stage?

Question

I have this pixi.js code which does what it's supposed to do: Draw a rectangle.

   var stage, renderer, graphics;

    (function () {
      // init PIXI
      // create an new instance of a pixi stage
      stage = new PIXI.Stage(0x66FF99);

      // create a renderer instance.
      renderer = PIXI.autoDetectRenderer(400, 300);

      $('#pixi-area').append(renderer.view);

      graphics = new PIXI.Graphics();
      graphics.beginFill(0xFFFFFF);
      graphics.lineStyle(1, 0xFF0000);
      graphics.drawRect(20, 20, 150, 150);
      stage.addChild(graphics);
      renderer.render(stage);
    }());

However, in the console I get the statement

You do not need to use a PIXI Stage any more, you can simply render any container.

How am I supposed to do the same without using PIXI.Stage()?

Answer 1

I actually just ran into the same problem! I ended up finding the newer documentation for PIXI, which can be found here http://pixijs.github.io/docs/index.html.

The container that they are referring to is a new object introduced to replace the Stage object. http://pixijs.github.io/docs/PIXI.Container.html#toc1

stage = new PIXI.Stage(0x66FF99)

now becomes,

var container = new PIXI.Container();

Hope this helps! :)

Answer 2

You should move from:

var stage = new PIXI.Stage(0x65C25D);

To:

var stage = new PIXI.Container();

And if you want to still use background color you can specify it when declaring renderer:

var renderer = PIXI.autoDetectRenderer(width, height, {
    backgroundColor: 0x65C25D
});