Согласитесь, что почти каждая игра должна работать на экране любого размера. Это могут быть телефоны с разными размерами экранов, измененный размера окна браузера, разрешение монитора, и так далее. Даже игры с фиксированным размером игрового поля встраиваемые в HTML страницу, могут переключаться в полноэкранный режим, а это означает, что они должны также поддерживать различные размеры экранов и соотношения сторон.
Вывод один - игра должна поддерживать разные разрешения(размеры) экрана на разных платформах и устройствах. В данном учебнике мы рассмотри этот вопрос подробно.
Краткий урок: Только одно разрешение экрана?
Самой распространенной ошибкой является то, что все думают - мне нужно одно разрешение - 1280x720. Но разрешений очень много, зачем себя ограничивать на одном? Выберите пропорции aspect ratio и масштаб игры scale для лучшего соответствия с нужным разрешением. Например, вместо 1280x720, с соотношением сторон 16: 9. (Просто введите любое разрешение, с соотношением сторон 16:9 в свойствах проекта.) Включите Letterbox scale в Fullscreen-in-browser настройках проекта. Теперь ваша игра будет работать правильно на всех разрешениях экранов с соотношением сторон 16:9.
Остальная часть урока будет более подробной. Обязательно, прочите дальше, даже если вы используете быстрое решение из краткой версии. Прочитав урок полностью, вы сможете сделать так, что ваша игра будет поддерживать различные разрешения экрана и соотношения сторон.
Использование полноэкранного режима
Будем рассматривать Project Properties и менять режимы Fullscreen in Browser.
Off
При выбранном режиме Off, игра встраиваемая в HTML страницу будет указанного Вами в Window size размера. Данный режим не будет поддерживать разные размеры экрана, даже если вы будете использовать Browser - Request fullscreen.
Crop mode
В режиме Crop mode вид игры остается в прежнем масштабе, а отображение игровой области зависит от размера окна. Изображение ниже показывает небольшое окно в режиме Crop mode. Мы видим игрока с маленьким обзором игрового поля.
При изменении размера окна, увеличивается видимая часть игрового поля. Заметьте, что теперь с большим размером окна, мы видим не только игрока но и монстров.
С этим режимом вы сможете менять масштабирование сами, как пожелаете, но этот режим не очень хорош для игр. Рассмотрим iPhone и IPad, которые имеют один и тот же физический размер экрана, но разные разрешениях в зависимости от поколения. Поскольку режим Crop не делает никакого масштабирования, то на экранах с высоким разрешением, игра будет выглядеть очень мелко.
Letterbox scale mode
Letterbox scale режим вписывает вашу игру в размер окна. Если соотношение сторон не совпадает, появляются черные полосы по бокам игровой области. Вот два примера:
Отображение черных полос позволяет избежать проблем случайного показа содержимого игры, находящегося за игровой областью (за кадром). Есть один недостаток - некоторые пользователи теряют часть обзора из за черных полос. Несмотря на выше сказанное, Letterbox scale mode может быть применен практически к любой игре, так как это быстрый и легкий способ поддержки различных размеров экрана без учета пропорций и соотношения сторон.
Letterbox integer scale
Режим Letterbox integer scale аналогичен Letterbox scale режиму, но с сохранением пропорций, за счет увеличения масштаба на целое значение. Например, масштабироваться будет только на 1x, 2x, 3x, 4x и т.д., и никогда на что-то вроде 2,5х. Это важно для игр с использованием режима сглаживания Point (как правило, ретро стиль), для сохранение точности при масштабировании игры. Также это означает, что черные полосы могут появиться на обеих сторонах, а также сверху и снизу вашей игры.
Scale outer mode
Режим масштабирует вид с скрытием части игрового поля, чтобы соответствовать размеру окна, так же, как Letterbox fullscreen. Но, вместо того чтобы показывать черные полосы, он использует увеличение игрового поля. Это имеет побочный эффект - объекты могут создаваться за пределами видимой области, конечно если вы делали свою игру без учета данного метода.
Обратите внимание - игра масштабируется не показывая черные полосы:
Но если изменить размера окна до необычных размеров, игра отображается неправильно:
В данном случае - игра масштабируется правильно, но соотношение сторон настолько сильно отличается, что вы можете увидеть с права открытую область. Игрок также может увидеть монстров, которых не видел раньше, так что это может считаться как обман. С Letterbox fullscreen это был бы закрыто черными полосами, поэтому предпочтительней использоваться в данном случае один из Letterbox режимов.
Заметим, что если вы нацелены на конкретные устройства с не изменяемыми размерами окна, вы можете использовать этот режим для поддержки различных пропорций, а для решения проблемы описанной выше - вам нужно будет отрисовывать фон больше, чем размер окна, чтобы обеспечить заполнение свободного пространства вашим фоном и корректного отображения вашей игры на некоторых дисплеях.
Для получения дополнительной информации смотрите Основной раздел - соотношение сторон ниже.
Scale inner mode
Как Scale outer, этот режим масштабирует вид и использует полный экран. Однако он обрабатывает соотношения сторон по-разному: в то время как Scale outer показывает увеличенное игровое поле, если соотношение сторон отличается, то Scale inner показывает less. Так как предпочтительней для данного режима, отсечение части игрового поля аналогично Crop с преимуществом Scale outer mode. Главная проблема - ограничение обзора и вы можете не увидеть определенные предметы или элементы вашей игры!
Вот пример, где игра отображается правильно при равномерном масштабировании:
Если мы опять выберем необычный размер окна, как 'Scale outer', То мы увидим на сколько обрезается наше игровое поле:
Это лучше чем Scale outer, но теперь Вы должны рассчитывать элементы игры, которые будут скрыты на некоторых экранах. Это полезно при разработке игры с соотношением сторон 16:9, но с обрезанием сторон при просмотре в формате 4:3.
Некоторые производители кино делают аналогично с фильмами.
Основной раздел - соотношение сторон
Letterbox scale или Letterbox integer scale самые простые способы, для вашей игры, они поддерживают широкий диапазон размеров экрана. Но есть существенный недостаток в черных полосках. Это может раздражать игроков, с маленьким экраном из за ограничений. Кроме того, игра может выглядеть непрофессионально, если соотношение сторон устройства лишь незначительно отличается от соотношения сторон игры - тонкие черные полосы будут появляться по бокам - пользователь может задаться вопросом "Зачем эти полоски, что за бред? "
Для того, чтобы это исправить, вам нужно использовать Scale outer или Scale inner вместо Letterbox scale режима. Это будет означать, поддержку multiple aspect ratios - разных соотношений сторон.
Это та же самая проблема, с которой сталкиваются производители телевизоров. Есть много телевизоров, которые используют соотношение сторон 4:3, 16:9 и 16:10. Если производители фильмов, ТВ-компании, ТВ-шоу - будут делать только в формате 4:3, и вещать на телевизор 16:9, то будут черные полосы по бокам! Точно так же, если вы рисуете фон в размер окна для одного разрешения экрана, а затем запустите его с Scale outer на другом экране с несколько иной пропорцией, вы опять увидите черные полоски. Это может произойти даже если вы просто не учли пространство занимаемое строкой состояния как в iPhone.
Есть два пути решения проблемы:
1) Использовать Scale outer режим и рисовать ваш задний фон на много больше игрового пространства, чтобы ничего не было видно вне зависимости от соотношения сторон устройства.
2) Использовать Scale inner режим и но не располагать важные элементы по краям игровой области, так как края будут подрезаться на разных экранах.
Не всегда легко создать игру правильно, используя какую либо технику. Но это позволяет разрабатывать игры, которые будут всегда используют весь экран.