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