最简单的 弄个大的背景图 超出的地方填充黑边
1赞
弄个长屏的背景就解决了,cc.winSize已经是转换过的屏幕尺寸了
设计分辨率直接在canvas属性面板设置,一般横屏幕选fit Height,竖屏选fit Width
代码里不需要管啥VisibleSize,DesignResolutionSize, 只用cc.winSize就足够了
@ 设计分辨率是1334 750 现在用的是苹果x的分辨率2436*1125
选择fit Height, cc.winSize获取到的就是1624x750, 你把背景图的width赋值cc.winSize.width就铺满了
PS:最佳方案, 就是换个长点的背景图.
1赞
确实是这样 最开始我把 fit Height fit Width 都勾选了 没有变化 我傻逼了。
背景可以做长点 下面的游戏内容不可能也做长点撒 所以我要获取屏幕宽度来进行缩放 感谢你的回复 我已经解决了
参考大佬麒麟子的贡献,我就是用他的,目前仅WebGL的部份无法实现,无网址列的全屏,其他基本上都有很好的比例效果
https://forum.cocos.com/t/cocos-creator-ui/77410
@285216077 刚刚想到,这样做其实有点多此一举
,只需第5步即可(可以写个组件来处理)。完整demo (587.8 KB)
AutoExactFit.ts(组件只需要拖进场景就行)
const { ccclass, property } = cc._decorator;
@ccclass
export default class AutoExactFit extends cc.Component {
start() {
let currentSize = cc.view.getCanvasSize();
let designSize = cc.view.getDesignResolutionSize();
let scale = this.convertScale(designSize.width, designSize.height, currentSize.width, currentSize.height);
cc.Canvas.instance.node.scaleX = scale.scaleW;
cc.Canvas.instance.node.scaleY = scale.scaleH;
console.log(scale);
}
convertScale(dW: number, dH: number, cW: number, cH: number): { scaleW: number, scaleH: number } {
let a = dW / dH;
let b = cW / cH;
let scaleW = 1;
let scaleH = 1;
if (a < b) { // 宽度比设计分辨率大,缩放W
scaleW = b / a;
} else { // 高度比设计分辨率大,缩放H
scaleH = a / b;
}
return { scaleW: scaleW, scaleH: scaleH };
}
// update (dt) {}
}