Универсальное разрешение экрана для Андроид

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

Сообщение Универсальное разрешение экрана для Андроид
» 14 ноя 2016, 16:26

Bezruk писал(а):Приветствую, друзья! Все таки решил написать урок и одновременно ответить на вопрос многих игроделов: “Как сделать подстройку игры под любой размер экрана андроид девайсов?” Сам когда-то долго мучился с этим вопросом, но то время прошло и теперь я хочу немножко облегчить жизнь и вам.
Рассмотрим всё на примере.

Для начала поставим правильное масштабирование проекта (чтобы не появлялись черые полосы при выводе игры через Intel XDK). “Правильным” в данном случае будут два вида масштабирования: Scale Outer и Scale Inner. Пару слов про них:

Scale Outer – при несовпадении пропорций окна (Windows Size) на экране девайса отображается содержание проекта и за его пределами.

Scale Inner – при несовпадении пропорций окна (Windows Size) на экране девайса отображается цетральная часть проекта, а все остальное отсекается.

Мне больше нравится работать со Scale Outer и на его примере я и сделаю урок. Выбераем этот параметр в настройках проекта:
les1.png

Размер окна (Windows Size) - 1280х720. Дальше на сцену добавим несколько объектов: небо, горы и кнопки:
les2.PNG

На основе этих изображения вы и увидите, как можно настроить игру под любое разрешение экрана. В этом нам поможет такая нехитрая функция у слоя – “viewport”. Она как-бы определяет минимальные и максимальные видимые границы слоя. Есть 4 параметра этой функции: ViewportTop, ViewportBottom, ViewportLeft, ViewportRight. Каждая отвечает за свою границу экрана:
les3.png

ViewportTop, ViewportLeft – это минимальные значения границ и они всегда равны 0.

ViewportBottom, ViewportRight – максимальные значения и они нам показывают то самое истинное разрешение девайса на котором запущена игра, например если у смартфона HD-разрешение, то ViewportBottom = 1280, а ViewportRight = 720.

Хватит теории, перейдем опять к созданному проекту. Вот так выглядит вся сцена:
les4.PNG

Каждый объект нужно по отдельности привязать к нашим границам – viewport-ам.
Сначала небо:
les5.PNG

Делим правый видимый порт на 2 - получаем средину по x-координате, делим нижний видимый порт на 2 - получаем средину по y-координате и перемещаем небо по этим координатам, тоесть в центр, размер спрайта выставляем с помощью тех же максимальных границ.
Дальше горы. Image point поставлю внизу, чтобы определить низ картинки:
les6.PNG

Разъяснять события думаю нету смысла. Они схожи с предыдущими, смотрим:
les7.PNG

Чтобы горы были по размеру экрана, я прописал еще одно маленькое событие:
les10.PNG

В нем сказано: если ширина гор меньше максимальной правой видимой границы, то ширина и высота увеличивается на 2% и так пока ширина гор не совпадет, с ViewportRight-ом. Обведенное кружочками – это те самые 2%.

Следующий этап – кнопки. Подробно расскажу про одну из них, про остальные посмотрите в примере, который я скину ниже.
Кнопка меню:
les8.PNG

По иксу кнопка имеет координату 1190, а максимальная граница 1280, сейчас макс граница – это заданный мною в начале урока размер окна. Координата кнопки по х на 90 пикселей меньше. Значит, чтобы на любом девайсе, с любым разрешением экрана она находилась там же в уголке, на расстоянии 90 пикселей от правой границы, нужно прописать событие:
les9.PNG

Кнопки можно регулировать и относительно нижнего или верхнего Viewport, но здесь я этого не делал, справитесь сами.
Как ведет себя готовый проект на разных разрешениях экранов можно посмотреть в эмуляторе Intel XDK:
les11.png

Как видите все четко подстраивается, как мы и хотели.

Примечание: Если вы работаете, как я, с Intel XDK, то, чтобы viewport работал, перед собтиями связанными с ним должно обязательно быть событие: “Every tick”, оно может быть и на layout раньше, главное, чтобы было. В моем примере оно на загрузочном уровне, который идет первым. Без этого события viewport-Ы в Intel XDK будут отображаться как “NAN”, тоесть их просто не будет. Не знаю с чем это связано, но это так. Если кто знает более простое решение проблемы, не стесняйтесь, пишите.

Готовый пример:
Screen_Resolution.capx

Спасибо за прочтение! Всем удачи!

Привет, я хотел спросить. У меня в игре у игрока стоит поведение beundToLaoyt
Как сделать, чтобы layout тоже увеличеволся по размеру экрана?
Аватара пользователя

Участник
Сообщений: 67
Я тут с 13 окт 2016
Двиг: Construct 2
Репутация 4 [ ? ]

Сообщение Универсальное разрешение экрана для Андроид
» 13 фев 2017, 23:02

Ща мучаюсь с разрешениями, и знаешь что. Не работает твой пример. У тебя скачет все равно интерфейс

800 на 600:
Изображение

1920 на 1080:
Изображение
 Этим людям я благодарен за помощь
Этим людям я благодарен за помощь:
Bishop
paradine
smebor
DeX
rokstars
nagval333
ReviveR200
repkino
Reficul


Они здесь, что бы я никого не забыл указать в благодарностях.
Аватара пользователя

Участник
Сообщений: 468
Я тут с 12 июл 2014
Репутация 8 [ ? ]

Сообщение Универсальное разрешение экрана для Андроид
» 13 фев 2017, 23:19

Якорь примени и нет проблем.
Образование — это то, что остаётся после того, как забывается всё выученное в школе. (Альберт Эйнштейн)
На одного дурака должно быть не менее 10 умных. что бы силы были примерно равны.
 Как делать 3d на Construct 2 с плагином Q3D
Аватара пользователя

Игродел
Сообщений: 2315
Я тут с 24 окт 2014
Откуда: Москва
Двиг: C2,С3,UE4
Лицензия: Personal
Skype: smebor
Репутация 463 [ ? ]

Сообщение Универсальное разрешение экрана для Андроид
» 14 фев 2017, 09:26

Aizark писал(а):У тебя скачет все равно интерфейс

Потому как привязан только по Х к левому краю экрана! :diablo:
Аватара пользователя

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

Сообщение Универсальное разрешение экрана для Андроид
» 06 июл 2017, 13:04

Ребят , помогите. У меня есть викторина. И много кнопок в меню. Я так и не понял что мне нужно сделать, чтобы кнопки стояли все на своих местах, и все то что я хочу чтобы было видно на любом экране, но без белых или черных рамок и т.д.
Изображение
Аватара пользователя

Участник
Сообщений: 62
Я тут с 06 июл 2017
Репутация 0 [ ? ]



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

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

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

Наверх