How to use pixi.js without a scene?

Question

I have this pixi.js code that does what it should 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 a statement

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

How should I do the same without using PIXI.Stage() ?

Answer 1

In fact, I ran into the same problem! I ended up looking for new documentation for PIXI, which can be found here http://pixijs.imtqy.com/docs/index.html .

The container to which they refer is a new object introduced to replace the Stage object. http://pixijs.imtqy.com/docs/PIXI.Container.html#toc1

stage = new PIXI.Stage (0x66FF99)

now it becomes

var container = new PIXI.Container ();

Hope this helps! :)

Answer 2

You should go from:

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

To:

 var stage = new PIXI.Container(); 

And if you want to use the background color, you can specify it when renderer declared:

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

Answer 3

As @ Mattnv92 mentioned, any object that inherits from Container (formally DisplayObjectContainer ), for example. Sprite, Graphics, etc. Now can be directly displayed on the canvas, if I'm not mistaken.

Therefore, you should change stage = new PIXI.Stage(0x66FF99); on stage = new PIXI.Container(); .

T