Cocos Creator制作一个微信小游戏（上）

| 导语 微信小游戏都火成这样了，为什么不尝试一下？ 我们的目标是使用Cocos Creator从零开始制作一个小游戏，并放到微信上玩。

一、开始前的准备

我们要做的这个游戏名字就叫《智慧消球球》吧，这是一个消除类游戏，之所以叫智慧，是因为这是一个不太一样的消除类游戏，需要烧一下脑子才能获得比较高的分数。

贴个图感受一下。

游戏规则很简单：

1、选中一个小球，然后选择一个空格子，把小球移到目标格子。

2、如果相同类型的小球5个以上连成一片，就可以消除这一片小球并获得分数。

3、小球能够移动的规则，是从出发位置到目标位置存在一条通路。（A*寻路实现，这是这个小游戏最复杂的地方。）

二、新建项目

素材我已经准备好了，图片是用Flash做的，不是很好看，但看在这是程序猿呕心沥血做出来的，就将就用吧。声音自己做不来，只能从网上扒了些。

素材不是很多，就不分类了直接丢一个目录下好了。

1、安装好并打开Cocos Creator软件（下载地址），新建一个叫WisdomBall的空白项目。

2、打开项目-项目设置，修改参数并保存如下：

解释一下：多数手机分辨率是1080*1920，我们定尺寸为540*960合适。但为了适配iphonex，高度修改为1170。适配屏幕宽度意思是把宽度拉伸到与屏幕尺寸一致，高度按宽度的比例缩放。

3、在资源管理器面板中，新建以下几个目录，如果有其他一切目录或文件，全部删除。

4、导入资源。把图片资源拖到Image目录，把声音资源拖到Sound目录即可。完成后如图所示。

三、UI框架搭建

在Scene目录上右键-新建-Scene，新建Menu、Game、Statis三个场景，分别作为游戏菜单、游戏、分数统计界面的场景。

1、双击Menu场景，在层级管理器中选中Canvas标签，在Canvas标签上右键-创建空节点，并命名为Container。后续我们所有的元素都会放到Container内，以方便管理和定位。

2、在资源管理器-Image中找到menu元素，拖动到层级管理器Container的节点上释放，menu资源就被添加到场景中了，如图：

3、创建开始游戏按钮：在Container上右键-创建节点-创建UI节点-Button，并命名为startBtn。我们界面上已经有一个开始按钮视图了，其实我们只需要一个透明的可点击区。所以可以把Button内的Label删除。另外把透明度设置为0，并把按钮位置调整到开始按钮视图的地方，尺寸也调整合适。

4、开始游戏菜单界面就全部搭建好了，easy。

现在开始创建游戏场景，步骤和方法跟创建菜单场景时是一样的。

（1）、Container里面创建gameBg空节点用来放置背景图片。背景图片不需要根据屏幕尺寸来布局。

（2）、Container里面创建gameContent空节点用来作为游戏内容的容器，按钮、得分文本框、提示文本框都放在这里，后面代码中创建的小球也是放在这个容器中。

把游戏内容的东西全部丢在gameContent中，如果需要移动界面适配屏幕，比如iphonex，直接调整gameContent的位置就可以了。

（3）、在gameContent中放入grid格子资源，并调整位置为x=0,y=105。

这里有必要提一下cocos creator里面的坐标系，左下角为原点，向右为x轴下方向，向上为y轴正方向。

元素默认锚点为元素的中间位置，grid格子元素尺寸为540X960，高度比场景小210像素。刚添加到场景中时，默认位置是0,0，视觉上是居中的。所以需要向上移动210像素的一半让它贴顶，所以设置它的y值为105。

（4）、在gameContent中创建用于显示信息的富文本节点tipText。

（5）、在gameContent中创建用于显示得分的Label节点scoreLabel。 

至此游戏场景也创建完毕了，结构和界面样子如图：

最后创建的分统计界面

容器Container，容器正面创建1个得分统计的Label命名为currentScore，一个显示最高记录分数的Label命名为currentScore，再创建一个重新开始游戏的Button命名为restartBtn。

现在再打开一下项目设置，设置初始预览场景为Menu，这样每次运行游戏的时候，都会进入开始游戏菜单页。

现在点击顶部中间的三角形按钮，就可以在浏览器中预览一下了。如果进度条闪过后看到显示了开始游戏的界面，说明一切顺利。

到此界面创建完毕，终于要准备写代码了。

P.S.还有文章的下半部分，周五再跟大家见面哟~