Phaser横屏适配

会说话的鱼

目前横屏游戏的解决方案

目前市面横屏游戏、活动页面都采用的是:屏幕竖起来时,提示需要手动旋转屏幕,或者就干脆不让玩。这两种处理方案都不太好,因为好多用户都不会旋转屏幕,就算会,操作也很麻烦,最佳的解决方案是当手机竖起来时,画面是横过来的,这样用户不用手动解锁就可以体验横屏游戏了,效果应该是这样:

clipboard.png

实现步骤

  • 第一步:设置stage的宽高。对于横屏游戏来说,我们首先得先把宽高取反,这个就不解释了,像这样

    let width = 1334
    let height = 646
    constructor() {
        super(width, height, Phaser.CANVAS, 'game')
    }
  • 第二步:取得屏幕的方向,包括初始和旋转时,都要取到准确的方向,代码如下:

    // 屏幕的方向1:竖屏;一:横屏(为啥这么定义?因为总是搞混横竖那两个单词,干脆用象形吧)
    let direction = '1'
    function getDirection() {
        switch (window.orientation) {
            case 0:
            case 180:
                direction = '1'
                break;
            case -90:
            case 90:
                direction = '一'
                break;
        }
    }

第三步:渲染,代码如下:

    Phaser.World.prototype.displayObjectUpdateTransform = function () {
        if (direction == '1') {
            game.scale.setGameSize(height, width)
            this.x = game.camera.y + game.width;
            this.y = -game.camera.x;
            this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(90));
        } else {
            game.scale.setGameSize(width, height)
            this.x = -game.camera.x;
            this.y = -game.camera.y;
            this.rotation = 0;
        }
        PIXI.DisplayObject.prototype.updateTransform.call(this);
    }

运行效果如图:

clipboard.png

更加详细的配置以及运行示例,请移步GitHub,同时感谢Phaser小站,渲染代码是在此文基础上整理

阅读 6.3k

奥巴驴
干货
2.8k 声望
217 粉丝
0 条评论
2.8k 声望
217 粉丝
文章目录
宣传栏