Egret社区

游戏页面适配的几种方式

2014-9-3 17:30
1331027
本题已加入常见问题汇总 » 屏幕适配,更多屏幕适配相关的话题欢迎关注讨论


官方说明来了,不用看我写的了
egret目前有3种页面适配的方式。在lanucher/egret_loader.js里,下面一行?后一个参数就是适配模式。
  1. var scaleMode =  egret.MainContext.deviceType == egret.MainContext.DEVICE_MOBILE ? egret.StageScaleMode.SHOW_ALL : egret.StageScaleMode.NO_SCALE;
复制代码

第1种 egret.StageScaleMode.SHOW_ALL
目前的默认配置。这个会按照等比缩放适配你的窗口。
比如游戏设定是480x800的。
如果页面是640x700,则上下满屏,两边会出现黑边。如果是640x1280,则两边满屏,下边会有黑边

第2种 egret.StageScaleMode.NO_SCALE
这个是在PC上调试用的。手机上最好不要使用.


第3种 gret.StageScaleMode.NO_BORDER
会不按照比例,按照页面的宽高暴力充满整个窗口。


那么我们做游戏的时候可以根据这3种模式调节游戏的大小。


入门级调整
就单纯使用1或者3。等比缩放大小或者填满窗口。最简单


中级调整
比如我的游戏是480x800.那么我游戏的高宽比是800/480=1.67
那么可以在egret_loader.js里这么写
  1. //var scaleMode = egret.MainContext.deviceType == egret.MainContext.DEVICE_MOBILE ? egret.StageScaleMode.SHOW_ALL : egret.StageScaleMode.NO_SCALE;
  2. //原始适配方式,下面的是修改过的
  3. var per = window.innerHeight/window.innerWidth;
  4. var scaleMode;
  5. if(per<=1.67){scaleMode = egret.StageScaleMode.NO_BORDER;}
  6. else{scaleMode = egret.StageScaleMode.SHOW_ALL;}
  7. context.stage.scaleMode = scaleMode;
复制代码

这样配置的意思是,比如页面是640x960的,高宽是960*/640=1.5小于1.67。就不按照比例,直接铺满屏幕。比两边有黑边好看一点。
如果是640x1136的页面,大于1.67。那么显示效果就是按照等比缩放。两边铺满屏幕,下边会有一点黑边。
注意1:真实的手机屏幕上下会有浏览器的边框,得出来的宽高比是会刨除掉边框高度的。
注意2:这个只是打比方,要根据你的喜好和具体游戏的显示效果来设定模式。你可以再加更多的判断。

高级调整
首先游戏里宽度固定,然后根据stage.stageHeight来动态调整游戏的高度。
那么高宽比就是一个范围。页面的大小在这个范围内,就使用NO_BORDER,会很合适的铺满屏幕。
如果页面的高宽比不在这个范围内,使用SHOW_ALL,等比缩放。
当然你可以加更多地判断,让显示效果更好。
抛砖引玉。你有更好的适配模式,欢迎分享









分享到 :
28 人收藏

27 个回复

倒序浏览
7yue  官方团队 | 2014-9-3 17:37:01
你直接把弯的给PK掉了,他写的适配逻辑,但是还没写出一篇让人明白的教程。你写的这篇教程完爆他啊。
池中金鳞  登堂入室 | 2014-9-3 17:45:18
简单易懂~!马克先,用到再回顾
shinji  初学乍练 | 2014-9-3 20:15:22
7yue 发表于 2014-9-3 17:37
你直接把弯的给PK掉了,他写的适配逻辑,但是还没写出一篇让人明白的教程。你写的这篇教程完爆他啊。{:6_12 ...

“弯的”……好名字……
coyote  登堂入室 | 2014-9-3 21:25:20
简单易懂,卤煮辛苦了
zack  登堂入室 | 2014-9-4 16:47:48
感谢楼主
bingheliefeng  登堂入室 | 2014-9-5 13:43:06
一般的手机游戏都是用的FixedWidth 或者 FixedHeight这两种方式适配
王浩1991  登堂入室 | 2014-9-9 09:32:47
不错,学习了!!
sunshine1988  登堂入室 | 2014-9-25 08:26:57
说下我的理解 大牛们看下对不:
UI设计时按480x800 然后游戏里的对象宽高多设置为UI设计里的绝对宽高值
这里的适配方案里的等比缩放 会等比缩放具有绝对宽高值得object吗
junlas  斑竹 | 2014-9-26 00:19:18
看上去很不错。明天好好研究一下。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部