Автоматически масштабировать игру Phaser 3 динамически в середине исполнения - PullRequest
Новая
       18

Автоматически масштабировать игру Phaser 3 динамически в середине исполнения

2 голосов
/ 14 октября 2019

Мне интересно, есть ли способ разработать мою игру с заданным разрешением, например: 

width: 1000,
height: 600,

А затем использовать HTML или Phaser для автоматического масштабирования элемента canvas при изменении размера окна.

Я пытался использовать это: 

width: window.innerWidth / 2,
height: window.innerHeight / 2,

Но это не сохраняет соотношение сторон, неправильно масштабирует спрайты / изображения, требует перезагрузки страницы для настроек и означает, что я не могу использовать определенныеx / y координаты.

Я посмотрел на Диспетчер масштабирования в Phaser 3 и Flex Boxes, но, похоже, они не меняют размер холста.

Ответы [ 2 ]

2 голосов
/ 14 октября 2019

Самым простым решением, которое я смог найти, было следующее:

  • Сначала , добавьте эти правила стилей CSS: 
html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

canvas {
  /* And see postBoot() in JS */
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* <https://caniuse.com/#feat=object-fit> */
}

#version {
  position: absolute;
  left: 5px;
  top: 605px;
}
  • Второй , добавьте функцию обратного вызова в объект config для переопределения стилей Phaser по умолчанию, например: 
var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 200 }
    }
  },
  scene: {
    preload: preload,
    create: create
  },
  callbacks: {
    postBoot: function (game) {
      // In v3.15, you have to override Phaser's default styles
      game.canvas.style.width = '100%';
      game.canvas.style.height = '100%';
    }
  }
};

Я нашел образец кода здесь .

РЕДАКТИРОВАТЬ :

Если вы хотите изменить размер игры при каждом изменении окна в середине исполнения, вы можете сделать аналогичноефункция в вашем цикле обновления выглядит так: 

function update(){
    (function() {
        const gameId = document.getElementById("game"); // Target div that wraps the phaser game
        gameId.style.width = '100%'; // set width to 100%
        gameId.style.height = '100%'; // set height to 100%
    })(); // run function
}
1 голос
/ 14 октября 2019

Попробуйте это: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Позволяет настроить CSS для области просмотра.

...