基于 pixi.js 开发H5游戏黄金矿工

话不多说，先放效果图

项目git地址

这次的H5游戏是做在支付宝小程序中的，支付宝小程序官方并没有建议使用什么样的方式亦或是什么样的物理引擎去开发游戏相关内容，当然它也提供了Canvas的能力，如果使用原生canvas的能力去做，你就不可避免的需要处理图层，纹理，精灵图，Ticker，元素碰撞，动画时间轴，资源加载等等涉及到游戏开发相关的内容，在时间不太充裕的情况下，重复造轮子固然灵活，但这对我来说显然不是一个最好的解决方案。

所以这次采用的是小程序内嵌的webview组件去承载我们H5游戏

有了之前使用Halo游戏物理引擎的经验，在H5游戏的开发上我也算是积累了一些经验，因此这次还是打算站在前人的肩膀上奥利给一下，不过这次用的是PIXIJS去开发这款炒冷饭的游戏。

目前，支付宝小程序的场景越来越多元，使用频次越来越大，蚂蚁官方也为小程序的推广和运营铺垫了很多渠道，对小程序游戏的支持我相信也在官方的日程表上了，不过目前并没有像微信小程序一样拥有一个专门供小游戏开发的引擎，因此在开发相对来说比较复杂的H5游戏时，利用其webview组件去做这样的一种伪Hybrid方式的开发也会为开发者节省更多的时间，因此当大家遇到相似的需求时，希望下面的内容能够给大家一些启发~

接下来我会从以下几个方便简单说下这个项目：

• 为什么采用pixi.js开发
• 黄金矿工开发中遇到的一些问题和解决方式
• 如何和支付宝小程序webview组件进行对接

1. PIXI.JS

在使用H5 2D动画引擎的情况下，我们也许有一下几个选择，PixiJS、Fabric.js、Paper.js、EaselJS、Collie，至于为什么我会选择PIXIJS去做这次的开发，主要是基于以下几个方面：

• GitHub 20K+ Star，广泛的用户基数意味着Google和Baidu会更容易找到答案，而且代码还在不断更新
• 示例代码使用了ES6的语法，跟进时代
• 文档友好，还有个中文版的gitbook，入门门槛低
• 足够小足够灵活，并没有直接集成笨重的动画库，Audio库或者碰撞检测的库，这意味着我们遇到这些场景时，可以自由的组合市面上不同的SDK去支撑我们的游戏
• 追求性能，据说它在2D渲染上只有第一没有第二，因为支付宝小程序的兼容性审核，这需要我们的应用能够适配哪怕是中低端的机型，虽然 PixiJS 非常适合制作游戏，但它并不是一个游戏引擎，它的核心本质是尽可能快速有效地在屏幕上移动物体
• 支持Webgl和Canvas，在渲染方式上支持灵活切换和自动识别，无需专门学习 WebGL 就能感受到强大的硬件加速的力量

基于以上这些原因，我选择了PIXIJS去做这次的主角，下面也列举一些大神基于PIXI做的例子，大家也可以看看：

• Run Pixie Run
• cavalierchallenge
• 打砖块小游戏

2. 开发「黄金矿工」

2.1 工程目录

这次只是为了开发一个H5游戏，这是一个重交互轻数据的项目，因此并没有采用像Vue或者是React这样的前端框架，基本的项目框架是：

ES6 + Jquery3 + Less + Rem + Webpack3 + Babel

游戏的框架采用的是：

Pixijs + Bump + TweenMax + TimelineMax + AlloyTouch

另外我也用Node开发了一个轻量的静态资源服务器去承载我的静态资源，接下来的介绍中，我也会一一提到这些内容，项目目录如下：

2.2 处理图层

面对复杂的游戏，我们第一步要做的就是去分离我们的图层，因为不同的图层会包含不同的元素，不同的元素又可能存在不同的交互，适当的分离图层可以使我们在开发不同的样式和交互时更加专注，在这个游戏里，我分成了以下几个图层：

    

• 天空背景层，这里包含了用户头像，金币数量，logo
• 地表土壤层，这里包含了不同的道具，矿工，绳子，钩子，按钮以及按钮下方的文案
• 弹窗蒙版层，这里包含了可能会出现在弹窗里的内容

2.3 加载相关的精灵元素

Pixi提供了强大的loader对象，它可以加载任何你需要种类的图像资源，我把所有的图像资源集中在了loader.js中，主要处理资源的加载和加载后需要完成的动作，这里传入loadAssets中的cb，就是在加载资源结束后需要做的回调：

资源的统一处理：