4. Создание сцены уровня. Основная сцена
Теперь займемся основным уровнем, нашей главной сцены. Мы создали отдельную сцену с игроком, теперь создадим сцену с уровнем. Нажмите на меню «Сцена» и создайте новую сцену.
За основу новой сцены будет выступать узел «Node» поэтому мы и закрепим наш новый узел выбрав другой узел. Переименуйте узел в «Level»
Теперь поговорим о размерах игрового поля. Наша игра будет в пиксель-арт стиле, а пиксель-арт графика используют очень низкое разрешение. Обычно нужно, чтобы оно было кратно 2х, 4х, 8х, или больше, чем оригинальное разрешение. Это означает, что один пиксель оригинального изображения отображается как квадрат 2×2, 4×4 или 8×8 реальных пикселей на экране.
Так как у нас уже есть готовая пиксельная графика, то разрешение игры мы будет затачивать под фоновую картинку, конечно это не всегда правильных подход, но разрешение 384х216 идеально подойдет в соотношение экрана 16:9.
Создадим простой спрайтовый узел, он будет фоном «Sprite» и поместим туда нашу фоновое изображение. Узел спрайта прикрепите к узлу «Level»
Фоновое изображение называет «bg.png» и расположен по пути «Assets/Misc». Раскройте папку в файловой системе и перетащите текстурку в инспектор спрайта в «Texture»
Разместив нашу фоновую текстуру отменим центрирование, и фон сместиться в нижний правый угол. Теперь текстура будет позиционироваться через верхний левый угол. Зайдите в опцию «Offset» и снимите галочку с под опции «Centered».
Только не забываем импортировать фоновую текстуру в пиксель арт, зайдите в импорт и установите соответствующий пресет на пиксель арт
Теперь давайте сохраним нашу сцену. Создайте папку «Level» и сохраните туда нашу сцену с тем же названием что предлагает Годот.
Так должно выглядеть в файловой системе годота, если вы все сделали правильно.
Наша сцена уровня, будет основной сценой. Нажмите F5 или значок треугольника (Запустить игру)
Выскочит окошка с вопросом сделать сцену главной, согласитесь, сделайте её главной.
Теперь как мы можем наблюдать наш фоновый рисунок слишком маленький для игрового экрана. Сейчас мы это поправим.
Так как размеры нашей картинки равняются 384х216, и остальные спрайты текущего набора заточены под фоновый рисунок, то наша задача поменять игровой экран до размеров 384 пикселей на 216 пикселей.
Для этого зайдем в настройки проекта
Спустимся до опции «Display» - «Window».
И поменяем размер экрана: ширину (Width) 384 пикселей, а высота (Height) 216 пикселей.
Далее спустимся к опции «Stretch» - здесь мы можем настраивать сохранение картинки при растягивание экрана, а режим «2d» как раз и сохраняет целостность картинки при растягивание, выберете эту опцию и запустите игру.
Как мы можем наблюдать окошко вышло довольно маленькое, но если потянуть окно игры за край, то картинка будет растягиваться, плюс наше фоновое изображение занимает весь игровой экран.
Но включать игру с таким маленьким разрешением, а после каждый раз растягивать, выглядит не круто. Это мы тоже можем исправить. Зайдите обратно к настройки проекта, найдите ту же опцию с «Display» - «Window». Поменяем размер игрового экрана, не затрагивая масштаб размер фоновой картинки.
Так как размеры экрана 384х216 для нашего глаза будут маловаты, мы можем увеличить фактический размер игрового окна. Разрешение экрана у нас является 16:9, а это значит, что мы можем придерживаться тех же разрешений, но увеличить ширину и высоту. Введите фразу в браузере в поисковике «разрешение 16:9», и вам тут же попадутся различные размеры экрана в разрешение 16:9. Я решил взять размеры 1280 x 720. Таким образом не будет ломаться пиксель арт, а игровое окно увеличиться. Но куда это вписывать? За это отвечают опции «Test Width» и «Test Height». Впишите туда размеры экрана 1280х720. А после запустите игру.
Если вы все сделали правильно игра существенно увеличиться. И будет смотреться замечательно.
Следующие что нам нужно сделать поместить нашего игрока в сцену уровня.
Выберете узел «Level» и добавьте дочернею сцену игрока «Player».
Не забудьте перетащить нашего игрока в центр экрана, запустите игру
Если вы все сделали правильно у вас будет отображаться тележка, которой вы можете еще и управлять.
Следующая задача установить наши стены, чтобы тележка и будущий шарик не выходили с определённой зоны. Для этой цели мы воспользуемся физическим узлом «StaticBody2D».
Статическое тело для 2D-физики. StaticBody2D — это тело, которое не предназначено для перемещения. Он идеально подходит для реализации объектов в окружающей среде, таких как стены или платформы. Кроме того, для статического тела может быть задана постоянная линейная или угловая скорость, которая будет воздействовать на сталкивающиеся тела так, как если бы оно двигалось (например, конвейерная лента).
Привяжем к узлу уровня узел «StaticBody2D».
Переименуем его в «Wall_left» (стена слева), заодно переименуйте фоновое изображение, он же «Sprite» в «Bakcground» (Фон)
К нашей стене привяжем форму столкновения, которая будет идти вдоль широкой палки. Используем узел «CollisionShape2D»
И как всегда к этому узлу мы будем использовать форму прямоугольника. В опции «Shape», выберем наш прямоугольник, и далее растянем его вдоль левой стены.
Теперь надо сделать и правую стену. Мы можем скопировать наш статический узел горячими клавишами комбинацией ctrl+D а после переименовать в «Wall_right». Попробуйте проделать это самостоятельно, и переместить на правую широкую палку форму столкновение.
Запустите игру и протестити стены на столкновение тележки.
Стоит немного подкорректировать саму тележку, слишком она большая и шустрая. Выберете узел «Player» и в опции «Transform» - «Scale» уменьшим нашего игрока на одну четвертую или на 0.75 единиц по Х и Y. «Scale» - отвечает за масштаб объекта: 1 = 100% масштаб, 0.5 = 50%, а 0.75 = 75% масштаб, или одна четверть.
Так же перейдите на сцену самого игрока, в скрипт, снизьте скорость и трение нашей тележки чтобы создать менее шустрого игрока. Здесь вы можете сами лично подобрать нужную скорость и трение, я же выставлю скорость 70, а трение 2
И вернемся к нашем стенам, снова скопируем стену и разместим выше нашего игрового экрана, прямо на стыке верхушки. Назовем стену «Wall_top». Правда придется удалить форму столкновение и снова привязать узел формы столкновения «CollisionShape2D», так как при изменение предыдущего узла, на него будут реагировать скопированные узлы столкновения других стен.
Будьте внимательны, стены не должны соприкасаться между собой, так как надо будет вычислять с чем столкнется шарик в будущем. А пересекающие стены между собой будут реагировать на столкновение.
Почти доделали, но мы добавим еще один элемент в этой главе, на этот раз мы прикрепим пользовательский интерфейс узел под названием «TextureRect». Он похож на другой пользовательский узел интерфейса «ColorRect», который задет цвет, только он отличается тем что мы можем загружать готовый спрайт, картинки или фон. Почему же для фоновой картинки мы не использовали это узел, использовать его можно, но надо помнить, пользовательские интерфейсы крепятся к игровому экрану, и если в игре у вас есть узел камеры («Camera2D») которая будет двигаться вместе с игроком, то и сцена будет смещаться в игровом экране, а узлы пользовательского интерфейса нет. В принципе, можно использовать «TextureRect» для создание фона, вместо узла спрайта «Sprite», но спрайтом было удобно подгонять размер экрана.
Прикрепите к уровню узел «TextureRect»
Переименуйте его в «Score_board» (Табло), этот элемент будет отвечать за отображение игрового счета и попыток, виде сердечек. Как и с узлом спрайта, в узле «TextureRect» нужно перетаскивать картинку в опцию «Texture» в инспекторе.
Мы воспользуемся нашим набором, раскройте в файловой системе Годота папку «Assets», далее папка, отвечающая за наш интерфейс «UI» и найдите файл под названием «sp_hud_long.png», вот этот спрайт мы и перетаскиваем в опции «Texture» в инспектор.
Так как этот узел является пользовательским интерфейсом мы можем позиционировать на игровом экране через опцию макет, чтобы в ручную не перемещать элемент и установить точно по середине. Раскройте опцию «Макет» и там выберете «Внизу посередине». Иконка «Макет» появляется только на узлах пользовательских интерфейсов.
Как мы можем наблюдать, наше табло разместилось ровно по середине, лишь пару пикселей снизу имеются свободных, возможно просчет годота, либо иная причина, вы можете это поправить просто сместив наш элемент чуть вниз. А можете и оставить как есть.
Теперь все что вам осталось переимпортировать этот элемент с пресетом 2D Pixel. Мы уже это делали, так что вы справитесь с этой задачей.
В следующий главе мы начнем создавать шарик и прописывать его отскоки. Здесь же вам остается лишь подправить тележку, чтобы она чуть касалась табло, и можете еще раз под настроить скорость и трение тележки.
|