首页分享 egret.H5游戏屏幕适配

egret.H5游戏屏幕适配

来源：花匠小妙招时间：2024-12-07 18:35

需求
移动设备有各种分辨率，要让游戏在各种分辨率设备上按需求效果展示（如不会因拉伸变形、不会出现上下或左右黑边等）

两个步骤：
1.舞台尺寸与设备屏幕的适配关系。
舞台尺寸Stage.stageWidth,Stage.stageHeight是游戏的设计尺寸，可在游戏的入口文件index.html中data-content-width和data-content-height配置：

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player" data-entry-class="Main" data-orientation="auto" data-scale-mode="showAll" data-resolution-mode="retina" data-frame-rate="30" data-content-width="1080" data-content-height="1980" data-show-paint-rect="false" data-multi-fingered="2" data-show-fps="false" data-show-log="false" data-log-filter="" data-show-fps-style="x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9"> </div> 1234

我们通过设置游戏的scaleMode(缩放模式)来解决第一点。设置index.html文件中data-scale-mode属性或在游戏代码egret.MainContext.instance.stage.scaleMode = egret.StageScaleMode.SHOWALL（假设设为showAll模式）。

八种缩放模式：

SHOWALL：优点：保持宽高比缩放内容。缺点：可能会在上下或左右留下黑边。

FIXEDWIDTH：保持stageWidth不变,根据视口宽和stageWidth的比，还有视口高度去更stageHeight（scaleX=screenWidth/stageWidth;stageHeight=screenHeight / scaleX）;然后再等比缩放到canvas上。优点：等比缩放，铺满屏幕，内容不会变形。常用在视口宽高比<游戏宽高比时。

FIXEDHEIGHT：（参考上一条FIXEDWIDTH，把宽和高对调就行）

EXACTFIT：直接拉伸游戏内容，暴力填充整个屏幕canvas。舞台尺寸(stage.stageWidth,stage.stageHeight)始终等于初始化时设置的内容尺寸。优点：铺满屏幕。缺点：暴力拉伸，内容会变形。

NOSCALE：不对内容进行任何缩放，保持原始的1:1比例，然后直接把舞台对齐到浏览器的左上角。即使在更改视口窗口大小时，它仍然保持不变。如果视口窗口比内容小，则可能进行一些裁切。舞台尺寸（stage.stageWidth,stage.stageHeight）始终跟播放器窗口大小保持一致。(个人觉得这种没用，不知道什么情况下适用这种模式)

NOBORDER：根据屏幕的尺寸等比缩放内容，让游戏内容在较宽一方填满视口，另一方可能会超出视口而被裁剪掉。(个人觉得这种也没用，一般不使用)

FIXEDNARROW：在screenWidth / stageWidth>screenHeight / stageHeight时，适用FIXEDHEIGHT；相反时适用FIXEDWIDTH。优点：等比缩放，填满屏幕，内容不会变形。

FIXEDWIDE：在screenWidth / stageWidth>screenHeight / stageHeight时，适用FIXEDWIDTH；相反时适用FIXEDHEIGHT。优点：等比缩放，填满屏幕，内容不会变形。
在这里插入图片描述

/** * @private * 计算舞台显示尺寸 * @param scaleMode 当前的缩放模式 * @param screenWidth 播放器视口宽度 * @param screenHeight 播放器视口高度 * @param contentWidth 初始化内容宽度 * @param contentHeight 初始化内容高度 */ DefaultScreenAdapter.prototype.calculateStageSize = function (scaleMode, screenWidth, screenHeight, contentWidth, contentHeight) { var displayWidth = screenWidth; var displayHeight = screenHeight; var stageWidth = contentWidth; var stageHeight = contentHeight; var scaleX = (screenWidth / stageWidth) || 0; var scaleY = (screenHeight / stageHeight) || 0; switch (scaleMode) { case egret.StageScaleMode.EXACT_FIT: break; case egret.StageScaleMode.FIXED_HEIGHT: stageWidth = Math.round(screenWidth / scaleY); break; case egret.StageScaleMode.FIXED_WIDTH: stageHeight = Math.round(screenHeight / scaleX); break; case egret.StageScaleMode.NO_BORDER: if (scaleX > scaleY) { displayHeight = Math.round(stageHeight * scaleX); } else { displayWidth = Math.round(stageWidth * scaleY); } break; case egret.StageScaleMode.SHOW_ALL: if (scaleX > scaleY) { displayWidth = Math.round(stageWidth * scaleY); } else { displayHeight = Math.round(stageHeight * scaleX); } break; case egret.StageScaleMode.FIXED_NARROW: if (scaleX > scaleY) { stageWidth = Math.round(screenWidth / scaleY); } else { stageHeight = Math.round(screenHeight / scaleX); } break; case egret.StageScaleMode.FIXED_WIDE: if (scaleX > scaleY) { stageHeight = Math.round(screenHeight / scaleX); } else { stageWidth = Math.round(screenWidth / scaleY); } break; default: stageWidth = screenWidth; stageHeight = screenHeight; break; } if (egret.Capabilities.runtimeType != egret.RuntimeType.WXGAME) { //宽高不是2的整数倍会导致图片绘制出现问题 if (stageWidth % 2 != 0) { stageWidth += 1; } if (stageHeight % 2 != 0) { stageHeight += 1; } if (displayWidth % 2 != 0) { displayWidth += 1; } if (displayHeight % 2 != 0) { displayHeight += 1; } } return { stageWidth: stageWidth, stageHeight: stageHeight, displayWidth: displayWidth, displayHeight: displayHeight }; };

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091

模式选择
1.监听egret.Event.RESIZE事件，在监听回调中选用新的缩放模式和重新设置游戏尺寸

private resize(e ?: egret.Event) { let stage = egret.MainContext.instance.stage; // stage.$screen.playerOption.contentWidth if (egret.Capabilities.isMobile) { let w = window.innerWidth; let h = window.innerHeight; let scaleM = egret.StageScaleMode.EXACT_FIT; if (w / h > Misc.scaleRate) { scaleM = egret.StageScaleMode.FIXED_HEIGHT; } else { scaleM = egret.StageScaleMode.FIXED_WIDTH; } stage.scaleMode = scaleM; stage.setContentSize(Misc.sw, Misc.sh); } else { stage.scaleMode = egret.StageScaleMode.SHOW_ALL; } }

12345678910111213141516171819

在pc端我多直接用showAll模式; 移动端，为了保证铺满屏幕和内容不变形，主要使用fixedWidth或fixedHeight模式。（这里的Misc.scaleRate=Misc.sw/Misc.sh;即游戏设计宽/游戏设计高。不知道在游戏中怎么获取index.html中配置的游戏尺寸。好在游戏尺寸一经确定在后续开发中一般不再改变，所以我直接硬编码了。）

2.内部UI界面与舞台尺寸的适配关系
使用自适应布局
1.eui.UILayer类，可以作为自适应游戏界面的根窗口。舞台宽高改变时，它的宽高会自动跟舞台宽高保持一致，起到最外层的自适应作用。

2.自适应布局，其实就是使用相对位置，而不使用固定大小或位置值。

若是eui项目，可以使用ui的相对属性，比如设置宽度使用percentWidth，位置使用left/right/top/bottom,或horizontalCenter/verticalCenter之类。

若是非eui项目，可以根据游戏界面的宽高（这个宽高不是游戏设计宽高，而是scaleMode后实际的舞台尺寸）egret.MainContext.instance.stage.stageWidth和egret.MainContext.instance.stage.stageHeight，去动态设置界面内各ui元素的大小和位置。

至此，一个h5游戏的移动端适配方案就有了。