视窗、场景、游戏区域高度的表达式问题



  • 唤境的系统表达式中,存在如下内容和内置解释文本:
    layoutheight:获取当前场景的高度值;
    windowheight:用来展示游戏区域的窗口高度值;

    系统动作中,存在如下动作:
    缩放场景:设置整个场景的缩放倍数
    设置画布尺寸:设置画布的尺寸

    作品设置中,存在如下选项:
    窗口大小:【视窗的大小,以像素为单位】(1920.. x 1080..)
    视窗适应:【如何在非长方形的设备上(如iPhone X)显示项目】(覆盖,自动)
    全屏模式:【如何缩放项目大小,以适应播放区域】(不缩放,等比缩放...)

    我想了解以上各组内容之间的区别,以及为什么在作品设置中选中“不缩放”时windowheight和windowwidth会这么高(我屏幕分辨率是2560x1080,实际预览时游戏展示区仅有2560x875)

    undefined

    此外,我最终希望实现的效果就是不同比例的宽屏适配;虽然官方教程里给出了一种解决方案,但是那种方法不能使用固定位置能力,而且也并没有在UI上进行位置调整。



  • @zjxdiu
    先说明有两种分辨率,一种是游戏内的分辨率(先简称游戏分辨率吧),一种是实际设备上的分辨率(先简称为实际分辨率,一般是指整个游戏窗口中,用来显示游戏画面的那部分,例如你预览的时候,除去浏览器顶部的分页栏和底部的调试面板,中间一整片白色背景+游戏画面的区域,都算在这个分辨率里)
    然后我们把不考虑全屏模式看到的游戏内容叫做游戏画面,把玩家最终看到的画面叫做实际画面好了
    那么作品设置里的那些选项是下面这样的意思:
    【窗口大小】指的就是游戏分辨率,也即不考虑跟实际设备的缩放关系,游戏内的最小预览范围(或者说游戏的镜头尺寸)
    【视窗适应】这个我也不太了解所以跳过,防止误导
    【全屏模式】指的是游戏分辨率和实际分辨率的对应缩放方式,也即实际画面是由游戏分辨率和实际分辨率以怎样的计算关系来形成的,举几个例子:
    1、【不缩放】,就是游戏分辨率和实际分辨率直接不进行任何缩放换算,实际画面看到的就是游戏分辨率没有进行任何缩放的状态,例如游戏分辨率假设是100x200,实际分辨率是1000x2200,那么玩家在画面上看到的,就是一个1000x2200的方框里,有个100x200的游戏画面,其余区域都是游戏背景颜色(项目设置里可以设置的,默认是白色),而如果实际分辨率是50x100,那么玩家在画面上能看到的,就是100x200中50x100的内容,也即不管实际分辨率多大,游戏画面就只展现100x200
    2、默认的【等比缩放】,就是将游戏分辨率按宽高等比例的方式,向实际分辨率缩放(宽缩放多少倍,高就跟着缩放同样的倍数),直到有一个边(宽或高)铺满实际分辨率对应的边,例如游戏分辨率假设是100x200,实际分辨率是1000x2200,游戏分辨率就会宽高往这个1000x2200的大小去缩放,直到有一个边铺满,按这个例子的话,游戏画面最终会缩放到1000x2000,高多出来的那200会填充成游戏背景颜色,也就是游戏画面放大10倍变成最终的实际画面被玩家看到(或者说玩家实际从画面看到的游戏内的实例,其实已经是被放大了10倍的状态,需要注意,游戏内的分辨率是不变的,这个效果就相当于拿了个放大镜把游戏画面放大了,不影响游戏中的分辨率关系)
    3、常被用来做移动端设备适配的【向外缩放】,这个跟等比缩放基本是一致的,唯一不同的点是多余的部分不会被填充成游戏背景颜色,而是会变成镜头的额外显示范围,例如按等比缩放里提到的例子,假设现在在100x200游戏分辨率的项目里,放了一个实例,高是220好了,在等比缩放里,游戏画面能看到的只有其中200的部分,多出来的20是在画面外的,是看不到的,缩放到实际分辨率1000x2200上时,虽然实际分辨率的高好像是能满足了全部显示这个实例的全部高度,但就像上面说的,多出来的200会被填充成游戏背景颜色,所以实际画面还是只显示了其中2000的部分(按游戏画面来说则是显示了其中200的部分),而向外缩放,相当于把这多出来的200,变成了额外显示游戏画面的区域(或者说,画面里原先被背景色盖住的地方,现在相当于把背景色整个揭开不挡着了)

    其他的缩放模式你自己再试试就行了,相信你能总结出规律的,了解完这个之后,再来看那些表达式就会很好理解了:
    windowheight和windowwidth,这个就是实际分辨率的高和宽,以预览的界面来算的话,windowwidth就是浏览器窗口的宽,windowheight就是浏览器窗口的高减去顶部分页栏地址栏和底部调试栏后的高度(没有验证过操作系统自身的缩放率会不会对这个值造成影响),老实说由于全屏模式的影响,这两个表达式的值其实不太容易换算成游戏分辨率的标准(可以借助表达式来换算,但也比较麻烦),个人觉得比较少用到。

    然后是你的最终问题:如何做宽屏适配?
    这个上面例子也提到了,也是官方教程提到的,全屏模式用向外缩放即可,不同的是,官方教程在实际内容适配上(也即多出来的游戏显示范围用什么来填充这点上),用了一个比较简单粗暴的做法,就是直接加一张静态适配图,效果上其实就是比起等比缩放的纯色填充,变成了自定义图片填充,考虑到不同游戏布局不同,各位游戏作者能力参差不齐,用这种通用的粗暴做法,倒也是能理解的,毕竟游戏UI布局的设计因人而异,讲是完全讲不完的,这个时候,就轮到固定位置能力上线了,你之所以觉得不能用固定位置能力,我猜你大概是不太清楚固定位置能力的机制,固定位置能力结合图层组视差为0的方案,其实能满足大部分情况的UI布局进行宽屏适配,固定位置能力的四个选项中,左边缘和上边缘是对拥有该能力的实例进行相对位置自动设置,而右边缘和下边缘的选项是进行自动拉伸设置,所以如果希望左边UI与实际画面的左边缘保持固定距离的话,就把左边缘对齐画面的左边缘即可,你可以把全屏模式改成向外缩放,场景属性勾选不限边界,然后找个实例,加一下这个固定位置能力,然后左边缘选项选择对齐画面左边缘,然后预览,然后自己拖拽仅缩放这个浏览器宽度,就能看到这个效果是怎么样的了,同样的测试方式,你可以测试其他选项的效果(最好一个个单独测试),感受一下这个能力的规律。不过就像上面说的,这个也只能应对大部分情况,肯定还有应对不了的情况,你就结合你的实际情况来决定是否采用、怎么采用就行了。
    希望打这么多字能对你有一些帮助吧。

    啊,忘了说了,虽然说了UI怎么适配比较好,但好像忘了说背景图部分,这个的话,也像上面提到的,由于是要处理额外多出来的显示区域,所以背景图的话,可以在一开始就准备超过游戏分辨率宽度的图,以便多出显示区域时够用,但这个考虑到实际分辨率的宽高比,其实大多数时候是很难做到无限适配的,所以一般就常见情况去定适配极限就行了,例如手机上会有全面屏的情况,那么就按现有机型中最长的那种来定就行。




  • @东仙队长の手刀 要是配上图 就更好了 反复的看了几遍了解了个大概



  • @东仙队长の手刀 前面的没问题,但是我记得官方是自己在教程里写了固定位置能力会失效所以不能使用🤔
    我晚点回去再试试,昨天好像试出来一种方法,就是缩放选择裁剪,因为我想做的游戏场景内容应该是四周都比较大,所以裁剪一部分并不会有影响。总之非常感谢大佬的耐心解释👍



  • @男神1987 大半夜手机码的字,就没配图了



  • @zjxdiu 教程那个我看了一下,主要应该是说加上去的适配块不适合用固定位置能力,毕竟是多出来一部分显示区域,而固定位置能力是保持相对位置,所以如果给适配块加固定位置能力的话,达不到让适配块作为额外显示内容的效果,UI那些还是可以用这个能力的。


Log in to reply