Рассмотрим всё на примере.
Для начала поставим правильное масштабирование проекта (чтобы не появлялись черые полосы при выводе игры через 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”, тоесть их просто не будет. Не знаю с чем это связано, но это так. Если кто знает более простое решение проблемы, не стесняйтесь, пишите.
Готовый пример:
Screen_Resolution.capx- (362.31 КБ) Скачиваний: 738
Спасибо за прочтение! Всем удачи!
Фонд: