专做项目报告的网站,什么是软件开发过程,建筑工程网格化管理实施方案,自己做网站想更换网址Cocos Creator文档学习记录
一、什么是Cocos Creator
官方文档链接#xff1a;Hello World | Cocos Creator
百度百科#xff1a;Cocos Creator_百度百科
Cocos Creator包括开发和调试、商业化 SDK 的集成、多平台发布、测试、上线这一整套工作流程#xff0c;可多次的迭…Cocos Creator文档学习记录
一、什么是Cocos Creator
官方文档链接Hello World | Cocos Creator
百度百科Cocos Creator_百度百科
Cocos Creator包括开发和调试、商业化 SDK 的集成、多平台发布、测试、上线这一整套工作流程可多次的迭代重复。
Cocos Creator 包含游戏引擎、资源管理、场景编辑、游戏预览和发布等游戏开发所需的全套功能并且将所有的功能和工具链都整合在了一个统一的应用程序里。 编辑器在提供强大完整工具链的同时提供了开放式的插件架构开发者能够用 HTML JavaScript 等前端通用技术轻松扩展编辑器功能定制个性化的工作流程。 二、编辑器结构
资源管理器场景编辑器层级管理器属性检查器控件库控制台设置项目设置主菜单工具栏编辑器布局构建预览
三、项目文件结构
ProjectName项目文件夹
├──assets # 资源文件夹(本地资源、脚本和第三方库文件),会生成.meta存储资源配置和索引信息第三方.tps等可以放在asset外面来管理
├──library # 是assets中的资源导入后生成的,这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。丢失或损坏的时候删除重新打开项目可重新加载出来
├──local # 包含该项目的本机上的配置信息包括编辑器面板布局窗口大小位置等信息。开发者不需要关心这里的内容。
├──packages # 用于放置此项目的自定义扩展插件。如需手动安装扩展插件可以手动创建此文件夹。如需卸载扩展插件在 packages 中删除对应的文件夹即可。
├──settings # 保存项目相关的设置如 构建发布 菜单里的包名、场景和平台选择等。
├──temp # 临时文件夹用于缓存一些 Cocos Creator 在本地的临时文件。这个文件夹可以在关闭 Cocos Creator 后手动删除开发者不需要关心这里面的内容。
└──project.json # project.json 文件和 assets 文件夹一起作为验证 Cocos Creator 项目合法性的标志只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。开发者不需要关心里面的内容。
└──build # 构建目标build在使用主菜单中的 项目 - 构建发布... 使用默认发布路径发布项目后编辑器会在项目路径下创建 build 目录并存放所有目标平台的构建工程。版本控制:Cocos Creator 在新建项目时会自动生成 .gitignore 文件用于排除不应该提交到 git 仓库的文件。如果开发者使用其它版本控制系统或者需要提交项目到其它地方应该注意只需要提交 assets、packages、settings、project.json或其它手动添加的关联文件。
四、基本工作流程 创建和管理场景 勾选自动释放资源切换到其他场景的时候就可以释放掉这个场景减少内存占用 不延迟加载策略加载场景时如果这个选项关闭则这个场景直接或间接递归依赖的所有资源都将被加载全部加载完成后才会触发场景切换。 延迟加载依赖的资源加载场景时如果选项开启则这个场景直接或间接依赖的所有贴图、粒子和声音都将被延迟到场景切换后才加载使场景切换速度极大提升。 同时玩家进入场景后可能会看到一些资源陆续显示出来并且激活新界面时也可能会看到界面中的元素陆续显示出来因此这种加载方式更适合网页游戏。 使用这种加载方式后为了能在场景中更快地显示需要的资源建议一开始就让场景中暂时不需要显示的渲染组件如 Sprite保持非激活状态。 注意Spine 和 TiledMap 依赖的资源永远都不会被延迟加载。 贴图资源 目前包括 JPG 和 PNG 两种。设置图透明颜色等。 预制资源 预制资源Prefab是预先配置好的游戏对象可作为我们动态生成节点时使用的模板。 // 创建 Prefab
Editor.Ipc.sendToPanel(scene, scene:create-prefab, node.uuid, db://assets/xxx/xxx.prefab);
// 进入 Prefab 编辑模式
Editor.Ipc.sendToAll(scene:enter-prefab-edit-mode, assetUuid);
// 保存 Prefab
Editor.Ipc.sendToPanel(scene, scene:apply-prefab, node.uuid);图集资源 图集Atlas也称作 Sprite Sheet是游戏开发中常见的一种美术资源。图集是通过专门的工具将多张图片合并成一张大图并通过 plist 等格式的文件索引的资源。可供 Cocos Creator 使用的图集资源由 plist 和 png 文件组成。下面就是一张图集使用的图片文件 自动图集资源 自动图集资源 作为 Cocos Creator 自带的合图功能可以将指定的一系列碎图打包成一张大图具体作用和 Texture Packer 的功能很相近。 压缩纹理 比如在手机平台上可能只需要原图 80% 或者更少的画质又或者是没有使用到透明通道的 .png 可以将其转换成 .jpg这样可以减少很大一部分图片的存储空间。 艺术数字资源 艺术数字资源 LabelAtlas.labelatlas 是一种用户自定义的资源它可以用来配置艺术数字字体的属性。 跨项目导入导出资源 在以场景和 Prefab 为内容组织核心的模式下Cocos Creator 内置了场景.fire) 和预制 (.prefab) 资源的导出和导入工具。 图像资源的自动裁剪 导入图像资源后生成的 SpriteFrame 会进行自动剪裁去除原始图片周围的透明像素区域。这样我们在使用 SpriteFrame 渲染 Sprite 时将会获得有效图像更精确的大小。 字体资源 使用 Cocos Creator 制作的游戏中可以使用三类字体资源系统字体动态字体和位图字体。TTF、fnt 还具有粒子资源、声音资源、Spine骨骼动画资源、瓦片图资源、JSON资源、文本资源等
五、场景制作工作流程
此处省略编辑器用两次就了解了…
# 文件层级目录 举例登录
login--picture--audio--prefab--Scene--Script--font六、脚本开发指南
6.1、节点属性操作
// 节点激活设置
this.node.active false;
// 更改节点的变换位置
this.node.x 100;
this.node.y 50;
this.node.setPosition(100, 50);
this.node.setPosition(cc.v2(100, 50));
this.node.position cc.v2(100, 50);
// 更改节点的变换旋转
this.node.rotation 90;
this.node.setRotation(90);
this.node.scaleX 2;
this.node.scaleY 2;
this.node.setScale(2);
this.node.setScale(2, 2);
// 更改节点的变换尺寸
this.node.setContentSize(100, 100);
this.node.setContentSize(cc.size(100, 100));
this.node.width 100;
this.node.height 100;
// 更改节点的变换缩放
this.node.scaleX 2;
this.node.scaleY 2;
this.node.setScale(2);
this.node.setScale(2, 2);
// 更改锚点的变换位置
this.node.anchorX 1;
this.node.anchorY 0;
this.node.setAnchorPoint(1, 0);
// 更改节点的变换颜色和透明度
mySprite.node.color cc.Color.RED;
mySprite.node.opacity 128;cc.Node的属性改变
枚举对象定义对应的事件名事件触发的时机无position-changed当位置属性修改时无rotation-changed当旋转属性修改时无scale-changed当缩放属性修改时无size-changed当宽高属性修改时无anchor-changed当锚点属性修改时
6.2、生命周期回调
Cocos Creator 为组件脚本提供了生命周期的回调函数。用户只要定义特定的回调函数Creator 就会在特定的时期自动执行相关脚本用户不需要手工调用它们。
目前提供给用户的生命周期回调函数主要有
- onLoad # onLoad 回调会在节点首次激活时触发。
- start # startstart 回调函数会在组件第一次激活前也就是第一次执行 update 之前触发。start 通常用于初始化一些需要经常修改的数据这些数据可能在 update 时会发生改变。
- update # update 游戏开发的一个关键点是在每一帧渲染前更新物体的行为状态和方位。这些更新操作通常都放在 update 回调中。在所有动画更新前执行
- lateUpdate # 在动效如动画、粒子、物理等更新之后才进行一些额外操作或者希望在所有组件的 update 都执行完之后才进行其它操作那就需要用到 lateUpdate 回调。
- onDestroy # 当组件的 enabled 属性从 false 变为 true 时或者所在节点的 active 属性从 false 变为 true 时会激活 onEnable 回调。倘若节点第一次被创建且 enabled 为 true则会在 onLoad 之后start 之前被调用。
- onEnable # 当组件的 enabled 属性从 true 变为 false 时或者所在节点的 active 属性从 true 变为 false 时会激活 onDisable 回调。
- onDisable # 当组件或者所在节点调用了 destroy()则会调用 onDestroy 回调并在当帧结束时统一回收组件。当同时声明了 onLoad 和 onDestroy 时它们将总是被成对调用。也就是说从组件初始化到销毁的过程中它们要么就都会被调用要么就都不会被调用。
一个组件从初始化到激活再到最终销毁的完整生命周期函数调用顺序为onLoad - onEnable - start - update - lateUpdate - onDisable - onDestroy。
其中onLoad 和 start 常常用于组件的初始化只有在节点 activeInHierarchy 的情况下才能调用并且最多只会被调用一次。除了上文提到的内容以及调用顺序的不同它们还有以下区别
节点激活时组件 enabled 时才会调用onLoad立即调用否start延迟调用是
6.3、创建克隆和销毁节点
6.3.1、创建新节点
除了通过场景编辑器创建节点外我们也可以在脚本中动态创建节点。通过 new cc.Node() 并将它加入到场景中可以实现整个创建过程。
6.3.2、克隆已有节点
有时我们希望动态的克隆场景中的已有节点我们可以通过 cc.instantiate 方法完成。使用方法如下
var scene cc.director.getScene();
var node cc.instantiate(this.node/this.prefab);node.parent scene;
node.setPosition(0, 0);6.3.3、销毁节点
通过 node.destroy() 函数可以销毁节点。值得一提的是销毁节点并不会立刻被移除而是在当前帧逻辑更新结束后统一执行。当一个节点销毁后该节点就处于无效状态可以通过 cc.isValid 判断当前节点是否已经被销毁。
6.4、加载和切换场景
6.4.1、加载和运行场景
在 Cocos Creator 中我们使用场景文件名不包含扩展名来索引指代场景。并通过以下接口进行加载和切换操作
cc.director.loadScene(MyScene);除此之外从 v2.4 开始 Asset Bundle 还增加了一种新的加载方式
bundle.loadScene(MyScene, function (err, scene) {cc.director.runScene(scene);
});Asset Bundle 提供的 loadScene 只会加载指定 bundle 中的场景并不会自动运行场景还需要使用 cc.director.runScene 来运行场景。 loadScene 还提供了更多参数来控制加载流程开发者可以自行控制加载参数或者在加载完场景后做一些处理。
6.4.2、预加载场景
cc.director.loadScene 会在加载场景之后自动切换运行新场景有些时候我们需要在后台静默加载新场景并在加载完成后手动进行切换。那就可以预先使用 cc.director.preloadScene 接口对场景进行预加载
cc.director.preloadScene(table, function () {cc.log(Next scene preloaded);
});之后在合适的时间调用 loadScene就可以真正切换场景。
cc.director.loadScene(table);就算预加载没完成依旧可以调用 cc.director.loadScene。
6.5、监听和发射事件
一般应用情况客户端调用服务端协议异步请求的时候数据还需要等待response等待接口响应成功返回数据的时候就可以发射一个事件用于告诉监听这个事件的已经获取到数据了。所以在需要使用数据的部分添加一个监听就可以得到想要的数据操作。
不这样处理的后果在接口协议未返回数据结构的时候调用数据会出现报错Undefined或者null的情况这是不应该出现的。
6.5.1、监听事件
事件处理是在节点cc.Node中完成的。对于组件可以通过访问节点 this.node 来注册和监听事件。监听事件可以通过 this.node.on() 函数来注册方法如下
this.node.on(mousedown, function (event) {this.enabled false;
}, this);除了使用 on 监听我们还可以使用 once 方法。once 监听在监听函数响应后就会关闭监听事件。
6.5.2、关闭监听
当我们不再关心某个事件时我们可以使用 off 方法关闭对应的监听事件。需要注意的是off 方法的参数必须和 on 方法的参数一一对应才能完成关闭。
this.node.on(foobar, this._sayHello, this);6.5.3、发射事件
发射事件有两种方式emit 和 dispatchEvent。两者的区别在于后者可以做事件传递。我们先通过一个简单的例子来了解 emit 事件
this.node.emit(say-hello, Hello, this is Cocos Creator);在 2.0 之后我们优化了事件的参数传递机制。 在发射事件时我们可以在 emit 函数的第二个参数开始传递我们的事件参数。同时在 on 注册的回调里可以获取到对应的事件参数
let arg1 1, arg2 2, arg3 3;
// At most 5 args could be emit.
this.node.emit(foo, arg1, arg2, arg3);this.node.on(foo, function (arg1, arg2, arg3) {console.log(arg1, arg2, arg3); // print 1, 2, 3
});需要说明的是出于底层事件派发的性能考虑这里最多只支持传递 5 个事件参数。所以在传参时需要注意控制参数的传递个数。
6.6、系统内置事件
6.6.1、节点系统事件
Cocos Creator 支持的系统事件包含鼠标、触摸、键盘、重力传感四种其中本章节重点介绍与节点树相关联的鼠标和触摸事件这些事件是被直接触发在相关节点上的所以被称为节点系统事件。与之对应的键盘和重力传感事件被称为全局系统事件细节可以参考下一节全局系统事件文档。
系统事件遵守通用的注册方式开发者既可以使用枚举类型也可以直接使用事件名来注册事件的监听器事件名的定义遵循 DOM 事件标准。
// 使用枚举类型来注册
node.on(cc.Node.EventType.MOUSE_DOWN, function (event) {console.log(Mouse down);
}, this);// 使用事件名来注册
node.on(mousedown, function (event) {console.log(Mouse down);
}, this);6.6.2、鼠标事件类型和事件对象
鼠标事件在桌面平台才会触发系统提供的事件类型如下
枚举对象定义对应的事件名事件触发的时机cc.Node.EventType.MOUSE_DOWNmousedown当鼠标在目标节点区域按下时触发一次cc.Node.EventType.MOUSE_ENTERmouseenter当鼠标移入目标节点区域时不论是否按下cc.Node.EventType.MOUSE_MOVEmousemove当鼠标在目标节点区域中移动时不论是否按下cc.Node.EventType.MOUSE_LEAVEmouseleave当鼠标移出目标节点区域时不论是否按下cc.Node.EventType.MOUSE_UPmouseup当鼠标从按下状态松开时触发一次cc.Node.EventType.MOUSE_WHEELmousewheel当鼠标滚轮滚动时
鼠标事件cc.Event.EventMouse的重要 API 如下cc.Event 标准事件 API 除外
函数名返回值类型意义getScrollYNumber获取滚轮滚动的 Y 轴距离只有滚动时才有效getLocationObject获取鼠标位置对象对象包含 x 和 y 属性getLocationXNumber获取鼠标的 X 轴位置getLocationYNumber获取鼠标的 Y 轴位置getPreviousLocationObject获取鼠标事件上次触发时的位置对象对象包含 x 和 y 属性getDeltaObject获取鼠标距离上一次事件移动的距离对象对象包含 x 和 y 属性getButtonNumbercc.Event.EventMouse.BUTTON_LEFT 或 cc.Event.EventMouse.BUTTON_RIGHT 或 cc.Event.EventMouse.BUTTON_MIDDLE
6.6.3、触摸事件类型和事件对象
触摸事件在移动平台和桌面平台都会触发这样做的目的是为了更好得服务开发者在桌面平台调试只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。系统提供的触摸事件类型如下
枚举对象定义对应的事件名事件触发的时机cc.Node.EventType.TOUCH_STARTtouchstart当手指触点落在目标节点区域内时cc.Node.EventType.TOUCH_MOVEtouchmove当手指在屏幕上移动时cc.Node.EventType.TOUCH_ENDtouchend当手指在目标节点区域内离开屏幕时cc.Node.EventType.TOUCH_CANCELtouchcancel当手指在目标节点区域外离开屏幕时
触摸事件cc.Event.EventTouch的重要 API 如下cc.Event 标准事件 API 除外
API 名类型意义touchcc.Touch与当前事件关联的触点对象getIDNumber获取触点的 ID用于多点触摸的逻辑判断getLocationObject获取触点位置对象对象包含 x 和 y 属性getLocationXNumber获取触点的 X 轴位置getLocationYNumber获取触点的 Y 轴位置getPreviousLocationObject获取触点上一次触发事件时的位置对象对象包含 x 和 y 属性getStartLocationObject获取触点初始时的位置对象对象包含 x 和 y 属性getDeltaObject获取触点距离上一次事件移动的距离对象对象包含 x 和 y 属性
需要注意的是触摸事件支持多点触摸每个触点都会发送一次事件给事件监听器。
触摸事件冒泡假设 A 节点拥有一个子节点 BB 拥有一个子节点 C。开发者对 A、B、C 都监听了触摸事件以下的举例都默认节点监听了触摸事件。包含才会进行冒泡触发如果在C点发生了触摸事件那么会向上级冒泡到B然后到A都会发生触摸事件如果不想进行冒泡那么调用 event.stopPropagation() 可以主动停止冒泡过程。
同级节点的触点归属问题A和B属于同级有一部分为公共部分这时A发生触摸事件但是B不会。
将触摸或鼠标事件注册在捕获阶段如果希望父节点触发子节点触发可以给node注册触摸或鼠标事件时传入第四个参数true表示useCapture例如
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStartCallback, this, true);当节点触发 touchstart 事件时会先将 touchstart 事件派发给所有注册在捕获阶段的父节点监听器然后派发给节点自身的监听器最后才到了事件冒泡阶段。
只有触摸或鼠标事件可以注册在捕获阶段其他事件不能注册在捕获阶段。
多点触摸事件引擎在 v2.3 版本中新增了多点触摸事件的屏蔽开关多点触摸事件默认为开启状态。对于有些类型的项目为了防止多点误触需要屏蔽多点触摸事件可以通过以下代码进行关闭
cc.macro.ENABLE_MULTI_TOUCH false;暂停或恢复节点系统事件
暂停节点系统事件
// 暂停当前节点上注册的所有节点系统事件节点系统事件包含触摸和鼠标事件。
// 如果传递参数 true那么这个 API 将暂停本节点和它的所有子节点上的节点系统事件。
// example
this.node.pauseSystemEvents();恢复节点系统事件
// 恢复当前节点上注册的所有节点系统事件节点系统事件包含触摸和鼠标事件。
// 如果传递参数 true那么这个 API 将恢复本节点和它的所有子节点上的节点系统事件。
// example
this.node.resumeSystemEvents();6.7、全局系统事件
全局系统事件是指与节点树不相关的各种全局事件由 cc.systemEvent 来统一派发目前支持以下几种事件
键盘事件设备重力传感事件
6.7.1、如何定义输入事件
键盘事件
键盘、设备重力传感器此类全局事件是通过函数 cc.systemEvent.on(type, callback, target) 注册的。
可选的 type 类型有:
cc.SystemEvent.EventType.KEY_DOWN (键盘按下)cc.SystemEvent.EventType.KEY_UP (键盘释放)cc.SystemEvent.EventType.DEVICEMOTION (设备重力传感)
cc.Class({extends: cc.Component,onLoad: function () {// add key down and key up eventcc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);},onDestroy () {cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);},onKeyDown: function (event) {switch(event.keyCode) {case cc.macro.KEY.a:console.log(Press a key);break;}},onKeyUp: function (event) {switch(event.keyCode) {case cc.macro.KEY.a:console.log(release a key);break;}}
});设备重力传感事件
事件监听器类型cc.SystemEvent.EventType.DEVICEMOTION事件触发后的回调函数 自定义回调函数callback(event); 回调参数
cc.Class({extends: cc.Component,onLoad () {// open Accelerometercc.systemEvent.setAccelerometerEnabled(true);cc.systemEvent.on(cc.SystemEvent.EventType.DEVICEMOTION, this.onDeviceMotionEvent, this);},onDestroy () {cc.systemEvent.off(cc.SystemEvent.EventType.DEVICEMOTION, this.onDeviceMotionEvent, this);},onDeviceMotionEvent (event) {cc.log(event.acc.x event.acc.y);},
});6.8、缓动系统(cc.tween)
6.8.1、缓动系统介绍
Cocos Creator 在 v2.0.9 提供了一套新的 API —— cc.tween。cc.tween 能够对对象的任意属性进行缓动功能类似于 cc.Action动作系统。但是 cc.tween 会比 cc.Action 更加简洁易用因为 cc.tween 提供了链式创建的方法可以对任何对象进行操作并且可以对对象的任意属性进行缓动。
cc.tween 提供了两个设置属性的 API
to对属性进行绝对值计算最终的运行结果即是设置的属性值即改变到某个值。by对属性进行相对值计算最终的运行结果是设置的属性值加上开始运行时节点的属性值即变化值。
cc.tween(this.node).to(1, { position: cc.v2(100, 100), rotation: 360 }) // 同时执行多个属性.to(1, { scale: 2 }).by(1, { scale: 1 }) // node.scale 3.to(1, { scale: 1 }) // node.scale 1.start()6.8.2、链式API
简单来说是链式进行action缓动所以一个结束后才会进行下一个。
cc.tween 的每一个 API 都会在内部生成一个 action并将这个 action 添加到内部队列中在 API 调用完后会再返回自身实例这样就可以通过链式调用的方式来组织代码。
cc.tween 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列所以 cc.tween 的链式结构是依次执行每一个 API 的也就是会执行完一个 API 再执行下一个 API。
cc.tween(this.node)// 0s 时node 的 scale 还是 1.to(1, { scale: 2 })// 1s 时执行完第一个 actionscale 为 2.to(1, { scale: 3 })// 2s 时执行完第二个 actionscale 为 3.start()// 调用 start 开始执行 cc.tween6.8.3、支持缓动任意对象的任意属性
let obj { a: 0 }
cc.tween(obj).to(1, { a: 100 }).start()6.8.4、easing使缓动更加生动
cc.tween 针对不同的情况提供了多种使用方式。
// 传入 easing 名字直接使用内置 easing 函数
cc.tween().to(1, { scale: 2 }, { easing: sineOutIn})// 使用自定义 easing 函数
cc.tween().to(1, { scale: 2 }, { easing: t t*t; })// 只对单个属性使用 easing 函数
// value 必须与 easing 或者 progress 配合使用
cc.tween().to(1, { scale: 2, position: { value: cc.v3(100, 100, 100), easing: sineOutIn } })6.8.5、自定义progress
相对于 easing自定义 progress 函数可以更自由的控制缓动的过程。
// 对所有属性自定义 progress
cc.tween().to(1, { scale: 2, rotation: 90 }, {progress: (start, end, current, ratio) {return start (end - start) * ratio;}
})// 对单个属性自定义 progress
cc.tween().to(1, {scale: 2,position: {value: cc.v3(),progress: (start, end, current, t) {// 注意传入的属性为 cc.Vec3所以需要使用 Vec3.lerp 进行插值计算return start.lerp(end, t, current);}}
})6.8.6、复制缓动
clone 函数会克隆一个当前的缓动并接受一个 target 作为参数。
// 先创建一个缓动作为模板
let tween cc.tween().to(4, { scale: 2 })// 复制 tween并使用节点 Canvas/cocos 作为 target
tween.clone(cc.find(Canvas/cocos)).start()
// 复制 tween并使用节点 Canvas/cocos2 作为 target
tween.clone(cc.find(Canvas/cocos2)).start()6.8.7、插入其他的缓动到队列中
你可以事先创建一些固定的缓动然后通过组合这些缓动形成新的缓动来减少代码的编写。
let scale cc.tween().to(1, { scale: 2 })
let rotate cc.tween().to(1, { rotation: 90})
let move cc.tween().to(1, { position: cc.v3(100, 100, 100)})// 先缩放再旋转
cc.tween(this.node).then(scale).then(rotate)
// 先缩放再移动
cc.tween(this.node).then(scale).then(move)6.8.8、并行执行缓动
cc.tween 在链式执行时是按照 sequence 的方式来执行的但是在编写复杂缓动的时候可能会需要同时并行执行多个队列cc.tween 提供了 parallel 接口来满足这个需求。
let t cc.tween;
t(this.node)// 同时执行两个 cc.tween.parallel(t().to(1, { scale: 2 }),t().to(2, { position: cc.v2(100, 100) })).call(() {console.log(All tweens finished.)}).start()6.8.9、回调
cc.tween(this.node).to(2, { rotation: 90}).to(1, { scale: 2})// 当前面的动作都执行完毕后才会调用这个回调函数.call(() { cc.log(This is a callback) }).start()6.8.10、重复执行
repeat/repeatForever 函数会将前一个 action 作为作用对象。但是如果有参数提供了其他的 action 或者 tween则 repeat/repeatForever 函数会将传入的 action 或者 tween 作为作用对象。
cc.tween(this.node).by(1, { scale: 1 })// 对前一个 by 重复执行 10次.repeat(10)// 最后 node.scale 11.start()// 也可以这样用
cc.tween(this.node).repeat(10,cc.tween().by(1, { scale: 1 })).start()// 一直重复执行下去
cc.tween(this.node).by(1, { scale: 1 }).repeatForever().start()6.8.11、延迟执行
cc.tween(this.node)// 延迟 1s.delay(1).to(1, { scale: 2 })// 再延迟 1s.delay(1).to(1, { scale: 3 }).start()6.9、计时器
也许有人会认为 setTimeout 和 setInterval 就足够了开发者当然可以使用这两个函数不过我们更推荐使用计时器因为它更加强大灵活和组件也结合得更好
下面来看看它的具体使用方式
首先先创建一个指向某个组件的变量变量名为 component。
1、开始一个计时器
// 以秒为单位的时间间隔
var interval 5;
// 重复次数
var repeat 3;
// 开始延时
var delay 10;
component.schedule(function() {// 这里的 this 指向 componentthis.doSomething();
}, interval, repeat, delay);2、只执行一次的计时器快捷方式
component.scheduleOnce(function() {// 这里的 this 指向 componentthis.doSomething();
}, 2);3、取消计时器
this.count 0;
this.callback function () {if (this.count 5) {// 在第六次执行回调时取消这个计时器this.unschedule(this.callback);}this.doSomething();this.count;
}
component.schedule(this.callback, 1);注意组件的计时器调用回调时会将回调的 this 指定为组件本身因此回调中可以直接使用 this。
下面是 Component 中所有关于计时器的函数
schedule开始一个计时器scheduleOnce开始一个只执行一次的计时器unschedule取消一个计时器unscheduleAllCallbacks取消这个组件的所有计时器
6.10、脚本执行顺序
6.10.1、使用统一的控制脚本来初始化其他脚本
我们先设置一个 Game.js 脚本作为总的控制脚本还有另外的 Player.js、Enemy.js、Menu.js 三个脚本那么它们的初始化过程如下
// Game.jsconst Player require(Player);
const Enemy require(Enemy);
const Menu require(Menu);cc.Class({extends: cc.Component,properties: {player: Player,enemy: Enemy,menu: Menu},onLoad: function () {this.player.init();this.enemy.init();this.menu.init();}
});其中在 Player.js、Enemy.js 和 Menu.js 中需要实现 init 方法并将初始化逻辑放进去。这样我们就可以保证 Player、Enemy 和 Menu 的初始化顺序。
6.10.2、控制同一个节点上的组件执行顺序
在同一个节点上的组件脚本执行顺序可以通过组件在 属性检查器 里的排列顺序来控制。排列在上的组件会先于排列在下的组件执行。我们可以通过组件右上角的齿轮按钮里的 Move Up 和 Move Down 菜单来调整组件的排列顺序和执行顺序。
还可以直接设置组件的 executionOrder。executionOrder 会影响组件的生命周期回调的执行优先级。设置方法如下
// Player.js
cc.Class({extends: cc.Component,editor: {executionOrder: -1},onLoad: function () {cc.log(Player onLoad!);}
});// Menu.js
cc.Class({extends: cc.Component,editor: {executionOrder: 1},onLoad: function () {cc.log(Menu onLoad!);}
});executionOrder 越小该组件相对其它组件就会越先执行。executionOrder 默认为 0因此设置为负数的话就会在其它默认的组件之前执行。
executionOrder 只对 onLoad、onEnable、start、update 和 lateUpdate 有效对 onDisable 和 onDestroy 无效。
6.11、标准网络接口
在 Cocos Creator 中我们支持 Web 平台上最广泛使用的标准网络接口
XMLHttpRequest用于短连接WebSocket用于长连接
当然在 Web 平台浏览器原生就支持这两个接口之所以说 Cocos Creator 支持是因为在发布原生版本时用户使用这两个网络接口的代码也是可以运行的。也就是遵循 Cocos 一直秉承的 “一套代码多平台运行” 原则。 注意如果需要在原生平台使用 WebSocket请确保有在 项目 - 项目设置 - 模块设置 中勾选了 Native Socket 模块。 6.11.1、使用方法
1、XMLHttpRequest 简单示例
let xhr new XMLHttpRequest();
xhr.onreadystatechange function () {if (xhr.readyState 4 (xhr.status 200 xhr.status 400)) {var response xhr.responseText;console.log(response);}
};
xhr.open(GET, url, true);
xhr.send();开发者可以直接使用 new XMLHttpRequest() 来创建一个连接对象。
2、WebSocket 简单示例
let ws new WebSocket(ws://echo.websocket.org);
ws.onopen function (event) {console.log(Send Text WS was opened.);
};
ws.onmessage function (event) {console.log(response text msg: event.data);
};
ws.onerror function (event) {console.log(Send Text fired an error);
};
ws.onclose function (event) {console.log(WebSocket instance closed.);
};setTimeout(function () {if (ws.readyState WebSocket.OPEN) {ws.send(Hello WebSocket, Im a text message.);}else {console.log(WebSocket instance wasnt ready...);}
}, 3);6.12、对象池
在运行时进行节点的创建cc.instantiate和销毁node.destroy操作是非常耗费性能的因此我们在比较复杂的场景中通常只有在场景初始化逻辑onLoad中才会进行节点的创建在切换场景时才会进行节点的销毁。如果制作有大量敌人或子弹需要反复生成和被消灭的动作类游戏我们要如何在游戏进行过程中随时创建和销毁节点呢这里就需要对象池的帮助了。
对象池的基本功能其实非常简单就是使用数组来保存已经创建的节点实例列表。
对象池的概念
对象池就是一组可回收的节点对象我们通过创建 cc.NodePool 的实例来初始化一种节点的对象池。通常当我们有多个 prefab 需要实例化时应该为每个 prefab 创建一个 cc.NodePool 实例。当我们需要创建节点时向对象池申请一个节点如果对象池里有空闲的可用节点就会把节点返回给用户用户通过 node.addChild 将这个新节点加入到场景节点树中。
当我们需要销毁节点时调用对象池实例的 put(node) 方法传入需要销毁的节点实例对象池会自动完成把节点从场景节点树中移除的操作然后返回给对象池。这样就实现了少数节点的循环利用。假如玩家在一关中要杀死 100 个敌人但同时出现的敌人不超过 5 个那我们就只需要生成 5 个节点大小的对象池然后循环使用就可以了。
初始化对象池
在场景加载的初始化脚本中我们可以将需要数量的节点创建出来并放进对象池
//...
properties: {enemyPrefab: cc.Prefab
},
onLoad: function () {this.enemyPool new cc.NodePool();let initCount 5;for (let i 0; i initCount; i) {let enemy cc.instantiate(this.enemyPrefab); // 创建节点this.enemyPool.put(enemy); // 通过 put 接口放入对象池}
}从对象池中拿出对象
// ...createEnemy: function (parentNode) {let enemy null;if (this.enemyPool.size() 0) { // 通过 size 接口判断对象池中是否有空闲的对象enemy this.enemyPool.get();} else { // 如果没有空闲对象也就是对象池中备用对象不够时我们就用 cc.instantiate 重新创建enemy cc.instantiate(this.enemyPrefab);}enemy.parent parentNode; // 将生成的敌人加入节点树enemy.getComponent(Enemy).init(); //接下来就可以调用 enemy 身上的脚本进行初始化
}将对象返回对象池
// ...onEnemyKilled: function (enemy) {// enemy 应该是一个 cc.Nodethis.enemyPool.put(enemy); // 和初始化时的方法一样将节点放进对象池这个方法会同时调用节点的 removeFromParent
}返还节点时对象池内部会调用结点的 removeFromParent(false) 方法将对象从父节点中移除但并不会执行 cleanup 操作。这样我们就完成了一个完整的循环主角需要刷多少怪都不成问题了将节点放入和从对象池取出的操作不会带来额外的内存管理开销因此只要是可能应该尽量去利用。
清除对象池
myPool.clear(); // 调用这个方法就可以清空对象池使用cc.NodePool的优势
cc.NodePool 除了可以创建多个对象池实例同一个 prefab 也可以创建多个对象池每个对象池中用不同参数进行初始化大大增强了灵活性此外 cc.NodePool 针对节点事件注册系统进行了优化用户可以根据自己的需要自由的在节点回收和复用的生命周期里进行事件的注册和反注册。
6.13、模块化脚本
Cocos Creator 允许你将代码拆分成多个脚本文件并且让它们相互调用。要实现这点你需要了解如何在 Cocos Creator 中定义和使用模块这个步骤简称为 模块化。
引用模块
通常使用require例如已有一个脚本Rotate.js,接着我们就可以使用 Rotate 派生一个子类新建一个脚本 SinRotate.js
// SinRotate.jsvar Rotate require(Rotate);var SinRotate cc.Class({extends: Rotate,update: function (dt) {this.rotation this.speed * Math.sin(dt);}
});这里我们定义了一个新的组件叫 SinRotate它继承自 Rotate并对 update 方法进行了重写。
同样的这个组件也可以被其它脚本接着访问只要用 require(SinRotate)。
注意
require 可以在脚本的任何地方任意时刻进行调用。游戏开始时会自动 require 所有脚本这时每个模块内部定义的代码就会被执行一次之后无论又被 require 几次返回的始终是同一份实例。调试时可以随时在 Developer Tools 的 Console 中 require 项目里的任意模块。
6.14、插件脚本
在 资源管理器 中选中任意一个脚本就能在 属性检查器 中看到这样一个设置界面我们可以在这里设置脚本是否 “导入为插件”。
对组件脚本数据逻辑而言一般默认都取消这个选项这样的脚本简称 普通脚本。对第三方插件或者底层插件就有可能需要选中选项这样的脚本简称 插件脚本。
这个选项只和脚本有关一般简单了解即可。
6.15、属性参数 属性参数用来给已定义的属性附加元数据类似于脚本语言的 Decorator 或者 C# 的 Attribute。 七、子系统介绍 摄像机 摄像机是玩家观察游戏世界的窗口场景中至少需要有一个摄像机也可以同时存在多个摄像机。创建场景时Creator 会默认创建一个名为 Main Camera 的摄像机作为这个场景的主摄像机。多摄像机的支持可以让你轻松实现高级的自定义效果比如双人分屏效果或者场景小地图的生成。 Material 材质资源 材质资源可以用来控制渲染组件在场景中的视觉效果。简单来说材质就是用来指定物体表面的特性如颜色、光亮程度、自发光度以及不透明度等。 effect Cocos Creator 中的着色器Cocos Shader 文件扩展名为 *.effect是一种基于 YAML 和 GLSL 的单源码嵌入式领域特定语言single-source embedded domain-specific languageYAML 部分声明流程控制清单GLSL 部分声明实际的 Shader 片段这两部分内容相互补充共同构成了一个完整的渲染流程描述。 Sprite 组件参考 Sprite精灵是 2D 游戏中最常见的显示图像的方式在节点上添加 Sprite 组件就可以在场景中显示项目资源中的图片。 Label 组件参考 Label 组件用来显示一段文字文字可以是系统字体、TrueType 字体、BMFont 字体或艺术数字。另外Label 还具有排版功能。 LabelOutline 组件参考 LabelOutline 组件将为所在节点上的 Label 组件添加描边效果只能用于系统字体或者 TTF 字体。LabelOutline 组件在 Label 组件的 Cache Mode 属性设置为 CHAR 时不生效除了原生平台但是原生平台也只有在使用 TTF 字体时是生效的。 LabelShadow 组件参考 LabelShadow 组件可以为 Label 组件添加阴影效果但只能用于系统字体或者 TTF 字体。LabelShadow 组件在 Label 组件的 Cache Mode 属性设置为 CHAR 时不生效除了原生平台但是原生平台也只有在使用 TTF 字体时是生效的。 Mask遮罩组件参考 Mask 用于规定子节点可渲染的范围带有 Mask 组件的节点会使用该节点的约束框也就是 属性检查器 中 Node 组件的 Size 规定的范围创建一个渲染遮罩该节点的所有子节点都会依据这个遮罩进行裁剪遮罩范围外的将不会渲染。 MotionStreak拖尾组件参考 MotionStreak拖尾是运动轨迹用于在游戏对象的运动轨迹上实现拖尾渐隐效果。 ParticleSystem 组件参考 该组件是用来读取 粒子资源 数据并且对其进行一系列例如播放、暂停、销毁等操作。 TiledMap 组件参考 TiledMap地图用于在游戏中显示 TMX 格式的地图。 TiledTile 组件可以单独对某一个地图块进行操作。 DragonBones 组件参考 DragonBones 组件可以对骨骼动画DragonBones资源进行渲染和播放。 注意当使用 DragonBones 组件时属性检查器 中 Node 组件上的 Anchor 与 Size 属性是无效的。 VideoPlayer 组件参考 VideoPlayer 是一种视频播放组件可通过该组件播放本地和远程视频。 此控件支持的视频格式由所运行系统的视频播放器决定为了让所有支持的平台都能正确播放视频推荐使用 mp4 格式的视频。 WebView 组件参考 WebView 是一种显示网页的组件该组件让你可以在游戏里面集成一个小的浏览器。由于不同平台对于 WebView 组件的授权、API、控制方式都不同还没有形成统一的标准所以目前只支持 Web、iOS 和 Android 平台。 Graphics 组件参考 Graphics 组件提供了一系列绘画接口这些接口参考了 Canvas 的绘画接口来进行实现。
八、UI系统
8.1、多分辨率适配方案
Cocos Creator 在设计之初就致力于解决一套资源适配多种分辨率屏幕的问题。简单概括来说我们通过以下几个部分完成多分辨率适配解决方案
Canvas画布 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。Widget对齐挂件 放置在渲染元素上能够根据需要将元素对齐父节点的不同参考位置。Label文字 组件内置了提供各种动态文字排版模式的功能当文字的约束框由于 Widget 对齐要求发生变化时文字会根据需要呈现完美的排版效果。Sliced Sprite九宫格精灵图 则提供了可任意指定尺寸的图像同样可以满足各式各样的对齐要求在任何屏幕分辨率上都显示高精度的图像。
8.2、自动布局容器
Layout自动布局组件可以挂载在任何节点上将节点变成一个有自动布局功能的容器。所谓自动布局容器就是能够自动将子节点按照一定规律排列并可以根据节点内容的约束框总和调整自身尺寸的容器型节点。
水平布局Horizontal)垂直布局Vertical垂节点排列方向节点排列方向水平排列方向Horizontal Direction垂直排列方向Vertical Direction
8.3、制作动态生成内容的列表
UI 界面只有静态页面内容是不够的我们会遇到很多需要由一组数据动态生成多个元素组成的 UI 面板比如选人界面、物品栏、选择关卡等等。
8.4、UI组件参考 Canvas画布组件 Canvas画布 组件能够随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。场景中的 Canvas 同时只能有一个建议所有 UI 和可渲染元素都设置为 Canvas 的子节点。 Widget 组件 Widget (对齐挂件) 是一个很常用的 UI 布局组件。它能使当前节点自动对齐到父物体的任意位置或者约束尺寸让你的游戏可以方便地适配不同的分辨率。 Button按钮组件 Button 组件可以响应用户的点击操作当用户点击 Button 时Button 自身会有状态变化。另外Button 还可以让用户在完成点击操作后响应一个自定义的行为。 Layout 组件参考 Layout 是一种容器组件容器能够开启自动布局功能自动按照规范排列所有子物体方便用户制作列表、翻页等功能。 水平布局容器垂直布局容器网格布局容器 SafeArea 组件 该组件会将所在节点的布局适配到 iPhone X 等异形屏手机的安全区域内可适配 Android 和 iOS 设备通常用于 UI 交互区域的顶层节点。需要注意的是在添加 SafeArea 组件时会自动添加 Widget 组件如果节点上没有的话且不能删除。 EditBox 组件 EditBox 是一种文本输入组件该组件让你可以轻松获取用户输入的文本。 RichText 组件 RichText 组件用来显示一段带有不同样式效果的文字你可以通过一些简单的 BBCode 标签来设置文字的样式。 目前支持的样式有颜色color、字体大小size、字体描边outline、加粗b、斜体i、下划线u、换行br、图片img和点击事件on并且不同的 BBCode 标签支持相互嵌套。 ScrollView 组件 ScrollView 是一种带滚动功能的容器它提供一种方式可以在有限的显示区域内浏览更多的内容。通常 ScrollView 会与 Mask 组件配合使用同时也可以添加 ScrollBar 组件来显示浏览内容的位置。 ScrollBar 组件 ScrollBar 允许用户通过拖动滑块来滚动一张图片它与 Slider 组件有点类似但是 ScrollBar 主要是用于滚动而 Slider 则用来设置数值。 ProgressBar 组件 ProgressBar进度条经常被用于在游戏中显示某个操作的进度在节点上添加 ProgressBar 组件然后给该组件关联一个 Bar Sprite 就可以在场景中控制 Bar Sprite 来显示进度了。 Toggle 组件 Toggle 是一个 CheckBox当它和 ToggleGroup 一起使用的时候可以变成 RadioButton。 ToggleContainer 组件 ToggleContainer 不是一个可见的 UI 组件它可以用来修改一组 Toggle 组件的行为。当一组 Toggle 属于同一个 ToggleContainer 的时候任何时候只能有一个 Toggle 处于选中状态。 Slider 组件 Slider 是一个滑动器组件。 PageView 组件 PageView 是一种页面视图容器. PageviewIndicator 组件 PageviewIndicator 用于显示 PageView 当前的页面数量和标记当前所在的页面。 BlockInputEvents 组件 BlockInputEvents 组件将拦截所属节点 bounding box 内的所有输入事件鼠标和触摸防止输入穿透到下层节点一般用于上层 UI 的背景。 当我们制作一个弹出式的 UI 对话框时对话框的背景默认不会截获事件。也就是说虽然它的背景挡住了游戏场景但是在背景上点击或触摸时下面被遮住的游戏元素仍然会响应点击事件。这时我们只要在背景所在的节点上添加这个组件就能避免这种情况。 该组件没有任何 API 接口直接添加到场景即可生效。
总结
这里记录简单的结构和概括记录主要的编辑器和脚本知识由于篇幅较长后续还有进阶的部分放在下一个文章中记录。
