Is it possible to create a PIXI.Texture from multiple image sources in pixi.js?

Question

I have about 10 different image files that I need to dynamically load into one PIXI.Texture object. Is that a possibility with pixi.js? Think of a slot machine reel; I have each individual slot symbol as an image and need to construct a reel strip texture from those images.

Thank you in advance.

Answer 1

Yes, you can use a RenderTexture for this. You need to create each of your image sprites first and add them to a container. Then you can render that container into a texture, which you can then re-use throughout your application.

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