phaser是一個基于pixi渲染引擎的開發(fā)框架，用其api文檔里的一句話來形容就是：你所見的世界是一幅油畫港华。Phaser里最基本的對象或者說是元素就是World，如果有興趣断部，你也可以把你的canvas當做藝術(shù)品仿粹，做出你想要的東西。Phaser的API和教程介紹已經(jīng)很多了崭添，不做重復(fù)寓娩，本文重點分享一下如何使用 phaser，webpack, es6 系統(tǒng)的開發(fā)一款小游戲呼渣。
環(huán)境搭建
- 通常開發(fā)一款H5的phaser游戲的時候棘伴，如果通過es5語法來實現(xiàn)一些函數(shù)操作或者繼承框架的類函數(shù)比較復(fù)雜，下文中我會詳細介紹屁置。所以我們需要引入babel模塊來使用es6進行代碼開發(fā)焊夸。
- phaser雖然提供了強大的API，減少了很多的代碼量蓝角，但是做一款不復(fù)雜但是完整的游戲在一個JS文件中無論是閱讀還是維護相當?shù)牟环奖愦镜兀园凑請鼍盎蛘吖δ芊职l(fā)成多個模塊進行開發(fā)是有必要的
- 相關(guān)package.json可以參考https://github.com/lean/phaser-es6-webpack怖糊。
- 核心需求主要是 1. babel全家桶，如果你需要代碼里進行對象結(jié)構(gòu)等es7新特性可以引入babel-preset-stage-2 2. webpack以及對應(yīng)的本地服務(wù)器 3. phaser v2.6.2（如果你不需要新增特性的話颇象，不推薦使用phaser-ce）伍伤；
webpack.config配置
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require("html-webpack-plugin");
var phaserModule = path.join(__dirname, '/node_modules/phaser/');
var phaser = path.join(phaserModule, 'build/custom/phaser-arcade-physics.js');
var pixi = path.join(phaserModule, 'build/custom/pixi.js');
配置相應(yīng)的庫文件路徑，這里我們使用的是帶有arcade物理引擎的phaser版本遣钳，這里如果你使用的是phaser-ce版本的話扰魂，默認的物理引擎是p2， 所以如果你不打算使用P2的話蕴茴，代碼運行會報p2對象未定義的錯誤劝评。
entry: {
app: [
path.resolve(__dirname, "./Parkour/main.js")
]
}
在module 的export里，我們首先要定義入口文件路徑.
接下來是配置webpack中重要的功能 -- Loaders
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
exclude: /node-modules/,
loader: 'babel-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=1024&name=[name].[ext]'
},
{
test: /pixi\.js$/,
loader: 'expose-loader?PIXI'
},
{
test: /phaser-arcade-physics\.js$/,
loader: 'expose-loader?Phaser'
}
]
}
上面是通過正則在配置文件中綁定loaders
test部分是一個匹配被處理文件后綴名的正則表達式倦淀，上面是針對幾種不同格式的文件所用到相對應(yīng)的loader：
- json-loader用來處理對應(yīng)的json文件轉(zhuǎn)為js文件蒋畜，你可以直接在js代碼中調(diào)用它
- babel-loader用來將es6, es7的js文件轉(zhuǎn)為可供現(xiàn)代瀏覽器識別的es5格式的js文件。
- url-loader類似于file-loader撞叽，但是它添加了limit屬性姻成，如果文件大小<limit,會自動將其轉(zhuǎn)為base64編碼減少資源的請求數(shù)。
- 最后針對pixi和phaser的第三方j(luò)s源碼進行模塊化愿棋，這里通過expose將模塊添加到全局對象Phaser和PIXI, 使得phaser能夠正常調(diào)用pixi文件中的PIXI對象 （webpack2 需要寫全稱expose-loader）.
entry: {
app: [
path.resolve(__dirname, "./Parkour/main.js")
],
vendor: ['pixi', 'phaser']
}科展，
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js'
})
]
針對CommonsChunkPlugin的使用，首先在入口配置中添加vendor糠雨，寫入要打包的第三方庫才睹，然后我們實例化webpack的公共代碼提取插件,將配置名為vendor里的第三方代碼庫進行合并。這樣就可以將phaser, pixi以及其他業(yè)務(wù)需要引入的庫文件合并成vendor.bundle.js
