- Автор темы
- #1
Многие игры (а в идеале - все) должны работать на экранах с различным размером. Экраны пользователей отличаются друг от друга (в данном случае - разрешением), поэтому игры должны быть рассчитаны на это и работать на полном экране без проблем.
Под "экраном" подразумевается не только ПК, но и мобильные устройства (телефоны, планшеты).
Как использовать полный экран (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) и другие. Таким образом, это по-настоящему огромный диапазон! Попробуйте их все (или по крайней мере - большинство). Вы ведь не хотите увидеть свою игру не-играемой на некоторых устройствах, потому что на них исчезли кнопки или стали слишком маленькими, чтобы нажать.
Под "экраном" подразумевается не только ПК, но и мобильные устройства (телефоны, планшеты).
Как использовать полный экран (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) и другие. Таким образом, это по-настоящему огромный диапазон! Попробуйте их все (или по крайней мере - большинство). Вы ведь не хотите увидеть свою игру не-играемой на некоторых устройствах, потому что на них исчезли кнопки или стали слишком маленькими, чтобы нажать.