Cocos Creator 入门
Cocos Createor
资源
略
场景
- 节点树
- 节点与组件
- 坐标系
脚本
- 组件声明,生命周期回调
var Component = cc.Class({
// 用于序列化,可省略
name: 'some Name',
// 构造函数
cotr: function() {
// 不会覆盖父类的构造函数,自动调用父类构造方法
cc.log(this instanceof Component);
},
// 继承
extends: cc.Component,
// 属性声明,可在编辑器<属性检查其>中可视化编辑。需声明类型
properties: {
id: 20, // value
target: cc.Node, // constructor
pos: new cc.Vec2(10, 20), // obj
frames: [cc.SpriteFrame], // array
// 完整声明
score: {
default: 0,
displayName: "<属性检查器>标签名",
tooltip: "<属性检查器>提示",
visible: true,
serializable: true, // false不可序列化(保存)
type: cc.Label,
}
},
// LIFE-CYCLE CALLBACKS:
onLoad: function() {
cc.log("All nodes loaded..");
},
start: function() {
cc.log("All component loaded.");
},
update: function() {
cc.log("request frame.");
},
lateUpdate: function() {
cc.log("After frame update.");
},
onDestory: function() {
cc.log("will be destoried.");
},
onEnable: function() {
cc.log("activate");
},
onDisable: function() {
cc.log("disabled.");
},
});
-
节点访问
-
直接创建
var node = new cc.Node('Sprite');
-
克隆已有节点
var node = cc.instantiate(this.someNodeTarget);
-
创建预制
var node = cc.instantiate(this.somePrefab);
-
销毁节点
someNode.destory();
removeFromParent()
只是从父节点移除(可能移动到其他节点下面),不会释放内存 -
访问组件/节点
cc.Node.getComponent(); // 访问组件 cc.Node.prop = cc.Node node; // 属性引用 cc.node.children; // 访问子节点 cc.node.getChildByName(); // 子查找 cc.Node.find(path, [root]); // 绝对/相对路径查找
-
全局模块
// Global.js module.exports = {foo: null, bar: null}; // somewhere Global.foo = this.node; Global.bar = this.getComponent(cc.Label);
-
-
场景加载
-
直接加载
cc.director.loadScene("MyScene");
-
加载回调
cc.director.loadScene("MyScene", onSceneLaunched); onSceneLaunched: function() { cc.game.addPersistRootNode(myNode); // 设置常驻节点,用以在不同场景间保留公共数据(角色信息等。。) }
-
预加载
cc.director.preloadSence("senceName", cbFn); cc.director.loadScene("sceneName");//后台静默加载,需要手动切换
-
-
资源加载
- 资源可以作为属性进行设置,也可动态加载
- 动态加载资源必须放在
assets/resources
及其子文件夹下面 - 资源的释放需注意依赖关系
cc.loader.loadRes(path, cc.Type, cbFn); // 指定类型加载 cc.loader.loadResDir(dir, cbFn); // 批量加载文件夹 cc.loader.load(remoteUrl, cbFn); // 加载远程资源(仅图片,声音,文本),受跨域策略限制 cc.loader.release(texture);// 直接释放单个资源(无依赖关系) // 释放预制(包含其他依赖)以及它所依赖的资源 var deps = cc.loader.getDependsRecursively(prefab); // 获取其依赖的资源 var idx = deps.indexOf(extra._uuid); // 查找不想释放的依赖资源 index != -1 && deps.splice(idx, 1); // 从集合中移除 cc.loader.release(deps);// 释放所有依赖资源
-
事件监听
-
动作/动画
-
基本动作 https://docs.cocos.com/creator/manual/zh/scripting/action-list.html
moveTo(duration, cc.V2)
moveBy(duration, cc.V2)
scaleTo(duration, times)
skewTo(duration, angle)
rotateTo(duration, angle)
- ...
-
播放动作
var act1 = cc.spawn(part1, part2); // 同步动作 var act2 = act1.speed(2); // 与act1相同的动作,但以2倍速度播放 var cbFn = cc.callFunc(func, root, args); var act3 = cc.repeat(act2); // 重复动作act3 var act4 = cc.sequence(act1, cbFn, act2, act3); // 顺序动作/回调 var action = cc.repeatForever(act4); // 循环重复 cc.node.runAction(action); // 执行动作
-
cc.tween
对cc.Action
的再封装,链式调用更加简洁易用。cc.tween(node) .to(duration, {scale: x, moveTo: y}) // 相当于 cc.spawn(cc.scale(x), cc.moveTo(y)) .by(duration, {scale: x, moveTo: y}) // 同上 .to(duration, action, {easing: 'sineOutIn'}) // 同时制定缓动函数 .parallel( cc.tween().to(1, action), cc.tween().to(2, action), // 同步执行两个 cc.tween ) .call( () => {console.log("callback function.")} ) // 插入回调 .then(cc.tween().to()) // 嵌套组合 .repeat(times) // 重复以上所有动作 .delay(sec) // 延迟执行 .repeat(times, cc.tween()) // 仅重复这个动作 .start()
-
-
高级应用
-
执行顺序
-
手动控制。通过自定义load,update方法,统一控制
// Game.js const Player = require('Player'); const Enemy = require('Enemy'); const Menu = require('Menu'); cc.Class({ properties: { player: Player, enemy: Enemy, menu: Menu, }, onLoad: function() { this.player.init(); this.enemy.init(); this.menu.init(); }, update: function(dt) { this.player.updatePlayer(dt); this.enemy.updateEnemy(dt); this.menu.updateMenu(dt); } })
-
executionOrder
cc.Class({ editor: { executionOrder: -1 // 默认值0,值越小优先级越高 } });
-
-
网络请求
- XMLHttpRequest (Ajax)
- WebSocket
-
对象池
cc.NodePool
- 减少资源的重复创建与销毁
- 循环利用的大量
Prefab
unuse()
与reuse()
?
-