在做项目时遇到了龙骨和骨骼动画无法适配的问题,widget组件对于龙骨动画节点无效。就需要我们自己写代码做适配了。
思路:根据当前屏幕分辨率与设计的分辨率的比例来缩放需要适配的节点。
适配模式一般常用的有两种方式:
- 宽度固定模式(FixedWidth):采用设计分辨率的宽度,高度跟随宽高比例缩放。
- 高度固定模式(FixedHeight):采用设计分辨率的高度,宽度跟随宽高比例缩放。
根据项目需求自己新添加了另外两种:
- 只缩放宽度(WidthAutoScale)
- 只缩放高度(HeightAutoScale)
代码如下,直接拖拽该脚本到目标节点。
let AutoScaleType = cc.Enum({
WidthAutoScale: 1,
HeightAutoScale: 2,
FixedWidth: 3,
FixedHeight: 4
});
cc.Class({
extends: cc.Component,
editor:{
menu:"custom/AddAutoScale"
},
properties: {
autoScaleType: {
default: AutoScaleType.FixedWidth,
type: AutoScaleType,
},
},
start() {
//适配宽度模式 (ps 只用于龙骨动画节点,其他节点最好采用cocos自带的widget组件来适配)
console.log(`----------------scale--${this.node.name}-----------`);
console.log("scale>>getVisibleSize:",cc.view.getVisibleSize().width,cc.view.getVisibleSize().height);
console.log("scale>>>getFrameSize",cc.view.getFrameSize().width,cc.view.getFrameSize().height);
console.log("scale>>canvas>",cc.view.getCanvasSize().width,cc.view.getCanvasSize().height);
console.log("scale>>getDesignResolutionSize",cc.view.getDesignResolutionSize().width,cc.view.getDesignResolutionSize().height);
//当前屏幕的分辨率
let screenSize = cc.view.getVisibleSize();
//设计的分辨率(当前项目的设计分辨率)
let designResolutionSize = {width:1280,height:720}
// let designResolutionSize = cc.view.getDesignResolutionSize();//移动设备获取的分辨率有问题。。
let scale;
switch (this.autoScaleType) {
case AutoScaleType.WidthAutoScale:
scale = screenSize.width / designResolutionSize.width;
this.node.setScale(scale,1);
break;
case AutoScaleType.HeightAutoScale:
scale = screenSize.height / designResolutionSize.height;
this.node.setScale(1,scale);
break;
case AutoScaleType.FixedWidth:
scale = screenSize.width / designResolutionSize.width;
this.node.setScale(scale);
break;
case AutoScaleType.FixedHeight:
scale = screenSize.height / designResolutionSize.height;
this.node.setScale(scale);
break;
}
console.log("sceneSclae", scale);
},
});