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);
    }

運行效果如圖：

更加詳細的配置以及運行示例，請移步GitHub，同時感謝Phaser小站，渲染代碼是在此文基礎上整理