Search code examples
javascriptcanvasrendererstagepixi.js

PIXI.js render not working

I'm following this tutorial (http://www.yeahbutisitflash.com/?p=5226), using Chrome, and can't figure out why this isn't working. Here is my console output:

init() successfully called.
pixi.dev.js:224    Pixi.js v2.2.7 - webGL      http://www.pixijs.com/    ♥♥♥ 
index2.html:26 PIXI.WebGLRenderer
index2.html:28 render complete.

And here is my code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Endless Runner Game Demo</title>
  </head>

  <body onload="init();">
  <div align="center">
    <canvas id="game-canvas" width="512" height="384"></canvas>
  </div>
  <script src="js/pixi.js-master/bin/pixi.dev.js"></script>
  <script>
    function init() {
      console.log("init() successfully called.");
      stage = new PIXI.Stage(0x66FF99);
      renderer = PIXI.autoDetectRenderer(
        512,
        384,
        document.getElementById("game-canvas")
      );
      console.log(renderer);
      renderer.render(stage);
      console.log("render complete.");
    }
  </script>
</body>
</html>

Yet, it displays nothing. The tutorial says I should see the background color set on the stage at this point.

Thanks.

Solution

  • The third argument of PIXI.autoDetectRenderer should be an Object, not an element. You should set the Object property "view" to be your canvas element.

    var renderer = PIXI.autoDetectRenderer( 512, 384, {
    view: document.getElementById("game-canvas")
});

    Also note that you may need to run a local server in order to view it in Chrome.