egret.H5游戏屏幕适配

需求

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

两个步骤:

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:在screenW

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值