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) }
無事起動すれば、こんな感じになるはずです
