Question

我正在使用PIXI的一个简单示例

该示例的链接是： http://www.goodboydigital.com/pixi-js-tutorial-getting-started/

所以我稍微改了一下，脚本标签中的代码就是这样：

<script>
      // create an new instance of a pixi stage
      var stage = new PIXI.Stage(0x66FF99);
      console.log(stage);
      // create a renderer instance.
      var renderer = PIXI.autoDetectRenderer(400, 300);
      console.log(renderer);
      // add the renderer view element to the DOM
      document.body.appendChild(renderer.view);


      // create a texture from an image path
      var texture = PIXI.Texture.fromImage("bunny.png");
      // create a new Sprite using the texture
      var bunny = new PIXI.Sprite(texture);

      // center the sprites anchor point
      bunny.anchor.x = 0.5;
      bunny.anchor.y = 0.5;

      // move the sprite t the center of the screen
      bunny.position.x = 200;
      bunny.position.y = 150;

      stage.addChild(bunny);
      renderer.render(stage);

      // requestAnimFrame( animate );

      function animate() {
          requestAnimFrame(animate);
          // render the stage  
          renderer.render(stage);
      }
</script>

所以不要使用requestAnimFrame（animate）; 我正在使用renderer.render（阶段）;代替。

在FF 32.0.3上发生了什么，它运行良好，bunny.png出现在舞台内的屏幕上。

在Chrome版本37.0.2062.124 m（64位）上，舞台显示但没有兔子。

我也使用Xampp提供网页，因此路径是通过网络服务器进行的，所以使用文件路径没有CORS问题。

有谁知道为什么会这样？

谢谢，吉姆

Answer 1

当您只需要调用渲染一次时，您需要确保预先加载所需的所有资源。尝试使用pixi资产管理器预加载。干杯！

Answer 2

尝试在调用渲染之前预加载图像

var img = new Image();
img.onload = function() {
    renderer.render(stage);
}
img.src = 'bunny.png';

使用PIXI将图像添加到页面

2 个答案: