美文网首页PhaserJS网页游戏开发
Phaser3屏幕适配iPhoneX、iPhoneXs的坑 --

Phaser3屏幕适配iPhoneX、iPhoneXs的坑 --

作者: 布袋的世界 | 来源:发表于2018-11-07 11:32 被阅读3次
    PhaserJS

    坑:
    在config内不要把 width 设为 window.innnerWidth
    在config内不要把 width 设为 window.innnerWidth
    在config内不要把 width 设为 window.innnerWidth

    重要的事情得说三遍...

    var game;
    // once the window loads...
    window.onload = function () {
        // 接收 websocket;
        // config of the game;
        var config = {
            type: Phaser.AUTO,
            parent: 'bitgame',
            width: 640, // don't window.innerWidth 
            height: 512,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: {
                        y: 0
                    },
                    debug: false,
                }
            },
            //*** scenes used by the game
            scene:  [BootScene,PlayGameScene,UIScene]
        }
        game = new Phaser.Game(config);
        // game.scene.add('Boot', BootScene); //*** key,class */
        // game.scene.add('PlayGame', PlayGameScene);
        // game.scene.add('UI', UIScene);
        // game.scene.start('Boot');
    
        window.focus();
        resize();
        window.addEventListener('resize', resize, false);
    }
     
    function resize() {
          
        var canvas = document.querySelector('canvas');
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        var windowRatio = windowWidth / windowHeight;
        var gameRatio =  game.config.width / game.config.height;
        if (windowRatio < gameRatio) {
            canvas.style.width = windowWidth + 'px';
            canvas.style.height = (windowWidth / gameRatio) + 'px';
        } else {
            canvas.style.width = (windowHeight * gameRatio) + 'px';
            canvas.style.height = windowHeight + 'px';
        }
    
    
    }
    

    更多游戏开源教学:www.iFIERO.com -- 为游戏开发深感自豪

    相关文章

      网友评论

        本文标题:Phaser3屏幕适配iPhoneX、iPhoneXs的坑 --

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