第五季-Cocos高级功能
01.播放声音
- AudioSource 音效组件
- AudioEngine 声音引擎
- 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适配模式
设计分辨率:便于美术按设计分辨率出图
一般背景图都会比设计分辨率宽度宽一些
- Height Weight都不选,保留比例,保证全部内容显示下,会有黑边(长宽比和设计分辨率一样可以完美适配)
- Height Weight选一个,保留比例,按照选择的选项填充屏幕顶边
- 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);
}
},
- 设计分辨率 750 * 1334 iPhone6 (Fit Height)
- 屏幕分辩率 iPhoneX (Fit Height)
- 挂载适配脚本后
若浏览器里没有想要的分辨率,可以去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:每一个粒子可以持续多久
- 第一个数是基础值
- 第二个数代表变化量(上图例中:基础是0.2,向上最多是0.7,向下最少是0)
-
Position Type:粒子相对位置,移动粒子可以看到改变效果
- FREE: 粒子是跟着主场景走的
- RELATIVE:可能是FREE和GROUPED中间值?
- GROUPED:是跟着粒子节点走的
-
Emitter:发射模式
- GRAVITY:重力模式
- RADIUS:圆形模式
-
Blend:渲染模式/叠加模式
- Src Blend Factor:相对目标渲染
- 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 合图
下载安装
功能:
将一些碎图打成一个整图,可降低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组件的节点的.
更多
11.常用组件Sprite-Mask-RichText
Sprite
九宫格SLICED
点击编辑
会出现如下面板,可以调整四边
右上角"√"保存配置
就很完美啦
填充FILLED
配置一些参数
就变成这样↓
MESH平时不会用到
Mask
带有Mask组件的节点下添加一个Sprite子节点
原图↓
矩形RECT
Mask节点W:50 H:80
椭圆形ELLIPSE
Segements:追求画质一般就是一百多二百的,数越大越消耗性能
同样宽高
根据图片剪裁IMAGE_STENCIL
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