javascript - 是否可以从 pixi.js 中的多个图像源创建 PIXI.Texture？

Question

我有大约 10 个不同的图像文件需要动态加载到一个 PIXI.Texture 对象中。 pixi.js 有这种可能性吗？想想老虎机卷轴；我将每个单独的插槽符号作为图像，需要从这些图像构建卷轴条纹理。

提前谢谢你。

Answer 1

是的，您可以为此使用 RenderTexture。您需要先创建每个图像 Sprite 并将它们添加到容器中。然后您可以将该容器渲染成纹理，然后您可以在整个应用程序中重复使用它。

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);
}