В этой статье я хочу объяснить, как работает отзывчивая и адаптивная вёрстка в моей игре Stickers Merge.
Задача
Игры на Poki должны работать на компьютерах, телефонах и планшетах. Согласно официальным требованиям Poki, на мобильных устройствах игра должна занимать весь экран в вертикальной или горизонтальной ориентации, а поддержка обеих ориентаций даёт наилучший опыт. Игра также должна масштабироваться на весь canvas на разных устройствах.
В реальной разработке это означает:
- игра не должна ломаться при разных размерах iframe;
- вертикальная и горизонтальная ориентации — два разных сценария UX;
- игрокам на компьютере обычно полезно использовать ширину экрана;
- на мобильных устройствах часто играют вертикально, используя высоту;
- интерфейс не должен просто уменьшаться до нечитаемого размера;
- пересчитывать нужно и игровое пространство, а не только визуальный интерфейс.
В Stickers Merge я не решаю это одним огромным обработчиком изменения размера. Адаптивная система разделена на несколько слоёв.
Общая архитектура
Есть три уровня:
- Экранный слой движка — рассчитывает виртуальный размер canvas и ориентацию, отправляет
SCREEN_CHANGED. - Примитивы вёрстки движка — переиспользуемые компоненты для типовых задач: позиционирования, масштабирования и вписывания по границам.
- Компоненты игровой композиции — компоненты конкретной сцены, знающие правила UX игры: сколько показывать столбцов, где размещать панель и как перестраивать физическое игровое поле.
Такое разделение важно. Движок отвечает за математику экрана и общие операции вёрстки. Игра — за смысл и UX.