利用Cocos Studio v2.0 Beta0制作《围住乖乖兔》游戏

简介

前段时间，微信上一款《围住神经猫》的小游戏爆红网络。一夜之间，游戏中那只插腰扭屁股的屌丝猫不知征服了多少玩家的心，它在朋友圈中如病毒般疯狂传播，纵伙伴们纷纷加入了刷成绩的大军，想必各位看官也有如此的吧。那么今天我们就一起来制作一款山寨版的《围住神经猫》吧。

当然，本文的重点主要还是在于对Cocos Studio的使用，通过对本文的学习，最后你将学会如何使用Cocos Studio快速地制作一款属于自己的“神经猫”。本教程中所使用的资源我们统一换成了一套卡哇伊风格的兔子素材，所以我们的游戏应该叫做《围住乖乖兔》。完成后的效果图如下图所示：

游戏规则如下：

• 玩法是用最少的步数将图中的那只兔子围住，不让它从旁边跑掉；

• 游戏开始时，兔子会站在地图中间，在地图的其他区域会随机生产一些位置随机的Studio石头。

• 游戏地图区域是由 9*9 的圆圈构成，玩家点击一个空白区域，放置一个石头来围堵兔子。

• 每放置一个石头，兔子都会移动一步。

• 循环以上两步，直到兔子被逮住（游戏成功），或兔子跑出地图边界（游戏失败）。

使用Cocos Studio编辑资源

关于本教程所使用的资源：Rabbit.zip。打开资源你会发现，打开资源你会发现，这个游戏只有3个游戏资源（背景、石头、兔子），其中背景图中已经包含了 9*9 的圆形地图，现在我们需要做的就是在每个空白的地图区域上都放上一颗石头，一方面用于标记每个空白区域的位置，另一方面用于显示围堵兔子的石头。当然，在编辑好后我们需要把这些石头都隐藏掉，其显示的事情则都交由程序去处理。

整个游戏的思路理清楚以后，接下来我们开始进入游戏界面的设计阶段。以下是编辑过程：

• 启动 Cocos Studio 编辑器，创建一个新项目。

• 待新建好项目后，设置画布大小并导入资源。

在工具栏中设置画布大小，这里我们根据提供的素材尺寸将其设为640 * 960。

选择“文件”-》“导入资源” 进行导入，或在资源面板中单击右键选择“导入资源”进行导入。

• 双击资源面板中的MainScene.csd文件，开始编辑我们的游戏场景。

首先，拖动控件面板中的一个精灵控件到画布，同时使其处于选中状态，如下图。

然后将资源窗口中的图片资源拖拽到属性面板的“图片资源”上。同时调整属性窗口中的锚点、坐标、名称等属性，使背景图铺满整个画布。

接着我们在每个空白的地图区域上都放置上石头，最中间的地图上放兔子。

这里由于石头较多，所以我们可以先像下面一样随便放置一排，调整它们的布局和排列以后，再一排一排的复制，这样可以减少一些工作量。

把正中间的石头换成兔子，同是调整它的位置和锚点到空白的圆点上。

最后不要忘了隐藏石头，其方法是取消每个石头属性面板中“可见性”选项的勾选。 这个步骤可能会比较麻烦，不过你可以在复制整排石头之前将其隐藏掉，这样就不用挨个挨个的隐藏了。隐藏后最终的效果如下图所示：

点击工具栏里的“发布”按钮，发布资源或发布到工程，留待Cocos2d-x程序中使用。

提示：关于Cocos Studio更多的使用说明请查阅官网的帮助文档或其他基础教程（如：如何利用Cocos Studio制作闹钟程序）。

通过以上步骤，游戏界面就编辑完成了，接下来的逻辑就可以全交由程序去处理了。