前言
generator-touchpal-phaser 是一款基于 Yeoman 构建的 TouchPal Phaser 模板生成器 ，可以帮助你在快速创建 Phaser-based 的 TouchPal 小游戏项目时省略了很多重复的工作。在使用该包前，你需要先安装好 npm 、node.js 以及 Yeoman 脚手架工具。
安装
在命令行中输入以下命令进行安装：
npm install -g generator-touchpal-phaser
安装完成后，输入以下命令生成新的游戏项目：
yo touchpal-phaser
接下来，你需要按照输入提示逐步完成配置。
目录结构
生成的项目目录结构如下：
-- -------------------- ---- ------- - --- ------ - --- ----- - --- ------ - --- ----- --- --- - --- ------ - --- ------- - --- ----- - --- ------- - --- -------- --- --------- --- ----------------- --- ---------- --- ------------ --- ---------
其中，assets 和 src 目录为游戏资源文件存放目录，config.js 为游戏配置文件，webpack.config.js 为 webpack 配置文件，index.html 为游戏主页面，package.json 为项目依赖文件，README.md 则是游戏项目的介绍文档。
webpack 配置
Phaser 在游戏中需要加载许多资源文件（如音乐、图片、字体等），webpack 为这些文件提供了模块化的支持，使我们能够更方便的管理这些文件。
以下是生成的 webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
---------- -
------------ --------
-
--在这个配置文件中，我们指定了项目的入口文件为 src/index.js，而输出文件则是 dist/bundle.js。devServer 配置项指定了 webpack-dev-server 的根目录为 dist 目录。
编写代码
在 src 目录下，我们可以按照自己的需要建立游戏场景、精灵、组件等等。以下是一个简单的场景代码示例：
-- -------------------- ---- -------
------ ------ ---- ---------
------ ------- ----- --------- ------- ------------ -
------------- -
--------------
-
--------- -
--------------------- ------------------------
---------------------- ------------------------
-
-------- -
----------------- -- -----
------------- ---
--------------------- - ----- ---- --
--------
-
-这段代码实现了背景图片和背景音乐在场景中的加载和播放。
运行游戏
运行以下命令启动 webpack-dev-server：
npm run serve
接着，在浏览器中打开 http://localhost:8080 即可预览游戏。
总结
通过使用 generator-touchpal-phaser，我们可以省去许多繁琐的模板配置工作，快速地构建出 TouchPal Phaser 小游戏项目骨架。同时，本文也对于 Phaser 和 webpack 的相关使用做了简单的讲解，希望对初学者提供一点参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b3669b