Phaser 游戏实例（一）

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：

1. json-loader用来处理对应的json文件转为js文件，你可以直接在js代码中调用它
2. babel-loader用来将es6, es7的js文件转为可供现代浏览器识别的es5格式的js文件。
3. url-loader类似于file-loader，但是它添加了limit属性，如果文件大小<limit,会自动将其转为base64编码减少资源的请求数。
4. 最后针对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

• webpack.config的详细配置见：点我
• 生产环境下的webpack.config: 点我

下一章： phaser游戏制作的初始化设置。