Поддержка разных размеров экрана

уроки, мануалы, советы по Construct 2

Сообщение Поддержка разных размеров экрана
» 02 мар 2013, 15:37

Многие игры (а в идеале - все) должны работать на экранах с различным размером. Экраны пользователей отличаются друг от друга (в данном случае - разрешением), поэтому игры должны быть рассчитаны на это и работать на полном экране без проблем.
Под "экраном" подразумевается не только ПК, но и мобильные устройства (телефоны, планшеты).


Как использовать полный экран (FullScreen)
В свойствах проекта (Project Properties) выберите полный экран в браузере (Fullscreen in Browser). Появится набор настроек для экрана.

Изображение
Если будет выключено (Off), то игра будет использовать тоже разрешение, что и в Construct 2 (Window Size).
Эта настройка не поддерживает другие размеры, т.е. игра будет работать только на таком разрешении.

Режим обрезания (Crop)
В этом режиме масштаб остается тем же самым (какой в редакторе), изменение размеров окна (разрешения) происходит за счет увеличения/уменьшения видимых размеров игры.

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

Изображение

Этот способ позволяет самостоятельно управлять увеличением/уменьшением масштаба.
Однако, такой способ не очень хорош для игр. На устройствах с большим разрешением игра будет смотреться довольно странно (очень мелкой).

Изменение масштаба (Scale)
Способ изменяет масштаб игры, чтобы соответствовать размеру экрана. Но, таким образом, игра занимает весь размер который ей дали. Если разрешение маленькое, то наш Герой выглядит мелко:

Изображение
Если растянуть, то Игрок станет выглядеть крупнее:

Изображение
При использовании этого способа, возникает проблема: при неправильном соотношении сторон экрана, игра выводится неправильно:

Изображение
Игрок стал видеть больше, чем раньше. Можно сказать читерство.

Масштабирование с пропорциями (Letterbox Scale)
Данный способ практически то же самое, что и предыдущий (Scale), но здесь соотношение сторон влияет на изменение масштаба. Лишнее пространство закрашивается в черный цвет. Примеры:

Изображение

Изображение

Можно заметить, что во время игры пользователь "теряет" какую-то часть своего экрана (ту, что покрыта черным цветом).
Несмотря на это, Letterbox Scale остается простым и быстрым способом поддерживать разные пропорции экрана.

Масштабирование с целыми пропорциями (Letterbox Integer Scale)
Этот режим аналогичен предыдущему (Letterbox Scale), но изменяет масштаб только на определенные значения. Такие как x1, x2, x3 и т.д. , никогда не будет значений вроде x2.5 .
Используется вместе с играми в ретро стиле, позволяя сохранить красоту пикселей при масштабировании.

Изображение

Изображение

Соотношения сторон - их глюки
Letterbox Scale или Letterbox Integer Scale - это способы приспособить игру к большому числу экранов, не делая много работы. Однако, появляется недостаток - черные полосы. Это может быть раздражающе для пользователей мобильных платформ. Также это выглядит не профессионально.

Изображение
Чтобы избежать этого, нужно использовать Scale вместо Letterbox Scale. При этом необходима поддержка многих соотношений сторон.

С похожей проблемой столкнулись режиссеры TV программ. Телевизор использует многие пропорции: 4:3, 16:9, 16:10. Если видео программа будет сниматься в 4:3, то на 16:9 появятся черные полосы.
TV продюсеры решают эту проблему так: все снимается для соотношения 16:9. Тогда при показе на других телевизорах изображение подрезаеться немного вниз.


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

Создание слоя Интерфейса (UI и HUD)
Часто у игры присутствуют элементы интерфейса, будь то здоровье, количество боеприпасов или другая информация, которая должна всегда выводится на экран, причем на одном и том же месте.

Чтобы сделать это, нужно создать новый слой и в его настройках задать параллакс (Parallax) на 0,0. Также, можно запретить изменение масштаба у интерфейса, для этого измените Scale rate на 0.

Изображение

Поведение якоря (Anchor)
Если поместить один из элементов интерфейса в правый угол, то при изменении размера окна он останется на месте. Чтобы такого не случалось, существует поведение якоря (Anchor)

Изображение

На заметку: поведение якоря (Anchor) предназначено для работы с не-двигающимися слоями, т.е. со слоями без параллакса (какие были описаны выше).

Устанавливая левую сторону (Left edge) и верхнюю сторону (Top edge) можно настроить положение объекта на экране (по умолчанию будет расположен в верхнем левом углу).

Если есть необходимость в "растягивании" интерфейса по ширине или по высоте, то нужно изменить значение у правой стороны (Right edge) и нижней (Bottom edge). В таком случае интерфейс будет менять размер.
Если же изменять размер не требуется, то просто установите значения на None.

Другие полезные функции
Системные выражения WindowWidth и WindowHeight возвращают текущий размер окна (в пикселях). Вы могли бы скрыть или показать объекты в зависимости от размера экрана, включить определенные опции для маленьких экранов, или показать разные виды UI для очень больших.

Положения относительно экрана (ViewportLeft, ViewportRight, ViewportTop, ViewportBottom) возвращают координаты для данного слоя. Например, чтобы определенному объекту оказаться в центре, то используйте (ViewportLeft("Layer") + ViewportRight("Layer")) / 2 и (ViewportTop("Layer") + ViewportBottom("Layer")) / 2.

Также, при работе в полном экране со способом изменением масштаба (Scale) можно заметить, что при прокручивании (скроллинге) возникает проблема. Ее можно решить, установив свойству Unbounded scrolling значение Yes и ограничив прокручивании самостоятельно (как вариант, окружить уровень твердыми объектами).

Переключение на полный экран во время игры
У объекта Браузер (Browser) есть действие Request fullscreen. Оно позволяет включить полный экран, даже когда он выключен (в случае, когда игра находится "вложенной" на HTML странице).

Кроме того, есть возможность изменения типа фулскрина, выбирая между обычным центрированием (Centred), Crop, Scale, Letterbox scale или Letterbox integer scale.

На заметку: из-за соображений безопасности действие Request fullscreen будет работать только с пользовательскими событиями, такие как нажатие кнопки на клавиатуре или клик на кнопке. Такие события обозначаются зеленной стрелкой слева.
Изображение

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

Самым большим разрешением (среди мобильных устройств) на данный момент является IPad 3 (2048 x 1536), и самым маленьким IPhone 3 (320 x 480) и другие. Таким образом, это по-настоящему огромный диапазон! Попробуйте их все (или по крайней мере - большинство). Вы ведь не хотите увидеть свою игру не-играемой на некоторых устройствах, потому что на них исчезли кнопки или стали слишком маленькими, чтобы нажать.

Автор и Перевод
Автор: Ashley
Перевел: Seryiza
Переводил сам, начинал писать с нуля, поэтому все помидоры кидайте мне :smile:

Источник/вдохновение: ссылка
Аватара пользователя

Игродел
Сообщений: 226
Я тут с 11 фев 2013
Откуда: Россия, О. Сахалин
Skype: Seryiza
Репутация 180 [ ? ]

Сообщение Re: Поддержка разных размеров экрана
» 02 мар 2013, 16:31

Спасибо, очень полезная статья! Надеюсь на продолжение.
Изображение
Аватара пользователя

Игродел
Сообщений: 1062
Я тут с 14 сен 2012
Откуда: Красноярск
Репутация 126 [ ? ]

Сообщение Re: Поддержка разных размеров экрана
» 02 мар 2013, 17:48

Seryiza, спасибо!+
Аватара пользователя

Игродел
Сообщений: 494
Я тут с 04 янв 2013
Репутация 66 [ ? ]

Сообщение Re: Поддержка разных размеров экрана
» 03 мар 2013, 12:21

Seryiza, Вау, вот это перевод! Отлично! :clapping: :clapping: :clapping:
Аватара пользователя

Игродел
Сообщений: 405
Я тут с 08 янв 2013
Откуда: Мск
Репутация 207 [ ? ]

Сообщение Re: Поддержка разных размеров экрана
» 05 мар 2013, 12:39

да, да.. только при портировании на андроид возникают понты, как не крути - кроме обычного скейл конвертеры ничего не поддерживают... :mad:
Изображение
Аватара пользователя

Модератор
Сообщений: 2957
Я тут с 19 дек 2012
Откуда: Новый Уренгой
Репутация 298 [ ? ]

Сообщение Re: Поддержка разных размеров экрана
» 20 апр 2013, 16:49

спасибо,+
а в итоге что лучше использовать то?
Аватара пользователя

Участник
Сообщений: 10
Я тут с 12 апр 2013
Репутация 0 [ ? ]

Сообщение Re: Поддержка разных размеров экрана
» 18 май 2013, 12:49

какое windows size вы используете для pc ?
Аватара пользователя

Участник
Сообщений: 61
Я тут с 09 май 2013
Репутация 5 [ ? ]

Сообщение Re: Поддержка разных размеров экрана
» 06 июн 2013, 20:48

mef1sto писал(а):да, да.. только при портировании на андроид возникают понты, как не крути - кроме обычного скейл конвертеры ничего не поддерживают... :mad:


они скейлят пропорционально или сжимают/растягивают картинку
Аватара пользователя

Участник
Сообщений: 1
Я тут с 03 июн 2013
Репутация 0 [ ? ]

Сообщение Поддержка разных размеров экрана
» 03 дек 2013, 20:05

:cray: - мдяяя.....
:yes: - почитав, понял, надо всё переделывать, т.е. позиционировать каждый спрайт в зависимости от размера экрана? как то можно узнать силами С2 разрешение пользователя?
Изображение
Аватара пользователя

Участник + TDS
Сообщений: 113
Я тут с 14 фев 2013
Лицензия: Personal
Репутация 6 [ ? ]

Сообщение Поддержка разных размеров экрана
» 20 сен 2014, 16:35

а как на андроиде сделать?
Аватара пользователя

Участник
Сообщений: 206
Я тут с 08 май 2014
Skype: neverxd3
Репутация 32 [ ? ]



Вернуться в Уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх