PIXI.loaderで読んだjsonから、複数のオブジェクトを描き出す

PIXI.loaderで読んだjsonから、複数のオブジェクトを描き出す方法です。

実際のところ

前回使ったanimals.jsonから、猫一匹、トラ二匹を表示します。
せっかくなので、盤面も描いてみました。

var oneChip = 65;                                                                    
var xAxis   = oneChip * 16;                                                          
var yAxis   = oneChip * 9;                                                           
                                                                                     
//// Pixiの関数                                                                      
//`stage`という名前のコンテナを追加                                                  
var stage = new PIXI.Container()                                                     
                                                                                     
// Pixi領域を作成                                                                    
var renderer = PIXI.autoDetectRenderer(xAxis, yAxis,{backgroundColor : 0x10bbbb})    
                                                                                     
// ドットの枠線で囲う                                                                
renderer.view.style.border = "3px dashed black"                                      
// loaderを設定                                                                      
var loader       = PIXI.loader;                                                      
var graphics     = new PIXI.Graphics()                                               
var TextureCache = PIXI.utils.TextureCache;                                          
var Sprite       = PIXI.Sprite;
                                                                                     
//canvasタグを自動追記                                                               
document.body.appendChild(renderer.view)   
                                          
graphics.lineStyle(1, 0x000000)                                                      
for ( i = 1;i * oneChip < xAxis;i++ ) {                                              
    graphics.moveTo(oneChip * i, 0)                                                  
    graphics.lineTo(oneChip * i, yAxis)                                              
}                                                                                    
                                                                                     
for ( j = 1;j * oneChip < yAxis;j++ ) {                                              
    graphics.moveTo(0,     oneChip * j)                                              
    graphics.lineTo(xAxis, oneChip * j)                                              
}                                                                                    
graphics.endFill()                                                                   
stage.addChild(graphics)

// load images                                                                       
loader.add("views/images/animals.json")                                              
    .load(setup);  

function setup() {                                                                   
    var id;                                                                          
    id = PIXI.loader.resources["views/images/animals.json"].textures                 
                                                                                     
    tiger = new Sprite(id["tiger.png"])                                              
    tiger.x = oneChip * 5                                                            
    tiger.y = oneChip * 5                                                            
    stage.addChild(tiger)                                                            
                                                                                     
    tiger2 = new Sprite(id["tiger.png"])                                             
    tiger2.x = oneChip * 10                                                          
    tiger2.y = oneChip * 3                                                           
    stage.addChild(tiger2)
                                                                                     
    cat = new Sprite(id["cat.png"])                                                  
    cat.x = oneChip                                                                  
                                                                                     
    stage.addChild(cat)  
    renderer.render(stage) 
}                                                          

ちゃんと動けば、こんな感じの画面になるはずです。

参考もと

GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine.