В этой статье я подробно расскажу как масштабировать вашу HTML5 игру, чтобы она всегда вписывалась в максимальный размер web страницы.
На самом деле весь этот функционал уже реализован в моём классе ScaleManager, который вы могли давно наблюдать в шаблоне проекта для Phaser на TypeScript. Поэтому я просто рассмотрю его подробно, чтобы всё было понятно.
Суть этого класса в том, что он располагает и масштабирует вашу игру так, чтобы она всегда была по центру страницы и отображалась желаемая рабочая область (SafeArea) игры.
Работает класс автономно, т.к. после инициализации сам подписывается на событие window.onresize. По этому событию выполняется функция ScaleManager.SizeCalculation() в которой и происходит расчёт всех размеров и событий относительно текущих размеров страницы.
Для использования класса его нужно просто инициализировать и лучше это сделать как можно раньше, перед любой значимой сценой, чтобы любая видимая часть игры уже правильно отмасштабировалась, в моём примере это делается в самой первой сцене Boot:
В функцию ScaleManager.init(…) нужно передать следующие параметры:
- ссылку на текущий класс игры
- id DOM элемента, в котором расположена игра, в данном случае это div-элемент HTML страницы с игрой, который имеет id = «game»
- максимальное разрешение игры GW и GH и разрешение минимальной рабочей области игры (GSW и GSH), так называемая SafeArea область.
SafeArea — это минимальная рабочая область игры, которая не должна обрезаться (выходить за края экрана), область которую игрок должен всегда видеть на любых разрешениях экрана.
Для наглядности рассмотрим пример: наша игровая сцена должна корректно отображаться и на экранах iPad-ов и на экранах длинных телефонов. Максимальное соотношение сторон iPad-а = 4:3, максимальное сплюснутое разрешения телефонов бывает 16:9, учитывая что сферху место будет занимать полоска браузера (которая отображает адрес страницы и т.п.), то будет почти 2:1. Допустим мы определились с разрешением текстур для игры и делаем их под разрешение 1024:768 — это будет нашим максимальным отображаемым разрешением, а минимальную необходимую область определили разрешением в 800:400.
Я специально подготовил прототип игровой сцены с разметкой этих областей:
Т.е. игра на разных устройствах должна выглядить следующим образом:
Я думаю смысл SafeArea понятен — эта область должна всегда быть на экране и если экран позволяет, то показывается MaximumArea.
Теперь рассмотрим случаи, которые описаны в коде под буквами A, B, C, D.
А вот живая демонстрация данного скейлинга, откройте и изменяйте размеры окна браузера чтобы понаблюдать динамку масштабирования, а так же можно открыть на любом устройстве. Вот видео данной демонстрации:
Исходники примера можно как всегда посмотреть и скачать в репозитории.
PS:
Так же у меня здесь (в шаблоне) частично прикручена функция отображения иконки «разверните устройство», если на мобильных устройствах повернулись в портретный режим. Это можно видеть на видео и на мобильных устройствах. Но она пока что работает только для горизонтальных ориентаций. И это уже другая тема, которую я раскрою в последующей статье, когда допишу опциональный функционал для обоих ориентаций.
