是否可以在pixi.js中創建來自多個圖像源的PIXI.Texture？

Question

我有大約10個不同的圖像文件需要動態加載到一個PIXI.Texture對象中。這是pixi.js的可能性嗎？想象一臺老虎機卷軸;我將每個單獨的插槽符號作爲圖像，並且需要從這些圖像構建卷軸條紋紋理。

預先感謝您。

Answer 1

是的，你可以使用RenderTexture。您需要先創建每個圖像精靈並將它們添加到容器中。然後，您可以將該容器渲染爲紋理，然後您可以在整個應用程序中重新使用該紋理。

var stage = new PIXI.Container(); 

//Create the sprites and add them into a container. 
//I'm using 10 images at 200 x 200px each. 
var reel = new PIXI.Container(); 
for(var i=0; i<10; i++) 
{  
    var img = PIXI.Sprite.fromImage('img' + i + '.png'); 
    img.y = 200 * i; 
    reel.addChild(img); 
} 

//Create a Texture that will render each of the reels 
var texture = new PIXI.RenderTexture(
     new PIXI.BaseRenderTexture(200, 2000, PIXI.SCALE_MODES.LINEAR, 1) 
); 

//Add some new sprites using the texture 
for(var i=0; i<5; i++) 
{ 
    var s = new PIXI.Sprite(texture); 
    s.x = 200 * i; 
    stage.addChild(s); 
} 

animate(); 
function animate() 
{ 
    //Render the texture 
    renderer.render(reel, texture); 

    //Render the stage 
    renderer.render(stage); 
    requestAnimationFrame(animate); 
}