弹性布局?UI的都好说,游戏场景适配才是问题
很多游戏都实现了,主要是在地图上的ui自适应横竖屏,其实大地图 横看 竖看 都是可以的
主要是如何得知场景现在是横 还是竖,什么方法可以得到这个事件的回掉?

有没有代码可以在运行中执行的,而不是手动选择后构建
// 监听屏幕尺寸变化
screen.on(“window-resize”, this.canvasChange.bind(this), this);
/**
* @description: 屏幕适配: 背景用 Math.max,内容用 Math.min,这样既保证背景铺满,也保证内容不被裁切
*/
private canvasChange(): void {
const windowSize: math.Size = screen.windowSize;
const rate: number = windowSize.width / windowSize.height;
if (rate <= 1) {
// 竖屏 (宽高比 <= 1)
// 计算适配比例
const widthRatio = windowSize.width / 1080;
const heightRatio = windowSize.height / 1920;
// 取较小的比例,确保内容完全显示在屏幕内
const scale = Math.min(widthRatio, heightRatio);
// 根据比例调整设计分辨率策略
if (widthRatio <= heightRatio) {
// 宽度是限制因素,使用 FIXED_WIDTH
view.setDesignResolutionSize(1080, 1920, ResolutionPolicy.FIXED_WIDTH);
} else {
// 高度是限制因素,使用 FIXED_HEIGHT
view.setDesignResolutionSize(1080, 1920, ResolutionPolicy.FIXED_HEIGHT);
}
// 应用缩放
this.gameBoard.scale = v3(1, 1, 1);
this.initScreenData(true);
} else {
// 横屏 (宽高比 > 1)
// 计算适配比例
const widthRatio = windowSize.width / 1920;
const heightRatio = windowSize.height / 1080;
// 取较小的比例,确保内容完全显示在屏幕内
const scale = Math.min(widthRatio, heightRatio);
// 根据比例调整设计分辨率策略
if (widthRatio <= heightRatio) {
// 宽度是限制因素,使用 FIXED_WIDTH
view.setDesignResolutionSize(1920, 1080, ResolutionPolicy.FIXED_WIDTH);
} else {
// 高度是限制因素,使用 FIXED_HEIGHT
view.setDesignResolutionSize(1920, 1080, ResolutionPolicy.FIXED_HEIGHT);
}
// 应用缩放 - 使用更保守的缩放策略 确保不会放大
const finalScale = Math.min(scale, 1.0);
this.gameBoard.scale = v3(1, 1, 1);
this.initScreenData(false);
}
}
横竖屏监听自动切换布局
1、看你界面复杂程度。如果界面不复杂就共用一套UI, 屏幕切换设置对应的位置坐标和尺寸即可,或者能使用 widget 就使用 widget 自适应。2、界面比较复杂,小节点点很多。那就做两套UI 进行切换,保持游戏数据一致即可。
去了解下fairygui的控制器,做横竖屏游戏的绝佳选择,非常简单。
1赞
这个是不是 需要在android的java层做一些处理呀?
不需要呀。这个只是界面布局相关的坐标和尺寸变换
真机旋转屏幕,js层如何获取这个事件呢?
我这边使用的cocos事件监听屏幕变化的,cocos 自带的事件应该是可以的,我目前使用的是:screen.on(“window-resize”, this.canvasChange.bind(this), this);
不分 web环境 还是 原生环境, 都好用?
原生没试,我这边试的 H5 的,你可以试试
好的,多谢啦!!!
我猜一个,输入框.横屏跟竖的输入框还是不一样的.
但还得实验一下.
这玩意我没试过.
目前 真机上还没没解决 咱们有在android手机上实现过的吗?
没人做过吗?现在横竖屏的游戏很多啦!

