精华内容
下载资源
问答
  • CocosCreator教程demo集合

    2020-07-01 01:10:32
    CocosCreator教程demo集合
  • CocosCreator教程

    2017-12-17 12:52:00
    http://docs.cocos.com/creator/manual/zh/scripting/class.html 转载于:https://www.cnblogs.com/lilei9110/p/8051795.html

    http://docs.cocos.com/creator/manual/zh/scripting/class.html

    转载于:https://www.cnblogs.com/lilei9110/p/8051795.html

    展开全文
  • CocosCreator教程(入门篇)

    千次阅读 2019-09-20 17:39:34
    系列教程CocosCreator教程(初识篇)CocosCreator教程(编辑器篇) 一、项目结构 ProjectName(新建项目) ├──assets ├──library ├──local ├──packages ├──settings ├──temp └──project......

    目录
    一、项目结构
    二、资源分类
    三、资源小知识点
    四、场景小知识点
    五、子系统重点
    六、脚本开发
    七、发布游戏

    系列教程
    CocosCreator教程(初识篇)
    CocosCreator教程(编辑器篇)


    一、项目结构

    ProjectName(新建项目)
    ├──assets
    ├──library
    ├──local
    ├──packages
    ├──settings
    ├──temp
    └──project.json
    
    子结构功能
    assets与资源管理器的内容同步,游戏的核心目录(每个文件都有相应.meta文件)
    library这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式
    local编辑器使用习惯记录(如:窗体布局)
    settings项目设置
    project.json版本控制,必须与assets共同存在
    build打包导出目录,构建项目时,自动生成

    PS:.meta文件——记录某资源在项目中的唯一标识,以及其配置信息,只有在编辑器中对资源做修改,.meta文件才会实时变化。因此,不要在编辑器外,对资源的内容进行操作。


    二、资源分类

    1、场景(scene)

    自动释放资源:切换场景后,上一个场景中的资源,从内存中释放。
    延迟加载资源:意味着不用等待所有资源加载完毕,才显示场景。(快速切换场景,资源陆续在画面显示)

    2、贴图(texture)

    普通图,子层为一张spriteFrame。

    3、预制(prefab)

    创建方式:拖拽场景节点,到资源管理器。

    4、图集(atlas)

    精灵图,子层为多张spriteFrame。(精灵图合成软件:TexturePacker、Zwoptex)

    5、自动图集(auto-atlas)

    打包时,将所在目录中的所有碎图,合成为图集。

    6、艺术数字(label-atlas)

    数字为内容的图集。

    7、字体(font)

    动态字体:.ttf
    位图字体:.fnt + .png(存在于同一目录)

    8、粒子(particle)

    小型动画

    9、声音(audio)

    模式:web audio、dom audio

    10、骨骼动画(spine / dragonBones)

    文件格式功能
    .json骨骼数据
    .png图集纹理
    .txt / .atlas图集数据

    11、瓦片图(tiledMap)

    文件格式功能
    .tmx地图数据
    .png图集纹理
    .tsx tileset数据配置文件

    12、文本(text)

    13、脚本(script)

    14、json


    三、资源小知识点

    1、跨项目导入导出资源

    操作流程:
    (1)导出:文件 => 资源导出,选择 .fire场景文件,输出assets目录的 .zip压缩包。
    (2)导入:文件 => 资源导入,选择压缩包源路径、解压路径,输出assets目录内容。

    2、图像资源自动剪裁

    基于size mode,尽量去除spriteFrame无像素的部分,减小图片尺寸。


    四、场景小知识点

    1、场景中的元素,即是节点,可内嵌组件。

    2、坐标系

    类别坐标轴方向
    cocos坐标系(世界、本地坐标系)x右、y上、z外
    设备屏幕坐标系x右、y下

    3、锚点

    作用:用于变换、子节点定位基准。


    五、子系统重点

    1、渲染系统

    对摄像机、渲染组件的了解。

    2、UI系统

    对widget、layout等UI组件的了解。

    3、动画系统

    (1)创建动画的基本流程
    (2)时间曲线(双击动画线,进入编辑窗口)
    (3)事件管理(双击游标、加减按钮控制参数个数)
    (4)脚本控制

    4、物理系统

    碰撞组件(普通碰撞)
    (1)editing——是否为编辑模式
    (2)regenerate points——计算图形边界,自定生成控制点,数值为控制点的生成密度 / 准确度
    (3)ctrl + 点击——删除控制点
    (4)组件类型:矩形、圆形、多边形
    (5)设置碰撞组(项目 => 项目设置 => 分组设置):
    制定分组 => 匹配分组 => 碰撞组件所在节点上,设置所属分组
    (6)脚本控制

    Box2D物理引擎(高级碰撞)

    5、音频系统

    (1)audioSource组件
    (2)脚本控制


    六、脚本开发

    1、使用 cc.Class 声明类型

    (1)定义 CCClass

    var Sprite = cc.Class({
        //...
    });
    

    (2)实例化

    var obj = new Sprite();
    

    (3)判断类型

    cc.log(obj instanceof Sprite);       //使用原生JS的instanceof 
    

    (4)构造函数(ctor)

    var Sprite = cc.Class({
        //使用ctor声明构造函数
        ctor: function () {
            cc.log(this instanceof Sprite);
        }
    });
    

    (5)实例方法

    var Sprite = cc.Class({
        // 声明一个名叫 "print" 的实例方法
        print: function () { }
    });
    

    (6)继承(extends)

    // 父类
    var Shape = cc.Class();
    
    // 子类
    var Rect = cc.Class({
        //使用 extends 实现继承
        extends: Shape
    });
    

    (7)父构造函数

    var Shape = cc.Class({
        ctor: function () {
            cc.log("Shape");    // 实例化时,父构造函数会自动调用,
        }
    });
    
    var Rect = cc.Class({
        extends: Shape
    });
    
    var Square = cc.Class({
        extends: Rect,
        ctor: function () {
            cc.log("Square");   // 再调用子构造函数
        }
    });
    
    var square = new Square();
    

    (8)完整声明属性

    //简单类型声明
    properties: {
        score: {
            //这几个参数分别指定了 score 的默认值为 0,在 属性检查器 里,其属性名将显示为:“Score (player)”,并且当鼠标移到参数上时,显示对应的 Tooltip。
            default: 0,
            displayName: "Score (player)",
            tooltip: "The score of player",
        }
    }
    
    //数组声明
    properties: {
        names: {
            default: [],
            type: [cc.String]   // 用 type 指定数组的每个元素都是字符串类型
        },
    
        enemies: {
            default: [],
            type: [cc.Node]     // type 同样写成数组,提高代码可读性
        },
    }
    
    //get/set 声明
    properties: {
        width: {
            get: function () {
                return this._width;
            },
            set: function (value) {
                this._width = value;
            }
        }
    }
    

    properties常用参数

    参数作用
    default默认值
    type限定属性的数据类型
    visible若为false,则不在属性检查器面板中显示该属性
    serializable若为false,则不序列化(保存)该属性
    displayName在属性检查器面板中,显示成指定名字
    tooltip在属性检查器面板中,添加属性的Tooltip

    2、访问节点和组件

    (1)获得组件所在的节点

    this.node
    

    (2)获得其它组件

    this.getComponent(组件名)
    

    (3)获得其它节点及其组件

    // Player.js
    cc.Class({
        extends: cc.Component,
        properties: {
            player: {
                default: null,
                type: cc.Node
            }
        }
    });
    
    //如果你将属性的 type 声明为 Player 组件,当你拖动节点 "Player Node" 到 属性检查器,player 属性就会被设置为这个节点里面的 Player 组件
    // Cannon.js
    var Player = require("Player");
    cc.Class({
        extends: cc.Component,
        properties: {
            // 声明 player 属性,这次直接是组件类型
            player: {
                default: null,
                type: Player
            }
        }
    });
    
    //查找子节点
    //返回子节点数组
    this.node.children
    //返回对应的子节点
    this.node.getChildByName(子节点名);
    //查找后代节点
    cc.find(子节点/.../后代节点, this.node);
    //全局查找节点
    cc.find(场景/节点/节点/...);
    

    (4)访问已有变量里的值(通过模块访问)

    //专门开设一个中介模块,导出接口;在其他模块进行节点、组件、属性的操作
    // Global.js
    module.exports = {
        backNode: null,
        backLabel: null,
    };
    
    // Back.js
    var Global = require("Global");
    cc.Class({
        extends: cc.Component,
        onLoad: function () {
            Global.backNode = this.node;
            Global.backLabel = this.getComponent(cc.Label);
        }
    });
    
    // AnyScript.js
    var Global = require("Global");
    cc.Class({
        extends: cc.Component,
        start: function () {
            var text = "Back";
            Global.backLabel.string = text;
        }
    });
    

    3、常用节点和组件接口

    (1)节点状态和层级操作

    //激活/关闭节点
    this.node.active = true;
    this.node.active = false;
    
    //更改节点的父节点
    this.node.parent = parentNode;
    
    //索引节点的子节点
    //返回子节点数组
    this.node.children
    //返回子节点数量
    this.node.childrenCount
    

    (2)更改节点的变换(位置、旋转、缩放、尺寸)

    //更改节点位置
    //分别对 x 轴和 y 轴坐标赋值
    this.node.x = 100;
    this.node.y = 50;
    //使用setPosition方法
    this.node.setPosition(100, 50);
    this.node.setPosition(cc.v2(100, 50));
    //设置position变量
    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.anchorX = 1;
    this.node.anchorY = 0;
    this.node.setAnchorPoint(1, 0);
    

    (3)颜色和不透明度

    //设置颜色
    mySprite.node.color = cc.Color.RED;
    //设置不透明度
    mySprite.node.opacity = 128;
    

    (4)常用组件接口
    cc.Component 是所有组件的基类,任何组件都包括如下的常见接口:

    接口作用
    this.node该组件所属的节点实例
    this.enabled是否每帧执行该组件的 update 方法,同时也用来控制渲染组件是否显示
    update(dt)作为组件的成员方法,在组件的 enabled 属性为 true 时,其中的代码会每帧执行
    onLoad()组件所在节点进行初始化时(节点添加到节点树时)执行
    start()会在该组件第一次 update 之前执行,通常用于需要在所有组件的 onLoad 初始化完毕后执行的逻辑

    4、生命周期

    函数名描述
    onLoad在节点首次激活时触发,或者所在节点被激活的情况下触发
    start在组件首次激活前
    update动画更新前
    lateUpdate动画更新后
    onEnable当组件的 enabled 属性从 false 变为 true 时,或者所在节点的 active 属性从 false 变为 true 时(倘若节点首次被创建且 enabled 为 true,则会在 onLoad 之后,start 之前被调用)
    onDisable当组件的 enabled 属性从 true 变为 false 时,或者所在节点的 active 属性从 true 变为 false 时
    onDestroy当组件或者所在节点调用了 destroy()时

    5、创建和销毁节点

    (1)创建新节点

    cc.Class({
      extends: cc.Component,
      properties: {
        sprite: {
          default: null,
          type: cc.SpriteFrame,
        },
      },
      start: function () {
        //动态创建节点,并将它加入到场景中
        var node = new cc.Node('Sprite');
        var sp = node.addComponent(cc.Sprite);
        sp.spriteFrame = this.sprite;
        node.parent = this.node;
      }
    });
    

    (2)克隆已有节点

    //
    cc.Class({
      extends: cc.Component,
      properties: {
        target: {
          default: null,
          type: cc.Node,
        },
      },
      start: function () {
        //克隆场景中的已有节点
        var scene = cc.director.getScene();
        var node = cc.instantiate(this.target);
        node.parent = scene;
        node.setPosition(0, 0);
      }
    });
    

    (3)创建预制节点

    //
    cc.Class({
      extends: cc.Component,
      properties: {
        target: {
          default: null,
          type: cc.Prefab,    //预制
        },
      },
      start: function () {
        var scene = cc.director.getScene();
        var node = cc.instantiate(this.target);
        node.parent = scene;
        node.setPosition(0, 0);
      }
    });
    

    (4)销毁节点

    //
    cc.Class({
      extends: cc.Component,
      properties: {
        target: cc.Node,
      },
      start: function () {
        // 5 秒后销毁目标节点
        //销毁节点并不会立刻被移除,而是在当前帧逻辑更新结束后,统一执行
        setTimeout(function () {
          this.target.destroy();
        }.bind(this), 5000);
      },
      update: function (dt) {
        //判断当前节点是否已经被销毁
        if (cc.isValid(this.target)) {
          this.target.rotation += dt * 10.0;
        }
      }
    });
    

    PS:不要使用removeFromParent去销毁节点。
    原因:调用一个节点的 removeFromParent 后,它不一定就能完全从内存中释放,因为有可能由于一些逻辑上的问题,导致程序中仍然引用到了这个对象。

    6、加载和切换场景

    (1)加载和切换

    //从当前场景,切换到MyScene场景
    cc.director.loadScene("MyScene");
    

    (2)通过常驻节点,进行场景资源管理和参数传递

    //常驻节点:不随场景切换,而自动销毁,为所有场景提供持久性信息
    //设置常驻节点
    cc.game.addPersistRootNode(myNode);
    //取消常驻节点,还原为一般场景节点
    cc.game.removePersistRootNode(myNode);
    

    (3)场景加载回调

    //fn:加载MyScene场景时触发
    cc.director.loadScene("MyScene", fn);
    

    (4)预加载场景

    //后台预加载场景
    cc.director.preloadScene("MyScene", fn);
    //有需要时,手动加载该场景
    cc.director.loadScene("MyScene", fn);
    

    7、获取和加载资源

    (1)资源属性的声明

    // NewScript.js
    cc.Class({
        extends: cc.Component,
        properties: {
            //所有继承自 cc.Asset 的类型都统称资源,如 cc.Texture2D, cc.SpriteFrame, cc.AnimationClip, cc.Prefab 等
            texture: {
                default: null,
                type: cc.Texture2D
            },
            spriteFrame: {
                default: null,
                type: cc.SpriteFrame
            }
        }
    });
    

    (2)静态加载(在属性检查器里设置资源)

    // NewScript.js
    onLoad: function () {
        //拖拽资源管理器的资源,到属性检查器的脚本组件中,即可在脚本里拿到设置好的资源
        var spriteFrame = this.spriteFrame;
        var texture = this.texture;
        spriteFrame.setTexture(texture);
    }
    

    (3)动态加载

    //动态加载的资源,需要存放于assets的子目录resources中
    
    //加载单个资源
    //cc.loader.loadRes(resources的相对路径, 类型(可选), 回调函数)
    //加载Prefab资源
    cc.loader.loadRes("test assets/prefab", function (err, prefab) {
        var newNode = cc.instantiate(prefab);
        cc.director.getScene().addChild(newNode);
    });
    //加载SpriteFrame
    var self = this;
    cc.loader.loadRes("test assets/image", cc.SpriteFrame, function (err, spriteFrame) {
        self.node.getComponent(cc.Sprite).spriteFrame = spriteFrame;
    });
    
    //批量加载资源
    //cc.loader.loadResDir(resources的相对路径, 类型(可选), 回调函数)
    //加载test assets目录下所有资源
    cc.loader.loadResDir("test assets", function (err, assets) {
        // ...
    });
    //加载test assets目录下所有SpriteFrame,并且获取它们的路径
    cc.loader.loadResDir("test assets", cc.SpriteFrame, function (err, assets, urls) {
        // ...
    });
    
    //资源浅释放
    //cc.loader.releaseRes(resources的相对路径, 类型(可选))
    cc.loader.releaseRes("test assets/image", cc.SpriteFrame);
    cc.loader.releaseRes("test assets/anim");
    //cc.loader.releaseAsset(组件名)
    cc.loader.releaseAsset(spriteFrame);
    
    // 资源深释放,释放一个资源以及所有它依赖的资源
    var deps = cc.loader.getDependsRecursively('prefabs/sample');
    

    (4)加载远程资源和设备资源

    //加载远程资源
    //远程 url 带图片后缀名
    var remoteUrl = "http://unknown.org/someres.png";
    cc.loader.load(remoteUrl, function (err, texture) {
        //...
    });
    //远程 url 不带图片后缀名,此时必须指定远程图片文件的类型
    remoteUrl = "http://unknown.org/emoji?id=124982374";
    cc.loader.load({url: remoteUrl, type: 'png'}, function () {
        //...
    });
    
    //加载设备资源
    //用绝对路径加载设备存储内的资源,比如相册
    var absolutePath = "/dara/data/some/path/to/image.png"
    cc.loader.load(absolutePath, function () {
        //...
    });
    

    加载限制:
    1、原生平台远程加载不支持图片文件以外类型的资源。
    2、这种加载方式只支持图片、声音、文本等原生资源类型,不支持SpriteFrame、SpriteAtlas、Tilemap等资源的直接加载和解析。(需要后续版本中的AssetBundle支持)
    3、Web端的远程加载受到浏览器的CORS跨域策略限制,如果对方服务器禁止跨域访问,那么会加载失败,而且由于WebGL安全策略的限制,即便对方服务器允许http请求成功之后也无法渲染。

    (5)资源的依赖和释放

    // 直接释放某个贴图
    cc.loader.release(texture);
    // 释放一个 prefab 以及所有它依赖的资源
    var deps = cc.loader.getDependsRecursively('prefabs/sample');
    cc.loader.release(deps);
    // 如果在这个 prefab 中有一些和场景其他部分共享的资源,你不希望它们被释放,可以将这个资源从依赖列表中删除
    var deps = cc.loader.getDependsRecursively('prefabs/sample');
    var index = deps.indexOf(texture2d._uuid);
    if (index !== -1)
        deps.splice(index, 1);
    cc.loader.release(deps);
    

    8、监听和发射事件

    (1)监听事件

    //target是可选参数,用于绑定响应函数的调用者
    //boolean是可选参数,默认为false,表示冒泡流
    this.node.on(event, fn, target, boolean);
    

    (2)关闭监听

    this.node.off(event, fn, target, boolean);
    

    (3)发射事件

    //为事件函数,提供参数,最多5个
    this.node.emit(event, arg1, arg2, arg3);
    

    (4)派送事件

    //grandson.js
    //升级版的on,冒泡到的节点,全部注册事件
    this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );
    
    //father.js
    //在指定的上级节点中,注册相同的事件,阻止事件冒泡,手动停止派送
    this.node.on('foobar', function (event) {
      event.stopPropagation();
    });
    

    (5)事件对象(回调参数的event对象)

    API 名类型意义
    typeString事件的类型(事件名)
    targetcc.Node接收到事件的原始对象
    currentTargetcc.Node接收到事件的当前对象,事件在冒泡阶段当前对象可能与原始对象不同
    getTypeFunction获取事件的类型
    stopPropagationFunction停止冒泡阶段,事件将不会继续向父节点传递,当前节点的剩余监听器仍然会接收到事件
    stopPropagationImmediateFunction立即停止事件的传递,事件将不会传给父节点以及当前节点的剩余监听器
    getCurrentTargetFunction获取当前接收到事件的目标节点
    detailFunction自定义事件的信息(属于 cc.Event.EventCustom)
    setUserDataFunction设置自定义事件的信息(属于 cc.Event.EventCustom)
    getUserDataFunction获取自定义事件的信息(属于 cc.Event.EventCustom)

    9、节点系统事件

    (1)鼠标事件类型和事件对象

    枚举对象定义对应的事件名事件触发的时机
    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当鼠标滚轮滚动时
    函数名返回值类型意义
    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

    (2)触摸事件类型和事件对象

    枚举对象定义对应的事件名事件触发的时机
    cc.Node.EventType.TOUCH_STARTtouchstart当手指触点落在目标节点区域内时
    cc.Node.EventType.TOUCH_MOVEtouchmove当手指在屏幕上目标节点区域内移动时
    cc.Node.EventType.TOUCH_ENDtouchend当手指在目标节点区域内离开屏幕时
    cc.Node.EventType.TOUCH_CANCELtouchcancel当手指在目标节点区域外离开屏幕时
    API 名类型意义
    touchcc.Touch与当前事件关联的触点对象
    getIDNumber获取触点的 ID,用于多点触摸的逻辑判断
    getLocationObject获取触点位置对象,对象包含 x 和 y 属性
    getLocationXNumber获取触点的 X 轴位置
    getLocationYNumber获取触点的 Y 轴位置
    getPreviousLocationObject获取触点上一次触发事件时的位置对象,对象包含 x 和 y 属性
    getStartLocationObject获取触点初始时的位置对象,对象包含 x 和 y 属性
    getDeltaObject获取触点距离上一次事件移动的距离对象,对象包含 x 和 y 属性

    (3)其它事件

    枚举对象定义对应的事件名事件触发的时机
    position-changed当位置属性修改时
    rotation-changed当旋转属性修改时
    scale-changed当缩放属性修改时
    size-changed当宽高属性修改时
    anchor-changed当锚点属性修改时

    PS:枚举对象定义、事件名等价,在回调参数中,作用相同。

    10、全局系统事件

    //全局系统事件的类型
    cc.SystemEvent.EventType.KEY_DOWN    //键盘按下
    cc.SystemEvent.EventType.KEY_UP    //键盘释放
    cc.SystemEvent.EventType.DEVICEMOTION    //设备重力传感
    
    //绑定、解除全局系统事件
    cc.systemEvent.on(event, fn, target, boolean);
    cc.systemEvent.off(event, fn, target, boolean);
    

    11、动作系统(变换系统)

    (1)动作控制

    // 执行动作
    node.runAction(action);
    // 停止一个动作
    node.stopAction(action);
    // 停止所有动作
    node.stopAllActions();
    
    // 给 action 设置 tag
    var ACTION_TAG = 1;
    action.setTag(ACTION_TAG);
    // 通过 tag 获取 action
    node.getActionByTag(ACTION_TAG);
    // 通过 tag 停止一个动作
    node.stopActionByTag(ACTION_TAG);
    

    (2)容器动作

    //顺序执行
    cc.sequence(action1, action2, ...);
    //并发执行
    cc.spawn(action1, action2, ...);
    //指定次数,重复执行
    cc.repeat(action, times)
    //无限次数,重复执行
    cc.repeatForever(action)
    //改变动作速度倍率,再执行
    cc.speed(action, rate)
    

    (3)即时动作

    cc.show()    //立即显示
    cc.hide()    //立即隐藏
    ...
    

    (4)时间间隔动作

    cc.moveTo()    //移动到目标位置
    cc.rotateTo()    //旋转到目标角度
    cc.scaleTo()    //将节点大小缩放到指定的倍数
    ...
    

    (5)动作回调

    var finished = cc.callFunc(fn, target, arg);
    

    (6)缓动动作

    var action = cc.scaleTo(0.5, 2, 2);
    //使用easeIn曲线,丰富动作表现
    action.easing(cc.easeIn(3.0));
    ...
    

    PS:可以使用缓动系统,代替动作系统。(缓动系统的API更简约)

    12、计时器

    //interval:以秒为单位的时间间隔
    //repeat:重复次数
    //delay:开始延时
    this.schedule(fn, interval, repeat, delay)
    this.unschedule(fn)
    

    13、脚本执行顺序

    editor: {
            //executionOrder越小,该组件相对其它组件就会越先执行(默认为0)
            //executionOrder只对 onLoad, onEnable, start, update 和 lateUpdate 有效,对 onDisable 和 onDestroy 无效
            executionOrder: 1
        }
    

    14、标准网络接口

    (1)XMLHttpRequest——短连接
    (2)WebSocket——长连接

    15、对象池

    对象池的概念
    在同一场景中,需要多次进行节点的生成、消失时,假如直接进行创建、销毁的操作,就会很浪费性能。因此,使用对象池,存储需要消失的节点,释放需要生成的节点,达到节点回收利用的目的。

    工作流程
    (1)初始化对象池

    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 接口放入对象池
        }
    }
    

    (2)从对象池请求对象

    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 身上的脚本进行初始化
    }
    

    (3)将对象返回对象池

    onEnemyKilled: function (enemy) {
        // enemy 应该是一个 cc.Node
        this.enemyPool.put(enemy); // 和初始化时的方法一样,将节点放进对象池,这个方法会同时调用节点的 removeFromParent
    }
    

    清除对象池

    //手动清空对象池,销毁其中缓存的所有节点
    myPool.clear();
    

    七、发布游戏

     

     

     

     

     

     

    展开全文
  • Cocos Creator 教程:生成二维码

    千次阅读 2019-06-14 17:05:24
    Cocos Creator 教程:生成二维码 96 Leo501 关注 2018.04.27 14:18* 字数 405 阅读 1662评论 0喜欢 6 一般做应用推广时,都会做一个自己的推广二维码。由于每个人的推广二维码都不一样,这就需要前端用代码生成属于...

    Cocos Creator 教程:生成二维码
    96 Leo501 关注
    2018.04.27 14:18* 字数 405 阅读 1662评论 0喜欢 6
    一般做应用推广时,都会做一个自己的推广二维码。由于每个人的推广二维码都不一样,这就需要前端用代码生成属于用户个人的推广二维码。话不多说,下面讲解如何用Creator 生成用户专属推广二维码,文章最后会给出Demo供大家参考。
    pic1
    二维码生成库

    使用QRcode二维码生成库。不过这个库是H5专用的,不过我们可以曲线救国,使用Creator的画图组件cc.Graphics,把二维码画出来。下面给出如何通过Url得到二维码的黑白方块数据。

    let qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
    qrcode.addData(url);
    qrcode.make();
    不过如果Url中带有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码,即:

    let url=toUtf8(‘Cocos Creator 教程:生成二维码’);
    还有要注意微博扫一扫:大约200 字以内,微信扫一扫:大约 160字以内,支付宝扫一扫:大约130字符以内,所以一般链接不能太长。

    设置插件

    这一步需要把QRcode设置成插件,看图pic2:

    pic2.png
    完整代码

    cc.Class({
    extends: cc.Component,
    properties: {

    },
    // use this for initialization
    onLoad() {
        this.init('http://forum.cocos.com/t/topic/44304/9');
    },
    
    init(url){
        var ctx = this.node.addComponent(cc.Graphics);
        if (typeof (url) !== 'string') {
            console.log('url is not string',url);
            return;
        }
        this.QRCreate(ctx, url);
    },
    
    QRCreate(ctx, url) {
        var qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
        qrcode.addData(url);
        qrcode.make();
    
        ctx.fillColor = cc.Color.BLACK;
        //块宽高
        var tileW = this.node.width / qrcode.getModuleCount();
        var tileH = this.node.height / qrcode.getModuleCount();
    
        // draw in the Graphics
        for (var row = 0; row < qrcode.getModuleCount(); row++) {
            for (var col = 0; col < qrcode.getModuleCount(); col++) {
                if (qrcode.isDark(row, col)) {
                    // ctx.fillColor = cc.Color.BLACK;
                    var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
                    var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
                    ctx.rect(Math.round(col * tileW), Math.round(row * tileH), w, h);
                    ctx.fill();
                }
            }
        }
    },
    

    });
    注意:最好把节点长宽设置为2的倍数。不然可能会出现无法识别二维码

    展开全文
  • Cocos Creator教程 第一弹

    万次阅读 2017-11-21 12:17:38
    触控科技开发的CocosCreator开发工具是的Cocos2d开发和Unity开发更加相似,使用CocosCreator开发2d游戏变得更加便捷快速,之后半年利用做毕业设计的闲暇之余学习使用Cocos Creator开发2d的游戏,主要是看触控科技...

    本节源码下载:

    链接: http://pan.baidu.com/s/1jIPYHOM  密码: 5zae


    触控科技开发的CocosCreator开发工具是的Cocos2d开发和Unity开发更加相似,使用CocosCreator开发2d游戏变得更加便捷快速,之后半年利用做毕业设计的闲暇之余学习使用Cocos Creator开发2d的游戏,主要是看触控科技官方提供的ExampleProject的源码来大致的模仿实现:


    Cocos Creator官方文档: http://www.cocos.com/

    Cocos Creator开发文档: http://www.cocos.com/docs/creator/

    Cocos Creator的ExampleProject项目下载文档:https://github.com/cocos-creator/example-cases (也可以直接在Cocos Creator新建项目那选择 新建范例工程)


    Cocos2d-JS开发的第一弹中,首先开发一个下面的界面:


    [说明]

    点击Menu的按键(绿色按键)会有事件相应,点击List的某一Item会有相应的事件相应。


    项目的结构:

              


    (一)绘制背景Sprite([层级管理器]中的background组件)

    background为一个Sprite,在[层级管理器]中 创建Sprite精灵,选中该Sprite精灵之后,在[属性检查器]中修改Sprite的属性:


    (1)将选中的背景图片(e.g. singleColor.png)从[资源管理器]中通过拖拽的方式添加到Sprite的[Sprite Frame]属性框中;

    (2)在[添加组件]处为Sprite添加Widget属性(添加组件-添加UI组件-Widget):


    [说明]Widget的作用是为了使得组件更好的适配父节点的大小,其中的Left,Top,Right和Bottom分别为该组件相对于父节点左边缘,上边缘,右边缘和下边缘的距离,可以使用px直接指定,也可以使用10%这样来制定是父节点长/宽度的百分比,这四项中打勾的表示该项起作用,下边的Horizontal Center和Vertical Center将会相对于父节点的横向置中,和垂直置中。


    经过上面的步骤,就完成了背景Sprite的绘制。


    (二)绘制选项节点([层级管理器]中的Menu组件)

    (1)在Canvas节点中建立Menu组件(为Sprite组件,并设置Widget属性,让其铺满父节点Canvas),并在[属性管理器]中Sprite的Sprite Frame属性框中设置为None:


    这样Menu铺满父节点Canvas,但不会覆盖父节点的背景。

    (2)在Menu节点中新建两个Button节点([层级管理器]中的btnBack和btnInfo),Button组件默认带一个Label子节点,选中Label组件,可以在[属性检查器]中Label-String属性处修改 按键上文字内容:


    选中Button组件之后,在[属性检查器]中可以看到一个Button组件默认有Sprite属性和Button属性,那么可以通过从[资源管理器]中拖拽图片的方式,添加到Button组件的Sprite属性的Sprite Frame属性框中,从而改变Button组件的背景图片:


    拖拽图片到Button的Sprite属性的Sprite Frame框后,可以看到Button的背景图片改变了,但是Button的边框出现模糊,这是因为Button的尺寸大于图片的尺寸,从而出现了模糊现象,此时我们展开[资源管理器]中Texture文件夹中对应的图片文件,双击可以打开[Editor Window]对话框处理图片:


    拖拽[Editor Window]中图片上的四条绿色的线,来设置图片的属性,{完成这一修改之后,一定要点击[Editor Window右上角绿色的对号进行属性保存]},至于为什么要这么修改,其实就和Android开发中的9patch图片的原理一直,当组件的尺寸大于图片尺寸的时候,要对图片进行拉伸,这四条线表示只拉伸四条线围成矩形框内的像素点,矩形框外部的像素点不会被拉伸,只会保持原来图片的像素。


    完成上面的操作之后,还需要将Button组件的Sprite属性的Type属性选项修改为SLICED:


    这样,我们的按键的效果看起来就舒服多了:



    (3)完成上述操作之后,分别为两个Button节点在[属性检查器]中添加Widget属性(添加组件-添加UI组件-Widget),将两个Button组件放置在界面的左上角 和 右上角,以[查看说明]Button为例(在界面的左上角):



    (4)为Button添加点击效果

    完成上面所有的操作之后,运行,在网页上点击发现按键并没有点击效果,如何做到点击的时候会有点击效果,选中Button组件,在[属性检查器]中Button属性下面可以看到:

    上图一中,Button属性的Transition属性选择框,有None,SPRITE,COLOR,SCALE四个选项,可以设置Button被点击的效果,None表示没有点击效果(默认),SPRITE表示点击效果使用Sprite精灵来展示,COLOR表示点击效果使用颜色变化来展示,SCALE表示Button被点击的时候改变其大小,下面以COLOR为例:


    上图中,Normal表示常态Button的颜色,Pressed表示Button被按下的颜色,Hover表示鼠标移动到该Button上之后Button的显示状态,按需求点击颜色选择条进行颜色设定。


    (5)为Button添加点击相应事件_需要js脚本

    首先在[资源管理器]中assets/Script文件下新建一个名为Menu.js的脚本文件,新建完成之后,打开脚本文件会发现,文件根是一个cc.Class,这是cocosJS中的类的声明方式,内部有:

    [javascript] view plain copy
    1. extends: cc.Component,  
    2.   
    3. properties: {  
    4.           
    5. }  
    其中,extends表示该类即成自cc.Component组件,properties中声明该类的本地变量,以后可以通过this.propertyName来进行引用。除此之外,一个重要的函数为onLoad方法,当该类被加载的时候,就会调用此方法,可以在其中做一些初始化的操作,我们在 Menu.js中添加如下的代码:
    [javascript] view plain copy
    1. cc.Class({  
    2.     extends: cc.Component,  
    3.   
    4.     properties: {  
    5.         btnInfo: {  
    6.             defaultnull,  
    7.             type: cc.Button  
    8.         },  
    9.         btnBack: {  
    10.             defaultnull,  
    11.             type: cc.Button  
    12.         }  
    13.     },  
    14.   
    15.     backToList: function(){  
    16.         cc.log("backToList Button Clicked!")  
    17.     },  
    18.   
    19.     showReadme: function(){  
    20.         cc.log("showReadme Button Clicked!")  
    21.     }  
    22. });  

    添加完上面的代码之后,我们将该脚本文件添加给Menu节点:

    [方法一]:在[层次管理器]中点选中Menu节点,此时[属性检查器]中显示Menu节点的属性,从[资源管理器]中拖拽Menu.js脚本到[属性管理器]进行脚本添加;

    [方法二]:在[层次管理器]中点选中Menu节点,此时[属性检查器]中显示Menu节点的属性,点击 添加组件-添加用户脚本组件,便可以看到 已经在[资源管理器]中添加的所有的脚本文件,点选需要添加的Menu.js文件:


    从[层级管理器]中拖拽对应的组件到上图中的 Btn Info属性框和Btn Back属性框中进行数据添加:



    接下来,在[层级管理器]中点选中btnBack组件,在[属性检查器]中修改按键的属性,在Button属性栏中,首先将Click Events属性框修改为1,表示为Button绑定一个Click事件,此时就会出现 [0]事件编号,将[层级管理器]中的Menu节点拖拽添加到第一个属性框中(cc.Node),点击后面第一个下拉菜单,可以看到Menu节点上绑定的所有脚本,选中Menu.js的脚本,再继续点选后面的下拉框,可以看到Mneu.js脚本文件中已经添加的函数,选择事先写好的Btn Back的Click相应函数,这样就为[层级管理器]中的btnBack按键绑定了Click事件:



    (三)绘制MenuList节点

    首先给Canvas节点添加一个ScrollView组件,可以看到,ScrollView包含两部分,一个scrollbar,另一个是content,即为List内容显示部分,为了让ScrollView组件能够更好的适配父节点的大小,通过为ScrollView,子节点view以及content设置Widget属性控制其大小,让组件铺满整个父节点:


    需要说明,view节点是ScrollView显示区域,一般的要和ScrollView的大小一致,或比ScrollView稍小,以便能够看到List中的全部内容,view的字节点content是ScrollView将要显示的全部内容,其大小可以大于ScrollView和view,也可以小于,大于父节点大小之后,便可以通过拖拽来查看view之外的部分,所以一般不勾选content的Widget属性中Bottom属性项。

    (1)首先绘制ListItem,并制作Item-Prefabs

    在[场景绘制器]中绘制MenuList中单个Item,在content添加一个Sprite字节点,通过拖拽修改Sprite的Sprite Frame中的背景图片,为了让图片不出现失真的情况,需要对图片进行Editor:


    为了让Item可以显示 文字信息,可以为其 添加一个Label字节点,并在[属性检查器]中修改 Label的Color,修改文字颜色,为Label添加Widget属性,让Label适配父节点,需要注意的是,要修改Label的的Overflow属性为CLAMP,Label才能够铺满父节点:



    完成上面的步骤之后,在[层级管理器]中可以看到Item的结构:


    将上面的mainMenuItem拖拽到[资源管理器]中assets/Prefabs文件夹下,同时删除[层级管理器]中mainMenuItem节点:


    这样就完成了Prefab的制作,下面再为Prefab添加一个控制脚本,为不同index的Item设置不同的内容(mainMenuItem.js):

    [javascript] view plain copy
    1. cc.Class({  
    2.     extends: cc.Component,  
    3.   
    4.     properties: {  
    5.         label: {  
    6.             defaultnull,  
    7.             type: cc.Label  
    8.         },  
    9.         index: -1  
    10.     },  
    11.   
    12.     updateItem(index, name){  
    13.         this.index = index;  
    14.         this.label.string = name  
    15.     },  
    16.   
    17.     itemClickedEvent: function(){  
    18.         cc.log(this.index)  
    19.     }  
    20. });  

    上面的代码中,为每一个Prefab设置了两个property属性,一个是显示内容的Label组件,另外一个是该Prefab-Item的index,实例化Prefab-Item之后,调用对象的updateItem方法来显示内容,并定义了Item被点击的响应事件,在[资源管理器]中双击选中assets/Prefabs/mainMenuItem,并将上面的脚本文件mainMenuItem.js拖拽添加到mainMenuItem-Prefab的属性管理器中,并将mainMainItem的字节点labelContent拖拽到脚本文件的Label属性框中:



    为了让每一个Item有点击事件,还需要给每个Item-Sprite添加一个Button属性,并修改Click Events属性设置,在[资源管理器]中双击选中assets/Prefabs/mainMenuItem,在[资源管理器]中通过 添加组件-添加UI组件-Button  来添加:



    (2)为ScrollView动态的添加Item

    ScrollView中显示的Item都是添加到其content节点中的,所以需要编写js脚本文件,进行动态添加(SceneList.js):

    [javascript] view plain copy
    1. cc.Class({  
    2.     extends: cc.Component,  
    3.   
    4.     properties: {  
    5.         itemPrefab: {  
    6.             defaultnull,  
    7.             type: cc.Prefab  
    8.         },  
    9.         initItemCount: 0,  
    10.         scrollView: {  
    11.             defaultnull,  
    12.             type: cc.ScrollView  
    13.         },  
    14.         bufferZone: 0,  
    15.         itemContents: []  
    16.     },  
    17.   
    18.     init(menu) {  
    19.         this.menu = menu;  
    20.         this.itemContents = this.getMainMenuContent();  
    21.         this.initList();  
    22.     },  
    23.   
    24.     initList(){  
    25.         var count = this.itemContents.length  
    26.         for (let i = 0; i < count; i++){  
    27.             // 通过cc.instantiate方法生成了一个Prefab节点  
    28.             let item = cc.instantiate(this.itemPrefab);  
    29.             // 获得节点上的名称为mainMenuItem的属性,这里就是该Prefab对象的脚本熟悉  
    30.             // 因为脚本文件中包含了 Prefab 内容显示的组件,所以可以通过该脚本属性完成很多事情  
    31.             var itemComp = item.getComponent('mainMenuItem')  
    32.             // 直接调用脚本属性的动态方法,来操作Prefab对象  
    33.             itemComp.updateItem(i, this.itemContents[i])  
    34.   
    35.             // 下面是通过脚本属性获得 显示内容的组件,  
    36.             // 从而改变组件显示的内容  
    37.             // var label = itemComp.label  
    38.             // label.string = this.itemContents[i]  
    39.             this.scrollView.content.addChild(item)  
    40.         }  
    41.     },  
    42.   
    43.     // 自定义的脚本文件,获取 场景Scene的列表,  
    44.     // cc.game.__sceneInfos可以获取得到  
    45.     getMainMenuContent(){  
    46.         var array = ["第一个场景""第二个场景""第三个场景""第四个场景""第五个场景""第六个场景"]  
    47.         return array  
    48.     },  
    49.   
    50.     // called every frame, uncomment this function to activate update callback  
    51.     // update: function (dt) {  
    52.   
    53.     // },  
    54. });  

    上面的代码中,我们可以看到,当要显示ScrollView中内容的时候,需要实例化该cc.Component组件,并调用自定义的init方法来初始化列表,在initList方法中,使用了cc.instantiate方法实例话一个item-Prefab对象,并通过addChild方法将这个实例化之后的item添加给ScrollView的content节点中。


    接下来,将上面的脚本SceneList.js添加到ScrollView的content上,并从[层级管理器]中通过拖拽添加相应的属性项:



    (3)在Menu中初始化List数据:

    我们想在Menu被初始化的过程中同时初始化MenuList数据,就需要在Menu的onLoad函数中实例化SceneList,并调用对象的自定义方法init来初始化List,修改Menu.js脚本文件:

    [javascript] view plain copy
    1. Menu.js 代码:  
    2. cc.Class({  
    3.     extends: cc.Component,  
    4.   
    5.     properties: {  
    6.         btnInfo: {  
    7.             defaultnull,  
    8.             type: cc.Button  
    9.         },  
    10.         btnBack: {  
    11.             defaultnull,  
    12.             type: cc.Button  
    13.         },  
    14.         menuList: {  
    15.             defaultnull,  
    16.             type: cc.ScrollView  
    17.         }  
    18.     },  
    19.   
    20.     // use this for initialization  
    21.     onLoad: function () {  
    22.         // 通常只会加载一个场景,当场景发生切换的时候,默认会将原来场景中所有的节点和实例销毁,  
    23.         // 如果我们需要某个组建进行其他场景的加载,或者在场景之间加载数据,那么就需要将该组件  
    24.         // 标记为[常驻节点],使其不被自动销毁,就需要调用cc.game.addPersistRootNode(node)  
    25.   
    26.         // this.node 会获得组建所在的节点对象  
    27.         cc.game.addPersistRootNode(this.node);  
    28.         this.node.zIndex = 999  
    29.   
    30.         if (this.menuList && this.menuList.content){  
    31.             this.sceneList = this.menuList.content.getComponent("SceneList");  
    32.             this.sceneList.init(this);  
    33.             cc.log("加载完成....")  
    34.         }  
    35.     },  
    36.   
    37.     backToList: function(){  
    38.         cc.log("backToList Button Clicked!")  
    39.     },  
    40.   
    41.     showReadme: function(){  
    42.         cc.log("showReadme Button Clicked!")  
    43.     }  
    44. });  

    并将ScrollView拖拽到脚本文件的属性框中:



    运行项目,可以看到的效果:



    发现所有的List-Item全部都叠加到了一起,因为Item都是添加到ScrollView的content子节点中的,所以需要为content子节点设置Layout属性,在[层级管理器]中选中content节点,[属性管理器]中通过 添加组件-添加UI组件-Layout  来添加布局属性,并进行修改:



    添加Layout属性之后的效果:

    展开全文
  • Cocos Creator 是触控科技旗下的产品,以内容创作为核心的游戏开发工具,在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。 这里给大家推荐一个cocos creator学习交流群 屏幕适配是cocos creator...
  • 主要简单讲解下坐标系统,由于Creator是基于Cocos2dx,也就是使用OpenGL的坐标系,即原点在屏幕左下角,x轴向右,y轴向上。然后讲解下本地坐标与世界坐标,最后讲下坐标转换。 点击链接加入群聊【unity/cocos交流二...
  • Cocos Creator教程:截图&切图

    千次阅读 2019-09-24 17:45:04
    下面讲解下如何通过Cocos Creator进行截图。 截图1 本方式是常用到,要求截图时不能包含mask节点。优点是比下面方式2省内存。 var size = cc.director.getWinSize(); var fileName = "result_share.jpg"; var...
  • 下面讲解下如何通过Cocos Creator进行截图,还有要注意的地方,文章最后我会放出Demo,给大家参考。 截图1 本方式是常用到,要求截图时不能包含mask节点。优点是比下面方式2省内存。 var size = cc.director....
  • 目录一、新建项目欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合...打开cocos creator,在下面界面中选择"new",然
  • 下面讲解下有哪些方法可以实现定时操作。 Schedule 这个是属于cc.Component类中的一个方法 调度一个自定义的回调函数,如果回调函数已...https:/github.com/cocos-creator/engine/blob/master/cocos2d/core/compo...
  • Cocos Creator 教程索引(2018.10.30更新)

    万次阅读 2017-09-03 19:02:44
    特别推荐 ...首先是官方论坛整理的一篇帖子,里面包括了网上大多数的Creator教程 http://forum.cocos.com/t/creator/44782 下面是我自己写的 基础教程 【Cocos Creator基础教程(组件篇)】—...
  • 主要简单讲解下坐标系统,由于Creator是基于Cocos2dx,也就是使用OpenGL的坐标系,即原点在屏幕左下角,x轴向右,y轴向上。然后讲解下本地坐标与世界坐标,最后讲下坐标转换。 坐标系 基于OpenGL坐标,也就是原点在...
  • Cocos Creator教程】——蜗牛过桥

    千次阅读 2018-03-08 13:28:15
    初学Cocos Creator,做了个小游戏与大家分享在线体验:(IE10可行,360浏览器可能会有问题,其它浏览器自测)http://1.snailgo.applinzi.com(PC端)http://2.snailgo.applinzi.com (移动端)源码下载:...
  • 由于Cocos Creator版本升级比较快...修改旧版本目录名称(如:我的旧版本是1.9.1修改成CocosCreator1_9_1) 到系统的软件管理卸载旧版本 安装新版本 ###最后 简单来说,把原来的目录改个名字,然后卸载重新安装就行...
  • Cocos Creator 教程:屏幕适配

    千次阅读 2019-11-24 23:01:00
    如果是从cocos2dx学习过来的,都知道cocos2dx有一套屏幕适配的方案。简单说来,首先要了解设计分辨率 (其大小依赖于游戏设计人员,与硬件设备无关)也就是当我们新建一个scene时,需要在Canves...
  • Cocos Creator 教程:访问网页

    千次阅读 2019-11-26 01:03:15
    有时候在游戏中需要打开一个链接。如一个用户反馈网址,后台网站等等。 方式 使用以下代码,可以在原生平台与web平台使用。简单方便,不需要自己在各个平台单独实现。 cc.sys.openURL('......
  • 触摸事件 (Touch Event) 在游戏中是经常使用到的。比如常用移动人物,滑动页面等等。下面就为新手们作讲解 ...也就是设置需要触摸所在node的长宽区域即node属性中的size,...我会不定时更新Cocos Creator教程哦~
  • 好久没写简书了,这几天终于有时间把之前项目用到了热更新整理下。由于刚入手不久,根据官方文档把热更新走了一遍后,发现官方文档对于像我这样的新手来说不是很详细,就有...我会不定时更新Cocos Creator教程哦~
  • Cocos Creator 简介什么的,最没意思了。 安装 http://www.cocos.com/download Windows 安装过程中会询问是否安装 Visual Studio,其作用是编译 Windows 程序,我们暂时以 Web 平台开发为主,所以可以先跳过不安装,...
  • Cocos Creator 教程:调用java/oc方法

    千次阅读 2019-11-21 00:15:14
    今天就总结下Cocos Creator 如何通过js代码来调用java/oc与回调js方法。 js直接调用原生方法 在Android平台上使用js直接调用Java方法与iOS和Mac上js直接调用Objective-C的方法都是如下格式: var ojb = jsb....
  • Cocos Creator 教程:RichText 简单使用

    千次阅读 2019-11-24 22:58:12
    有时游戏中要做一个广播公告,然后广播给所有的玩家。...介绍:http://docs.cocos.com/creator/manual/zh/components/richtext.html api:http://docs.cocos.com/creator/api/zh/classes/RichText.html
  • x\extensions\assets-manager\AssetsManagerEx.h FileUtils 源码路径:你的项目\build\jsb-xxx\frameworks\cocos2d-x\cocos\platform\CCFileUtils.h jsb.fileUtils 介绍 静态服务器 nginx 官网/教程 参考 ...
  • Cocos Creator 从 v1.7 开始就引入了 JSB 2.0,可以很方便地对原生平台中的 JavaScript 进行 原生调试 。如果 Creator 版本为 v1.6 以下请参考 原生平台调试 模拟器调试 一般来说,原生平台的大多数问题都...
  • Cocos Creator实现了彻底的脚本化、组件化以及数据驱动的特点,还有一个好用的UI系统,现在我们看一个UI的demo;由于视频作者没有提供源代码素材,所以这里只能简单进行素材的替换并进行演示。所有的UI界面的生成都...
  • eclipse 打包配置 说明:sdk 使用20,ndk 使用r10e。经过大量测试,使用这个组合...https://docs.cocos.com/creator/manual/zh/getting-started/support.html https://forum.cocos.com/t/android-4-4/59232/6
  • Cocos Creator 教程:ts中如何使用cc.Enum

    千次阅读 2019-11-21 17:33:36
    上码 //定义 export enum Direction { up = 1, down = 2 }; //声明 @property({ type: cc.Enum(Direction) }) direction: Direction = Direction.down;...https://forum.cocos.org/t/typescript-js-cc-enum/724...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,861
精华内容 1,144
关键字:

cocoscreator教程