creator在web上分辨率适配问题

我的游戏(其实是典型的大部分游戏)要一直保持横屏,无论浏览器是横屏还是竖屏。制作的时候按照横屏制作,浏览器横屏的时候正常显示,浏览器竖屏的时候可以自动把游戏内容转90度,因为像微信会锁定为竖屏,希望这个情况下仍然可以玩。

再说分辨率自适应。

一种是设计分辨率内的东西全部显示出来,这样只要不是设计分辨率长宽比的浏览器会在某一方向上有黑边,这个帖子里我已经试出来怎么做这种: http://forum.cocos.com/t/topic/39031/ 但是如果想在黑边部分显示一些背景就不知道怎么搞了。

另一种是裁减掉一部分设计分辨率内的内容,这样不会有黑边,界面元素要自适应分辨率。这种方案比较高级,应该是cocos主推的,但是我目前试不出来怎么搞这种了,因为只要配合着设置方向,就有黑屏的问题,还是这个帖子: http://forum.cocos.com/t/topic/39031/

希望官方给出明确的方案,因为这个问题很基本,我的需求也是最常见的,别人也一定有类似的困惑。

2赞

Canvas 组件中选择 Fit Width 或者选择 Fit Height,都可以让你拥有完整的屏幕区域进行渲染,但是与此同时,内容也需要进行适配。

比如在 Fit Height 中,如果设计分辨率是:960 * 640,而屏幕尺寸是:1136 * 640,那么你的游戏窗口区域实际上就是 (0, 0, 1136, 640),因为 Fit Height 模式不约束 Width。

此时,如果你的一个按钮(60 * 40尺寸),想要放在右下角,可能你会认为是放在(900, 0),其实不是,你应该放在(1136-60, 0)的位置上。因为 Width 已经不是你的设计分辨率中的 width 了。这里就需要动态得去放置,比如在节点上添加 Widget 组件,然后定位到距离父节点右端 60px 的位置上,注意不要勾选 alignOnce

至于转屏,1.2 版本在 Fit Width 或者 Fit Height 模式中可能导致黑屏,目前已经修复

这里我的意思是,我希望以一个固定的设计分辨率及其长宽比进行制作,里面的控件不根据设备分辨率适配位置大小什么的,我就是想在固定的“窗口”里跑游戏,只不过这个窗口放大缩小到某个方向完全匹配,另一个方向留出黑边,当然这个黑边我也不要,我会在制作的时候在四个方向都多做一点背景,到时候我希望在显示黑边的部分,不要裁剪背景,把背景显示出来。为了显示多出的背景,你说用cc.VisibleRect,具体怎么用我找不到用法,哪里有?

”都可以让你拥有完整的屏幕区域” 这个不对吧。Fit Width应该是宽度完全适应屏幕,高度方向上可能裁剪可能留黑边。Fit Height应该是高度完全适应屏幕,宽度方向上裁剪或留黑边。难道我的理解有问题?

这个符合 SHOW_ALL 的需求,不太符合其它几个适配模式的需求,不过在 SHOW_ALL 的情况下做背景就相对麻烦一点,在 Web 端可以通过给 body 设置背景来做到,在 native 端确实没有太好的办法

Fit Width 是宽度适配,但是高度完全扩展或者剪裁到屏幕高度。Fit Height 是高度适配,宽度上扩展或者剪裁到屏幕宽度

关于露出背景,你之前说用cc.VisibleRect,能做吗?我之前用cocos2.x c++开发能露出背景,后来用cocos3.x lua也能露出背景,creator了反而不行了 … 黑边我的产品一下子看起来就low了

黑边能解决的,我想你要的应该是这种吧

希望官方能出个类似的功能,虽然,我们已经解决了。不建议你这样做,因为要缩放,后面scrollview缩放又会出现问题,不过这个缩放问题我们还是解决了的。

希望官方能支持scrollview的缩放,现在我们是采用补偿计算,scrollview才显示正常的,之前scrollview的缩放我提过一次这个问题,之前的反馈是说没必要做这个功能。。。@panda

很简单,在编辑器中,Canvas 所在区域会显示成一个紫色的边框,美术的设计稿一般都是以这个边框作为尺寸设计的。那如果你想要在黑边多显示一些背景,可以在边框下面放一个更大尺寸的背景图,例如高 (960 + 200) 宽 (640 + 200),这样一来黑边部分就会显示为这个背景。

我可以在下面放更大的背景图,可是跑起来会按照canvas区域裁剪渲染,超出canvas的部分被裁剪了,所以超出部分会显示为黑边。你们不裁剪就好了,或者让我们能定制一个稍大的裁剪区域。

我这边尝试了一下,并没有出现你说的裁剪问题。

我用的1.2 你什么版本

没错, 1.2 版本。我不太清楚你遇到的问题,我说下范例的做法吧,你可以打开范例看看。

Canvas 设计分辨率是图中的紫色框,然后背景图是图中蓝色边框。可以看到背景图在水平方向大过了设计分辨率。为了方便查看,我在右侧背景上放了一个长条 Sprite。
然后 Canvas 设置成 Fit Height 模式,也就是说高度和屏幕高度对齐,水平有可能发生裁剪也有可能黑边。
但是由于背景图的存在,当屏幕在水平方向上过宽时,原先的黑边会被显示为背景:(注意图中的右侧长条 Sprite)

(左边按钮是自适应的,请忽略)

我在1.2主要做了以下这三个配置,用手机浏览器看的/build,启动浏览器发现大背景图被压缩到canvas区域,canvas区域外为黑边。

onLoad: function () {
cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
}

嗯,确实是会有黑边,这应该是 bug 吧? @panda @nantas

Fit Width 和 Fit Height 都勾选的情况下,是 SHOW_ALL 模式,的确会有黑边

怎么破
这算bug吧
如果是请尽快修复

这是设计如此,因为如果不剪裁黑边的话,不止你的背景可以看到,你的其他游戏元素也可以在设计分辨率外被看到,这可能导致一些用户不希望的现象发生

根据你的需求,目前我们讨论的解决方案是:

在 Canvas 组件里当同时勾选 Fit Width 和 Fit Height 选项时,增加一个 「是否剪裁设计分辨率以外区域」的选项,取消勾选这一项就能够显示背景和其他元素了。不过这种情况下要自己处理原来黑边可以遮挡地带的穿帮问题。

哇,听起来好开心呦,帅锅,什么版本实现

我的做法是 加宽背景

这就是我要找的啊!什么时候实现!!