HTML5な2Dゲームをつくるライブラリ pixi.jsが凄い　その３：expressJS上で動かしてみる

pixi.jsもJavascriptの眷属なわけで、当然nodeJsでも動きます。
身内向けゲームで小規模にやるだけなら、ほとんど手間の掛からないこの方法が無難でしょう。

実際のところ

前回の簡単アプリをexpressに再実装してみます。

せっかくexpressにするので、ついでにjade化もしちゃいます。
ディレクトリ構造は以下のように。

$ tree -L 2                                                
.                                                                                         
├── app.js                                                                                
├── javascript                                                                            
│   ├── pixi.min.js                                                                       
│   └── pixiapp.js                                                                        
├── node_modules                                                                          
│   ├── express                                                                           
│   └── jade                                                                              
├── npm-debug.log                                                                         
└── views                                                                                 
    └── index.jade                                                                        
                                                                                          
5 directories, 5 files

作業前に

$ npm i express
$ npm i jade

と、最低限のパッケージの用意はしておきます。

スクリプト

views/index.jade

表示部分。jade化したので圧倒的スリム化。

title Hello World                                                                         
body                                                                                      
  script(src="javascript/pixi.min.js")                                                    
  script(src="javascript/pixiapp.js")

javascript/pixiapp.js

前回のapp.jsに相当するので除外

app.js

基本的なexpressアプリ。
画面遷移すらない。
ただし、javascript自体はexpress.staticで読み出し可能にしておかないとConnection Errorになるので注意。

var express = require('express')                                                          
var app     = express()                                                                   
// Get the Javascript in the browser                                                      
app.use(express.static(__dirname))                                                        
app.set('view engine', 'jade')                                                            
                                                                                          
app.get('/', function(req, res) {                                                         
    res.render('index')                                                                   
})                                                                                        
                                                                                          
app.listen(3000, function () {                                                            
      console.log('Example app listening on port 3000!')                                  
})