Phaser 3スクリーンはiPhoneX、iPhoneXsのピットに適しています--JavaScript Html 5ゲーム開発

1761 ワード

PhaserJS
ピット:config内でwidthをwindowにしないでください.innnerWidthはconfig内でwidthをwindowにしないでください.innnerWidthはconfig内でwidthをwindowにしないでください.innnerWidth
重要なことは3回言わなければなりません...
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--ゲーム開発を誇りに思う