Как сделать скины в unity
Перейти к содержимому

Как сделать скины в unity

Unity2D смена скина у персонажа

Начал изучать Unity. Делаю 2д игру и нужно менять скины у персонажа.
Анимация персонажа находится в спрайтшите, на каждый скин свой спрайтшит. Все стейты анимации засунуты в Animator.
Как теперь поменять текстуру в аниматоре, на другую. Все решения которые находил, либо делать заново анимацию для каждого скина, либо отказаться от Mecanim.
Дальше попытка отказать от Mecanim, а засунуть каждый стейт анимации в Animation компонент, и вручную менять стейты персонажа, не увенчалась успехом, анимации не проигрываются, отображается только спрайт, который выставлен в
SpriteRenderer. Анимации проигрываю так:

что ты имеешь в виду под скином ? Если у тебя анимация в спрайтшитах — значит у тебя спрайтовая(покадровая) анимация.

Если я тебя правильно понял, то у тебя должен быть корневой объект на который навешан Animator, а все что анимировано должны крепиться к этому объекту. Тогда их можно будет заменять соблюдая имена.

Вы как минимум привели в своем посте 2 разные системы. Animator — это объекты системы Mecanim, а Animation это объект Legacy Animation
Они совершенно по разному проигрывают анимации. Хотя обе используют AnimationClip. У вас что в итоге? может проще скрин скинуть))

У меня покадровая анимация. Каждое состояние(бег, полет, ходьба и т.д.) находится в одном спрайтшите, т.е. кадры:
idle_01, idle_02.
run_01, run_02.

Теперь мне нужно сменить этот спрайтшит, на другой(с такими же названиями спрайтов внутри). Какой способ создания анимации мне нужно использовать?
Я просто не понимаю разницы между legacy animation и mecanim, кроме как в mecamin мы в редакторе задает стейты и условия их переключения, а в legacy это все делается через свою стейт машину. Или я что-то упустил?

насколько я понимаю у тебя это не получится, так как в твоей анимации используются прямые ссылки на спрайты(можешь показать скрин окна Animation с одной из анимаций, скажу точнее). Проще сделать второй пак анимаций.это довольно быстро делается в Unity

Igor Developer
> насколько я понимаю у тебя это не получится, так как в твоей анимации
> используются прямые ссылки на спрайты
Все верно, у меня на таймлайне анимации прямые ссылки на спрайты из спрайтшита. Вот и интересует вопрос, можно как-то в рантайме эти ссылки заменить на другие спрайты из другого спрайтшита.
Если делать анимацию в юнити, то работает такой метод https://www.youtube.com/watch?feature=player_detailpage&v=rMC… t1DuqI#t=1207

vizgl
> У меня покадровая анимация. Каждое состояние(бег, полет, ходьба и т.д.)
> находится в одном спрайтшите, т.е. кадры:
> idle_01, idle_02.
> run_01, run_02.
Боюсь что я в этом случае, вам придется создавать копии объектов с новыми набором таких анимаций.
В данном случае правильная организация будет хранить объект с анимациями в контейнере, всю логику вешать на контейнер.
Получать из чилда ссылка на аниматора или анимейшен через GetComponentInChildren
А смену стейта делать через просто включение выключена версии персонажа внутри контейнера.

Другой вариант, искать стороннюю тулзу для покадровой спрайт анимации, например 2DToolKit (но вроде он платный).
Либо писать свою туллзу, которая будет пробегать по всем ключам AnimationClip и менять в них ссылки на спрайты через имя из нового датащита.

Можете просто снять ролик, как оно у вас анимировано.

PS: в ролике который вы привели, несколько другая система, это больше получается скелетка, где каждая кость — просто отдельный спрайт. Похожая система используется в плагине SmoothMovies.

2D игра на Unity. Подробное руководство. Часть 6

Начнем подыскивать звуковый файлы для нашей игры. Самое главное — сохраняйте все свои звуки в несжатом 8bit .wav формате. В дальнейшем, в самом Unity можно будет сжать звук, не изменяя исходного .wav файла. Вот, что мы можем сделать:

  • Купить мелодию.
  • Попросить знакомого музыканта.
  • Использовать бесплатные звуки из звуковых банков (например, FindSounds or Freesound).
  • Записать звук самому.

С музыкой немного сложнее, но тоже все решаемо:

  • На сайте Jamendo много музыки разных музыкальных направлений. Будьте осторожны с лицензиями для коммерческих целей.
  • Иногда любители выкладывают свою музыку на рутрекере.
  • Воспользуйтесь продуктом Bosca Ceoil от Терри Кавана для создания своей, неповторимой мелодии.

Итак, создайте или найдите звуки взрыва и выстрела. Если вам лень, вы можете использовать эти:

Мы будем использовать один из треков игры «Больное бумажное приключение», Спинтроник для этого урока:

Импорт звука в Unity

Переместите 4 звуковые дорожки в папку «Sounds». Убедитесь, что для каждой из во вкладке «Инспектор» отключен «3D звук» (так как мы делаем 2D игру) и нажата кнопка «Применить». Вот и все.

Отключение 3D звука

Для воспроизведения музыки, просто перетащите песню во вкладку «Иерархия» (Hierarchy). Мы приглашаем Вас:

  1. Переименуйте новый игровой объект в «Музыка».
  2. Поместите его на (0, 0, 0) .

Объект музыка

Обратите внимание на флажок «Mute». Это может вам пригодиться в ваших тестах. Со звуками придется повозиться, поскольку они должны проигрываться в определенное время. Для решения этой задачи напишем новый скрипт под названием «SoundEffectsHelper»:

Добавьте этот скрипт в игровой объект и заполните его поля со звуковыми клипами:

скрипт для звуков

  1. SoundEffectsHelper.Instance.MakeExplosionSound(); в «HealthScript», только после воздействия частиц.
  2. SoundEffectsHelper.Instance.MakePlayerShotSound(); в «PlayerScript», сразу после weapon.Attack(false); .
  3. SoundEffectsHelper.Instance.MakeEnemyShotSound(); в «EnemyScript», сразу после weapon.Attack(true); .

Запустите игру и прислушайтесь. Да, у нас теперь есть звуки и музыка!

Мы только что узнали, как использовать звуки и музыку в нашей игре. Теперь давайте добавим меню, чтобы мы могли начать и перезапустить наш уровень.

Меню — загрузка и перезапуск игры

Мы закончили наш первый уровень с основным геймплеем, однако, когда игрок умирает, игра продолжает работать, и ее невозможно начать снова. Кроме того, когда вы запустите игру, она сраазу же начнется. Мы находимся в ситуации, когда нам позарез нужно меню для управления игрой.

К сожалению, Unity не располагает инструментами для создания создать красивых меню и, даже используя сторонние библиотеки, приходится повозиться. В этом уроке мы не будем строить сложный графический интерфейс, поэтому воспользуемся встроенными инструментами. Давайте начнем с основ. Сохраните следующие картинки:

фон меню

Это наши фон и логотип. Импортируйте их в проект. Вы можете поместить их в «Меню» — подпапку «Текстуры». В противном случае «фон» сотрет предыдущий файл игры. Для кнопок мы будем использовать стандартные (уродливые) кнопки Unity.

Главное меню

Настало время создать сцену с главным меню. Это то, что показывается юзеру при запуске игры. Для начала, создайте новую сцену:

  1. «File» -> «New scene».
  2. Сохраните ее в папке «Scenes» как «Menu».

Наше главное меню будет состоять из:

  • Фона.
  • Логотипа.
  • Скрипта, который будет отображать кнопки.
  1. Создайте новый спрайт.
  2. Установите его в (0, 0, 1) .
  3. Задайте размер (2, 2, 1) .
  1. Создайте новый спрайт.
  2. Установите его в (0, 2, 0)
  3. Задайте размер (0.75, 0.75, 1)

Вот, что у вас должно получиться:

результат

Конечно, вы можете добавить свое имя, инструкции, шутки и анимацию. К созданию меню можно подойти творчески, просто имейте в виду, что люди хотят начать играть как можно быстрее и ваши изыски им по большей части «по барабану.»

Теперь мы добавим кнопку «начать игру» с помощью скрипта. Создать скрипт по имени «MenuScript» в папке «Scripts», и приложите его к новому пустому игровому объекту под названием «Scripts»:

Мы просто рисуем кнопку, которая будет загружать сценe «Stage1», когда игрок нажимает на нее.

Теперь запустите игру и полюбуйтесь нашим замечательным меню:

Законченная кнопка

Жмем и. Катастрофа!

То, что нам нужно сделать четко написано в сообщении об ошибке.

Добавление сцен в сборку

Нажмите в меню Unity на «File», затем на «Build Settings»:

Build settings

Теперь перетащите все сцены, которые должны быть в вашей игре. Здесь все просто: это «Меню» и «Stage1».

Добавление сцен

Вернитесь в меню. Нажмите на кнопку и . играть!

Смысл метода Application.LoadLevel() — очистить текущую сцену и инстанцировать все игровые объекты в следующей. Иногда нам нужно, чтобы игровой объект из первой сцены был перенесен во вторую (например, чтобы при переходе между двумя меню непрерывно играла одна и та же музыка).

Для этих случаев в Unity есть метод DontDestroyOnLoad(aGameObject) . Просто примените его к игровому объекту – и он не исчезнет при загрузке новой сцены. Он вообще не исчезнет. Поэтому если в следующей сцене вам понадобится его убрать, придется уничтожать его вручную.

Наконец, мы позволим игроку начать игру сначала после того, как его персонаж умер. И, как вы, возможно, заметили, заметили происходит достаточно часто. Давайте «упростим» игру. Вот, что у нас сейчас происходит:

  1. Игрок попадает под пули.
  2. HealthScript.OnCollisionEnter запускается.
  3. Игрок теряет 1 единицу здоровья.
  4. «HealthScript» уничтожае игрока, так как у него меньше, чем 1 единица здоровья.

Мы добавим два новых действия:

  1. Вызывается PlayerScript.OnDestroy .
  2. Создается «GameOverScript» и добавляется к сцене.

Создайте в папке «Scripts» новый скрипт по имени «GameOverScript». Это маленький кусочек кода, который будет отображать кнопки «Начать сначала» и «Назад в меню»:

Это абсолютно идентично первому скрипту, который мы написали, с двумя кнопками.

Теперь, в «PlayerScript», нам нужно привязать этот новый скрипт к смерти:

Запустите игру и попытайтесь умереть (это не должно занять много времени):

Игра окончена

Вы можете найти скрипт где-то на сцене:

Скрипт окончания игры

Конечно, вы можете улучшить скрипт, например, добавив в него счет или анимациИ.

Если вы хотите провернуть что-нибудь эдакое, можете создать «GUI Skin».

  • «Assets» -> «Create» -> «Gui Skin»:

Вы можете изменить интерфейс в «Inspector», чтобы сделать игру более интересной. Убедитесь в том, что этот скин лежит в папке «Resources» (Ресурсы).

Тем не менее, скин не применяется до тех пор, пока вы не вызовите его в вашем скрипте. Во всех наших предыдущих сценариях GUI, мы должны загрузить скин только один раз, а не в каждом кадре, используя GUI.skin = Resources.Load («GUISkin»); .

Вот пример в «MenuScript» (проследите, как действует метод Start() ):

Как видите, нам пришлось изрядно попотеть чтобы сделать банальное неанимированное меню. Мы только что узнали как сделать меню для нашей игры. Поздравляем, вы только что сделали полноценный игровой продукт! Но, к сожалению, эта игра только на вашем компьютере. Чтобы продать ее, мы должны заявить о ней миру. Это как раз то, о чем мы будем говорить с вами в следующем уроке по Unity.

Как сделать скины в unity

Рисование, Дизайн и Разработка игр

Главная » Unity3D: Создание трехмерной игры-платформера: GUI (графический интерфейс пользователя)

Unity3D: Создание трехмерной игры-платформера: GUI (графический интерфейс пользователя)

Графический интерфейс пользователя в Unity3D


Сколько «жизней» осталось у главного героя? Какой уровень здоровья у Лерпза? Пришло время для GUI.

Интерфейс пользователя

В игре, как правило, есть графический интерфейс пользователя (GUI), такой как меню, опции на экране и т.д. Кроме того, в играх интерфейс часто накладывают поверх самой игры. Это может быть также просто, как игровой счет, отображаемый в углу, или более продуманный дизайн со значками, экраном инвентаря или с индикатором статуса «здоровья» героя.

Программный редактор Unity 2 вводит новую систему графического интерфейса пользователя, чтобы облегчить создание таких GUI-элементов для игр, и это система, которую вы будете использовать для «Побега Лерпза».

Примечание Старая система будет сохранена для обеспечения обратной совместимости, но будет считаться устаревшей и будет удалена в будущей версии Unity.

Раньше, вы бы указывали Unity прорисовать кнопку и программная среда Unity вызвала соответствующие сообщения для скрипта, когда пользователь навел курсор на кнопку, нажал на кнопку, отпустил кнопку и т.д.

Старая система была основана на традиционной событийно-ориентированной модели GUI, но Unity 2 представляет совершенно новую GUI-систему, известную как GUI-система, работающая в режиме настоящего времени. Если вы привыкли к традиционной GUI-системе, то новый принцип может немного озадачить.

Функция OnGUI() вызывается по меньшей мере два раза с каждым игровым циклом. При первом вызове Unity создает GUI и рисует его. В этом случае, мы получаем простую кнопку, нарисованную в координатах, указанных при помощи настройки «Game Start», отображенную внутри.

Второй вызов происходит когда обрабатывается ввод пользователя. Если пользователь нажимает на кнопку, то условие if (. ) , в котором находится функция прорисовки кнопки возвращает true , следовательно будет вызвана функция Application.LoadLevel() .

Другие GUI-элементы — Labels, Groups, Check-boxes, и т.д. — все работают точно также, с функциями, возвращающими true / false , или ввод пользователя соответственно.

Очевидное преимущество здесь в том, что вам не нужны бесчисленные обработчики событий для GUI. Они все содержатся в одной функции OnGUI().

Программная среда Unity 2 предусматривает два набора функций, работающих в режиме настоящего времени: базовый класс GUI , который был использован в примере выше, и подобный класс GUILayout, который обрабатывает расположение GUI-элементов для вас, чтобы сэкономить время.

Дополнительную информацию о новой GUI-системе Unity вы можете найти на официальном сайте httpssss://unity3d.com/ .

Игровой HUD

Нашей игре нужен свой игровой GUI для отображения здоровья игрока, оставшихся «жизней» и количества горючих элементов, которые нужно собрать. Графические элементы уже включены в наш файл проекта.

Графический интерфейс обрабатывается в скрипте GameHUD, который использует новый компонент GUI для размещения различных элементов. Этот скрипт должен быть прикреплен к игровому объекту Level, который используется для поддержки некоторых элементов сцены. (Мы могли бы также просто добавить его к объекту NearCamera или к его собственному игровому объекту «GUI» ; это, в основном, дело вкуса, а не ключевое дизайнерское решение.)

  • Создайте пустой игровой объект.
  • Назовите объект Level.

Мы будем использовать игровой объект Level для управления определенными состояниями уровня и другими скриптами.

Объект GUI Skin

Новый графический интерфейс программной среды Unity 2 включает поддержку скинов. Это дает вам полный контроль над внешним видом и чувством каждого элемента графического интерфейса. Построение своего собственного скина графического интерфейса позволяет вам изменять форму кнопки, ее образность, шрифт, цвет и проделывать тоже самое для всех других элементов графического интерфейса, начиная от полей ввода текста до полос прокрутки, и даже целыми окнами.

Поскольку наш игровой графический интерфейс будет основываться исключительно на круглых графических изображениях, то мы создадим игровой HUD полностью при помощи функции GUI.Label() . Тем не менее, нам нужно использовать специальный шрифт для нашего HUD, чтобы отображать оставшиеся топливные баки и «жизни».

Игровой ресурс GUISkin определяет «внешность» графического интерфейса Unity, также как файл CSS определяет вид веб-сайта. Объект необходим, если вам нужно изменить какое-либо свойство, заданное по умолчанию. Если мы меняем шрифт, то нам нужно включить GUISkin в нашу сцену.

  • Используйте команду меню Assets , чтобы создать новый объект GUI Skin. Объект отобразится в панели Project и будет содержать данные GUI skin , заданные по умолчанию.
  • Переименуйте новый объект GUI Skin на LerpzTutorialSkin.

Теперь мы воспользуемся декоративным шрифтом для нашей игры, который называется «Flouride». Это единственное изменение, которое мы проделываем со скином, определенным по умолчанию.

  • Перетащите объект шрифта Flouride на параметр «Font» нашего нового ресурса GUI Skin.

Объект GUI Skin не добавляется на панель Hierarchy, вместо этого мы ссылаемся на GUI Skin напрямую в скрипте GameHUD. Вместе с GUI Skin, скрипту GameHUD также должно быть указано, какие ресурсы использовать для построения дисплея GUI. К ним относится ресурс GUIHealthRing.

altИзображение GUIHealthRing

Примечание Вы, скорее всего, заметили количество предупреждений от программной среды Unity о том, что изображения не «в степени двойки» по размеру. Многие графические карты предпочитают, чтобы изображения были по размеру в степени двойки, независимо от того, какой фактический размер данных изображения используется, поскольку это делает основные расчеты намного быстрыми при выполнении. Графическому интерфейсу редко нужен такой уровень оптимизации и ресурсы, которые мы используем, таким образом, не оптимизированы. Если вы хотите выяснить находятся ли размеры изображения в степени двойки, то просто откройте изображение в окне Inspector, который подскажет, нуждается ли изображение в такой оптимизации.

Это изображение используется для отображения информации о здоровье Лерпза. Пространство справа от изображения Лерпза отображает его оставшиеся «жизни», в то время как окружность слева используется для показа круговой диаграммы его оставшегося здоровья. Круговая диаграмма создается простым наложением соответствующего изображения из массива шести двумерных текстур, с именами от healthPie1 до healthPie6. Изображение healthPie5 показано ниже:

altИзображение healthPie5

Примечание Эти изображения содержат альфа-каналы для определения прозрачности и полупрозрачности.

Использование раздельных изображений позволяет нам просто рисовать изображение в соответствии с фактическим здоровьем Лерпза, без проведения сложных расчетов по вращению и рисованию сегментов программно.

Вторым главным элементом пользовательского интерфейса является состояние топливного бака, основное изображение для которого это GUIFuelCell:

alt

Изображение GUIFuelCell

Это изображение будет отображаться в правом левом углу игрового экрана и показывать топливные баки, которые осталось собрать перед тем, как уровень будет разблокирован.

  • Добавьте скрипт GameHUD игровому объекту Level.
  • Щелкните по игровому объекту Level, чтобы выбрать его и взгляните в окно Inspector. Вы должны будете увидеть запись компонента Game HUD (скрипт).
  • Добавьте изображения GUIHealthRing и GUIFuelCell к скрипту GameHUD.
  • Раскройте запись Health Pie Images.

Health Pie Images — это массив. Сейчас программная среда Unity не знает каким большим он будет, поэтому массив установлен на ноль. У нас есть шесть изображений пирога для того, чтобы забросить их в этот массив, поэтому нам необходимо изменить это значение.

  • Щелкните мышью на «0» рядом с Size. Измените на «6». Теперь вы должны увидеть шесть пустых элементов с именами от Element 0 до Element 5.
  • Откройте папку ресурсов GUI в окне Project, чтобы раскрыть избражения пирога. Их шесть, они пронумерованы от 1 до 6.
  • Компьютер считает от нуля, поэтому healthPie1 должен перейти в Element 0. healthPie2 должен перейти в Element 1… и так далее. Перетащите изображения в их соответствующие ячейки.
  • И наконец, добавьте объект GUI-скин LerpzTutorialSkin в пустую ячейку Gui Skin. Настройки теперь будут выглядеть так:

Если вы запустите игру теперь, то должны будете увидеть графический интерфейс (HUD), находящийся поверх игровой области:

alt

Игровой интерфейс (HUD)

Независимость от разрешения

Одна проблема с GUI это его размер. Скриншот выше — от 24 дюйма iMac работающего с разрешением 1920 x 1200.

Очевидно, мы должны масштабировать HUD динамически в соответствии с текущим размером экрана и разрешением, так как же мы можем этого сделать?

Новый графический интерфейс Unity 2 включает поддержку для трансформируемой матрицы. Эта матрица применяется ко всем элементам графического интерфейса до визуализации (рендеринга), поэтому они могут трансформироваться, вращаться и масштабироваться — в любой комбинации — динамически.

Строка ниже, из скрипта GameHUD, показывает, как:

Если вы перейдете в режим Game View, отключите настройку «Maximize on Play» и установите соотношение сторон 4:3, и вы увидите, что графический интерфейс снова будет масштабироваться для подгонки.

Если бы мы хотели, то могли бы иметь наш HUD вращающимся вокруг, отразить сверху вниз или увеличить масштаб на расстоянии. Для игрового меню, экранов достижений по счету и т.д., это полезная особенность, и мы используем эту хитрость для сцены прохождения уровня.

Меню Start

Каждой игре необходимо меню Start. Оно отображается, когда запускается игра и позволяет игроку сменить настройки, загрузить сохраненную игру и, самое важное, начать игру. В этом разделе мы создадим меню Start с нуля.

Примечание Заставки, меню и так далее — это просто сцены Unity. Таким образом игровой уровень, как правило, является сценой, но сцена не всегда — игровой уровень. Мы используем скрипты в одной сцене, чтобы загрузить и запустить другие сцены, чтобы связать их вместе.

Для меню Start нам понадобится:

  • Две текстовые кнопки графического интерфейса: «Play» и «Quit».
  • Название игры. Оно будет отображаться при помощи пользовательского шрифта.
  • Какая-нибудь подходящая музыка.
  • Какой-нибудь задний фон.

Настройка сцены

Первый шаг — создать новую пустую сцену.

  • Введем с клавиатуры CMD+N для Mac или Ctrl+N для PC, чтобы создать одну сцену, затем нажимаем CMD+S для Mac или Ctrl+S для PC, чтобы сохранить сцену.
  • Назовем сцену StartMenu. Unity автоматически добавит камеру для сцены, но через камеру не на что посмотреть на данный момент.

Теперь мы воспользуемся новой GUI-системой чтобы создать меню:

  • Направляемся в окно Project и создаем пустой файл JavaScript.
  • Переименуем его в StartMenuGUI и откроем его в редакторе.

Сначала добавим директиву скрипту Unity. Директивы — это команды, которые предоставляют Unity информацию или дополнительные указания о скрипте. Эти команды не являются частью Javascript как таковыми, а предназначены для Unity сами по себе. Вы можете найти полностью собранный код скрипта, перечисленный в разделе «Приложение».

В этом случае, мы хотим, чтобы программная среда Unity запустила скрипт внутри редактора так, чтобы мы смогли увидеть результаты незамедлительно без необходимости останавливать и перезапускать проект каждый раз:

Нам нужна ссылка на ресурс LerpzTutorialSkin, поэтому первая строка кода будет такой:

Нам понадобится объект Texture2D для заднего фона. (Мы поместим изображение заднего фона на него в инспекторе.)

Мы также хотим отобразить сообщение «Loading…» , когда игрок нажимает на кнопку «Play» , поэтому нам понадобится флаг для управления этим:

И наконец, мы переходим к самой функции OnGUI:

Код выше проверяет есть ли ссылка на верный объект GUI Skin. Функция Debug.Log() выдает сообщение об ошибке, если нет. (Хорошая привычка проверять все внешние ссылки или данные таким образом, так как это делает процесс отладки намного проще.)

Задний фон

Изображение заднего фона — это элемент GUI.Label, который настроен для использования изображения заднего фона в качестве фона элемента. В нем нет текста и он всегда настроен на размер экрана, поэтому он заполняет экран.

Сначала мы определяем новый объект GUIStyle, который будем использовать, чтобы переопределить стиль GUI Skin заданный по умолчанию. В данном примере, мы просто изменяем элемент стиля «normal.background» для того, чтобы использовать изображение заднего фона.

Функция GUI.Labal() принимает объект Rect. Размеры этого прямоугольника являются производными размеров экрана, так что изображение всегда заполняет экран. Соотношение сторон изображения также учитывается, так что изображение обрезается и/или масштабируется для подгонки без добавления искажений.

Далее мы подходим к тексту названия. Перед тем, как написать код скрипта для него, нам нужно взглянуть на другой объект GUI Skin и сделать небольшие корректировки в нем:

Наше меню использует шрифт по умолчанию, определенный в ресурсе LerpzTutorialSkin. На данный момент стиль, заданный по умолчанию для отображения текста, не подходит для большого названия игры, поэтому мы добавим новый пользовательский стиль GUI для объекта skin, названного mainMenuTitle:

  • Направляемся в окно Project и нажимаем на LerpzTutorialSkin , чтобы отобразить его детали в инспекторе.

Теперь мы добавим пользовательский стиль для объекта GUI Skin:

  • Раскроем элемент «Custom Styles» и убеждаемся в том, что параметр «Size» установлен на «1». Вы должны будете увидеть строку «Element 0».
  • Откройте «Element 0» и установите его элементы, как показано выше. В частности: установите Text Color на оранжево-коричневый, как показано на рисунке. (Не волнуйтесь об элементах, не отображенных на скриншоте: они могут быть оставлены как есть.)

И наконец, теперь мы можем добавить оставшийся код скрипту:

Примечание Имена стилей GUI чувствительны к регистру, когда вы пытаетесь получить доступ к ним через скрипт. Ввод с клавиатуры «mainMenuStyle» одно и тоже, что и «mainmenustyle».

Кнопки

Теперь нам нужно отредактировать свойства настройки GUI Button объекта LerpzTutorialSkin, чтобы создать более интересную кнопку.

Мы используем такой же объект GUI Skin для данного меню и для всплывающего дисплея, или «HUD». Для «HUD» нужно изменить только шрифт, заданный по умолчанию. Тем не менее, для кнопок главного меню нам также нужно, чтобы было графическое изображение позади текста кнопки. Дизайн кнопки по умолчанию не подходит визуальному стилю игры, поэтому нам нужно изменить его.

Подсказка Если вы хотите, чтобы ваши GUI-элементы реагировали на события Hover, Focus и Active, то вы должны также изображение заднего фона, даже если если изображение ничего не содержит.

Нажмите на ресурс LerpzTutorialSkin в окне Project, чтобы раскрыть его детали в окне Inspector. Измените его на настройки, показанные ниже — проигнорируйте другие типы GUI-элементов; мы не будем использовать их:

alt

Настройки изображений кнопки в объекте LerpzTutorialSkin GUISkin.

Теперь давайте добавим кнопку «Play» :

Выше, все, что нужно сделать, это перерисовать и обработать кнопку «Play» . Код для отрисовки и для события обработки находится в том же месте, что делает обслуживание кода легче. Функция GUI.Button() принимает объект Rect для того, чтобы определить положение кнопки и размер, а затем следует текстовая надпись кнопки. Если пользователь нажимает на кнопку, то функция кнопки возвращает true, поэтому мы можем загрузить игровой уровень.

Мы установили параметр isLoading так, чтобы знать, что отображается текст «Loading…» , а затем указываем программной среде Unity загрузить игровой уровень.

Подсказка Новая система GUI поддерживает некоторое количество альтернативных функций для прорисовки элементов, что позволяет задавать изображение вместо текста, или даже изображение, текстовую метку и всплывающую подсказку вместе. Смотрите справку для получения дополнительной информации.

Кнопка «Quit» обрабатывается точно также, но с проверкой работает ли приложение автономно или было запущено в редакторе Unity.

Как видите, все точно также как и с кнопкой «Play». Мы просто рисуем кнопку немного ниже и проверяем нужно ли рисовать ее первой.

Далее идет текст «Loading…», который нужно отображать, когда пользователь нажимает на кнопку «Play». Потому что может потребоваться несколько минут для загрузки игровой сцены, особенно если приложение загружается через интернет через веб-плеер.

Вот где используется isLoading:

И опять мы используем пользовательский стиль графического интерфейса «mainMenuTitle» так, чтобы стиль текста совпадал с названием.

Кнопка «Quit»

Кнопка выхода из игры будет работать только если вы запускаете игру как отдельное приложение. Если игра происходит через веб-плеер, виджет Dashboard или внутри редактора Unity, то в кнопке «Quit» нет никакого смысла. Из веб-плеера нельзя выйти в принципе, так как он встроен в веб-страницу. Чтобы сделать это нужно закрыть браузер. Вы можете возразить, что закрытие страницы, где работает веб-плеер может быть опцией, но это лучше всего обрабатывается самой веб-страницей. Точно также можно сказать, что опция «Quit» может делать в виджете Dashboard? Закрытие виджета удаляет его из Dashboard.

Таким образом, нужно отключить кнопку «Quit» и остановить ее отображение, если игра не работает автономно. Единственным исключением является то, что если игра работает внутри самого редактора Unity. Потому что нам нужно знать о том, отображается ли кнопка в правильном месте и как себя ведет, что сложно сделать, если ее не видно.

Как только сцена StartMenu загружена, она вызывает функцию выше автоматически и устанавливает isStandalone соответствующим образом. Если опция установлена со значением true, то кнопка «Quit» будет отображаться, иначе не будет отображаться.

Последние штрихи — это добавление некоторой музыки.

  • Перейдите в панель Project, откройте папку Sounds и перетащите аудио-файл StartMenu на объект Main Camera в панели Hierarchy. Произойдет добавление компонента Audio Clip.
  • Теперь нажмите на объект Main Camera и в окне инспектора найдите новый компонент Audio Clip. Отметьте пункт Play On Awake and Loop.

Если вы теперь запустите сцену, то должны будете увидеть что-то вроде этого в окне Game View, сопровождающееся короткой, повторяющейся мелодией. Так и есть! Сцена Start Menu готова.

Для ваших собственных проектов вы скорее всего захотите добавить меню опций, возможно меню рейтингов игроков, многопользовательское меню и т.д. Все это можно создать при помощи Unity 2 GUI.

Экран «Game Over»

Экран «Game Over» появляется, когда игрок выигрывает или проигрывает. В отличие от «Start Menu» в этой сцене нет кнопок или другой визуальной интерактивности: просто отображается сообщение «Game Over» над задним фоном во время воспроизведения короткой мелодии. Как только мелодия заканчивается или пользователь нажимает кнопку мыши, то автоматически загружается сцена «Start Menu».

  • Во-первых, создайте новую сцену с именем «GameOver».
  • Перетащите аудио-файл GameOverJingle на объект Main Camera и установите следующие настройки:

Не нужно добавлять что-то еще на сцену при помощи редактора: камеры используемой по умолчанию будет достаточно.

Следующий шаг — создание скрипта:

  • Создайте новый скрипт JavaScript и назовите его «GameOverGUI».
  • Откройте его в редакторе и добавьте код, указанный ниже:

Как и в случае с «Start Menu», нам нужно иметь возможность видеть GUI в редакторе Unity даже когда проект не работает, так что добавьте это:

Для сцены «Start Menu» мы использовали ресурс LerpzTutorialSkin GUI Skin. GUI Skin определяет большое количество стилей GUI и позволяет применять их ко всем объектам GUI.

Альтернативный метод — определить индивидуальные объекты стилей GUI напрямую. Мы сделаем так для скрипта «Game Over» определив три переменные для GUIStyle, которые мы можем затем установить в инспекторе, вместе с двумя переменными, определяющими масштабирование текстовых элементов:

Мы настроим эти объекты GUI Style в инспекторе в ближайшее время.

Далее необходимо определить параметр масштабирования текста для сообщения «GameOver» так как будет отображаться большего размера, чем размер шрифта по умолчанию.

Мы будем рисовать это сообщение дважды, в двух различных цветах, чтобы придать тексту эффект затенения, поэтому мы определим две переменные масштабирования:

В итоге получаем функцию OnGUI() :

Во-первых, масштаб заднего фона был изменен точно также как это было сделано в «Start Menu»:

Следующая задача — нарисовать затененную версию сообщения «Game Over». Необходимо увеличить масштаб текста и отобразить его в центре экрана. К счастью, мы можем использовать встроенную матрицу преобразования системы GUI для управления масштабированием.

Подсказка Матрица преобразования может быть использована для выполнения любых произвольных смещений, которые нужны: масштабирование, поворот, отражение и вращение.

Чтобы убедиться в том, что текст появляется с темным цветом, нужно передать параметр стиля графического интерфейса gameOverShadow в функцию GUI.Label .

Наконец, мы рисуем точно такой же текст снова, но более светлым цветом. Система графического интерфейса Unity всегда отображает эти элементы в порядке их появления в коде, поэтому этот текст появится поверх тени. Помимо использования параметра масштабирования gameOverScale и стиля графического интерфейса gameOverText, нет никакой разницы.

  • Сохраните скрипт и переместите его на объект «Main Camera».
  • Нажмите на объект «Main Camera» чтобы открыть его в инспекторе. Теперь установите переменные…
  • Сначала настроим стиль заднего фона GUI. Для этого нужно переместить изображение GameOverSplashScreen в слот Normal->Background, как показано ниже:
  • Далее, установим текст «Game Over» для стиля GUI, как показано на следующем изображении (как обычно, оставьте все другие настройки, как они есть).
  • Далее, установите параметр «Game Over Scale» на 1.69.
  • Теперь настройки для параметра «Game Over Shadow GUI»
  • Наконец, установите параметр «Game Over Shadow Scale» на 1.61.

Теперь вы должны увидеть GUI в окне Game View, как показано ниже:

alt

Экран «Game Over».

Последний штрих — добавьте второй скрипт объекту «Main Camera», который проверяет закончила ли воспроизводиться музыка, и если да, то загружаем сцену «Start Menu».

  • Создайте новый ресурс Javascript Script. Назовите его «GameOverScript».
  • Откройте скрипт в Unitron и добавьте следующий код:

Этот код проверяет завершилось ли воспроизведение аудио-файла, нажал ли игрок на ключ перед загрузкой сцены «StartMenu». И вот готово: GUI сделан!

Комментариев: 3 на “ Unity3D: Создание трехмерной игры-платформера: GUI (графический интерфейс пользователя) ”

Аффтар, я так понимаю уроков по AS не будет?!
Если не будет, то это правильно!
Продолжай про юнити!

Про AS3 уроки будут, но чуть позже. Следующий урок будет также по «созданию игры-платформера на Unity3D», продолжение, в котором рассказывается про создание соперников в игре и кодирование AI.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *