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() ?

原文地址:https://www.cnblogs.com/dapianzi/p/10743572.html

时间: 2024-08-15 08:06:14

Cocos Creator 入门的相关文章

cocos creator 入门理解点

简单解释, Cocos是触控科技推出的游戏开发一站式解决方案,包含了从新建立项.游戏制作.到打包上线的全套流程.开发者可以通过cocos快速生成代码.编辑资源和动画,最终输出适合于多个平台的游戏产品.Cocos的主要产品有Cocos Studio.Cocos2d-x(Cocos Framework).Cocos Code IDE. Q: Cocos Creator 是游戏引擎吗? A: 它是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现(不需要学习一个

关于Cocos Creator脚本执行顺序的几点补充

Cocos Creator开发远非初看起来那么容易,正早一些可视化开发语言,例如VB,入门很容易,但进入实战阶段,你很可能会发现问题一股脑儿出现.但是,不要怕,根本原因还在于你不熟悉它.其效率不必怀疑,而且官方的主打产品也正是它.开发中,深感官方关于Cocos Creator脚本执行顺序尚存在很多不详细或者透彻的地方:因此,本人结合最近一个时段的学习,作以下几点补充. 一,官方文档最重要 地址是:http://docs.cocos.com/creator/manual/zh/scripting/

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

参考:Mark_Liu--cocos creator--DragonBones 骨骼动画入门 1.首先在网上下载dragonBones 的文件解压后有三个文件 2.将文件夹放入cocos creator, 3.新建一个空结点并添加渲染组件dragonBones,新建一个js文件,将js文件和节点绑定.将资源的两个json文件放入dragonBones对应的框中 4.查看SwordsMan的json文件,搜索  gotoAndPlay  ,该关键字对应的就是动作名称 5.打开js文件,写入代码 c

cocos creator主程入门教程(一)—— 初识creator

四邑隐侠,本名关健昌,10年游戏生涯,现隐居四邑.本系列文章以TypeScript为介绍语言. 我们在cocos creator新建一个Hello TypeScript项目,都会有一个assets/Scene/helloworld.fire文件.使用cocos creator开发游戏时,项目可以只有一个.fire文件.一般地,我会把这个文件夹改名为assets/scene,下面只有main.fire文件:assets/scene/main.fire. 双击main.fire文件,在层级管理器可以

Cocos Creator 从“新手引导”到“自动化测试”

手新引导框架,自动化测试框架,先看一段视频: 点击此处观看视频 https://www.bilibili.com/video/av60001770/ 在线预览体验 http://example.creator-star.cn/demo-ui-autorun 注意,在电脑上预览才能体验自动引导功能! Shawn 刚开始只是为了完成新手引导功能点,同时要求引导代码要做非***式,尽量对游戏代码零干扰. 1. 步骤指令 当引导框架完成后,发现引导的配置工作效率低下,非程序员非项目程序员,上手困难,于是

cocos Creator js 房卡麻将/血战/H5四川麻将源码下载搭建

房卡麻将/血战/H5四川麻将 源码 支持iOS/Android/H5 完整源码 1.基于NODEJS+MYSQL的服务器,成熟的技术方案,高效稳定,且方便Windows开发,Linux平台布署,节约服务器运转成本. 2.采用最新版本的cocos引擎,cocos creator开发,可快速的进行界面调整.且能够快速地发布iOS,Android版本. 3.如需H5版本,只需针对H5平台进行资源优化即可. 4.成熟可靠的房卡式设计,能满足大部分用户使用体验. 5.产品经过大量测试,可以运转稳定. 测试

cocos creator随笔

接触一个月cocos creator做个笔记... 1.socket.io 封装了websocket , Ajax等,故任何浏览器都可以使用socket.io建立异步连接.websocket 双向需要握手建立连接,http 单向. 短连接:一次性交换数据,如登入,创建角色等  长连接:推送 (一) socket.emit('tell one person'); socket.broadcast.emit('tell to everyone'); socket.on('I heard',funct

【COCOS CREATOR 系列教程之四】基于0.7.1先简单制作一个PAGEVIEW

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos-creator/1999.html 由于当前版本还没有发布1.0,因此还有不少组件没有发布,那么Himi也看到Cocos Creator群里有几个童鞋问起过PageView的问题,那么Himi正好借此练手,基于当前版本制作一个PageView. 本文分为两部分进行讲解: 1. 制作PageView     2. 如何使用 一. 制作

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

[Cocos Creator ](千人群):  432818031 上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍. 所以希望童鞋们可以把我这两篇博文当成对组件.脚本两部分开发的整理与总结. 后续的文章,Himi应该主要更新一些官方还未补充或者还没有的教程.避免无用功. 下面直接放出代码,因为不是很难理解.所以不再一一赘述,都是常用的函数.事件监听.动作回调.定时器等开发过程中必接触的. 大致内容如下: cc 属性介绍 获