Универсальное разрешение экрана для Андроид |
Приветствую, друзья! Все таки решил написать урок и одновременно ответить на вопрос многих игроделов: “Как сделать подстройку игры под любой размер экрана андроид девайсов?” Сам когда-то долго мучился с этим вопросом, но то время прошло и теперь я хочу немножко облегчить жизнь и вам.
Рассмотрим всё на примере.
Для начала поставим правильное масштабирование проекта (чтобы не появлялись черые полосы при выводе игры через Intel XDK). “Правильным” в данном случае будут два вида масштабирования: Scale Outer и Scale Inner. Пару слов про них:
Scale Outer – при несовпадении пропорций окна (Windows Size) на экране девайса отображается содержание проекта и за его пределами.
Scale Inner – при несовпадении пропорций окна (Windows Size) на экране девайса отображается цетральная часть проекта, а все остальное отсекается.
Мне больше нравится работать со Scale Outer и на его примере я и сделаю урок. Выбераем этот параметр в настройках проекта:
Размер окна (Windows Size) - 1280х720. Дальше на сцену добавим несколько объектов: небо, горы и кнопки:
На основе этих изображения вы и увидите, как можно настроить игру под любое разрешение экрана. В этом нам поможет такая нехитрая функция у слоя – “viewport”. Она как-бы определяет минимальные и максимальные видимые границы слоя. Есть 4 параметра этой функции: ViewportTop, ViewportBottom, ViewportLeft, ViewportRight. Каждая отвечает за свою границу экрана:
ViewportTop, ViewportLeft – это минимальные значения границ и они всегда равны 0.
ViewportBottom, ViewportRight – максимальные значения и они нам показывают то самое истинное разрешение девайса на котором запущена игра, например если у смартфона HD-разрешение, то ViewportBottom = 1280, а ViewportRight = 720.
Хватит теории, перейдем опять к созданному проекту. Вот так выглядит вся сцена:
Каждый объект нужно по отдельности привязать к нашим границам – viewport-ам.
Сначала небо:
Делим правый видимый порт на 2 - получаем средину по x-координате, делим нижний видимый порт на 2 - получаем средину по y-координате и перемещаем небо по этим координатам, тоесть в центр, размер спрайта выставляем с помощью тех же максимальных границ.
Дальше горы. Image point поставлю внизу, чтобы определить низ картинки:
Разъяснять события думаю нету смысла. Они схожи с предыдущими, смотрим:
Чтобы горы были по размеру экрана, я прописал еще одно маленькое событие:
В нем сказано: если ширина гор меньше максимальной правой видимой границы, то ширина и высота увеличивается на 2% и так пока ширина гор не совпадет, с ViewportRight-ом. Обведенное кружочками – это те самые 2%.
Следующий этап – кнопки. Подробно расскажу про одну из них, про остальные посмотрите в примере, который я скину ниже.
Кнопка меню:
По иксу кнопка имеет координату 1190, а максимальная граница 1280, сейчас макс граница – это заданный мною в начале урока размер окна. Координата кнопки по х на 90 пикселей меньше. Значит, чтобы на любом девайсе, с любым разрешением экрана она находилась там же в уголке, на расстоянии 90 пикселей от правой границы, нужно прописать событие:
Кнопки можно регулировать и относительно нижнего или верхнего Viewport, но здесь я этого не делал, справитесь сами.
Как ведет себя готовый проект на разных разрешениях экранов можно посмотреть в эмуляторе Intel XDK:
Как видите все четко подстраивается, как мы и хотели.
Примечание: Если вы работаете, как я, с Intel XDK, то, чтобы viewport работал, перед собтиями связанными с ним должно обязательно быть событие: “Every tick”, оно может быть и на layout раньше, главное, чтобы было. В моем примере оно на загрузочном уровне, который идет первым. Без этого события viewport-Ы в Intel XDK будут отображаться как “NAN”, тоесть их просто не будет. Не знаю с чем это связано, но это так. Если кто знает более простое решение проблемы, не стесняйтесь, пишите.
Готовый пример:
Спасибо за прочтение! Всем удачи!
Рассмотрим всё на примере.
Для начала поставим правильное масштабирование проекта (чтобы не появлялись черые полосы при выводе игры через Intel XDK). “Правильным” в данном случае будут два вида масштабирования: Scale Outer и Scale Inner. Пару слов про них:
Scale Outer – при несовпадении пропорций окна (Windows Size) на экране девайса отображается содержание проекта и за его пределами.
Scale Inner – при несовпадении пропорций окна (Windows Size) на экране девайса отображается цетральная часть проекта, а все остальное отсекается.
Мне больше нравится работать со Scale Outer и на его примере я и сделаю урок. Выбераем этот параметр в настройках проекта:
Размер окна (Windows Size) - 1280х720. Дальше на сцену добавим несколько объектов: небо, горы и кнопки:
На основе этих изображения вы и увидите, как можно настроить игру под любое разрешение экрана. В этом нам поможет такая нехитрая функция у слоя – “viewport”. Она как-бы определяет минимальные и максимальные видимые границы слоя. Есть 4 параметра этой функции: ViewportTop, ViewportBottom, ViewportLeft, ViewportRight. Каждая отвечает за свою границу экрана:
ViewportTop, ViewportLeft – это минимальные значения границ и они всегда равны 0.
ViewportBottom, ViewportRight – максимальные значения и они нам показывают то самое истинное разрешение девайса на котором запущена игра, например если у смартфона HD-разрешение, то ViewportBottom = 1280, а ViewportRight = 720.
Хватит теории, перейдем опять к созданному проекту. Вот так выглядит вся сцена:
Каждый объект нужно по отдельности привязать к нашим границам – viewport-ам.
Сначала небо:
Делим правый видимый порт на 2 - получаем средину по x-координате, делим нижний видимый порт на 2 - получаем средину по y-координате и перемещаем небо по этим координатам, тоесть в центр, размер спрайта выставляем с помощью тех же максимальных границ.
Дальше горы. Image point поставлю внизу, чтобы определить низ картинки:
Разъяснять события думаю нету смысла. Они схожи с предыдущими, смотрим:
Чтобы горы были по размеру экрана, я прописал еще одно маленькое событие:
В нем сказано: если ширина гор меньше максимальной правой видимой границы, то ширина и высота увеличивается на 2% и так пока ширина гор не совпадет, с ViewportRight-ом. Обведенное кружочками – это те самые 2%.
Следующий этап – кнопки. Подробно расскажу про одну из них, про остальные посмотрите в примере, который я скину ниже.
Кнопка меню:
По иксу кнопка имеет координату 1190, а максимальная граница 1280, сейчас макс граница – это заданный мною в начале урока размер окна. Координата кнопки по х на 90 пикселей меньше. Значит, чтобы на любом девайсе, с любым разрешением экрана она находилась там же в уголке, на расстоянии 90 пикселей от правой границы, нужно прописать событие:
Кнопки можно регулировать и относительно нижнего или верхнего Viewport, но здесь я этого не делал, справитесь сами.
Как ведет себя готовый проект на разных разрешениях экранов можно посмотреть в эмуляторе Intel XDK:
Как видите все четко подстраивается, как мы и хотели.
Примечание: Если вы работаете, как я, с Intel XDK, то, чтобы viewport работал, перед собтиями связанными с ним должно обязательно быть событие: “Every tick”, оно может быть и на layout раньше, главное, чтобы было. В моем примере оно на загрузочном уровне, который идет первым. Без этого события viewport-Ы в Intel XDK будут отображаться как “NAN”, тоесть их просто не будет. Не знаю с чем это связано, но это так. Если кто знает более простое решение проблемы, не стесняйтесь, пишите.
Готовый пример:
Спасибо за прочтение! Всем удачи!
Последний раз редактировалось Bezruk 09 янв 2015, 13:44, всего редактировалось 3 раз(а).
молодец. хороший урок! 

Уроки: Платформер от А до Я
Уроки: TDS от А до Я
Уроки: Создание игры для Андроид от А до Я
Уроки: Раннер от А до Я
Уроки: TDS от А до Я
Уроки: Создание игры для Андроид от А до Я
Уроки: Раннер от А до Я
Урок достойный.
Добавлю:
Scale Outer есть риск что игрок увидит то, что ему не положено и не происходит масштабирования.
Если мой уровень 1920x1080 то игрок с таким экраном увидит его весь, даже если я изначально проектировал что он должен видеть только четверть. Нужно с умом настраивать.
Scale Inner - не показывает больше чем изначально задано в проекте, но если экран сильно отличается от изначальных настроек проекта, то может быть сильное масштабирование, но работать с ним куда легче.
Добавлю:
Scale Outer есть риск что игрок увидит то, что ему не положено и не происходит масштабирования.
Если мой уровень 1920x1080 то игрок с таким экраном увидит его весь, даже если я изначально проектировал что он должен видеть только четверть. Нужно с умом настраивать.
Scale Inner - не показывает больше чем изначально задано в проекте, но если экран сильно отличается от изначальных настроек проекта, то может быть сильное масштабирование, но работать с ним куда легче.
ilimi, Все верно! Спасибо за дополнение!
CeleDKo, Да, долго, но если хочешь сделать качественный продукт, то без этого никуда.
Я не понимаю
Требуются разъяснения.
Вот нарисовал абстракцию для примера.
Допустим, у меня есть фон, на нем игровое поле, и на поле
расположено 8 объектов.
Что и как прописывать, чтобы на любом устройстве всё осталось на своих местах?


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


Pauklestnica писал(а):Я не понимаю![]()
Требуются разъяснения.
Вот нарисовал абстракцию для примера.
Допустим, у меня есть фон, на нем игровое поле, и на поле
расположено 8 объектов.
Что и как прописывать, чтобы на любом устройстве всё осталось на своих местах?![]()
Конкретно в этом примере лучше использовать Scale Inner, тогда ничего прописывать не надо будет, но скажем если у тебя графика под 640x480 то на больших экранах не в том соотношении будет не красиво из-за масштабирования и соотношения сторон.
Поэтому редко пишут уроки хорошие о мультискринах, всё слишком индивидуально.
Насколько я помню, Scale Inner обрезает изображение, если оно не целиком вписывается в экран.
Мне нужно, чтобы все попадало в зону видимости.
Мне нужно, чтобы все попадало в зону видимости.
ilimi писал "Scale Outer есть риск что игрок увидит то, что ему не положено и не происходит масштабирования.
Если мой уровень 1920x1080 то игрок с таким экраном увидит его весь, даже если я изначально проектировал что он должен видеть только четверть. " Поправьте если я неправильно понял речь идет о Пропорциях экрана, тоесть если у меня =====>
Если мой уровень 1920x1080 то игрок с таким экраном увидит его весь, даже если я изначально проектировал что он должен видеть только четверть. " Поправьте если я неправильно понял речь идет о Пропорциях экрана, тоесть если у меня =====>
-
- Сообщений: 1534
- Я тут с 25 ноя 2014
- Откуда: TLV
- Двиг: Construct 2
- Лицензия: Personal
- Репутация 183 [ ? ]
Вернуться в Лучшие уроки по Construct 2
Сейчас эту тему просматривают
Зарегистрированные пользователи: нет зарегистрированных пользователей