Назад Вперед

Адаптация игры под разные размеры экрана.

На данный момент мини-игра 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() { 

    }
    ...
 

Функция 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.

Тестирование в браузере

Если включить консоль разработчика и уменьшить ширину окна браузера, то игра будет по ширине заполнять весь экран и уменьшать свою ширину соответственно. При этом высота также будет изменяться, оставляя соотношение ширины и высоты неизменным.

Тестирование в браузере

Нажимаю на значок телефона в консоли и теперь можно проверить, как будет выглядеть игра на мобильных устройствах.

Тестирование в браузере

Кроме того, если на странице присутствует другой какой-то контент, игра так же будет правильно отображаться, в чем можно убедиться открыв проект на моем сайте.

Тестирование в браузере

В итоге игровой экран вписывается в ширину экрана устройства. Все элементы также отображаются правильно, так как я использовал переменные для их размещения. Поэтому смещений или искажений нету. На данный момент это все изменения. В будущем для мобильных устройств, после добавления ввода с сенсорных экранов, нужно будет продумать как отображать игру на полный экран, чтобы было удобно играть на телефоне, а для просмотра такой вариант подходит лучше всего.

Спасибо за внимание!

Назад Вперед