Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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

ちゃんと動けば、こんな感じの画面になるはずです。
f:id:shuzo_kino:20160411215719p:plain