cocos-creator入门demo游戏

参考资源:https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

cocos-creator是一款基于cocos2d-x游戏引擎的游戏开发软件,开发语言支持js,c++,rua,

其提倡的开发语言是js,因为creator原本就是cocos2d-htnl5的衍生产品

(核心:数据驱动 模仿3D Unity

下面将使用官网的demo来了解这个软件的使用:

1. 下载cocos-creator

下载链接:https://www.cocos.com/creator

这里选用的是2.2版本

2. 配置代码编辑环境

creator使用vscode作为外接的代码编辑器,下载链接:https://code.visualstudio.com/

1)安装 Cocos Creator API 适配插件

cocos-creator入门demo游戏

2)在项目中生成智能提示数据(用于生成api代码高亮提示)

    对于每个不同的项目都需要运行一次这个命令,如果 Cocos Creator 版本更新了,也需要打开您的项目重新运行一次这个命令,来同步最新引擎的 API 数据,所以这里的步骤可以在项目搭建完后再执行。

cocos-creator入门demo游戏

3)设置vscode文件显示和搜索过滤

打开项目时可以隐藏一些不必要的文件夹,搜索文件时也同理

参考:https://docs.cocos.com/creator/manual/zh/getting-started/project-structure.html

上述链接说明了项目文件结构,以及需要关注的文件夹

点击vscode的setting,打开ui配置界面

cocos-creator入门demo游戏

搜索框中输入:exclude 并找到files:exclude和search:exclude

点击添加按钮,给其添加要进行排除的文件夹或者文件

下面是我配置后的vscode,可以参照进行配置

cocos-creator入门demo游戏

files:exclude

cocos-creator入门demo游戏

search:exclude

cocos-creator入门demo游戏



3.下载初始资源

资源地址:https://github.com/cocos-creator/tutorial-first-game/releases/download/v2.0/start_project.zip

启动 Cocos Creator,点击文件。然后选择打开项目,在弹出的文件夹选择对话框中,选中我们刚下载并解压完成的 start_project

下载好的资源会在资源管理器中显示

cocos-creator入门demo游戏

4. 场景的搭建

cocos-creator入门demo游戏

在场景中我们可以配置多个节点,每个节点的层级都会在层级管理器中显示

cocos-creator入门demo游戏

点击任意节点,会在属性检查器中显示这个节点的所有属性,通过属性检查器我们可以精确设置节点的属性

Canvas属性:

cocos-creator入门demo游戏

场景搭建细节有点类似使用ps等制图工具

通过使用变换工具改变每个节点资源的属性,或者直接通过属性检查器改变

cocos-creator入门demo游戏

这里都不是重点,在场景中应该知道的重点应该是其设定的坐标系以及节点的默认锚点位置

我们通过坐标系和锚点可以设置节点的位置

直接打开我已经编辑好的场景来认识坐标系及锚点

cocos-creator入门demo游戏

箭头所指方向就是初始的坐标系,根节点定Canvas义在上方

点击Canvas节点可以看到如下图

cocos-creator入门demo游戏

蓝色框表示的是节点的大小,在属性检查器里就是size,两个箭头表示属于Canvas上的坐标系

坐标系的交汇原点就是该节点的锚点,属性检查器里cocos-creator入门demo游戏

表示锚点在图片的中心。之后如果在Canvas上建立子节点,那么子节点的位置就要靠Canvas上

的坐标系来定义,所以蓝色的精灵角色Player节点位置定在cocos-creator入门demo游戏

之后只要将资源管理器中textures里的图片资源拖拽进场景内就可以生成节点了,同理去定义背景

图background,地面ground,分数score(分数使用Label组件生成)


5. 代码部分的编写

在assets文件夹下创建scripts文件夹用来保存js代码

代码结构:

cocos-creator入门demo游戏

下面将简略解释每个js文件干嘛用的,详细解释已经被注释在代码之内(变态详细)

Game.js

Game.js用于控制游戏的主要逻辑,因此被绑定在game.fire场景文件的根节点Canvas上

cocos-creator入门demo游戏

点击添加组件,选择用户脚本文件Game即可

添加完成后应用有下面的样子:

cocos-creator入门demo游戏

里面的值应该是0,或者none,这些属性的定义是在脚本内完成的,之所以会显示在面板上。

全靠creator强大的数据驱动功能。

属性在脚本内的样子,我手动在面板将max&minStarDuration改为5和3,原本是0

属性设置:

cocos-creator入门demo游戏

prefab是预制资源,需要在面板上进行资源关联,方法就是直接拖拽资源进属性检查器中

需要关联的prefab属性上(预制资源指需要重复生成和销毁的节点)。node是节点资源,

把层级管理器上需要的节点拖拽过去即可

audio-clip是音频资源,同样把音效拖拽过去即可关联。

cocos-creator入门demo游戏

注意到脚本里有没有在面板显示的属性了吗,只要在属性前加_就默认不显示,或者在显示定义属

性时这样写也可以不显示在面板上cocos-creator入门demo游戏

脚本中的cc.Class是creator提供的类api,它继承了cc.componet。用来构建脚本组件,整个文件

就是一个cc组件,它会自动把整个文件当成一个组件模块暴露出去,提供其他方引用。而且

creator自动编译这些定义好的脚本,你每次进行保存都会编译。

函数功能:

cocos-creator入门demo游戏

cocos-creator入门demo游戏

脚本最下方还定义的节点的生命周期:

cocos-creator入门demo游戏

onload->start->update->ondestroy

update中的dt参数是指每一帧动画时间间隔,可以视作单位时间

Play.js

Play.js用来控制角色动作逻辑的组件,需要绑定在Player节点上

cocos-creator入门demo游戏

属性设置:

cocos-creator入门demo游戏

函数功能:

cocos-creator入门demo游戏

cocos-creator入门demo游戏

生命周期:

cocos-creator入门demo游戏


Star.js

有关星星生成的逻辑

星星是一个预制资源,需要重复生成和销毁

星星图片拖拽进场景中成为一个节点,再将star节点拖拽进assets文件夹中,即可

变成一个prefab资源,同时记得关联上脚本组件

这里的addOne prefab也是一个预制资源,一个用Label创建出来的+1节点资源

主要用来制作吃到星星时产生+1的动画

cocos-creator入门demo游戏

属性:

cocos-creator入门demo游戏

函数功能:

cocos-creator入门demo游戏

生命周期:

cocos-creator入门demo游戏

StartBtn.js

play按钮的脚本组件,用来清空分数并进行场景切换,切进游戏场景去。

play按钮图片用来制作start节点,并关联StartBtn脚本

init.fire和gameOver.fire场景中都需要创建start节点(play按钮)

cocos-creator入门demo游戏

cocos-creator入门demo游戏

一共3个场景

cocos-creator入门demo游戏

cocos-creator入门demo游戏

脚本内容:

cocos-creator入门demo游戏

ScoreModule.js

用来保存分数的全局数据文件

cocos-creator入门demo游戏


项目效果:

cocos-creator入门demo游戏

完成后的项目资源:

https://github.com/helloCaijiaqi/cocos-creator-demoGame

assets:里面可能会有以.meta结尾备份文件,不需要则可以删除

只需关注项目中的脚本文件即可(assets/scripts)

上一篇:qt creator源码全方面分析(4-4)


下一篇:Creator 2.2.0 终于等来了这款Shader组件神器!一招搞定Effect特效