Адаптация игры под разные размеры экрана.
На данный момент мини-игра PingPong имеет размеры игрового экрана 600 на 400 пикселей и эти показатели не меняются при изменении размеров браузера и при открытии проекта на мобильных устройствах. Адаптацией под разное разрешение игрового экрана и займусь в этом материале.
Главная задача — изменение размеров игрового пространства при изменении размеров экрана с сохранением пропорций, но при этом превышать размер 600х400 не должно. Кроме того, игра должна правильно работать, когда на странице расположен и другой контент для публикации на сайте.
Открываю проект и первым делом перехожу в файл style.css, где уже записаны стили для центрирования игры по горизонтали. Мне нужно лишь добавить для тега body одно правило, которое убирает все внешние отступы.
Файл style.css:
body {
margin: 0;
}
...
Перехожу к файлу с основными игровыми настройками main.js. Весь код по адаптации размера игрового пространства будет записан в нем.
Первым делом сохраняю экземпляр класса с игровыми настройками в отдельную переменную.
Файл main.js:
...
var game = new Phaser.Game(config);
...
После этого вызываю функцию resize() и ниже создаю ее. В этой функции и будет происходить изменение размера игрового экрана, а именно - подсчет ширины и высоты в соответствии со значением ширины и высоты экрана устройства.
Файл main.js:
...
var game = new Phaser.Game(config);
resize();
function resize() {
}
...
Между вызовом функции и самой функций нужно записать слушатель для этой функции, который будет отслеживать ее выполнение. Записывается он следующим образом:
Файл main.js:
...
var game = new Phaser.Game(config);
resize();
window.addEventListener('resize', resize, false);
function resize() {
}
...
Перехожу к самой функции. Для начала мне понадобиться несколько переменных для удобства работы. И также переменная, которая хранит в себе элемент canvas, на котором происходит отрисовка игры. Объявляю ее.
Файл main.js:
...
function resize() {
var canvas = document.querySelector("canvas");
}
...
Теперь переменные, которые будут хранить в себе значения ширины и высоты экрана всего окна, в котором запускается игра.
Файл main.js:
...
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
...
Переменные для хранения ширины и высоты игрового экрана, которые указаны в игровых настройках.
Файл main.js:
...
var gameWidth = game.config.width;
var gameHeigth = game.config.height;
...
Необходимо высчитать коэффициент соотношения ширины и высоты окна браузера с помощью этих же переменных.
Файл main.js:
...
var windowRatio = windowWidth / windowHeight;
...
Такой же коэффициент нужен и с показателями ширины и высоты игрового пространства.
Файл main.js:
...
var gameRatio = gameWidth / gameHeigth;
...
Основные переменные и коэффициенты получены. Теперь же перехожу к прописыванию условий, которые будут проверяться и выполняться соответственно. Первое условие — ширина или высота окна браузера меньше или нет ширины и высоты игрового пространства. Это позволит решить задачу, чтобы игра не была больше той ширины и высоты, которая прописана в настройках.
Файл main.js:
...
if (window.innerWidth <= gameWidth || window.innerHeight <= gameHeigth) {
}
...
Внутри записываю еще одно вложенное условие. На этот раз сравниваю коэффициенты соотношения ширины и высоты окна и игрового экрана.
Файл main.js:
...
if (window.innerWidth <= gameWidth || window.innerHeight <= gameHeigth) {
if(windowRatio < gameRatio){
} else {
}
}
...
И для каждого условия нужно записать соответственные методы подсчета размеров экрана. Новые подсчитанные размеры экрана заменяют ширину и высоты а ргумента style для тега canvas.
Файл main.js:
...
if (window.innerWidth <= gameWidth || window.innerHeight <= gameHeigth) {
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";
}
}
...
Сохраняю все изменения и открываю с помощью локального сервера проект. Осталось только протестировать и проверить, что все работает правильно. В обычном большом окне браузера игра выглядит следующим образом. Отцентрирована по горизонтали, по вертикали — в самом верху. Размеры игрового экрана 600 на 400.
Если включить консоль разработчика и уменьшить ширину окна браузера, то игра будет по ширине заполнять весь экран и уменьшать свою ширину соответственно. При этом высота также будет изменяться, оставляя соотношение ширины и высоты неизменным.
Нажимаю на значок телефона в консоли и теперь можно проверить, как будет выглядеть игра на мобильных устройствах.
Кроме того, если на странице присутствует другой какой-то контент, игра так же будет правильно отображаться, в чем можно убедиться открыв проект на моем сайте.
В итоге игровой экран вписывается в ширину экрана устройства. Все элементы также отображаются правильно, так как я использовал переменные для их размещения. Поэтому смещений или искажений нету. На данный момент это все изменения. В будущем для мобильных устройств, после добавления ввода с сенсорных экранов, нужно будет продумать как отображать игру на полный экран, чтобы было удобно играть на телефоне, а для просмотра такой вариант подходит лучше всего.
Спасибо за внимание!
