Egret社区
本题已加入常见问题汇总 » 屏幕适配,更多屏幕适配相关的话题欢迎关注讨论


如题,这个方法是自己开发时琢磨出来的,比较粗劣,但是比较好用,求大神们看了别拍砖
入正题
1 在egret_loader.js中,动态获取屏幕的尺寸w*h,然后把项目的设计尺寸直接设置成w*h;
代码如下
[mw_shl_code=actionscript3,true]
var w = document.documentElement.clientWidth;//屏幕宽
    var h = document.documentElement.clientHeight;//屏幕高
    var r = w/h;//宽高比例
//这里对竖屏的情况进行了特殊处理,指定了宽为750,高按比例计算得出
    if(r>1){
        var disW = w;
        var disH = h;
    }else{
        var disW = 750;
        var disH = disW/r;
    }
    egret.StageDelegate.getInstance().setDesignSize(disW,disH);//设置宽高
    context.stage = new egret.Stage();
//scaleMode为egret默认的ShowAll
    var scaleMode =  egret.MainContext.deviceType == egret.MainContext.DEVICE_MOBILE ? egret.StageScaleMode.SHOW_ALL : egret.StageScaleMode.NO_SCALE;
    context.stage.scaleMode = scaleMode;
[/mw_shl_code]
大家可以看出,这样我们的程序运行起来,就会铺满整个屏幕了。
但是设计尺寸和屏幕尺寸的比例是不同的。这样素材放在上边是会被拉伸的。
怎么办?往下看↓
2 让素材保持原比例
一般情况下,背景图是不需要保持比例的,所以我们可以直接把背景贴上去,铺满不留黑边就行。
目标是游戏里边的小素材,比如一个小动物。
我的做法是,计算出铺满的情况下与原设计尺寸的比例。宽的比例和高的比例分开计算。
然后在生成BitMap时 就可以把素材直接按照宽或高的比例缩放(按照一个比例缩放,素材是不会变形的)。
代码如下
[mw_shl_code=applescript,true]
/**
* Created by KT on 2015/3/6.
*/
class CONST{
//480*800是初始值 没什么意义。
    public static stageW:number = 480;
    public static  stageH:number = 800;
    public static  stageScale_x:number = 1;
    public static  stageScale_y:number = 1;

    public static getScaleValue():void{
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        var r = w/h;


        if(r>1){
            var designW = 1700;//横屏设计尺寸
            var designH = 1180;
            var disW = w;
            var disH = h;
        }else{
            var designW = 822;//竖屏设计尺寸
            var designH = 1450;
            var disW = 750;
            var disH = disW/r;
        }
        CONST.stageW = disW;
        CONST.stageH = disH;
        CONST.stageScale_x = disW/designW;
        CONST.stageScale_y = disH/designH;
    }
//按照高的比例缩放素材
    public static createBitmapByNameY(name:string):egret.Bitmap {
        var result:egret.Bitmap = new egret.Bitmap();
        var texture:egret.Texture = RES.getRes(name);
        result.texture = texture;
        result.width = result.width*CONST.stageScale_y;
        result.height = result.height*CONST.stageScale_y;
        return result;
    }

//按照宽的比例缩放素材
public static createBitmapByNameX(name:string):egret.Bitmap {
var result:egret.Bitmap = new egret.Bitmap();
var texture:egret.Texture = RES.getRes(name);
result.texture = texture;
result.width = result.width*CONST.stageScale_x;
result.height = result.height*CONST.stageScale_x;
return result;
}

//创建背景,直接铺满
    public static createBitmapByNameForBG(name:string):egret.Bitmap {
        var result:egret.Bitmap = new egret.Bitmap();
        var texture:egret.Texture = RES.getRes(name);
        result.texture = texture;
        result.width = CONST.stageW;
        result.height = CONST.stageH;
        return result;
    }
}
[/mw_shl_code]
这样弄完之后,发现一个问题。人物是不变形了。但是我们程序里也没法给任务设定位置了,因为我们写程序时,不知道这个东西显示时的宽高是多少,也就没办法指定坐标。那么继续~
3 素材坐标定位。
我原来的做法是,使用相对布局,所有位置都使用全屏尺寸*相对位置。
举例说明一下,一圆点在屏幕中央,那么p.x = stage.w*0.5; p.y = stage.H*0.5;
相当于使用百分比定位。

另:
就在我码字的时候,突然觉得,完全没必要这样折磨自己。
我们可以完全按照设计图的位置定位。只需要给这个坐标位置*缩放系数就行了。
比如,设计中一个点的位置是(300,400)
代码中我们可以写
p.x = 300*stageScale_x;
p.y = 400*stageScale_y;
这个方案没用过,可能会遇到些问题,比如按照x缩放适配时,使用素材的y坐标会有问题。

that's all~
demo点这里(demo是我给别人做的,所有权属于别人

分享到 :
5 人收藏
搞IT的,能动手尽量别吵吵~

4 个回复

倒序浏览
xsstomy  斑竹 | 2015-4-15 10:10:40
挺好的给个demo链接或者源码什么的更好了,因为懒的动手的人太多了http://bbs.egret-labs.org/forum. ... tid=5974&extra=
ktomcat  圆转纯熟 | 2015-4-15 10:24:49
本帖最后由 ktomcat 于 2015-4-15 10:26 编辑

加了demo连接。源码就不分享了。
我把核心的部分已经贴出来了,
啥饭也得自己吃到嘴里才知道好不好。
对吧~
hubertchen  登堂入室 | 2017-3-30 11:06:42
赞 !  不是懒人多, 我们是想用来参考。
linlinxueqi  初学乍练 | 2017-4-1 10:04:47
我是个游戏新手,想请问一下,现在开发egret不是用ts,但是这个论坛里面我看了很多都在用action和你这个,就想问一下,现在普遍是用的哪一种语言啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

返回顶部