零基础学CocosCreator·第五季-Cocos高级功能

01.播放声音

1. AudioSource 音效组件
2. AudioEngine 声音引擎
3. AudioClip 声音文件
   
   Clip:引用的音效资源
   Volume:音量大小[0,1]
   Mute:是否静音
   Preload:是否提前预加载,还没有播放声音时,就将声音资源从硬盘加载到内存中,播放速度快(比较小的资源没必要预加载)

const { ccclass, property } = cc._decorator;

@ccclass
export default class Sound extends cc.Component {

    @property(cc.AudioSource)
    audioSource: cc.AudioSource = null;

    //v1.10之后不能缩写声明cc.AudioClip属性
    @property(cc.AudioClip)
    audioClip: cc.AudioClip = null;

    idx: number = -1; //声音id ,每播放id加1

    // onLoad () {}

    start() {
        //切换声音资源
        if (this.audioClip) {
            this.audioSource.clip = this.audioClip;
        }
    }

    /**AudioSource方式播放声音 */
    playAudioSource() {
        this.audioSource.play();
    }

    /**AudioEngine方式播放声音 */
    playAudioEngine() {
        //1.9.x版本似乎是play(filePath: string, loop: boolean, volume: number)
        // let path = cc.url.raw("resources/jump.wav");
        // this.idx = cc.audioEngine.play(path,false,1);

        this.idx = cc.audioEngine.play(this.audioClip, true, 1);
    }

    /**暂停声音 */
    pauseAudio() {
        cc.audioEngine.pause(this.idx);

        //不需要再播放的话就可以清楚缓存
        cc.audioEngine.uncache(this.audioClip);
    }

    // update (dt) {}
}

02.Action动画

动作只能加在节点node上

创建动作

        //2秒内移动到当前位置向右200个像素
        let move = cc.moveBy(2,cc.v2(200,0));
        
        //1秒内将节点横向扩大2倍,纵向扩大3倍
        let scale = cc.scaleTo(1,2,3);
        
        this.nodeIcon.runAction(scale);
        this.nodeIcon.runAction(move);

        //动作合并
        //同时执行
        let spwan = cc.spawn(move,scale); //动画总共2秒
 
        //顺序执行
        let sequence = cc.sequence(move,scale); //动画总共3秒
        
       //回调函数动作,是立刻执行的
       //v1.9.x是cc.callFunc(function(){},bind(this));
        let callAct = cc.callFunc(function(){
            console.log("动作回调");
        },this);

        //重复动作
        let repeat = cc.repeat(sequence,2); //重复2次
        let repeatForever = cc.repeatForever(sequence); //一直重复

停止节点动作

        //停止所有动作
        this.nodeIcon.stopAllActions();

        //停止指定动作
        this.nodeIcon.stopAction(this.currentAction);

运动曲线效果

let move = cc.moveBy(2,cc.v2(200,0)).easing(cc.easeBounceIn);

动作相关很多,看文档.

03.适配多分辨率-Widget

Widget对齐组件

相对位置勾上会拉伸节点
尽量不要手动赋值Target会导致结构混乱

Canvas适配模式

设计分辨率:便于美术按设计分辨率出图
一般背景图都会比设计分辨率宽度宽一些

1. Height Weight都不选,保留比例,保证全部内容显示下,会有黑边(长宽比和设计分辨率一样可以完美适配)
2. Height Weight选一个,保留比例,按照选择的选项填充屏幕顶边
3. Height Weight 全选,不保留比例,全部拉伸顶边(忍不了)

最终组合-Canvas-Weight-Scale

将脚本挂载到需要适配的节点上,就不会把一些需要显示的节点部分显示到屏幕外

       onLoad () {
        let designSize = new cc.size(750,1334); //设计分辨率
        let designRate= designSize.height / designSize.width; //设计分辨率比例
        let winSize = cc.director.getWinSize(); //屏幕分辨率 
        let realRate = winSize.height / winSize.width; //屏幕比例
        cc.log("realRate:",realRate);
        cc.log("this.node.height:",this.node.height,"this.node.width:",this.node.width);
        //缩放节点
        if (realRate > designRate){ 
            let scale = designRate / realRate;
            this.node.scale = scale;
            cc.log("target scale:",this.scale);
        }
    },

1. 设计分辨率 750 * 1334 iPhone6 (Fit Height)
2. 屏幕分辩率 iPhoneX (Fit Height)
3. 挂载适配脚本后
   

若浏览器里没有想要的分辨率,可以去Cocos Creator安装路径下的\CocosCreator\resources\static\preview-templates里的boot.js,打开就可以看到目前有的模拟器分辨率,也可以添加需要的分辨率

//boot.js
 // init device resolutions
    var devices = [
        { name: 'Apple iPhone 5',       width: 320,  height: 568,  ratio: 2     },
        { name: 'Apple iPhone 6',       width: 375,  height: 667,  ratio: 2     },
        { name: 'Apple iPhone 6 Plus',  width: 414,  height: 736,  ratio: 3     },
        { name: 'Apple iPhone 7',       width: 375,  height: 667,  ratio: 2     },
        { name: 'Apple iPhone 7 Plus',  width: 414,  height: 736,  ratio: 3     },
        { name: 'Apple iPhone X',       width: 375,  height: 812,  ratio: 3     },

        { name: 'Apple iPad',               width: 1024, height: 768,  ratio: 2 },
        { name: 'Apple iPad Air 2',         width: 768,  height: 1024, ratio: 2 },
        { name: 'Apple iPad Pro 10.5-inch', width: 834,  height: 1112, ratio: 2 },
        { name: 'Apple iPad Pro 12.9-inch', width: 1024, height: 1366, ratio: 2 },

        { name: 'Huawei P9',            width: 540,  height: 960,  ratio: 2     },
        { name: 'Huawei Mate9 Pro',     width: 720,  height: 1280, ratio: 2     },

        { name: 'Goolge Nexus 5',       width: 360,  height: 640,  ratio: 3     },
        { name: 'Goolge Nexus 5X',      width: 411,  height: 731,  ratio: 2.625 },
        { name: 'Goolge Nexus 6',       width: 412,  height: 732,  ratio: 3.5   },
        { name: 'Goolge Nexus 7',       width: 960,  height: 600,  ratio: 2     },
    ];

04.定时器Schedule

定义定时器

	this.schedule(function(){
        console.log(this.num ++);
    }.bind(this),1,cc.macro.REPEAT_FOREVER,0.5);
    //1--每次执行间隔1s
    //cc.macro.REPEAT_FOREVE:无限次数
    //0.5--第一次延迟0.5秒执行

    //只执行1次
    this.scheduleOnce(function(){
        console.log("延迟4s执行");
    }.bind(this),4);

停止定时器

    onLoad () {
        this.schedule(this.log,1,10,0);
        btn.on(cc.Node.EventType.TOUCH_END,function(){
            this.cancelLog();
        });
    }

    log(){
        console.log(this.num ++);
    }

    //停止定时器
    cancelLog(){
        this.unschedule(this.log);
    }

Schedule和Action

Schedule更多面向函数,
Action更多面向动作

05.Node事件

注册事件

this.node.on(cc.Node.EventType.TOUCH_END,function(event:cc.Event.EventTouch){
    let pos = event.getLocation(); //点击坐标 此坐标的原点是Canvas的左下角
    let pos2 = this.node.convertToNodeSpaceAR(pos); //将点击坐标转换为相对于当前节点坐标
    this.eventNode.position = pos2;
},this);

this.eventNode.on(cc.Node.EventType.TOUCH_START,this.onTouchStart,this);

• TOUCH_START:按下事件
• TOUCH_MOVE:按下后移动事件
• TOUCH_CANCEL:按下后触摸位置超出触摸范围事件
• TOUCH_END:按下后抬起事件

取消注册事件

this.eventNode.off(cc.Node.EventType.TOUCH_START,this.onTouchStart,this);

06.Animation动画

创建/播放/暂停动画

    onLoad () {
        this.animation = this.getComponent<cc.Animation>(cc.Animation);
    }

    play(){
    	//播放动画,若没传动画名参数,则播放默认动画
        this.animation.play("bird");
    }
    
    //暂停当前正在播放的动画
    pause(){
        this.animation.pause();
    }

帧事件

 onBirdWingDown(param0: string){
   	console.log("onBridWingDown param0:",param0);
 }

动画文档

07.粒子特效

创建粒子节点

创建节点 -> 创建渲染节点 -> PraticleSystem(粒子)
选中 Custom □ 就会展开属性

• Duration:持续时间 为-1时就是无限循环
• Rmission Rate:发射粒子的频率
• Total Particle:可以同时出现的粒子数量(太大的话会影响性能,一二百就可以了)

一般属性是分两个的,就是以Life为基础的变化量

• Life:每一个粒子可以持续多久

  1. 第一个数是基础值
  2. 第二个数代表变化量(上图例中:基础是0.2,向上最多是0.7,向下最少是0)

• Position Type:粒子相对位置,移动粒子可以看到改变效果

  1. FREE: 粒子是跟着主场景走的
  2. RELATIVE:可能是FREE和GROUPED中间值?
  3. GROUPED:是跟着粒子节点走的

• Emitter:发射模式

  1. GRAVITY:重力模式
  2. RADIUS:圆形模式

• Blend:渲染模式/叠加模式

  1. Src Blend Factor:相对目标渲染
  2. Dst Blend Factor:相对于自身渲染

08.资源加载 cc.loader

将存在远程网络上或硬盘上的资源加载到内存中.

		//加载网络资源
        cc.loader.load({url:"https://avatar.csdnimg.cn/8/3/C/1_qq_39685400_1571824482.jpg",type:"jpg"},
            function (errors, texture:cc.Texture2D){
                if (errors) {
                    for (var i = 0; i < errors.length; i++) {
                        cc.log('Error url [' + errors[i] + ']: ' + results.getError(errors[i]));
                    }
                }
                if (texture){
                    let spriteFrame = new cc.SpriteFrame(texture);
                    this.spNet.spriteFrame = spriteFrame;
                }
        }.bind(this))

        //加载本地资源
        //该资源需要在工程目录下的resources文件夹里
        cc.loader.loadRes("bird1_0",cc.SpriteFrame,
            function (err,spriteFrame){
                if (err) {
                    cc.error(err.message || err);
                    return;
                }
                if (spriteFrame){
                    this.spLocal.spriteFrame = spriteFrame;
                }
        }.bind(this))

加载网络图片时,如果用浏览器加载,有可能会有跨域问题

09TexturePacker 合图

下载安装

参见TexturePacker破解版教程及下载

功能:

将一些碎图打成一个整图,可降低drawcall,只需向内存传一次图片(硬件和硬件通信比较消耗性能)

drawcall:向显存传递了几次数据，影响页面的渲染效率

使用:

将要合图的图片或包含图片的文件夹拖到左侧的菜单栏

右侧就会出现合好后的图片预览
右侧可以修改属性

保存&&发布

👈导出 👉保存

使用
为了做对比，先将正常的三只鸟放到场景中

drawall是2？啊嘞？？

看看合图的
同样也是2

应该是合批了
2 = 图片资源 + 右下角性能数据

10.Graphics画图

使用

node上添加Graphics组件

脚本中写入绘制代码

 @property(cc.Graphics)
    ctx: cc.Graphics = null;

    onLoad () {
        console.log("graphicsBegin");

        this.ctx.moveTo(0,0); //开始将笔放到什么位置
        this.ctx.lineTo(100,0); //画一条线从(0,0)到(100,0)
        this.ctx.lineTo(100,100); //画一条线从(100,0)到(100,100)
        this.ctx.stroke(); //绘制

        this.ctx.fill(); //填充

        this.ctx.clear(); //清除线
    }

预览

(0,0)点是相对于带有Graphics组件的节点的.

更多

官网文档-Graphics组件参考

11.常用组件Sprite-Mask-RichText

Sprite

九宫格SLICED

点击编辑

会出现如下面板,可以调整四边

右上角"√"保存配置
就很完美啦

填充FILLED

配置一些参数

就变成这样↓

MESH平时不会用到

Mask

带有Mask组件的节点下添加一个Sprite子节点
原图↓

矩形RECT

Mask节点W:50 H:80

椭圆形ELLIPSE

Segements:追求画质一般就是一百多二百的,数越大越消耗性能

同样宽高

根据图片剪裁IMAGE_STENCIL

RichText

插入图片

其他标签

RichText组件参考

12.常用组件Layout-ScrollView-Others

Layout

说明挺清楚的,就偷个懒吧

ScrollView

view:有mask组件,其子节点才可以被显示
content:可以滑动的节点,可以添加Layout组件组合使用

Others

• Slider 滑动进度条
• ProgressBar 进度条
• Toggle 复选按钮
• 等等…(知道有这么个东西就行,用到的时候查文档和api就行)

骨骼动画

cocos有两个动画的运行库
骨骼动画其实是一种补间动画

补间动画:运行时根据当前时间,在两个关键帧之间做插值*(例:比如在0秒有一个关键帧,这时候骨骼A在100的位置,同时在2秒也有一个关键帧,骨骼A在300的位置.那么1秒的时候自然可以算出来骨骼A应该在200的位置,1.5秒的时候在250的位置)*

Spine(收费的)

可以参考cocos提供的example工程中的/cases/spine/spineBoy
spine资源有三个文件组合:

我们要做的是在程序中调用的spine中的动作

/**SpineCtrl.js*/
mixTime: 0.2 //动作切换时间,是动作不会太生硬

Dragon Bones (免费的)

可以参考cocos提供的example工程中的/cases/spine/dragonBones