CocosCreator-简易教程

1. 界面

https://docs.cocos.com/creator/manual/zh/getting-started/basics/editor-overview.html

2. 目录

Resources(动态加载资源，非其他动态实例化资源，放到非resources目录，否侧会出现双份资源的情况)

3. 脚本

创建脚本

全局类（window. 对象名 = 对象）（查看js语法，全局对象也需要require一次）

引用脚本：var Equip = require(“Equip”)（不用关心脚本路径）
挂载脚本
属性：拖拽赋值
实例化：cc.instantiate
//异步加载
cc.loader.loadRes(路径，类型，回调函数）// 类型写，可不写

// 加载 Prefab
cc.loader.loadRes("test assets/prefab", function (err, prefab) {
    var newNode = cc.instantiate(prefab);
    cc.director.getScene().addChild(newNode);
}.bind(this));
 
// 加载 AnimationClip
var self = this;
cc.loader.loadRes("test assets/anim", function (err, clip) {
    self.node.getComponent(cc.Animation).addClip(clip, "anim");
});
 
// 加载 SpriteAtlas（图集），并且获取其中的一个 SpriteFrame
// 注意 atlas 资源文件（plist）通常会和一个同名的图片文件（png）放在一个目录下, 所以需要在第二个参数指定资源类型
cc.loader.loadRes("test assets/sheep", cc.SpriteAtlas, function (err, atlas) {
    var frame = atlas.getSpriteFrame('sheep_down_0');
    sprite.spriteFrame = frame;

//批量加载
// 加载 test assets 目录下所有资源
cc.loader.loadResDir("test assets", function (err, assets) {
    // ...
｝）


    // 远程加载该玩家头像
    //
    // @param      {<type>}  headSprite  The head sprite
    // @param      {<type>}  head_url    The head url
    //
    loadWechatHead: function(headSprite, head_url, callback) {
        var self = this
        cc.loader.load({
            url: head_url,
            type: 'jpg'
        }, function(err, texture) {
            if (err) {
                return;
            }
            if (headSprite) {
                headSprite.spriteFrame = new cc.SpriteFrame(texture)
                headSprite.node.active = true
                if (callback) {
                    callback(headSprite.spriteFrame)
                }
            }
        });
    },


//释放资源
cc.loader.releaseRes("test assets/image", cc.SpriteFrame);
cc.loader.releaseRes("test assets/anim");

4.动作：

cc.moveTo
cc.scaleTo等

5.动画：

序列帧:https://www.jianshu.com/p/7d9574f179eb

粒子

Spine

龙骨

图片打图集（优化drawcall）

系统事件

自定义事件： 

cc.director.on("test", function(){
            console.log("自定义事件")
        }, this)
cc.director.emit("test", "aa")

6.音效

AudioSource
cc.audioEngine.play 官方建议统一用这个播放音频
cc.audioEngine.playEffect 音效播放
cc.audioEngine.playMusic 音乐播放

7.对象池（针对预制）

//创建节点
Var testPool = new cc.NodePool()

//获取节点

 getTestNode: function() {
       if (this.testPool.size() > 0) {
             return this.testPool.get()
       } else {
             return cc.instantiate(预制节点)
       }
},

// 清楚缓存池
testPool.clear()

8.创建实例项目

image.png

8.ui制作

演示下？！

9.API查询

演示下？！

10.问题查询

演示下？！

11.官方手册

演示下？！

12数据表：转成js,或者用json也可以

image.png