egret.H5游戏屏幕适配

最新推荐文章于 2021-12-10 00:58:26 发布

hyzhl_

最新推荐文章于 2021-12-10 00:58:26 发布

阅读量2.3k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： h5游戏文章标签： html5 游戏开发

本文链接：https://blog.youkuaiyun.com/sinat_20998879/article/details/103635275

本文介绍了如何使H5游戏在不同分辨率设备上正确显示，重点讨论了Egret框架下舞台尺寸与设备屏幕的适配关系，包括八种缩放模式的优缺点及应用场景，并提出通过监听resize事件动态调整缩放模式，以及使用自适应布局实现内部UI界面的适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

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

两个步骤：

1.舞台尺寸(Stage.stageWidth,Stage.stageHeight)与设备屏幕的适配关系。

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>

我们通过设置游戏的scaleMode(缩放模式)来解决第一点。设置index.html文件中data-scale-mode属性或在游戏代码中egret.MainContext.instance.stage.scaleMode = egret.StageScaleMode.SHOW_ALL（假设设为showAll模式）。
八种缩放模式：
SHOW_ALL：优点：保持宽高比缩放内容。缺点：可能会在上下或左右留下黑边。
FIXED_WIDTH：保持stageWidth不变,根据视口宽和stageWidth的比，还有视口高度去更改stageHeight（scaleX=screenWidth/stageWidth;stageHeight=screenHeight / scaleX）;然后再等比缩放到canvas上。优点：等比缩放，铺满屏幕，内容不会变形。常用在视口宽高比<游戏宽高比时。
FIXED_HEIGHT：（参考上一条FIXED_WIDTH，把宽和高对调就行）
EXACT_FIT：直接拉伸游戏内容，暴力填充整个屏幕canvas。舞台尺寸(stage.stageWidth,stage.stageHeight)始终等于初始化时设置的内容尺寸。优点：铺满屏幕。缺点：暴力拉伸，内容会变形。
NO_SCALE：不对内容进行任何缩放，保持原始的1:1比例，然后直接把舞台对齐到浏览器的左上角。即使在更改视口窗口大小时，它仍然保持不变。如果视口窗口比内容小，则可能进行一些裁切。舞台尺寸（stage.stageWidth,stage.stageHeight）始终跟播放器窗口大小保持一致。(个人觉得这种没用，不知道什么情况下适用这种模式)
NO_BORDER：根据屏幕的尺寸等比缩放内容，让游戏内容在较宽一方填满视口，另一方可能会超出视口而被裁剪掉。(个人觉得这种也没用，一般不使用)
FIXED_NARROW：在screenWidth / stageWidth>screenHeight / stageHeight时，适用FIXED_HEIGHT；相反时适用FIXED_WIDTH。优点：等比缩放，填满屏幕，内容不会变形。
FIXED_WIDE：在screenWidth / stageWidth>screenHeight / stageHeight时，适用FIXED_WIDTH；相反时适用FIXED_HEIGHT。优点：等比缩放，填满屏幕，内容不会变形。