Phaser横屏适配

2019年9月4日 252次阅读 来源: 会说话的鱼

目前横屏游戏的解决方案

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

《Phaser横屏适配》

实现步骤

  • 第一步：设置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);
    }

运行效果如图：

《Phaser横屏适配》

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

    原文作者：会说话的鱼
    原文地址: https://segmentfault.com/a/1190000010079325
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞