Проблема масштабирования Phaser PWA на мобильных устройствах - PullRequest
Новая
       42

Проблема масштабирования Phaser PWA на мобильных устройствах

0 голосов
/ 16 октября 2018

Я создал PWA с помощью Phaser 2, следуя этому руководству (это сделано с помощью Phaser 3).

У меня проблема с масштабированием игры на мобильном телефоне.В моей игре я использую следующие методы Phaser 2 для масштабирования: 

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;

Когда я нажимаю ссылку localhost на своем мобильном телефоне, игра кажется слишком большой, и мне приходится прокручивать вниз довидеть это.Когда я «загружаю» его, чтобы он действовал как приложение, оно сначала становится шатким, масштабируется вверх и вниз, пока не достигнет нужного размера.Размеры игры 1280x720, и я выглядел очень хорошо, прежде чем я преобразовал его в PWA, как в Интернете, так и на мобильном телефоне.

Я провел аудит для PWA в инструментах разработчика Chrome и показал следующее уведомление: Размер области просмотра1280px, тогда как размер окна 412px.

Я пробовал решения из здесь и здесь , но это не помогло.Это должно быть что-то еще.

У вас есть идеи, что может быть причиной этого?

1 Ответ

0 голосов
/ 16 октября 2018

Это то, что я обычно делаю для Phaser 3, но даже если вы используете Phaser 2, вы можете попробовать изменить размер canvas за пределами функциональности Phaser 2.

Из Эмануэле Феронато * Какмасштабируйте свои игры HTML5, если в вашей среде нет диспетчера масштабирования или если вы не используете какую-либо среду : 

/**
 * From https://www.emanueleferonato.com/2018/02/16/how-to-scale-your-html5-games-if-your-framework-does-not-feature-a-scale-manager-or-if-you-do-not-use-any-framework/
 */
function resize() {
    const canvas = document.querySelector("canvas");
    const width = window.innerWidth;
    const height = window.innerHeight;
    const wratio = width / height;
    const ratio = Number(gameConfig.width) / Number(gameConfig.height);
    if (wratio < ratio) {
        canvas.style.width = width + "px";
        canvas.style.height = (width / ratio) + "px";
    } else {
        canvas.style.width = (height * ratio) + "px";
        canvas.style.height = height + "px";
    }
}

window.onload = function(){
    // setup your game here
    resize();
    window.addEventListener("resize", resize, false);
}
...