使用PIXI

将图片添加到页面我使用从PIXI使用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（动画）; 我正在使用renderer.render（stage）;代替。

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

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

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

有谁知道为什么会这样？

感谢，吉姆

来源

2014-11-02 JimF

当你打电话，一旦你需要确保你所需要的加载前期资产仅渲染。尝试使用pixi资产管理器进行预加载。干杯！

来源

2014-11-03 13:21:33

嗨垫感谢您的回答之前，预加载图像。我提出了一个问题，那就是有一种方法可以在代码中不使用requestAnimFrame（animate）。我的意思是，为了使用PIXI，有一点你需要调用requestAnimFrame（animate），否则说在这种情况下，兔子永远不会在舞台上结束？ – JimF 2014-11-03 20:24:08

不用担心。幸运的是，如果你不需要requestAnimFrame，就不需要了。基本上你需要在调用renderer.render（stage）函数之前预先加载兔子图形。其他方面，当你调用渲染功能的兔子纹理可能不存在，但iyswim？ – 2014-11-04 22:13:10

尝试调用渲染

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

来源

2015-05-16 14:31:30

回答

相关问题