Cocos Creator 入门

Posted dapianzi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Cocos Creator 入门相关的知识,希望对你有一定的参考价值。

Cocos Createor

资源

场景

  1. 节点树
  2. 节点与组件
  3. 坐标系

脚本

  1. 组件声明,生命周期回调
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.");
    },
});
  1. 节点访问
    • 直接创建

      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);
  2. 场景加载
    • 直接加载

      cc.director.loadScene("MyScene");
    • 加载回调

      cc.director.loadScene("MyScene", onSceneLaunched);
      onSceneLaunched: function() {
          cc.game.addPersistRootNode(myNode); // 设置常驻节点,用以在不同场景间保留公共数据(角色信息等。。)
      }
    • 预加载

      cc.director.preloadSence("senceName", cbFn);
      cc.director.loadScene("sceneName");//后台静默加载,需要手动切换
  3. 资源加载
    • 资源可以作为属性进行设置,也可动态加载
    • 动态加载资源必须放在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);// 释放所有依赖资源
  4. 事件监听
    • 系统内置事件
    • 自定义事件
      • emit(event, args) 仅节点内
      • dispatchEvent(cc.Event.EventCustom(event, args)) 通过节点树冒泡传递,可通过event.stopPropagation()停止冒泡
  5. 动作/动画
    • 基本动作 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()
  6. 高级应用
    • 执行顺序
      • 手动控制。通过自定义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() ?

以上是关于Cocos Creator 入门的主要内容,如果未能解决你的问题,请参考以下文章

Cocos Creator游戏开发基础入门

cocos creator主程入门教程—— 初识creator

Cocos Creator 入门

cocos creator学习--骨骼动画入门教程

Cocos creatorCocos creator介绍和入门

cocos creator主程入门教程—— 日志系统