006 在合宙引擎主机 8000W/1602 上开发横屏 app

作者：王世豪　|　最后修改：2026-05-19

重要提醒：

1、当你安装配置好智能体、规则和技能后，最终一定要参考验证智能体、规则和技能是否安装成功来验证安装配置是否正确；

2、Trae 中内置的免费大模型，会经常排队，并且性能不可控，容易出问题，所以推荐参考：001 发送会话请求时，提示排队，如何解决？的方法，订阅收费的大模型（目前每月 40 元）；这样可以大大提高 AI 性能；如果不想使用收费模型，在非正常工作时间段内，使用内置的免费模型也能勉强凑合；

3、选择收费大模型时，经过我们的实际测试，根据工作任务的不同，可以按照如下建议选择（仅供参考，具体情况还需要根据你自己的实际使用情况来定）：

• 代码开发任务，优先选择 GLM（可能是使用的人数太多，有时候处理较慢）；如果 GLM 处理太慢，再考虑切换到 MiniMax；
• 其他任务，可以首先选择 ark-code-latest，其次选择 MiniMax，最后选择 GLM（可能是使用的人数太多，有时候处理较慢）；

在这一部分，我们将使用合宙引擎主机 8000W/1602，演示如何将已开发好的竖屏 app 转换为横屏 app；

1、合宙引擎主机 8000W，以 Air8000W 模组为主控的合宙引擎主机，支持以下一种显示屏

• 320*480 分辨率的 4 寸电容触摸屏；点击此处购买

2、合宙引擎主机 1602，以 Air1602 模组为主控的合宙引擎主机，支持以下三种显示屏（目前，在合宙官方淘宝店还没有上架，后续会上架）

• 720*1280 分辨率的 5 寸电容触摸屏
• 1024*600 分辨率的 7 寸电容触摸屏
• 1024*600 分辨率的 10.1 寸电容触摸屏

一、为什么要将竖屏 App 转为横屏？

横竖屏不匹配的情况下，app 会扭曲变形；

横屏 factory 下载安装横屏 app 运行效果最好，竖屏 factory 下载安装竖屏 app 运行效果最好。

二、竖屏转横屏的原理：

竖屏转横屏本质上是 分辨率和坐标系的重新映射 ：

项目	竖屏（320x480）	横屏（800x480）
屏幕宽度	320px	800px
屏幕高度	480px	480px
地面Y坐标	340px	340px（或根据需要调整）
水平居中	x = 160	x = 400
右侧对齐	x = 320 - 宽度	x = 800 - 宽度

常用位置计算公式

对齐方式	公式	示例（800宽）
左对齐	`x = 边距`	`x = 20`
居中	`x = W / 2 - 元素宽度 / 2`	`x = 400 - 宽度 / 2`
右对齐	`x = W - 元素宽度 - 边距`	`x = 800 - 宽度 - 20`
上对齐	`y = 边距`	`y = 20`
垂直居中	`y = H / 2 - 元素高度 / 2`	`y = 240 - 高度 / 2`
下对齐	`y = H - 元素高度 - 边距`	`y = 480 - 高度 - 20`

三、竖屏转横屏的 5 个步骤 ：

下面的五个步骤是根据联机火柴人格斗这类 具有很强对称属性的双人对战游戏抽象出来的方法；

对于特殊布局的 App，核心思路可以参考，具体参数需要根据实际情况调整。

1、修改分辨率常量

local W, H = 320, 480

-- 改为横屏版本
local W, H = 800, 480

2、调整水平居中的 UI 元素

"居中"就是让 UI 元素的 中心点 与屏幕的 中心点 重合。

以横屏 800x480 为例：

UI 元素的 x 坐标 = 屏幕中心点 x 坐标 - UI 元素宽度 / 2

-- 竖屏居中
local title_x = 320/2 - 200/2      -- 宽度200的标题居中
local popup_x = 320/2 - 260/2      -- 宽度260的弹窗居中

-- 横屏居中
local title_x = 800/2 - 200/2      -- 宽度200的标题居中
local popup_x = 800/2 - 260/2      -- 宽度260的弹窗居中

-- 推荐写法（公式，方便以后调整分辨率）
local title_x = W / 2 - UI元素宽度 / 2 
local popup_x = W / 2 - UI元素宽度 / 2

常见需要居中的元素：

• App 标题
• 菜单按钮（如果是居中布局）
• 弹窗对话框
• Toast 提示消息
• 血条、状态栏等顶部信息
• 等待/加载提示

下图是居中公式验证：

总结：

竖屏转横屏，针对水平居中的 UI 元素，根据公式只需要调整 W（屏幕宽度）即可，比较简单。

3、调整左侧和右侧对齐的 UI 元素

左侧对齐

"左对齐"就是让 UI 元素的左边距离屏幕左边保持固定距离。

UI 元素的 x 坐标 = 左边距

-- 竖屏左对齐
local left_btn_x = 30  -- 距离左边30px
local back_btn_x = 20  -- 返回按钮距离左边20px

-- 横屏左对齐
local left_btn_x = 30  -- 距离左边还是30px
local back_btn_x = 20  -- 返回按钮距离左边20px

右侧对齐

"右对齐"就是让 UI 元素的右边，距离屏幕右边保持固定距离。

UI 元素的 x 坐标 = 屏幕宽度 - UI 元素宽度 - 右边距

-- 竖屏右对齐
local right_btn_x = 320 - 80 - 30  -- 按钮宽度80，边距30，x=210
local exit_btn_x = 320 - 60 - 20   -- 退出按钮宽度60，边距20，x=240

-- 横屏右对齐
local right_btn_x = 800 - 80 - 30  -- = 690
local exit_btn_x = 800 - 60 - 20   -- = 720

常见需要调整的元素：

• 左侧的控制按钮（方向键、跳跃等）
• 右侧的操作按钮（拳、脚、防御等）
• 右上角的退出/设置按钮
• 左上角的返回按钮
• 左右对称的 UI 元素

总结：

左对齐，不用改，因为左对齐是 距离左边固定距离 ，竖屏横屏都是一样的；

右对齐，需要改，因为右对齐是 距离右边固定距离，根据公式只改 W 即可，也比较简单。

4、调整左右对称的按钮/元素

"左右对称"就是左边的元素靠左，右边的元素靠右，中间留出大片区域给游戏画面或内容展示。

左右对称的按钮/元素，并不像水平居中、左右对齐那样有比较准确的公式，只能根据感觉来进行大量测试。

下面我们用火柴人游戏来解释竖屏转横屏 如何做？

比如从 320480 竖屏转到 800480 横屏：

我们需要调整 3 个参数：x 坐标、r 大小、y 坐标

参数	公式	说明
**x坐标（左按钮）**	`横屏x = 竖屏x + 右移量`	左手区域整体向右移，离左边缘更远
**x坐标（右按钮）**	`横屏x = 竖屏x + 大量右移量`	右手区域整体大量向右移，靠近右边缘
**按钮大小r**	`横屏r = 竖屏r + 放大值`	横屏空间大，适当放大
**y坐标**	`横屏y = 竖屏y ± 微调值`	通常不用改，或微调

第一步：确定整体移动量

-- 从W=320转到W=800，宽了480px
-- 我们希望左按钮组整体向右移50px
-- 我们希望右按钮组整体向右移390px（大量右移）

-- 公式：横屏x = 竖屏x + 移动量
-- 例如：
-- 左按钮：x = 30 + 50 = 80 ✓
-- 右按钮：x = 160 + 390 = 550 ✓

第二步：确定按钮放大值

-- 竖屏按钮太小，怕点不准，横屏空间充足，可以放大
-- 公式：横屏r = 竖屏r + 放大值
-- 例如：
-- 左按钮：r = 22 + 4 = 26 ✓
-- 右按钮：r = 18 + 6 = 24 ✓

-- ==================== 竖屏版本（320宽） ====================
-- 屏幕太窄，按钮全部挤在中间，间距60px，按钮也小
local left_buttons = {
    { x = 30, y = 445, r = 22, label = '左' },   -- 靠左边缘30px
    { x = 90, y = 445, r = 22, label = '右' },   -- 间距60px
    { x = 60, y = 390, r = 20, label = '跳' },   -- 跳跃按钮稍小
}

local right_buttons = {
    { x = 160, y = 435, r = 18, label = '拳' },  -- 靠右的按钮更小
    { x = 220, y = 435, r = 18, label = '脚' },  -- 间距60px
    { x = 280, y = 435, r = 18, label = '防' },  -- 靠右边缘40px
}

-- ==================== 横屏版本（800宽） ====================
-- 根据公式逐行转换：
local left_buttons = {
    -- 公式：x = 竖屏x + 50px右移，r = 竖屏r + 4放大
    { x = 30 + 50 = 80, y = 445, r = 22 + 4 = 26, label = '左' },
    { x = 90 + 80 = 170, y = 445, r = 22 + 4 = 26, label = '右' },
    { x = 60 + 65 = 125, y = 390 - 5 = 385, r = 20 + 4 = 24, label = '跳' },
}

local right_buttons = {
    -- 公式：x = 竖屏x + 390px大量右移，r = 竖屏r + 6放大
    { x = 160 + 390 = 550, y = 435, r = 18 + 6 = 24, label = '拳' },
    { x = 220 + 420 = 640, y = 435, r = 18 + 6 = 24, label = '脚' },
    { x = 280 + 450 = 730, y = 435, r = 18 + 6 = 24, label = '防' },
}

常见需要调整的元素：

• 左侧方向控制按钮
• 右侧动作按钮（拳、脚、技能等）
• 底部左右分布的功能按钮
• 双人游戏左右分屏的 UI

总结：

对于左右对称的转换，会复杂点，没有准确公式，需要实际测试。

5、调整弹窗和菜单位置

"菜单"通常铺满屏幕宽度，按钮在菜单内居中或对称分布。

菜单的宽度 = 屏幕宽度 W，所以菜单容器不用改 x，直接铺满！要改的是菜单里的按钮！

菜单里的按钮就按照 2，3，4 介绍的修改即可；菜单里的"弹窗"一般都是居中显示，直接用步骤 2 的居中公式计算即可！

总结：

根据上面 5 个步骤，可以发现：

水平居中、左右对齐的 UI 元素/按钮修改最简单（有公式，只改 W）

左右对称的 UI 元素/按钮会复杂点（因为没有精确公式，要实际测试）

完全没有规律的 UI 元素/按钮最复杂（只能根据经验实际测试，这里就不再介绍）

建议：大家在做竖屏 App 的时候，就要关注 UI 元素/按钮的对称布局，这样转横屏才会更简单。

四、AI 快速转换方法

直接将竖屏代码粘贴给 AI，使用以下提示词：

在这个代码基础上，修改为 800*480 的横屏版本

接下来，我将基于联机版火柴人格斗，演示使用 Trae 来转换成横屏的过程

在转换之前，先看下原本在 8000W 上竖屏的效果图：

4.1 第一轮交互

4.1.1 输入

提示词中可以再补充自己的一些需求，比如在联机火柴人竖屏转横屏的时候，我不希望字体放大，也不希望火柴人的地面高度变化，所以我的第一轮输入的提示词为：

在这个代码基础上，修改为 800*480 的横屏版本，注意：字体大小保持当前的设定，火柴人的地面高度保持一致

4.1.2 输出

到这里，AI 已经全部转换完成了，直接保留修改，实机测试看看效果。

4.1.3 效果展示

8000W 横屏效果

8000W 引擎主机的屏幕是竖屏版本，如需转成横屏，需要修改 LuatOS\app_engine\factory\drv\Air8000W/lcd_drv_air8000w_4in.lua 文件中的 direction，w，h

w 和 h 调换，同时 direction 改为 1，即旋转 90°

1602 7 寸横屏效果

4.1.4 问题

整体没什么大问题，在实际测试发现以下几个小问题：

1、拳，脚，防 三个按钮布局问题：需要放置右侧，退出按钮放置中间

2、邀请对手的弹窗没居中显示，比如"对手拒绝了邀请"，"对手已接受邀请"，"对方已退出游戏"

4.2 第二轮交互

4.2.1 输入

1、拳，脚，防 三个按钮布局问题：需要放置右侧，退出按钮放置中间 2、邀请对手的弹窗没居中显示，比如"对手拒绝了邀请"，"对手已接受邀请"，"对方已退出游戏"

4.2.2 输出

4.2.3 效果展示

8000W 横屏效果

1602 7 寸横屏效果

8000w 和 1602 对战页面效果图

到这里，可以发现竖屏已经完美的转为了横屏版本，第一轮 AI 交互后就已经转换的差不多了，有些小问题继续让 AI 调整即可。