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

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

Сообщение Универсальное разрешение экрана для Андроид
» 08 янв 2015, 22:36

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

Для начала поставим правильное масштабирование проекта (чтобы не появлялись черые полосы при выводе игры через 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
(362.31 КБ) Скачиваний: 524

Спасибо за прочтение! Всем удачи!
Последний раз редактировалось Bezruk 09 янв 2015, 13:44, всего редактировалось 3 раз(а).
Аватара пользователя

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

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

молодец. хороший урок! :ok:
Аватара пользователя

Администратор
Сообщений: 5820
Я тут с 05 сен 2012
Двиг: Construct2
Лицензия: Personal
Skype: c2community
VK: gabrielsailergray
Репутация 392 [ ? ]

Сообщение Универсальное разрешение экрана для Андроид
» 09 янв 2015, 12:42

Урок достойный.
Добавлю:
Scale Outer есть риск что игрок увидит то, что ему не положено и не происходит масштабирования.
Если мой уровень 1920x1080 то игрок с таким экраном увидит его весь, даже если я изначально проектировал что он должен видеть только четверть. Нужно с умом настраивать.
Scale Inner - не показывает больше чем изначально задано в проекте, но если экран сильно отличается от изначальных настроек проекта, то может быть сильное масштабирование, но работать с ним куда легче.
Аватара пользователя

Участник
Сообщений: 667
Я тут с 16 фев 2014
Репутация 71 [ ? ]

Сообщение Универсальное разрешение экрана для Андроид
» 09 янв 2015, 12:54

ilimi, Все верно! Спасибо за дополнение!
Аватара пользователя

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

Сообщение Универсальное разрешение экрана для Андроид
» 09 янв 2015, 22:47

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

Участник
Сообщений: 45
Я тут с 02 ноя 2014
Откуда: Екатеринбург
Двиг: Construct 2
Лицензия: Personal
Репутация 0 [ ? ]

Сообщение Универсальное разрешение экрана для Андроид
» 10 янв 2015, 04:35

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

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

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

Я не понимаю :sad:
Требуются разъяснения.

Вот нарисовал абстракцию для примера.
Допустим, у меня есть фон, на нем игровое поле, и на поле
расположено 8 объектов.
Что и как прописывать, чтобы на любом устройстве всё осталось на своих местах? :unknown:
Изображение
Изображение
Я вот делаю игры ради денег, но их никто не покупает - меня можно считать тру-инди? (c) paradine
Аватара пользователя

Участник
Сообщений: 555
Я тут с 19 дек 2014
Двиг: Construct 2
Лицензия: Business
Репутация 57 [ ? ]

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

Pauklestnica писал(а):Я не понимаю :sad:
Требуются разъяснения.

Вот нарисовал абстракцию для примера.
Допустим, у меня есть фон, на нем игровое поле, и на поле
расположено 8 объектов.
Что и как прописывать, чтобы на любом устройстве всё осталось на своих местах? :unknown:
Изображение

Конкретно в этом примере лучше использовать Scale Inner, тогда ничего прописывать не надо будет, но скажем если у тебя графика под 640x480 то на больших экранах не в том соотношении будет не красиво из-за масштабирования и соотношения сторон.
Поэтому редко пишут уроки хорошие о мультискринах, всё слишком индивидуально.
Аватара пользователя

Участник
Сообщений: 667
Я тут с 16 фев 2014
Репутация 71 [ ? ]

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

Насколько я помню, Scale Inner обрезает изображение, если оно не целиком вписывается в экран.
Мне нужно, чтобы все попадало в зону видимости.
Изображение
Я вот делаю игры ради денег, но их никто не покупает - меня можно считать тру-инди? (c) paradine
Аватара пользователя

Участник
Сообщений: 555
Я тут с 19 дек 2014
Двиг: Construct 2
Лицензия: Business
Репутация 57 [ ? ]

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

ilimi писал "Scale Outer есть риск что игрок увидит то, что ему не положено и не происходит масштабирования.
Если мой уровень 1920x1080 то игрок с таким экраном увидит его весь, даже если я изначально проектировал что он должен видеть только четверть. " Поправьте если я неправильно понял речь идет о Пропорциях экрана, тоесть если у меня =====>
Scale Outer.jpg
Изображение Изображение Изображение
Аватара пользователя

Игродел
Сообщений: 1166
Я тут с 25 ноя 2014
Репутация 144 [ ? ]



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

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

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

Наверх