v3.8.7横竖屏游戏如果做

弹性布局?UI的都好说,游戏场景适配才是问题

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

局部截取_20251214_164107
有没有代码可以在运行中执行的,而不是手动选择后构建

// 监听屏幕尺寸变化
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/ios 端修改屏幕方向吗?

为什么需要通知 原生平台端呀?

我猜一个,输入框.横屏跟竖的输入框还是不一样的.
但还得实验一下.
这玩意我没试过.

目前 真机上还没没解决 咱们有在android手机上实现过的吗?

没人做过吗?现在横竖屏的游戏很多啦!