概述

随着终端硬件的发展，可以运行游戏的设备种类也多种多样。从手机的大折叠（Mate X系列）、小折叠（pocket系列）、三折叠（Mate XT）、阔折叠（pura X）到平板，再到智能终端的各种异形屏，都可以承载游戏画面实现玩家交互，因此多设备分辨率的适配，是鸿蒙游戏适配的重要一环。

本文立足于业界常用游戏引擎，从引擎能力、游戏UI适配、游戏视野适配三个角度分析介绍多分辨率设备中游戏适配的整体方案，方案图如下：

引擎能力

满足游戏适配多分辨率的诉求，引擎需完成以下几个方面的适配：

• 适配页面绘制组件Xcomponent，包括初始化屏幕尺寸，以及分辨率实时变化时自动缩放显示窗口。

• 适配系统的窗口安全区域，向业务层提供需要规避的屏幕区域信息。

• 提供3D透视相机调节FOV和2D相机调节正交投影的能力，支撑游戏业务层控制调节可视区域。

• 提供相对布局组件，支撑业务层完成UI自适应适配。

• 引擎支持在分辨率变化时回调游戏业务层接口。

目前各商业引擎（如Cocos 2d-x、Cocos Creator等）均已完成上述能力的适配。

对于游戏自研引擎，请参考引擎多设备适配指导完成Xcomponent和安全区域的适配。

对于原本未封装安全区域参数的引擎（如Laya、白鹭），也可以参考引擎多设备适配指导和开发者指南，在arkTS代码中获取安全区域信息后，传递给游戏逻辑层代码。

游戏UI适配

屏幕尺寸变化时，UI较容易出现布局错乱，游戏可以参考如下策略进行适配。

• 建议默认使用相对布局，自适应大部分分辨率变化。

• UI位置要注意避让安全区域，可以调用引擎接口查询。

• 如果分辨率变化较大，部分游戏可能需要调整UI整体布局风格，由引擎回调触发定制化逻辑。

此处以Cocos Creator引擎为例，其它引擎类似，只是API略有不同。

建议使用Widget组件实现相对布局，引擎已适配HarmonyOS NEXT平台。

使用SafeArea组件实现安全区域避让，引擎已适配HarmonyOS NEXT平台。

对于定制化修改UI，建议参考如下流程：

1. 首先注册窗口尺寸变化回调函数。

   cc.view.setResizeCallback(() => this.onResize());

2. 在回调函数中，根据当前宽高比数据，使用固定高度/固定宽度的适配策略。

   var t = cc.view.getCanvasSize();
   if (t.height / t.width < this.DESIGN_HEIGHT / this.DESIGN_WIDTH) {
   // 实际分辨率比预设分辨率更宽，锁定高度，避免上下裁剪
   cc.view.setDesignResolutionSize(this.DESIGN_WIDTH, this.DESIGN_HEIGHT, cc.ResolutionPolicy.FIXED_HEIGHT);
   } else {
   // 实际分辨率比预设分辨率更高，锁定宽度，避免左右裁剪
   cc.view.setDesignResolutionSize(this.DESIGN_WIDTH, this.DESIGN_HEIGHT, cc.ResolutionPolicy.FIXED_WIDTH);
   }

同时，若游戏边缘无法做到无黑边，建议锁定高度时，避免宽度方向相对布局，锁定宽度时，避免高度方向相对布局，否则会在黑边区域展示部分UI，影响游戏体验。

另外，注册的回调函数可以实现更定制化的UI适配，例如根据特定分辨率场景，大幅度修改UI显示风格。

游戏视野适配

游戏视野的大小对用户的游戏体验感是一个重要的影响因素。

适配原则

在折叠机、平板等设备上，利用大屏的优势，合理适配视野，能给用户带来更好的沉浸式游戏体验，增强互动性和操作性：

• 对于2D游戏，背景图素材要确保覆盖任意分辨率，避免产生黑边。建议在多出来的区域中，显示辅助信息，例如游戏战绩展示等。

• 对于3D游戏，可以通过调节引擎FOV参数实现视野的缩放，确保视野范围拉齐，无劣势。具体适配方案，可以在直板手机视野基础上，对于折叠屏和平板等宽屏设备，横屏游戏允许横向缺失部分视野，同时纵向拓展部分视野，补偿和缺失的面积相似，最终整体视野面积可以对标原直板手机。而最优的适配方案，是在宽屏设备上，横向视野和直板机保持一致，纵向视野按比例拓展补齐，这样可以达到最佳视野效果。

具体的视野设计请参考多设备响应式设计（游戏类）。

适配技巧

若手边没有折叠屏设备，可以使用直板机的分屏功能进行模拟，触发分辨率的变化，观察相对布局和回调逻辑的适配效果。

具体的游戏页面展示效果，可以在各引擎编辑器中，设置对应的分辨率进行观察。手机分辨率的具体数据，可以在连接电脑后，命令行窗口输入hdc命令查询：

hdc shell hidumper -s 10 -a screen

文档参考

折叠屏开发实践

---

原文链接：华为开发者文章

---

更多问题可关注：

鸿蒙游戏官方网站：​​已有游戏移植-鸿蒙游戏-华为开发者联盟​​

公开课：​​华为开发者学堂​