本文介绍了一个组件,能够让你节点,在任意分辨率下都保持同样的大小。因为它消除了设计分辨率的缩放。
麒麟子,有没有办法让一个元素总是维持相应的大小,不管缩口缩放了多少。
今天一个朋友在QQ上问到了这个问题,像这样的问题其实是非常简单的,只需要计算出当前的Canvas缩放了多少就行了。
经过一翻研究后,发现Cocos Creator提供了一两个函数。
cc.view.getScaleX();
cc.view.getScaleY();
这个就是画布的缩放值,我们想要维持一个元素在任意分辨率下的大小,只需要让元素的scaleX/scaleY分别除以这两个值就行了。
组件代码不多,直接贴出来,免得下载了。新建一个KeepVisualSize.ts组件,贴进去就行。 再将这个挂到任何一个你想保持大小的元素身上。
const { ccclass, property } = cc._decorator;
@ccclass
export default class KeepRealSize extends cc.Component {
// LIFE-CYCLE CALLBACKS:
private _lastScaleX = 0;
private _lastScaleY = 0;
private _orginalScaleX = 0;
private _orginalScaleY = 0;
onLoad () {
//保存旧值,因为编辑器编辑的时候,本节点的缩放值不一定是1
this._orginalScaleX = this.node.scaleX;
this._orginalScaleY = this.node.scaleY;
this.adjustSize();
}
adjustSize(){
this.node.scaleX = this._orginalScaleX / cc.view.getScaleX();
this.node.scaleY = this._orginalScaleY / cc.view.getScaleY();
}
start() {}
update (dt) {
let sx = cc.view.getScaleX();
let sy = cc.view.getScaleY();
if(this._lastScaleX != sx || this._lastScaleY != sy){
this.adjustSize();
this._lastScaleX = sx;
this._lastScaleY = sy;
}
}
}