美文网首页一只腊鸭做游戏
LayaBox微信小游戏适配方案

LayaBox微信小游戏适配方案

作者: 回忆并快 | 来源:发表于2018-03-30 18:23 被阅读54次

    最近小游戏开放了测试,于是我迫不及待的把我写好的Pow上传到微信的服务器看看效果,结果傻了眼,在iphonex下竟然适配都失效,而且还导致了点击区域的错位。



    然后试了一番,发现好多适配模式的出问题了,以下三种都无效了。

            Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;
            Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
            Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
    

    之前试为了方便适配,然后通过UIManager作为管理,既然改了那么只要修改下UIManager中的适配规则。

    首先适配模式改为:

    Laya.stage.scaleMode = Stage.SCALE_FIXED_WIDTH;
    

    这种模式,暂时没有发现有问题。



    三种模拟器下面的效果是一致的。
    然后在这个一致的基础,进行适配。
    简单来说,比较懒,能让layabox的编辑器的功能就尽量使用。
    编辑器里面,就有这样的编辑选项,方便我们UI的定位。



    比如这个文本,然后centerX:0,centerY:0,控制文本居中。
    然后根据不同分辨率居中,我们只需要动态调整View的大小。

    像这个样子,算出缩放后的屏幕大小(针对竖屏,设计分辨率为750*1334):

                let ratio = Laya.Browser.clientWidth/Laya.stage.width; ///  xxx/750 算出相对比例
                let h = Laya.Browser.clientHeight/ratio;
                Logger.log("real height is", h);
                page.size(750, h);
                // 对于背景图,也是设置一个居中设置,锚点居中,然后fixed_height的方式来铺满屏幕。
                if(page['bg']){
                    let ratioH = h/1334;
                    page['bg'].size(750*ratioH, h);
                }
    

    这样写好接口之后,只要通过通用的打开UI的方式,就能完美适配竖屏,设计分辨率和最长机型的分辨率算出,即使放大后两边被遮到,也可以看见我们核心的内容。


    最后效果

    相关文章

      网友评论

        本文标题:LayaBox微信小游戏适配方案

        本文链接:https://www.haomeiwen.com/subject/stabcftx.html