Bye Bye Moore

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

Pixi.jsで画像を読み込み

Pixi.jsで画像を読み込みます。

実際のところ

以前書いたexpress版を軸に、画像を付け加える場合を考えます。
shuzo-kino.hateblo.jp

ディレクトリ構造はこんな感じです。
cat.pngは公式のexampleからもらってきました。

.                                                                               
├── app.js                                                                    
├── images                                                                      
│   └── cat.png                                                                 
├── javascript                                                                  
│   ├── pixi.min.js                                                             
│   └── pixiapp.js                                                              
├── node_modules                                                                
│   ├── express                                                       
│   └── jade                                                                    
├── npm-debug.log                                                               
└── views                                                                       
    ├── images                                                                  
    │   └── cat.png                                                             
    └── index.jade

javascript/pixiapp.js

動作アプリに、以下のように追記します。
ディレクトリは起動した所が起点なのでexpressで動かしている場合app.jsがあるディレクトリから参照します。

// add images                                                                   
PIXI.loader                                                                     
  .add("views/images/cat.png")                                                  
  .load(setup);

function setup() {                                                              
    //Create the `cat` sprite from the texture                                  
    var cat = new PIXI.Sprite(                                                  
        PIXI.loader.resources["views/images/cat.png"].texture                   
    )                                                                           
    //Add the cat to the stage                                                  
    stage.addChild(cat)                                                         
    //Render the stage                                                          
    renderer.render(stage)                                                      
}

無事起動すれば、こんな感じになるはずです
f:id:shuzo_kino:20160401233857p:plain