egret微信小游戏屏幕适配showAll效果

微信小游戏目前是不支持showAll的,默认会改为fixedWidth。

那么,我们可以在代码里面自己实现showAll的效果,大致想法是:

1.在舞台添加一个子窗口并计算其缩放程度及居中坐标,以后其他场景都以它为基础去添加;

2.为了不出现黑边,可以加一张背景图拉伸到满屏。

废话不多说,先上代码:

直接写在主类的createGameScene()方法中:

        //获取实际窗口(屏幕)尺寸。
        let w=this.stage.stageWidth;
        let h=this.stage.stageHeight;
        
        //添加背景图。
        let bg:eui.Image=new eui.Image(RES.getRes('bg_jpg'));
        this.addChild(bg);
        //把背景图拉伸到满屏。
        bg.width=w;
        bg.height=h;
        
        //声明水平和垂直的居中偏移,以及高度或宽度的缩放值。
        let xoffset=0;
        let yoffset=0;
        let scale0=0;
        //计算居中偏移及缩放值。这里,设计时的宽高为640*1136。
        if(w/h>640/1136){
            //屏幕比640*1136扁(或称为短):
            scale0=h/1136;
            xoffset=(w-640*scale0)/2;
        }else{
            //屏幕比640*1136长或相同:
            scale0=w/640;
            yoffset=(h-1136*scale0)/2;
        }
        
        //console.log([w,h,xoffset,yoffset,scale0].toString());

        //这里的Mission就是自定义的一个子窗口。这个子窗口缩放到showAll模式。
        let ss:Mission=new Mission();
        ss.x=xoffset;
        ss.y=yoffset;
        ss.scaleX=scale0;
        ss.scaleY=scale0;
        this.addChild(ss);

这样就把showAll模式应用到子窗口当中了。建议用这个子窗口(上面叫做ss)来作为其他内容的基础舞台。

如果想在不同场景使用不同的背景图,可以把ss的居中偏移做成负数以及使用stage的宽高去添加背景图。

如果某些组件、图片等要使用移到屏幕外的方式去隐藏,建议设置visible为false,不然换个设备可能就穿帮了。

你可能感兴趣的:(egret微信小游戏屏幕适配showAll效果)