本篇开始进行“套奶牛”小游戏开发的初步探索,目的是初步掌握如何使用cocos creator开发微信小游戏,为后面编程“五子棋”小游戏做铺垫。
一、准备工作
为了完成微信小游戏的项目开发,在新建项目后需要进行一些设置cocos creator相关内容的准备工作。
首先将该项目的宽高初始值互换,改为如图所示的数值,以便于竖屏手机开发。同时将场景画布中的宽高属性同样改为宽:640,高:960
接着在资源管理器中的assets文件夹下分别新建三个文件夹:res、scenes、script
res(resource 资源)文件夹用来保存图片、位图字体等资源
scenes (场景)文件夹用来保存在开发过程中产生的场景
script(脚本)文件夹用来保存JavaScript文件
此时用Ctrl+S保存当前场景放入scenes文件夹中,取名game,准备工作完成。
二、组件使用
2.1 背景创建
想要使用好cocos creator,关键是使用好各个组件。下面进行一项简单的工作:创建背景,初次体验一下组件的使用。
在画布canvas中创建精灵sprite组建,命名bg_sprite。在属性检查器中将宽高与准备工作中设置的画布宽高保持一致,即宽:640,高:960。同时将res文件夹中的背景图片bg_index直接拖入精灵组件的属性Sprite Frame中即可发现背景已创建完成。
图中蓝色部分显示bg_index代表图片成功导入属性中,这就是cocos creator的便捷之处。只需要用鼠标将资源管理器中的图片资源拖入精灵组件中的sprite frame属性中即可,且能在场景编辑器中直接显示出来,方便开发。
2.2 按钮创建
由于“套奶牛”小游戏需要一个按钮触发向前方扔套绳的动作,因此需要在刚刚创建的精灵组件bg_sprite下创建一个button组件,命名capture_btn。
根据项目需求调整好按钮的位置position以及大小size,大小可参考你所找到的图片原本的大小。
此外,创建一个button组件下面会跟着label和background,由于这个按钮不需要在上面显示文本内容,故可以直接将label删除。在background中的sprite frame属性中同上面背景创建一样,将图片button_off拖入其中,效果如下图所示:
之前在res文件夹中准备了两张关于按钮的图片,一个是开关未按下的,一个是开关按下的:
在刚刚创建的button组件capture_btn属性检查器中,有属性可以对默认情况和点击情况下显示不同的图片,只需将对应图片拖拽进属性中。
如图,默认的是未按下的图片button_off。当鼠标点击button组件时,即Pressed,显示的将是button_on。这样的功能非常方便,且给予用户很好的体验感。如果换成以前学过的java swing或者HTML相关button知识是无法如此方便的自定义图片按钮且有这样的动态效果。
2.3 动画组件
在res文件夹中存放了许多奶牛的图片,将其中某个图片直接拖入至场景编辑器即可创造一个新的组件节点,命名为cow。将cow放在之前创建的bg_sprite组件下,并且在cow属性检查器中的“添加组件”中添加“其他组件”->"Animation",且在资源管理器中assets文件夹下右键“新建”——“Animation Clip”,创建clip文件,将两者通过拖拽的方式绑定在一起。
之所以要在cow节点上加入clip动画组件是为了完成奶牛从屏幕一端跑到另一端的动画效果,实际上就是通过不断改变x轴上图片的位置实现这一效果。在之前的工作做完之后打开动画编辑器完成刚刚所说的效果。
绑定cow节点,添加x属性,点击0.00时刻创建第一个帧,此时奶牛组件在屏幕右端。拖动红线至3.00,将场景编辑器中的奶牛组件拖到屏幕左端,创建第二个帧。最终动画编辑器如上图所示,代表奶牛从屏幕右端(第一帧)移动至屏幕左端(第二帧)耗时3秒。接着让WrapMode选择“Loop”代表循环,这样就达到奶牛从右往左然后反复循环的动画效果。学过一些关于视频剪辑的学者应该对这里并不算陌生。
三、总结
cocos creator提供了许多方便的组件,让游戏编程变得可视化,增加了对程序员的编码乐趣。相当于将平常枯燥的编程语言开发工具与普通的视频编辑器融合到了一起,使得编程人员能够更好的开发游戏。但是光学会组件还是远远不够的,重要的还是脚本语言的编写,这是编程游戏的核心。编程人员甚至可以通过脚本来为cocos creator的某些功能提供组件,还可以在运行脚本时,修改对应组件的属性,以此达到自己想要的效果。
简而言之,组件的使用由于可视化的缘故,不需要太多专业的基础,多是美工人员就可以完成的,可以调整一些普通属性,例如上面提到的size、sprite frame等属性。作为游戏项目的开发更应该通过自己的思考编写对应的JavaScript实现想要的功能效果才是重点。
由于在本次项目开发中,我负责的是关于cocos creator的相关知识,而脚本语言是交给其他成员详细研究,因此不在这里详谈。但脚本语言仍是我们每个成员必须掌握的重点。感兴趣的学者可以搜索其他博主写的相关博客。