适配问题 真心求教

Creator 2.x
#6

如果比例不对，强行拉伸，图片会变形，我能想到的有三种方案，1.背景图是纯色或者是无意义的图形，拉伸不影响效果，2.背景图做大一点，3.上下两边添加装饰，拉伸装饰

#7

如果你想让背景铺满可以把背景放到Canvas外面，然后用一个WIDGET把上下左右都设置成0

还有一个全部对象都按屏幕比例强行拉伸的方法，在Start()中加上
cc.view.setDesignResolutionSize(你的设计分辨率x,你的设计分辨率y, cc.ResolutionPolicy.EXACT_FIT );
不过好像一般都不用这个，但是我实在被适配问题搞烦了直接用了这个:joy:

#8

https://forum.cocos.com/t/cocos-creator/74001

image.png1270×1208 139 KB

#9

我的意思是按比列来：

test() {
    let currentSize = cc.view.getVisibleSize();
    let designSize = cc.view.getDesignResolutionSize();
    let scale = this.convertScale(designSize.width, designSize.height, currentSize.width, currentSize.height);
    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 };
}
#10

这个准确适配是都不勾吗 还是要用代码设置 没看到这个选项

#11

好的 我试试

#12

2.0.2Bug: setDesignResolutionSize EXACT_FIT无效了

试了下 cc.view.setDesignResolutionSize(你的设计分辨率x,你的设计分辨率y, cc.ResolutionPolicy.EXACT_FIT );
在2点加加版本已经无效了

#13 
/** 调整屏幕适配 */
private adjust_screen() {
    // 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
    let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height
    let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height
    let f = screen_size >= design_size
    cc.Canvas.instance.fitHeight = f
    cc.Canvas.instance.fitWidth = !f
}

在游戏开始时调用.

#15

我是需要在适配高度或宽度之后 缩放另一边刚好铺满屏幕

#16

那还需要搭配widget使 将父节点的大小设置为cc.winSize 然后子节点以父节点做widget

#17

你可以把背景的宽度设计为2：1 现在有些手机超过2：1了，但是还是少数。这样子就不会有黑边了。

#18

如果只是等比缩放， 直接使用widget上下左右都设置为0就好了吧…
想计算宽度的缩放比例，比如你说的设计分辨率是1334x750.
高度固定的情况下，只有宽度会发生改变，那么实际宽度相对设计的缩放率 = cc.winSize.width / 1334

#19 
let currentSize = cc.view.getVisibleSize();
let designSize = cc.view.getDesignResolutionSize();

这两个取出来的值是一样的哦

#20

cc.winSize.width 应该是取的视图窗口的大小

#21

let designSize = cc.view.getDesignResolutionSize();
cc.view.setDesignResolutionSize(designSize.width,designSize.height, cc.ResolutionPolicy.EXACT_FIT );
现在用这个在2.0.8 是有效果的 2.0.10 就不行了

#22

最简单的 弄个大的背景图 超出的地方填充黑边

1赞
#23

弄个长屏的背景就解决了,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赞
#24

确实是这样 最开始我把 fit Height fit Width 都勾选了 没有变化 我傻逼了。

背景可以做长点 下面的游戏内容不可能也做长点撒 所以我要获取屏幕宽度来进行缩放 感谢你的回复 我已经解决了

#25

参考大佬麒麟子的贡献，我就是用他的，目前仅WebGL的部份无法实现，无网址列的全屏，其他基本上都有很好的比例效果
https://forum.cocos.com/t/cocos-creator-ui/77410

#26

@285216077 刚刚想到，这样做其实有点多此一举:sweat_smile:，只需第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) {}
}