Bye Bye Moore

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

HTML5な2Dゲームをつくるライブラリ pixi.jsが凄い その3: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!')                                  
}) 

実行結果

f:id:shuzo_kino:20160321133343p:plain