游戏页面适配的几种方式

本题已加入「常见问题汇总」 » 「屏幕适配」，更多「屏幕适配」相关的话题欢迎关注讨论

官方说明来了，不用看我写的了
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，等比缩放。
当然你可以加更多地判断，让显示效果更好。
抛砖引玉。你有更好的适配模式，欢迎分享

你直接把弯的给PK掉了，他写的适配逻辑，但是还没写出一篇让人明白的教程。你写的这篇教程完爆他啊。

简单易懂~！马克先，用到再回顾

7yue 发表于 2014-9-3 17:37
你直接把弯的给PK掉了，他写的适配逻辑，但是还没写出一篇让人明白的教程。你写的这篇教程完爆他啊。{:6_12 ...

“弯的”……好名字……

简单易懂，卤煮辛苦了

感谢楼主

一般的手机游戏都是用的FixedWidth 或者 FixedHeight这两种方式适配

不错，学习了！！

说下我的理解 大牛们看下对不：
UI设计时按480x800 然后游戏里的对象宽高多设置为UI设计里的绝对宽高值
这里的适配方案里的等比缩放 会等比缩放具有绝对宽高值得object吗

看上去很不错。明天好好研究一下。