Project1

标题: 关于设置内调整画面宽高比的问题 [打印本页]

作者: 摆子 时间: 2024-4-28 16:07
标题: 关于设置内调整画面宽高比的问题

如果RM需要增加调整画面宽高比的功能，在游戏开发时要注意哪些事项呢？

考虑极端的情况比如带鱼屏或者适配竖屏宽高比非常夸张时。

希望提供一些技术名词，通用的处理方式，或者一些策略的概念。

作者: 小秋橙 时间: 2024-4-28 16:38
MV区的提问啊……假设楼主调整宽高比用的是官方插件 Community_Basic.js 并且不支持在游戏运行过程中动态调节，而只能在游戏关闭以后通过编辑某个配置文件的方式调节。
那么需要考虑以下问题：
1. 黑边问题。按下F3键可以让画面在「1:1」和「适应」两种模式之间切换，1:1意味着截图大小就是素材大小，但可能会有黑边或滚动条，适应意味着不会有滚动条且至多有两条平行的黑边。
在浏览器端运行时考虑到用户可能随时调节窗口大小，更要注意 window.onresize 函数的适配。可供参考的数值有 document.body.clientWidth、document.body.clientHeight。另外对于移动设备或Renita屏幕，还要注意 window.devicePixelRatio 的值。
2. 格子问题。MV的素材是每格48*48（当然可以借助插件在运行时用别的大小但编辑器需要另外适配），并且在大地图会让主角居中，因此视野的宽高最好都是48的奇数倍，比如默认的17*13（816*624）不舒服可以改成25*15（1200*720），但不建议改的更小否则UI都要放不下了。

关于竖屏……老实说同一款游戏即使分别发布横屏和竖屏的版本都够麻烦了更别说只发布一个整合版本。
UI方面要注意以下代码：
Window.prototype.initialize = function() {
PIXI.Container.call(this);

this._isWindow = true;
this._windowskin = null;
this._width = 0;
this._height = 0;
this._cursorRect = new Rectangle();
this._openness = 255;
this._animationCount = 0;

this._padding = 18;
this._margin = 4; // 这里的18和4至关重要。
this._colorTone = [0, 0, 0];

作者: 505681468 时间: 2024-4-28 17:03
不同宽高比，一般有这些方法

1、缩放 + 黑边/模糊背景
优点：最省事，所有分辨率下都能保证正常的布局显示
缺点：有效果，但不多
2、UI自适应布局
优先：代码量少，只要UI设计好一点，效果较好
缺点：rm 并没有自适应布局（或者说有一半），但是抄一套还是可以的
            常规比例可以应付，但是特别比例可能存在问题，需要测试
               例如，横屏16：9强制竖屏显示9：16
            特别场景下需要重新设计UI布局
               例如，21：9。战斗界面左右拉伸了，侧边战斗怎么显示人物位置都会显得空
3、为不同比例制定不同布局
优点：显示效果最好，都重新做一套UI了，效果不好就废了
            不用写UI控制底层
缺点：成本高昂

欢迎光临 Project1 (https://rpg.blue/)