Cocos Creator 小游戏之找财神（上）

好久没有更新开发小游戏的文章了，今天开始计划每周更新一篇，希望能坚持吧。

这周我更新的游戏是：找财神。

玩法

玩法很简单，在很多图片里面找到财神在哪里，然后选中财神就算过关

难点

• 越往后面图片生成的越多，怎么保持性能？
• 财神隐藏的位置如何定位？
• 图片如何生成？

我们先从第一步开始，先把首页做出来

我们可以分析一下页面中的元素，主要是有三个：

• 背景图
• 寻找财神爷 banner 图
• 开始挑战按钮

分析完成后，我们开始打开 Cocos Creator 来开始编写游戏

编写游戏

新建项目

注意：在这里我们选择的编辑器是 3.4.1 ，大家要注意一下， 3.x 系列的版本和 2.x 系列的版本在操作上有很大的区别！！

选择项目

将素材添加到项目中

主要是将 背景图、banner 图片、按钮图 放进去

设置项目设计分辨率

在 Cocos Creator官方中推荐 IOS 的宽高为 640 * 1136，因此我们这里也设置为 640 * 1136。适配屏幕宽度和 适配屏幕高度不勾选。

新建场景

由于我们制作的场景至少有两个，所以我们用 scenes 文件夹来统一管理场景。

新建背景图

新建 background层之后，就会出现如下内容：

然后选中 background层，设置右侧 cc.Sprite中的 SpriteFrame，选中背景图图片

选中之后，我们就会看到编辑中就显示了背景图

预览游戏

现在我们点击编辑器上面的预览按钮我们看看游戏在浏览器中显示的情况

我们发现头部有一部分截取掉了，这个时候，我们有两种方式来处理：

1. 修改 background节点的锚点定位的 y值。
2. 给 background节点添加 Wiget组件来修改 y定位值。

在这里我们选择第二种方式来处理。

修改好了之后，我们看看效果：

在 iphone SE中，图片显示正常。

添加 Banner 图

将 banner图片直接拖到游戏场景中，Cocos Creator会自动创建一个 banner节点。

banner有一个从上往下的一个动画效果，因此我们现将 banner拖到背景图的顶部外面。

添加 Banner 图动画

首先在 banner节点中添加 Animation组件

在 动画编辑器-新建动画剪辑资源新建一个 banner动画剪辑资源

然后在 DefaultClip中会显示这个剪辑资源，如果没有的话，点击右边的鼠标按钮可以选择对应的剪辑资源

进入动画编辑模式

进入动画编辑模式后，编辑器界面就会发生变化

我们要做的动画是从上往下掉落的动画，也就是 y轴的移动，点击属性列表右侧的加号，选择 position

现在就是比较关键的环节了，这里有一个概念需要讲一下，就是动画运动的原理，动画的本质是连成连贯动作的一帧帧静态图。而我们这里的动画需要设置两个关键帧：

• 初始关键帧，图片初始位置在哪里
• 结束关键帧，图片结束位置在哪里

首先我们设置 第0帧是关键帧，初始位置就是我们刚才设置的 banner的位置，然后设置 第10帧为关键帧，我们将 banner图拖到结束位置。

我们可以点击上面的播放按钮看看动画运动的效果。然后保存一下，到浏览器中预览一下效果。

如果直接预览的话，你会发现没有动画效果，主要因为 Animation组件中的 PlayOnLoad没有勾选。这个是说页面加载完后就开始执行动画。

勾选 PlayOnLoad就可以了。

我们仔细看一下上面的动画，有一个跳动的动画，我们现在来制作一下。

首先点击 ，然后显示出 ，选择 y轴。

这个动画是先往下跳，然后再往上跳，最后运动到结束位置，这样我们需要设置 3 个关键帧。

单击右键就可以在想设置关键帧的位置 新建关键帧。

我这里最后的关键帧就是这样的：

就这样 banner动画就编写完成了。

添加按钮及按钮动画

按照上面 banner一样，将 button拖到游戏位置

然后我们开始创建按钮的震动动画，按照 banner里面一样，我们新建好动画剪辑资源。

我们仔细看看按钮动画：

这个截图有问题，震动频率太快无法截图出来，最后效果应该：

• 放大
• 左右两边震动
• 缩小

我们添加 scale和 rotation(eulerAngles)两个属性。

• 第 0帧，放大按钮，缩放 x和 y 添加 0.1

• 第 1帧，角度调整，Rotation中的 z轴调整为 3。

• 第 2帧，角度调整，Rotation中的 z轴调整为 -3。

...循环震动下去

• 最后一帧，全部恢复，就这样动画完成了。

现在我们看看效果

这里有一个问题，banner动画和 button的动画是一起执行的，而案例中是 banner动画执行完成后才播放 button的动画，我们这里调整一下

banner 动画完成后才播放按钮动画

• 首先，将 button中的 PlayOnLoad不要勾选
• 新建一个 banner.ts文件绑定到 banner节点中
• 在 banner动画最后一帧中插入帧事件

• 创建帧事件 animateEnd，添加 boolean参数，并且勾选，这表示传入过去的参数是 true，不勾选就是 false。

• 在 banner.ts中编写按钮播放代码

//添加一个按钮输入框，将 button 节点绑定上去
@property({
	type:Node,
	tooltip:'按钮'
})
startbtn = null
//播放结束后执行这个帧函数
animateEnd(is){
  //按钮动画开始播放
	this.startbtn.getComponent(Animation).play()
}

• 将 button节点绑定上去

最终效果

结语

这个是首页制作，后面还有游戏开发，请大家耐心等待。大家在学习过程中如果发现有错误的地方，或者有什么问题，可以扫下面的微信联系我，多谢大家。