CocosCreator 编辑器入门

CocosCreator是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及能更快速开发游戏所需要的各种图形界面工具。在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。

Cocos 工作流程#

  • 导入资源:将图片、声音等资源拖拽到编辑器的 资源管理器 面板中,即可完成资源导入。
  • 搭建场景。
  • 组件脚本:为场景中的节点挂载各种内置组件和自定义脚本组件,来实现游戏逻辑的运行和交互。
  • 预览和发布:通过 构建发布 面板可以一键发布游戏到包括桌面、手机、Web 等多个平台。

项目结构#

创建了一个项目后,打开项目文件甲,可以看到一下结构:

1
2
3
4
5
6
7
8
ProjectName(项目文件夹)
├──assets
├──library
├──local
├──packages
├──settings
├──temp
└──project.json
  • assets:游戏中所有的本地资源、脚本和第三方库文件。.meta 文件用于存储对应的资源配置和索引信息。
  • library:library 是将 assets 中的资源导入后生成的,在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式,当 library 丢失或损坏的时候,只要删除整个 library 文件夹再打开项目,就会重新生成资源库。
  • local:包含该项目的本机上的配置信息。
  • packages:项目的自定义扩展插件。
  • settings:项目相关的设置,如 构建发布 菜单里的包名、场景和平台选择等。
  • temp:临时文件夹。
  • project.json:project.json 文件和 assets 文件夹一起,作为验证 Cocos Creator 项目合法性的标志,只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。

在发布项目后,编辑器会创建 build 文件夹,来存放发布的游戏。

资源管理器(Assets)#

资源管理器 将项目资源文件夹中的内容以树状结构展示出来,注意只有放在项目文件夹的 assets 目录下的资源才会显示在这里。

资源管理器的左上角的 按钮 是创建按钮,用来创建新资源。

Scene 场景编辑器#

场景编辑器 是内容创作的核心工作区域,您将使用它选择和摆放场景图像、角色、特效、UI 等各类游戏元素。在这个工作区域里,您可以选中并通过 变换工具 修改节点的位置、旋转、缩放、尺寸等属性,并可以获得所见即所得的场景效果预览。

操作:

  • 鼠标右键拖拽 :平移视图。
  • 鼠标滚轮 :以当前鼠标悬停位置为中心缩放视图。

主窗口工具栏左上角的一系列 变换工具 来将场景中的节点按我们希望的方式布置:

  1. 移动控制
  2. 选择控制
  3. 缩放控制
  4. 锚点控制

Node Tree 层级管理器#

层级管理器 中包括当前打开场景中的所有节点,不管节点是否包括可见的图像。你可以在这里选择、创建和删除节点,也可以通过拖拽一个节点到另一个上面来建立节点父子关系。

属性检查器(Properties)#

属性检查器 是我们查看并编辑当前选中节点、节点组件和资源的工作区域。在 场景编辑器、层级管理器 中选中节点或者在 资源管理器 中选中资源,就会在 属性检查器 中显示它们的属性,可供查询和编辑。

  1. 节点属性
  2. 组件属性
  3. 编辑属性

控件库#

  1. 内置控件
  2. 自定义控件

自定义控件#

在node管理器中,将创建好的一个控件,拖到资源管理器中,会在资源管理器中自动生成一个Prefab,然后将Prefab可以直接拖到自定义控件管理器中,就可以自动生成一个可复用的自定义控件了。

配置代码编辑环境#

推荐使用 Visual Studio Code 来编码 JavaScript 脚本。

安装 Cocos Creator API 适配插件#

在 开发者 -> VS Code 工作流 -> 安装 VS Code 扩展插件,然后控制台提示:

VS Code extension installed to /Users/xxxx/.vscode/extensions

就表示安装成功了。

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

在 开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据,然后控制台显示:

API data generated and copied to /Users/xxxx/Documents/Cocos/Projects/NewProject/HelloWorld/creator.d.ts

就表示安装成功了。

对于每个不同的项目都需要运行一次这个命令,如果 Cocos Creator 版本更新了,也需要打开您的项目重新运行一次这个命令,来同步最新引擎的 API 数据。

使用 VS Code 打开和编辑项目#

打开VSCode,启动后选择主菜单的 File -> Open…,在弹出的对话框中选择您的项目根目录,也就是 assets、project.json 所在的路径。

打开后就可以对项目进行编码了。

组件脚本生命周期#

  • onLoad
  • start
  • update
  • lateUpdate
  • onDestroy
  • onEnable
  • onDisable

一个组件从初始化到激活,再到最终销毁的完整生命周期函数调用顺序为:onLoad -> onEnable -> start -> update -> lateUpdate -> onDisable -> onDestroy

onLoad#

onLoad 回调会在节点首次激活时触发,比如所在的场景被载入,或者所在节点被激活的情况下。onLoad 总是会在任何 start 方法调用前执行,这能用于安排脚本的初始化顺序。通常我们会在 onLoad 阶段去做一些初始化相关的操作。

1
2
3
4
onLoad: function () {
this._bulletRect = this.bulletSprite.getRect();
this.gun = cc.find('hand/weapon', this.node);
},

start#

start 回调函数会在组件第一次激活前,也就是第一次执行 update 之前触发。start 通常用于初始化一些需要经常修改的数据,这些数据可能在 update 时会发生改变。

1
2
3
start: function () {
this._timer = 0.0;
},

update#

游戏开发的一个关键点是在每一帧渲染前更新物体的行为,状态和方位。

1
2
3
update: function (dt) {
this.node.setPosition( 0.0, 40.0 * dt );
},

lateUpdate#

update 会在所有动画更新前执行,但如果我们要在动效(如动画、粒子、物理等)更新之后才进行一些额外操作,或者希望在所有组件的 update 都执行完之后才进行其它操作,那就需要用到 lateUpdate 回调。

1
2
3
lateUpdate: function (dt) {
this.node.rotation = 20;
},

onEnable & onDisable#

当组件的 enabled 属性从 false 变为 true 时,或者所在节点的 active 属性从 false 变为 true 时,会激活 onEnable 回调。

当组件的 enabled 属性从 true 变为 false 时,或者所在节点的 active 属性从 true 变为 false 时,会激活 onDisable 回调。

onDestroy#

当组件或者所在节点调用了 destroy(),则会调用 onDestroy 回调,并在当帧结束时统一回收组件。当同时声明了 onLoad 和 onDestroy 时,它们将总是被成对调用。也就是说从组件初始化到销毁的过程中,它们要么就都会被调用,要么就都不会被调用。

参考#

教材推荐
官方文档

JavaScript 快速入门 iOS 开发整理

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×