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.还有文章的下半部分,周五再跟大家见面哟~

原文发布于微信公众号 - 腾讯NEXT学院(NextDegree)

原文发表时间:2018-10-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

一看就会又超级实用的Excel10大技巧

本期责编:Sophie 普通人需要用到的Excel的功能不到其全部功能的10%。也就是说,对于绝大部分的用户来说,只要掌握了几个必须懂的Excel表格的基本操作...

21380
来自专栏从零开始学自动化测试

appium+python自动化56-微信小程序自动化

最近微信的小程序越来越多了,随之带来的问题是:小程序如何做自动化测试? 本篇以摩拜小程序为例,介绍如何定位小程序里面的元素

30010
来自专栏DeveWork

WordPress自定义栏目运用实例 VI:设置外链缩略图/特色图像

这里是WordPress 自定义栏目运用实例系列第五讲,为大家带来设置外链缩略图/特色图像的方法。如果你的主题支持特色图像的话,你会发现使用特色图像的图像是不能...

28090
来自专栏Material Design组件

Material Design —卡片(Cards)

402100
来自专栏练小习的专栏

伪类以及伪元素的一些使用小技巧

在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

22690
来自专栏数据小魔方

自定义下拉菜单

今天跟大家分享怎么利用excel的数据有效和开发工具制作自定义下拉菜单! 下拉菜单是我们经常会用到的高效录入数据方式,可以减少我们录入大量数据时的繁琐过程。 本...

35960
来自专栏无原型不设计

盘点3款原型工具的部件样式

使用样式是集中管理整个项目的外观及感受的最优方法,通过部件样式可以像word一样对组件进行快速方便的样式设置,大大提高了制作原型的效率。当项目要更新视觉设计时...

38250
来自专栏IMWeb前端团队

mXSS简述

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载 因为没啥好讲,就说一下mXSS ABSTRACT 不论是服务器端或客...

22850
来自专栏小轻论坛

Photoshop最新版上线!这些功能亮了!

Adobe 爸爸发布最新版本Photoshop CC 2019了!那它都有哪些新变动呢?接下来让我们一探究竟吧!

28420
来自专栏james大数据架构

创建支持多种屏幕尺寸的Android应用

Android涉及各种各样的支持不同屏幕尺寸和密度的设备。对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用...

21360

扫码关注云+社区

领取腾讯云代金券