Практические рекомендации
Создавая ещё одну HTML5-игру для Poki, я использовал бы тот же подход:
-
Начните с профилей виртуального экрана. Определите системы координат для вертикальной и горизонтальной ориентаций. Не привязывайте игровой процесс к
window.innerWidth. -
Создайте один менеджер экрана. Он должен вычислять ориентацию, виртуальный размер, размер области просмотра и отправлять одно нормализованное событие изменения экрана.
-
Оставьте простые элементы декларативными. Центрирование, размещение у края, полноэкранные фоны и равномерный масштаб должны описываться в JSON-вёрстке.
-
Используйте компоненты узлов для сложной композиции сцены. Компонент может знать правила UX сцены, но не должен дублировать всю систему вёрстки движка.
-
Меняйте модель компоновки между ориентациями. Хорошая адаптивность игры не всегда означает уменьшение одного интерфейса. Иногда вертикальной ориентации нужна нижняя панель, а горизонтальной — боковая.
-
Пересчитывайте границы игрового процесса. Физика, перетаскивание, создание объектов, столкновения и цели обучения должны реагировать на изменения экрана.
-
Обрабатывайте изменение размера во время анимаций. Активные твины нужно завершать, отменять или перезапускать с новыми целевыми значениями.
-
Тестируйте не только популярные разрешения. Проверяйте сверхширокие экраны, узкую вертикальную ориентацию, горизонтальные планшеты, небольшие iframe и поворот во время игры.
Вывод
Для Poki недостаточно canvas { width: 100%; height: 100%; }.
Настоящая адаптивная игра должна изменять:
- виртуальную систему координат;
- JSON-вёрстку;
- композицию сцены;
- панели интерфейса;
- границы игрового процесса;
- размеры объектов;
- анимации;
- текст;
- состояние ввода и перетаскивания.
Формула, которую я использую в Stickers Merge:
движок рассчитывает экран и предоставляет переиспользуемые примитивы адаптации, а игровые компоненты описывают решения UX для конкретных сцен.
Это сохраняет управляемость кода и делает игру удобной как на широком экране компьютера, так и на вертикальном экране телефона.