Phaser 游戏实例（一）
2017-08-01 本文已影响0人
五月燃
phaser是一个基于pixi渲染引擎的开发框架，用其api文档里的一句话来形容就是：你所见的世界是一幅油画。Phaser里最基本的对象或者说是元素就是World，如果有兴趣，你也可以把你的canvas当做艺术品，做出你想要的东西。Phaser的API和教程介绍已经很多了，不做重复，本文重点分享一下如何使用 phaser，webpack, es6 系统的开发一款小游戏。
环境搭建
- 通常开发一款H5的phaser游戏的时候，如果通过es5语法来实现一些函数操作或者继承框架的类函数比较复杂，下文中我会详细介绍。所以我们需要引入babel模块来使用es6进行代码开发。
- phaser虽然提供了强大的API，减少了很多的代码量，但是做一款不复杂但是完整的游戏在一个JS文件中无论是阅读还是维护相当的不方便，所以按照场景或者功能分发成多个模块进行开发是有必要的
- 相关package.json可以参考https://github.com/lean/phaser-es6-webpack。
- 核心需求主要是 1. babel全家桶，如果你需要代码里进行对象结构等es7新特性可以引入babel-preset-stage-2 2. webpack以及对应的本地服务器 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');
配置相应的库文件路径，这里我们使用的是带有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部分是一个匹配被处理文件后缀名的正则表达式，上面是针对几种不同格式的文件所用到相对应的loader：
- json-loader用来处理对应的json文件转为js文件，你可以直接在js代码中调用它
- babel-loader用来将es6, es7的js文件转为可供现代浏览器识别的es5格式的js文件。
- url-loader类似于file-loader，但是它添加了limit属性，如果文件大小<limit,会自动将其转为base64编码减少资源的请求数。
- 最后针对pixi和phaser的第三方js源码进行模块化，这里通过expose将模块添加到全局对象Phaser和PIXI, 使得phaser能够正常调用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以及其他业务需要引入的库文件合并成vendor.bundle.js
