Как сделать объект кликабельным юнити

Обновлено: 05.07.2024

Данная статья рассказывает о новой системе пользовательского интерфейса, которая появилась в новых версиях Unity, начиная с Unity 4.6.

Вступление

Раньше весь интерфейс строился на основе кода. В нужных скриптах было необходимо обрабатывать событие OnGUI, отображать и обрабатывать события всех элементов которые нам необходимы. В результате код получался громоздким. Конечно существовали и альтернативы, например nGUI, однако данный компонент предоставляется на платной основе. С выходом Unity 4.6 все изменилось. В Unity теперь добавилась отличная система пользовательского интерфейса, с нужными для этого инструментами. Конечно старая система осталась полностью работоспособной, но не переходить на новую систему я считаю не правильно. Лично меня очень сильно поразили возможности для создания интерфейса. Новая UI System получилась одновременно и гибкой, и простой, и при этом весьма функциональной.

Начало. Canvas.

Создание полотна для интерфейса

Я думаю объяснять как создавать сцену нет смысла, поэтому пропустим все лишние действия и перейдем непосредственно к самому интерфейсу. Новая система построена на модулях ввода (Input Module), полотне (Canvas) и самих объектах интерфейса. Для создания интерфейса нам надо знать только про полотно и сами элементы.
Как вы уже догадались нам потребуется полотно, на котором мы будем размещать наши элементы. Для этого идем в меню "GameObject -> UI -> Canvas"
После того, как оно появилось на сцене, выберите его и нажмите F для того, чтобы отобразить его перед камерой, так же удобство можно переключиться в 2D режим Unity. В инспекторе для редактирования доступны следующие очень важные свойства, которые определяют поведение нашего полотна:

Render Mode

В зависимости от этого параметра становятся доступны другие остальные поля. Поэтому сперва рассмотрим значения данного поля.

Screen Space - Overlay

В данном режиме полотно растягивается по размерам экрана и отображается без связи со сценой или камерой (UI будет показан даже в том случае, когда на сцене нету камеры). В случае изменения размера окна, полотно будет растянуто под размеры экрана и размещенные элементы будут перегруппированы. Полотно будет рисоваться поверх всех остальных графических элементов.
Pixel perfect - использовать ли antialiasing

Screen Space - Camera

В данном режиме полотно рисуется на плоскости перпендикулярной взгляду камеры, на некотором расстоянии от точки взгляда. Размер полотна не меняется с изменением расстояния, оно всегда растягивается, чтобы заполнять разрез пирамиды видимости у камеры (camera frustrum view). Интерфейс будет заслоняться любыми 3D элементами, которые находятся перед плоскостью интерфейса.
Pixel perfect - использовать ли antialiasing.
Render camera - камера с помощью которой будет отображен интерфейс.
Plane distance - дистанция плоскости нашего интерфейса от камеры.

World Space

В данном режиме полотно располагается в мировых координатах и является плоским 3D объектом на который действую законы обычного процесса визуализации.
Event camera - камера с помощью которой будут происходить обработки событий ввода пользователя.

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

Screen Space - Overlay Screen Space - Camera World Space

С полотном мы разобрались, можно приступать к созданию простого интерфейса.

Начало. Элементы.

Для начало нам надо принять удобную позу. Поэтому заварите себе кружечку горячего чая, откиньтесь на спинку вашего мягкого кресла (или не менее мягкую деревянную спинку стула :) ) и расслабьтесь. Расслабились? Отлично, теперь возвращаемся к Unity. Если у вас полотно используется в режиме мировых координат (World Space), то выберите его и нажмите F и дальше просто подгоните камеру как вам удобно. В другом случае лучше сделать так. Установить режим использования камеры, указать любую камеру, и поставить дистанцию равную 1.0 и нажимаем F, так же не забываем переключиться в 2D режим для удобства работы с интерфейсом. Подгоняем вид как нам удобно, желательно чтобы было видно всю область полотна, и переходим к созданию элементов.

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

Все эти элементы можно создать из меню "GameObject -> UI -> . ".
После того как вы создадите элемент, надо будет переключиться на новый инструмент Rect tool

С помощью него можно легко настраивать расположение и размеры элементов. Давайте посмотрим на возможности данного инструмента

Вы можете менять положение элементов, перетаскивая сами элементы (Pos X, Pos Y, Pos Z).
Вы можете менять размер элементов, перетаскивая их границы или угловые точки (Width, Height).
Вы можете вращать элемент, перетаскивая область вне элемента рядом с угловой точкой (Rotation).
Вы можете менять центр вращения, чтобы правильно настроить вращение элемента (Pivot).
Вы можете настроить точки крепления к родительскому объекту (Anchors).

В принципе если с первыми 3-мя все понятно, то про остальные я думаю стоит рассказать подробнее.
Начнем с точки вращения. Чтобы его изменить нужно перетаскивать синий кружочек (изначально он находится в центре). Сейчас покажу на скриншотах как это работает. Во всех случаях позиция самого элемента не менялась, лишь якорь и угол вращения.

якорь находится в центре якорь находится слева

окно пресетов

Теперь давайте ка разберемся с точками крепления. Для их изменения придумали такой вот крестик (скриншот справа). Его можно перемещать либо весь, либо только один из его углов. Так же присутствуют так называемые пресеты для данного параметра. При выборе одного из них, позиция якоря будет меняться. Так же можно зажать клавишу Alt во время выбора пресета и тогда будет меняться положение самого элемента. А если еще и зажать Shift - то так же будет изменена позиция точки вращения.

А теперь давайте поговорим о смысле якоря. В принципе если вам абсолютно не важно как ваш интерфейс выглядит, то (стоп, что за бред?) . К сути: настройки якоря помогают сделать ваш интерфейс адаптивным, чтобы он мог подстраиваться и растягиваться под разные размеры экрана. Вот например если вы оставите у всех элементов точку крепления в центре, то при изменении размеров родительского элемента (будь то панель, или полотно) элементы так и останутся в центре. Если поставить якорь в левом верхнем углу, то и элементы всегда будут там. Но если правильно настроить якорь, то можно добиться классных эффектов. В общем это трудно описать на словах и показать на скриншотах, поэтому советую вам самим поэкспериментировать с данным свойством. Но все же я хочу рассмотреть один не больший пример. Запомните, если вы сможете понять, что к чему, то вам будет не сложно построить интерфейс любой сложности. Давайте рассмотрим такой вот пример:

состояние 1 состояние 2 иерархия

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

панель кнопка

Красная - обозначает итоговое расстояние от границы родителя до границы элемента.
Синяя - обозначает расстояние от границы родителя до границы якоря.
Зеленая - обозначает расстояние от границы якоря до границы элемента.

Принцип их работы прост. Красная высчитывается UI системой. А вот остальные мы задаем сами. Запоминайте:

расстояние от границы родителя до границы якоря - всегда в процентном соотношение с размерами родителя.
расстояние от границы якоря до границы элемента - всегда фиксировано.

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

После того как вы научились размещать элементы на полотне, я думаю можно поближе познакомится с особенностью элементов. Начнем с самого простого - картинки!

Image

Source Image - спрайт, который будет использовать для картинки.
Color - окрас спрайта, например можно добавить красных тонов картинке, указав здесь красный цвет.
Material - можно задать материал для картинки.
Image Type - способ отображения изображения
Simple - отображение изображения как есть
Sliced - спрайт имеющий 9 частей будет отображен в виде повторяющихся частей, что позволяет картинке выглядеть качество при разных размерах элемента
Tiled - картинка будет повторяться, чтобы заполнить всю область
Filled - один из самых интересных режимов. Как он работает, смотрим на скриншотах

оригинал Horizotal + Left Vertical + Bottom Radial90 + Bottom Left Radial180 + Bottom Radial360 + Bottom

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

Button

Кнопка состоит из картинки и текста, а так же специального скрипта кнопки (о нем ниже). Текст расположен как отдельный элемент внутри кнопки.

Всего есть 4 состояния:

Normal - обычное состояние.
Highlighted - на кнопку наведена мышка или кнопка была выбрана.
Pressed - кнопка была нажата.
Disabled - кнопка заблокирована и на нее нельзя нажать и выбрать.

Добавлять события очень легко. Сперва надо нажать "+" в правом нижнем углу. В списке появится новый пункт, первым делом надо перетащить туда объект, а затем выбрать нужный метод, который будет вызван при клике на кнопку.

Slider

Часть параметров такие же как и кнопки, поэтому я думаю их можно больше не описывать.

Direction - направление слайдера.
Min Value - минимальное значение, которое будет принимать слайдер.
Max Value - максимальное значение, которое будет принимать слайдер.
Whole Numbers - если установлено, то слайдер будет принимать только целые значения.
OnValueChanged() - какие события будут вызываться при нажатии на эту кнопку. В качестве события должен быть метод, который принимает один параметр типа float**

Input Field

Данный элемент служит для ввода текста.

Starting Value - начальное значение поля.
InputType
Standart - просто текст
Password - текст заменяется звездочками
Character limit - максимальная длина текста (0 - без ограничения)
Multi Line - разрешить использование много-строчного текста

Scrollbar

Так же имеет событие OnValueChanged, как и у Slider'а.

Пример работы из кода

Тут я хочу вам показать, как можно реализовать кнопку способности, как в Warcraft 3. Для этого нам понадобятся знания полученные выше, немного кривых рук ну и конечно же много экспериментов (вы же хотите научиться делать игры, не так ли? Так что больше экспериментируйте и не бойтесь что-нибудь сломать тут вам всегда смогут помочь).

Сперва надо набросать примерный дизайн:

вид из редактора иерархия объектов вид в инспекторе вид из игры, активно вид из игры, перезаряжается

Затем надо написать скрипт:

В заключении

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

Выполнить код при нажатии указанной клавиши, можно через метод Input.GetKey() .

Чтобы выполнить действие при нажатии на клавишу, для текущего объекта надо создать скрипт, в котором создать переменные типом KeyCode .

В настройках компонента появятся два параметра, через которые можно привязать клавиши к переменным.

Теперь можно выполнять код при нажатии на указанную клавишу через метод Input.GetKey() .

Управление для клавиш клавиатуры и геймпада также можно настроить в Edit → Project Settings → Input Manager.

Параметр Name указывает имя клавиши, по которой можно будет обратиться через код.

В заключительной части нашего обучения, вы научитесь интегрировать интерфейс Unity UI в полностью рабочую игру.

Создавать выдвижные меню в Unity теперь гораздо проще

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

Вторая часть была посвящена анимации кнопок и действий, чтобы сделать вашу игру более интерактивной.

Теперь вы можете использовать эти навыки, чтобы полностью понять как работает пользовательский интерфейс Unity. Во-первых, вы создадите новое модное меню. Затем вы перенесете игровую сцену RocketMouse из старой системы GUI в новую систему UI!

Начнём

Создаём Выдвижное Меню

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

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

Добавляем кнопку открытия меню

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

Выберите в меню кнопку GameObject ▸ UI ▸. Переименуйте только что добавленную кнопку в SlideMenuButton и удалите вложенный текстовый объект, поскольку кнопка не нуждается в метке.

Установите позицию кнопки и её размер, по параметрам указанным ниже

Отлично! Вы справились с первым шагом.

Добавляем Masking Panel

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

Если вы не знаете, что такое маска, не переживайте. Просто следуйте инструкциям, и вы увидите, как это работает в режиме реального времени. Вам понадобятся обе панели, чтобы увидеть как это работает.

Выберите GameObject ▸ UI ▸ Panel чтобы создать первую панель. Это добавит Panel, которая будет маской, в Иерархии. Выбирайте её и следуйте инструкциям:

Заметка. Нет необходимости добавлять панель с маской в качестве дочернего элемента кнопки, но ее будет проще позиционировать при использовании якорей или же Anchors. Это также гарантирует, что когда кнопка будет перемещается, Masking Panel перемещается вместе с ней.

Добавляем Панель Содержимого

Добавьте ещё одну панель через GameObject ▸ UI ▸ Panel и следуйте инструкциям

Заметка: Вы уже заметили что вы можете видеть только маленькую область белой панели но её размер не изменился? После того как вы добавили её в качестве дочернего элемента панели с маской, вы теперь только видите часть ContentPanel что находится внутри MaskPanel

Теперь заменим фоновое изображение для панели контента.

Открывайте RW ▸ UI ▸ Menu в окне проекта, и выбирайте картинку для slide_menu_panel_9slice. Откройте sprite editor в Инспекторе и поставьте для всех значений border параметр 8. Жмите применить, Apply!

После этого , выберите ContentPanel в Иерархии, а затем перетащите slide_menu_panel_9slice из окошка проекта в поле Source Image в инспекторе.

На этой GIF анимации вы видите как должны выглядеть обе панели содержимого и как работает компонент mask. Видите – не видите!

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

Добавляем кнопки

Дальше, мы добавим три кнопки для выдвижного меню.

Чтобы создать первую кнопку, выбирайте GameObject ▸ UI ▸ Button. Переименуйте в AboutButton и удалите дочерний Text.

Перетащите кнопку AboutButton на ContentPanel в Иерархии чтобы добавить как дочернею. Откройте RW ▸ UI ▸ Menu в окне проекта и перетащите slide_menu_btn_about на Source Image в Инспекторе. Нажимайте Set Native Size. Не волнуйтесь про его позицию.

Нажимайте ПКМ на AboutButton и выбирайте Duplicate (Ctrl/Cmd + D) чтобы создать ещё одну кнопку. Переименуйте её в AchievementsButton и используйте slide_menu_btn_achievements из RW ▸ UI ▸ Menu в окне проекта как Source Image.

После этого, сделайте ещё одну кнопку через горячие клавиши. Назовите кнопку LeaderboardsButton и используйте slide_menu_btn_leaderboards в качестве изображения.

Отлично! Теперь, у вас есть три кнопки, на как насчёт их позиции? Самое время использовать shortcut!

Выбирайте ContentPanel в Иерархии. Добавляйте компонент Vertical Layout Group и всё готово! Вы должны видеть три аккуратно размещённых кнопки .

Вот как это должно выглядеть:

На заметку: Параметр The Vertical Layout Group сгруппировал ваши кнопки в ряд. Вы можете изменить порядок, по которому Vertical Layout Group это делает. В вашем случае высота ваших кнопок равна высоте панели.

Настроим панель так чтобы она открывалась и закрывалась

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

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

Добавляем код для переключения самого Меню

Откройте UIManagerScript в редакторе кода и добавьте следующую переменную:

После этого добавьте следующий метод:

Это включит компонент анимации при открытии высплывающего меню и установить правильное значение параметра isHidden. Сохраните скрипт и переключитесь обратно на Unity.В Unity выберите UIManager в Иерархии и перетащите ContentPanel из Иерархии в поле Content Panel в Инспекторе.

Теперь выберите SlideMenuButton в Иерархии. В Инспекторе найдите список обработчиков событий On Click () и добавьте новый, нажав кнопку +. После этого перетащите UIManager из Иерархии в этот новый обработчик. Затем в раскрывающемся меню выбора функций выберите UIManagerScript ▸ ToggleMenu ().

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

Добавляем вращающуюся шестерню в качестве кнопки для настроек

Чего то не хватает? Конечно! Иконки вращающейся шестерни — которая показана на GIF анимации в начале этой части.

Добавляем картинку шестерни

Во первых, добавьте картинку как дочерний объект SlideMenuButton, и настройте её анимацию во время открытия и закрытия меню.

Нажимайте ПКМ на SlideMenuButton и выбирайте UI ▸ Image чтобы создать новую картинку в качестве дочернего объекта. После этого следуйте инструкциям:

Анимируем изображение шестерни

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

Вот что вам необходимо знать:

Длительность анимации должна бить такой же как и анимация выдвижного меню. Все анимации в этом уроке длятся одну секунду.
Шестерня должна вращатьсяна 360 градусов вокруг оси Z (Rotation Z).
Используйте то же имяisHidden для имени параметра и установите его значение по умолчанию true
Не забудьте выключить компонент отвечающий за зацикливание и компонент Animator.

Запускаем анимацию шестерни из кода

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

Откройте UIManagerScript в редакторе кода и добавьте следующую переменную экземпляра:

public Animator gearImage;
Затем прокрутите вниз и найдите ToggleMenu. Добавьте следующее в конец тела метода:

Это включает компонент Animator и устанавливает для его параметра isHidden то же значение, что и для параметра isHidden аниматора в contentPanel.Сохраните файл сценария и переключитесь обратно в Unity.

В Unity выберите UIManager в Иерархии. Перетащите GearImage в поле Gear Image в Инспекторе.

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

Хорошая работа! Выдвижное меню завершено, и ваша сцена укомплектована.

Для целей данного руководства вы не будете обрабатывать нажатия на кнопки в меню. Вы должны быть знакомы с обработкой событий пользовательского интерфейса, и интеграция Game Center отправит этот урок в кроличью нору. Вместо этого вам нужно обновить старую сцену RocketMouse на основе графического интерфейса, чтобы она использовала новую систему графического интерфейса. Обновление RocketMouse Scene для использования пользовательского интерфейса Unity

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

Переключитесь на сцену RocketMouse, открыв RW ▸ Scenes в окне проекта. Дважды щелкните сцену RocketMouse, чтобы открыть ее.
Выберите GameObject ▸ UI ▸ Text, чтобы создать новый элемент Text UI. Вы также собираетесь работать с Canvas и EventSystem, пока находитесь здесь.
Выберите Текст в Иерархии и внесите следующие изменения в Инспектор:

Переименуйте его в PointsText.
Установите якоря в верхнем левом углу.
Установите Pivot на (0, 0,5).
Установите Pos X на 50 и Pos Y на -30.
Измените текст на 0, так как игрок начинает с нуля очков.
Откройте RW ▸ UI ▸ Fonts в окне Project и перетащите TitanOne-Regular в поле Font в Инспекторе.
Установите размер шрифта на 24.
Установите для параметра Horizontal Overflow значение Overflow, чтобы на этом слою могли отображаться даже самые невероятные результаты.
Измените цвет текста на белый.

Добавляем значок очков

Недостаточно отображать текст для отображения очков. Вам нужно убедиться, что этот текст понятен с того момента, как его видит игрок. Добавьте значок, чтобы сделать счет четким и понятным.
Выберите GameObject ▸ UI ▸ Image, чтобы создать новое изображение.

Выберите его в Иерархии и выполните следующие действия:

Переименуйте его в PointsIcon.
Перетащите его поверх PointsText, чтобы добавить его в качестве дочернего, чтобы при перемещении метки, значок также перемещался вместе с ней
Установите Anchors в middle-left.
Установите Pivot на (1, 0.5).
Установите Width и Height на 32.
Поставьте PosX на -5 и PosY на 0
Откройте спрайты RocketMouse в окне проекта и перетащите изображение монеты в поле Source Image в Инспекторе.

Обновляем метку очков

Большая часть кода игры находится в скрипте MouseController.cs. Вы отредактируете этот скрипт, чтобы обновить метку очков. До конца этого урока вы будете работать только с этим сценарием.

Откройте RocketMouse ▸ Scripts в окне Project и дважды щелкните скрипт MouseController, чтобы открыть его в редакторе кода.
Когда скрипт загрузится, найдите и удалите следующие методы, которые используют старую систему графического интерфейса:

OnGUI
DisplayCoinsCount
DisplayRestartButton

Добавьте следующее, используя директиву:

После этого добавьте следующую переменную экземпляра, которая будет содержать ссылку на метку:

public Text coinsLabel;

Наконец, добавьте следующую строку в конце CollectCoin, которая вызывается каждый раз, когда мышь собирает монетку.

Сохраните файл сценария и переключитесь обратно в Unity.

В Unity выберите Mouse в Иерархии и найдите компонент MouseController. Перетащите PointsText в поле Coins Labe в Инспекторе.

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

Добавляем диалоговое окно перезагрузки уровня

Создайте панель размером 200px * 200px с меткой и двумя кнопками, которая выглядит следующим образом:

Поместите это в центр canvas.

Вернись когда закончишь всё сам.

Настраиваем отображение окна перезагрузки

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

public GameObject restartDialog;;

Затем добавьте следующую строку кода в Start, чтобы скрыть диалоговое окно в начале уровня:

Прокрутите вниз и добавьте следующую строку в конец

Как вы уже догадались, HitByLaser вызывается, когда мышь умирает. Это идеальное место для отображения диалога перезагрузки.
Теперь вам нужно обработать кнопки в диалоге перезагрузки. Добавьте следующие два метода, для перезапуска и выхода из игры:

Вы свяжете их с соответствующими кнопками через минуту.
Сохраните файл сценария и переключитесь обратно в Unity.

В Unity выберите Mouse в иерархии и перетащите RestartDialog в поле Restart Dialog в Инспекторе.

Затем выберите RestartButton в Иерархии и прокрутите вниз до списка On Click ().
Нажмите +, чтобы добавить новый элемент. После этого перетащите Mouse из Иерархии на новый элемент. В раскрывающемся меню выбора функций выберите MouseController ▸ RestartGame ().

Теперь выберите ExitButton и повторите процесс, но на этот раз выберите MouseController ▸ ExitToMenu().

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

Эксперт в медицинских тренажерах VR на Unity, физических симуляциях и сетевых играх.

Что такое Unity

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

Наглядный пример игры, созданной на Unity, которая поддерживает разные устройства, — Genshin Impact, успешный мультиплатформенный проект китайской студии miHoYo Limited. Более популярной стала ее мобильная версия, но пользователи могут войти в аккаунт, например, с компьютера и продолжить играть с того же момента, на котором остановились в мобильной версии. Кроме Genshin Impact, на Unity созданы такие известные проекты, как Hearthstone, Outlast, Cuphead, Pokemon GO и многие другие.

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

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

Посмотрите также: Как установить Unity

Как создать простую игру

При создании собственного проекта важно помнить, что разработка кода — это примерно 20% игры; гораздо большее значение в ней имеют другие аспекты:

Разработчик игр на Unity

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

Русского языка в настройках нет, так что придется совершенствовать технический английский. Всего Unity занимает 11,3 Гб,поэтому перед установкой лучше проверить свободное место на диске и почистить его при необходимости.

Следующий шаг — создание Unity ID. Можно регистрироваться с помощью почты или использовать предложенные аккаунты, например Google, Facebook или Apple. Важно поставить первые две галочки: согласие с условиями использования Unity и признание политики конфиденциальности. Третья галочка — это согласие на маркетинговые рассылки, ее ставить не обязательно.

После регистрации Unity предложит создать тестовый проект Microgame. На выбор предлагается пять шаблонов:

LEGO Microgame;
шутер от первого лица;
картинг;
платформер;
пустой 3D-шаблон.

Можно выбрать любой из них и посмотреть, как работает создание игры в конкретном жанре. Обучающий материал пошагово демонстрирует назначение различных окон в интерфейсе и принцип работы с элементами игры: как заставить двигаться персонажей, поменять текстуру объекта или его форму. В обучении окно Scene, в котором происходит вся работа с элементами, уже заполнено различными объектами, но при создании проекта с нуля оно будет пустым.

Создание проекта

После обучения можно перейти к созданию своей первой игры на Unity с помощью кнопки NEW в меню проектов.

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

Настройка интерфейса

В стандартном интерфейсе проекта шесть элементов рабочей области:

Верхняя панель инструментов— в ней находятся стандартные вкладки File, Edit, Help, как во многих других интерфейсах, а также вкладки Assets, GameObject, Components и Window.
Scene — окно сцены, в котором выстраивается игровое пространство (элементы игрового мира, текстуры, фигурки персонажей и прочее).
Games — это окно игры, в котором можно посмотреть глазами пользователя, как будут двигаться элементы и работать игровые механики.
Hierarchy — окно иерархии, в нем перечислен список всех элементов (GameObject), которые помещены в окно Scene.
Project — это система папок, в которых хранятся ассеты по категориям (текстуры, шрифты, звуки и т.д.).
Inspector — окно для изменения элементов игры, их размера, цвета, положения в пространстве и других характеристик.

Добавление объекта

Объекты на экран Scene можно добавить из Asset Store. Для этого на панели инструментов нужно кликнуть на вкладку Window –> General –> Asset Store.

В строке поиска можно по названиям найти нужные компоненты, например, сет Free Platform Game Assets.

Как и другие ассеты, он загружается с помощью кнопки Import.

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

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

Шаг 2. Перенести в область Scene

Работа со скриптами

За поведение игровых объектов отвечают присоединенные к ним компоненты (Components). Базовый компонент любого объекта — Transform, он отвечает за положение элемента в окне Scene, возможность поворачивать и масштабировать его. К базовому компоненту можно добавить, например, Renderer, который меняет цвет, или RigidBody, который отвечает за массу и физику объекта. Но кроме базовых компонентов, объектам можно задавать особые условия, и для этого как раз используются скрипты.

Базовые элементы скриптов — это:

using — элемент в коде, который подключает библиотеки;
public class — в этой строке обычно прописан класс MonoBehaviour, он содержит набор функций, необходимых для работы скрипта;
void — те самые функции, с их помощью прописываются действия, происходящие в игре.

Рассмотрим, например, функцию start. Любое действие в ней произойдет только один раз, когда запустится игра. Пропишем здесь print (“Hi”).

И можно заметить, что в консоли это слово выводится один раз.

Функция update — повторяющаяся, ее можно использовать, например, для передвижения объекта. Для этого в скрипте задается переменная int i = 0, она выводится на экран с помощью функции print (i) и увеличивается на одну единицу за каждый шаг с помощью i++.

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

Настройка триггеров

Для понимания сути триггеров важно усвоить, что такое коллайдер (Collider). Это компонент, который присваивается объекту в пространстве игры, задает форму и делает его твердым, недоступным для прохождения сквозь него. Например, если мы разместим монетку в 2D-пространстве и захотим сделать так, чтобы она упала на платформу, то без использования компонента Collider ничего не получится — монетка пролетит сквозь платформу.

Поэтому обоим объектам необходимо присвоить компонент Box Collider 2D — это тонкая зеленая линия, которая обводит элементы по контуру, и за счет этой рамки они становятся твердыми, то есть один не может пройти сквозь другой.

Так объекты обязательно соприкоснутся и монета встанет на платформу.

Триггер (Trigger) — это пространство на карте, при попадании объекта в которое происходит действие; он тоже обводит объект или область в пространстве по краям. По сути, это тот же коллайдер, только триггер позволяет объектам проходить внутрь этой области. Представьте, что на ту же самую платформу вместе с коллайдером наброшен триггер, и при попадании персонажа внутрь триггерной области активируется телепорт — персонажа перебрасывает в другую точку карты.

Чтобы создать триггер, нужно накинуть тот же самый компонент коллайдера, но поставить галочку Is Trigger.

Триггеры распознают три варианта взаимодействия области на карте и объекта:

OnTriggerEnter — объект зашел в зону;
OnTriggerStay — объект находится в зоне;
OnTriggerExit — объект покинул зону.

Что дальше?

Разработчик игр на Unity

Уже во время обучения вы создадите себе портфолио, сможете брать подработки и откликаться на вакансии.

Читайте также: