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,不然换个设备可能就穿帮了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值