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

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

1 个答案: