Phaser.js 3.x 开发h5小游戏——搭建本地环境

什么是 Phaser

Phaser.js 是一个基于javascript语言的高性能的，快速的，跨平台的 h5游戏开发框架。目前已经官方版本已经更新到3.4了。其内置了两种物理引擎，arcade物理引擎和 matter物理引擎。用于2D游戏开发。相较于国内的cocos-creator，layaair,白鹭三个游戏开发引擎来说，phaser 比较轻量，游戏各个场景完全用代码去编写，没有前三个那么强大的UI编辑器，因此开发效率相对来讲就低了很多。但Phaser 依然非常好用。

创建本地环境——创建文件

根据官方介绍，phaser 必须运行在服务器环境中，因此需要搭建好本地服务器，官方有初始模板，但仍建议自己用 node.js weback 定制一个，用起来也比较顺手。简单说一下window系统下的安装过程：

• 安装nodejs 以及 webpack 4.x webpack-cli
• 在除了C盘以外的盘符弄一个新文件夹打开命令行 执行 npm init 根据指示初始化一个项目，之后会生成一个文件夹，然后在此文件夹下创建如下目录结构,src 目录中 最主要的是 index.html 以及 game.js 。其他文件按照自己需求自己创建

  

创建本地环境——安装依赖

• 安装相关依赖文件，由于项目将使用 es6 的语法，因此需要对兼容做处理，那么就要安装babel 相关的所有依赖。npm install @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime @babel/runtime-corejs3 babel-loader --save-dev
• 需要把编写的脚本自动引入到html 文件中，就需要安装 htmlWebpackPlugin 插件 npm install htmlWebpackPlugin --save-dev
• 多环境打包需要用到nodejs环境变量, 还有抽离多环境下公用的打包配置，以及创建本地开发环境。就需要安装cross-env，webpack-dev-server，webpack-merge npm install cross-en webpack-dev-serve webpack-merge --save-dev
• 开发中需要引入图片，音频等资源就需要 url-loader,file-loader npm install url-loader file-loader
• 然后要js 混淆和html压缩的需要安装uglifyjs-webpack-plugin npm install uglifyjs-webpack-plugin
• 最后打包生产环境的时候希望 每次打包的文件是一个新的话，需要安装 clean-webpack-plugin npm install clean-webpack-plugin --save-dev

创建环境——编写打包配置

• 不哔哔 上代码。
• 最开始是项目配置的代码，也就是config文件夹下的 config.js

module.exports = {
    dev: {
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
    },
    build: {
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
    }
}

• 其次是build文件下的所有文件代码
• common.config.js

    const htmlWebpackPlugin = require('html-webpack-plugin');
    const config = require('../config');
    module.exports = {
    context: path.resolve(__dirname, '../'),
        entry: {
            app: "./src/game.js"
        },
        stats: {
            children: false
        },
        module: {
            rules: [{
                test: /\.(jpg|png|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 0,
                        esModule: false,
                        outputPath: "static"
                    }
                }
            }, {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [[
                            "@babel/plugin-transform-runtime",
                            { "corejs": 3 }
                        ]]
                    }
                }]
            }]
        },
        output: {
            filename: "js/[name]_[hash:8].js",
            path: path.resolve(__dirname, '../dist'),
            publicPath: process.env.NODE_ENV === 'production'
                ? config.build.assetsPublicPath
                : config.dev.assetsPublicPath
        },
        plugins: [
            new htmlWebpackPlugin({
                template: path.resolve(__dirname, '../src/index.html'),
                inject: true,
                minify: { //压缩HTML文件
                    removeComments: true,    //移除HTML中的注释
                    collapseWhitespace: true    //删除空白符与换行符
                }
            })
        ],
        optimization: {
            splitChunks: {
                name: 'common'
            }
        }
    }

• dev.config.js

const merge = require('webpack-merge');
const common = require('./common.config');
const webpack = require('webpack');
const path = require('path');
module.exports = merge(common, {
    mode: "development",
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, '../src'),
        hot: true,
        host: "localhost",
        port: 8080,
        quiet: false
    },
})

• prod.config.js 代码

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./common.config');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = merge(common, {
    mode: "production",
    plugins: [
        new CleanWebpackPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    }
})

• 接着是执行脚本的代码配置 package.json

{
  "name": "demo_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --open --config build/dev.config.js",
    "build": "cross-env NODE_ENV=production webpack --config build/prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "@babel/runtime-corejs3": "^7.8.7",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "cross-env": "^7.0.2",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "phaser": "^3.22.0"
  }
}

• 最后就是入口模板index.html，和入口文件了game.js，本篇只是简单介绍如何搭建phaser 本地的开发环境，因此 game.js 里面可以什么都没有。index.html 本身也不需要什么其他复杂的东西，简单的样式和一个游戏场景的容器 canvas，场景容器canvas 是非必需的，phaser 在初始化的时候，如果你不指定容器，它会自动在body标签里面创建一个。index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>飞刀游戏</title>
    </head>
    <style>
        html,
        body {
            height: 100vh;
            width: 100vw;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #container {
            height: 100%;
            width: 100%;
        }
    </style>

    <body>
        <div id="container"></div>
    </body>
</html>

搭建本地环境——测试结果

到此，整个环境的搭建就结束了，在当前项目根目录打开命令行，执行 npm start，如果不出意外，浏览器会自动打开。如果控制台没有任何报错，基本上就成功了。因为html没有写任何内容，因此页面上不会显示任何东西。

搭建本地环境——结束

关于phaser 的环境搭建就简单记录在这，下回再分享利用 Phaser 开发一个比较low的游戏