Возможно ли создать PIXI.Texture из нескольких источников изображения в pixi.js?

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