分辨率自适应方案(不产生黑边)

我自己的一点心得,由于横屏的体验现阶段并不好,所以这个方案只对竖屏.

找到launcher文件夹下的egret_loader.js文件(EGRET 1.6)

修改代码如下

var  context = egret.MainContext.instance;
    context.touchContext = new egret.HTML5TouchContext();
    context.deviceContext = new egret.HTML5DeviceContext();
    context.netContext = new egret.HTML5NetContext();
    var stageWidth = document.documentElement.clientWidth;
    var stageHeight = document.documentElement.clientHeight;
    var width;
    var height;
    var scale;
    if (stageWidth > stageHeight) {
        width = 540;
        height = 960;
    } else {
        width = stageWidth;
        height = stageHeight;
    }

    scale = 540 / width;
    egret.StageDelegate.getInstance().setDesignSize((width * scale)>>0, (height * scale)>>0);
    context.stage = new egret.Stage();
    context.stage.scaleMode = egret.StageScaleMode.SHOW_ALL;

基本思想:得到浏览器的宽高,然后把宽度定死成540(之所以选择540,是我多次试验后比较好的一个宽度,具体就不详解了,这个数值也可以是其它),高度由实际宽度和540的比例,算出来的适配540的值,然后缩放规则直接用SHOW_ALL,这样在浏览器内就不产生黑边了.

注:这个方案高度是动态的,所以游戏逻辑里要对这个高度做一些自适应的规则.

时间: 2024-08-14 18:20:45

分辨率自适应方案(不产生黑边)的相关文章

NGUI之UIRoot屏幕分辨率自适应

来自:http://blog.csdn.net/oneRain88/article/details/11713299 NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 UIRoot游戏对象的属性只有4个,分别是缩放规则,手动高度,最小高度和最大高度 而正是这4个属性,将影响整个UI场景中整体的缩放比例,当设置好这4个属性之后,UIRoot游戏对象的相

Unity3D开发(一):NGUI之UIRoot屏幕分辨率自适应

原地址:http://blog.csdn.net/onerain88/article/details/11713299 NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 UIRoot游戏对象的属性只有4个,分别是缩放规则,手动高度,最小高度和最大高度 而正是这4个属性,将影响整个UI场景中整体的缩放比例,当设置好这4个属性之后,UIRoot游戏对象的

web app 自适应方案总结 关键字 弹性布局之rem

web app 自适应方案总结 关键字 弹性布局之rem 关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/define-font-size-with-css3-rem 现在移动端 web app 的自适应布局的方案有 5种. 零. Flexbox 使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何

移动端自适应方案

本文来自大搜车博客:移动端自适应方案,主要讲:1.移动真的需要动态生成viewport吗?2.移动前端如何自适应?作者给出主观的最佳实践:最帅的flex.演示地址.里面讲了一些互联网公司的自适应做法,可以看看. 研究样本 手淘 ml.JS 天猫首页 手机携程 一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事.回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下. 研究结论 手淘 获取手机dpr(window.devicePix

Android不同手机屏幕分辨率自适应【转】

有必要了解的 Android中常见的单位 dip, dp, px, sp之间的区别: dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素.px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多.pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用:sp: scal

(转)移动端自适应方案

研究样本 手淘 ml.js 天猫首页 手机携程 一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事.回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下. 研究结论 手淘 获取手机dpr(window.devicePixelRatio),动态生成viewport. 换取手机宽度,分成10份,每一份的宽度即是rem的尺寸. 根据设计稿尺寸(px)通过计算,转换成rem去布局. ps:海外淘宝并没有这样做,而是scale1.0并且图

原生js移动端字体自适应方案

自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: 1 (function(doc, win) { 2 var docEl = doc.documentElement, 3 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 4 recalc = function() { 5 va

手机游戏引擎libgdx-1.2 分辨率自适应

libgdx从1.0版本开始,stage分辨率自适应方法发生了改变. 我们查看stage的构造方法: public Stage (Viewport viewport) { this(viewport, null); } 我们必须手工去创建一个自己的Viewport才行. new Stage((new ScalingViewport(Scaling.stretch, width, height, new OrthographicCamera()))); ScalingViewport :可缩放视角

如何通过 WebP 自适应方案减少图片资源大小

前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能降低移动网络的流量费用.原图产生的 PNG.JPEG.GIF 和 SVG 图片一般都有很大的压缩余地.下文将重点介绍一款图片新格式:WebP,从而揭开它神秘的面纱. 解决方案:使用 WebP 优化图像 1.什么是 WebP ? WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式