CocosCreator经典入门项目之flappybird

开发环境

cocoscreator v2.3.1

node.js v10.16.0

vscode 1.46.1

游戏引擎概念

可以理解为一套已经编写好的代码，它封装了对底层接口的使用，是游戏开发的核心功能提供者。

一般分为6各部分：

1. 图像渲染：控制电脑对游戏绘画的绘画操作，直接影响游戏质量
2. 音频ui：提供音频特效，以及游戏ui部分，让游戏与用户交互更好
3. 设备输入：键盘、鼠标、陀螺仪等
4. 脚本引擎：提供脚本接口，为游戏开发者提供“笔墨”
5. 网络引擎：数据交互模块，用服务器为客户端提供交互
6. 物理引擎（高级）：模拟现实的物理效果（重力加速度、物体间的碰撞等）。

关于cocos creator

项目结构

projectname（项目文件夹）
├──assets 资源文件夹----------用来放置游戏中所有的本地资源、脚本和第三方库文件
├──library 资源库----------------这里文件的结构和资源格式将被处理成最终游戏发布时需要的形式
├──local 本地设置-------------存放项目本机删的配置信息（编辑器面板布局、窗口大小、位置等）
├──packages 扩展插件文件夹—存放项目的自定义扩展插件
├──settings 项目设置-------------保存项目的相关设置，如构建发布菜单里的包名、场景和平台选择
├──temp 临时文件夹----------用于缓存cocoscreator在本地的临时文件
└──project.json 验证文件-------------作为验证cocoscreator项目合法性的标志

下面开始进入真正的项目上手

配置代码编辑环境

visual studio code （以下简称 vs code）是微软新推出的轻量化跨平台 ide，支持 windows、mac、linux 平台，安装和配置非常简单。使用 vs code 管理和编辑项目脚本代码，可以轻松实现语法高亮、智能代码提示等功能。

安装 cocos creator api 适配插件

该操作会将 cocos creator api 适配插件安装到 vs code 全局的插件文件夹中，安装成功后在 控制台 会显示绿色的提示：vs code extension installed to ...。这个插件的主要功能是为 vs code 编辑状态下注入符合 cocos creator 组件脚本使用习惯的语法提示。

在项目中生成智能提示数据

如果希望在代码编写过程中自动提示 cocos creator 引擎 api，需要通过菜单生成 api 智能提示数据并自动放进项目路径下。

选择主菜单的 开发者 -> vs code 工作流 -> 更新 vs code 智能提示数据。该操作会将根据引擎 api 生成的 creator.d.ts 数据文件复制到项目根目录下（注意是在 assets 目录外面），操作成功时会在 控制台 显示绿色提示：api data generated and copied to ...

使用 vs code 激活脚本编译

使用外部文本编辑器修改项目脚本后，要重新激活 cocos creator 窗口才能触发脚本编译，我们在新版本的 creator 中增加了一个预览服务器的 api，可以通过向特定地址发送请求来激活编辑器的编译。

新建项目

1.新建一个空白项目

2.资源管理器

然后你需要在资源管理中创建项目中最重要场景、脚本文件，以及导入游戏所需要的纹理（图片资源）。这里的文件夹不是默认创建的，你需要手动创建，便于管理你的项目。需要说明的是resources是cocoscreator（以下简述cocos）中特殊的资源文件夹，所有需要通过cc.loader.loadres动态加载（后续会提到这个方法）的资源，都必须放置在resources文件夹和它的子文件夹下。如果一份资源仅仅是被resources中的其他资源所依赖，而不需要直接被cc.loader.loadres调用，就不需要放在resources文件夹里。

3.场景

在scenes中新建场景，scenes–右键–新建scenes场景，在 cocos creator 中，游戏场景（scene） 是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体。游戏场景中一般会包括以下内容：

• 场景图像和文字（sprite，label）
• 角色
• 以组件形式附加在场景节点上的游戏逻辑脚本

当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各种各样开发者设置的逻辑功能。所以除了资源以外，游戏场景是一切内容创作的基础。现在，让我们来新建一个场景。入门项目flappybird只需要新建一个场景，你完成这个项目后的效果大致是这个亚子。

4.场景编辑器、层级管理器、属性检查器

双击你所创建的bird场景，cocos就会在 场景编辑器 和 层级管理器 中打开这个场景。打开场景后， 层级管理器 中会显示当前场景中的所有节点和它们的层级关系。我们刚刚新建的场景中只有一个名叫 canvas 的节点，canvas 可以被称为画布节点或渲染根节点，点击选中 canvas，可以在 属性检查器 中看到他的属性。

从资源包里面的texture目录下将名为的sky背景图片拖到canvas中，作为游戏背景。调整canvas和sky的size尺寸大小。sky的size至少要大于canvas，不然你制作的游戏可能会有很大的黑边。然后用相似的方法把bird0（其他两张是为了配合作出简易帧动画，模拟小鸟的飞行）、pipe1（下管道）、pipe2（上管道）添加到canvas下。上下管道为一组，我复制了4组，一共5组。通过脚本控制背景和每组管道向左移动来达到小鸟持续向前飞行的效果。

5.节点绑定

需要注意，canvas下的元素都是以node节点的形式来被管理的。在script中新建脚本文件—game.js，将其拖入canvas中，或者直接绑定到canvas上。确保在加载场景时脚本被一并加载。

6.生命周期回调

cocos creator 为组件脚本提供了生命周期的回调函数。用户只要定义特定的回调函数，creator 就会在特定的时期自动执行相关脚本，用户不需要手工调用它们。

目前提供给用户的生命周期回调函数主要有：

• onload onload 回调会在节点首次激活时触发，比如所在的场景被载入，或者所在节点被激活的情况下。而且onload 总是会在任何 start 方法调用前执行，通常我们会在 onload 阶段去做一些初始化相关的操作。
• start start 回调函数会在组件第一次激活前，也就是第一次执行 update 之前触发。start 通常用于初始化一些需要经常修改的数据，这些数据可能在 update 时会发生改变。
• update 游戏开发的一个关键点是在每一帧渲染前更新物体的行为，状态和方位。这些更新操作通常都放在 update 回调中。以下四个回调函数在此项目中不会用到
• lateupdate
• ondestroy
• onenable
• ondisable

主要代码

game.js

总结

上述关于小鸟、钢管是否碰撞的检测是通过数学计算的方法实现的。不过我的项目文件中还保留了使用cocos碰撞组件的版本，具体表现为每个pipe节点、entrance节点身上的boxcollider组件，以及bird.js。另外还有我学习制作的一个背包，主要通过预置（cc.prefab）节点实现了背包窗口以及在窗口中动态加载道具图片（sprite）。本人也在学习阶段，有问题欢迎评论区交流。笔者后续还准备分享一些其他项目！包括单机和局域网联机版本的对比项目；可能还会用到一些优化策略如：资源管理器、网络通讯管理器、信号槽等，不足之处希望各位大佬轻喷。

以上就是cocoscreator经典入门项目之flappybird的详细内容，更多关于cocoscreator制作flappybird的资料请关注其它相关文章！