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

简介

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

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

result.png

游戏规则如下:

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

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

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

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

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


使用Cocos Studio编辑资源

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


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

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

1413967637229271.png

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

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

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

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

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

 sprite.png

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

 1413539276713242.png

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

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

1413967714937690.gif

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

 1413967765473064.png

1413967789145896.png

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

1413539379687643.png

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


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


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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值