Как создать игру на Unity c 0 не имея навыков!

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

Наша школа стала одним из спонсоров народного геймджема, мы учредили 2 номинации:

25 000 рублей за лучшую игру на Unity
25 000 рублей за лучший код на Unity

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

Мы хотели бы немного помочь самым начинающим ребятам и выпустить статью о том, как же собрать самую простую игру в Unity

Внимание!

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

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

Автор графического пакета: https://www.kenney.nl/assets/shooting-gallery

Давайте приступим к разработке

Первым делом мы скачиваем графический пакет и переносим все файлы из папки Spritesheets(папка в архиве с графикой) в наш проект. Все файлы вашего проекта хранятся в папке Assets(находится в корне проекта если искать через проводник), в окне Project.Чтобы не захламлять папку ассеты разношерстными файлами мы стараемся всё структурировать, к примеру для графических файлов мы создадим папку Sprites, а уже в неё простым перетаскиванием мыши закидываем наши спрайты.

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

Давайте посмотрим, в каком виде у нас спрайты.

Это атлас, он удобен при разработке, он экономит место, но его следует ещё подготовить. Чтобы пользоваться каждым спрайтом по отдельности его нужно нарезать. Для этого мы нажимаем ЛКМ по атласу, в окне Inspector теперь отображается информация о выбранном файле

Чтобы его нарезать, мы сменяется Sprite Mode с Single на Multiply и нажимаем кнопку Apply, тем самым разрешая нарезку атласа.

Теперь нажимаем кнопку Sprite Editor, у нас открывается окно для нарезки атласа. Для того, чтобы автоматически нарезать атлас на спрайты вы можете нажать Slice в верхней части окна.

Не забудьте нажать Apply

Если вы всё сделали правильно, то около атласа в окне Project появится стрелочка и раскрывающийся список, в котором видно видно все ваши спрайты.

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

Переходим к окну Scene и переводим камеру в 2D режим

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

Этот пустой объект будет служить нам хранилищем для всех объектов, которые представляют окружение.

Давайте начнем с заднего фона.Перетащите спрайт задней стены на сцену, у вас появился небольшой квадрат.Он очень мал, чтобы покрыть всю сцену, если его потянуть, то он теряет качестно, но и создавать много таких квадратов — это захламление. В этом случае мы можем сказать, что отрисовывать этот спрайт стоит не как обычную картинку, а как повторяющийся спрайт!Для этого выбираем лкм нужный объект и в окне инспектора Draw Mode сменяем на Tiled.

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

Таким же образом следует создать траву и воду, ведь они тоже повторяются!Во время построения следите за слоями, каждый отдельный объект находится на определенном слое, слои — это Order In Layer.

Он нужен для четкого указания того, на какой позиции он должен стоять. К примеру, фон — это самый дальний объект, он должен стоять позади всех, по этой причине порядок на слое у него будет 0.Трава уже идет выше стены, слой у неё будет 1, чтобы она всегда была выше, далее будет 3 уровня воды, и у них будут слои 2,3,4, чтобы каждый четко шел за следующим.

В итоге у вас должна получиться похожая картина.

Это почти готовый тир, теперь давайте сделаем мишени.

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

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

Таким образом мы сможем перевернуть нашу мишень при удачном выстреле.Чтобы уточку можно было создавать множество раз, нужно сохранить её как префаб(шаблон), для этого просто из окна иерархии перетащите корневой объект уточки в окно проекта, в специально обозначенную папку(Prefabs), теперь вы всегда можете вновь создать уточку просто перетащив её из окна проекта.

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

Нам нужно открыть окно анимаций, для этого нажмите Window → Animation →Animation

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

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

Мы хотим показать, что уточка появилась, для этого нужно, чтобы она из какой-то нижней координаты, к примеру -1 всплыла вверх, в координату 0.Это изменение положения, значит нажимаем кнопку Add Property.

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

После добавление у нас появились отметки на шкале и значения. Отметки на шкале это и есть анимация. Первые ромбики — это её начало. Я выставляю в самом начале координату по y в -1.3, после мышкой тыкаю на последние ромбики и устанавливаю 0.Получается, что за 1 секунду(сверху на шкале есть время, вы можете двигать ромбики по этой шкале, чтобы изменять длительность анимации) у меня уточка с -1.3 поднимется до 0. Тем самым сделав анимацию всплытия.

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

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

Для выбивания уже интереснее, мы будем анимировать сразу по 2 полям, по повороту и положению.

Сначала мишень повернется на 180, а после уплывет с 0 на -1.3, тем самым исчезнув.

Анимации готовы, теперь их надо соединить в общую цепочку, показать как они будут взаимодействовать.

Обратите внимание, что на вашей уточке появился новый компонент, Animator.

Он создался автоматически при создании анимции, 2 раза нажмите на таргет и у вас откроется окно аниматора.

Первым делом, нам нужно указать тут стартовую анимацию, для этого жмем ПКМ по анимации idle и выбираем пункт Set As layer default state.

Далее жмем пкм по idle и выбираем make transition, появившуюся стрелочку протягиваем и закрепляем при помощи лкм на show. Таким образом вы должны создать такую картинку.

Это то, как анимации будут проигрываться, как они будут переходить от одной анимации, к другой. Остается только настроить переходы.Мы должны перейти в параметры и нажав на + создать 2 триггера, Hit и Show, они будут помогать нам из кода вызвать определенную анимацию.

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

Также следует отключить на всех переходах Has Exit Time для четкости проигрывания.

Переход от Show к Hit будет выглядеть так

А переход снова в Idle трогать не нужно.

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

Готовая утка выглядит так

Для доп практики можете проанимировать движение воды.

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

То, что мы сделали префаб из уточки позволяет нам легко её воспроизвести.

В итоге у нас получилась следующая картина

При запуске все уточки будут под водой, ибо из-за аниматора они не могут всплыть, пока триггер Show не заработает, давайте начнем писать скрипты!

Первым делом напишем с вами скрипт для уточки. Нажимаем пкм по окну проекта и создаем C# скрипт Target.

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

Скрипт нужно добавить к каждому из префабов(не на объект на сцене, а на префаб в окне проекта)

Далее напишем скрипт для группы мишеней, чтобы на определенной волне можно было их открыть(группой играет как раз TargetRow, в котором мы объединили уточек)

В этом скрипте при запуске игры мы собираем всех уточек которые содержатся внутри нашего объекта(наши дети) в единый список. Как вы уже видели, все уточки изначально под водой, ибо состояние idle держит их там, а при вызове метода ShowRandomTarget случайная уточка из ряда будет показана.

Этот компонент нужно добавить к объектам, в которых содержатся уточки.

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

Заметьте, тут поля помечены SerializeField, это позволяет открыть поле для редактирование в инспекторе, т.е. этот компонент мы настраиваем сами под себя.

У нас есть задержка между появлениями show Delay, есть текущее время, current Time, когда текущее время становится больше, чем нужное время для показа, то происходит генерация числа показываемых уток, а после цикл, в котором создастся такое количество уток на разных волнах, после чего время обнуляется.

Этот комопнент мы добавим на новый пустой объект Shooting Gallery и настраиваем следующим образом.

В массив TargetsGroup мы помещаем все 3 волны уточек.

После этого раз в Show Delay секунд будет показываться рандомное количество уток от Min Show Count, до Max Show Count.

Теперь утки показываются, но выбивать мы их ещё не можем.

Чтобы уток можно было выбивать, им нужно добавить физическое тело, для этого переходим к префабу утки и добавляем комопнент Circle Collider.

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

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

Самый технически сложный код в этом проекте, давайте разберем подробнее.

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

Update же выполняется каждый кадр, каждый кадр мы проверяем — игрок нажал левую кнопку мыши? И если да, то мы запоминаем позицию, где находится мышка игрока, создаем при помощи камеры луч в той позиции, где была мышка и проводим рейкаст. Как это выглядит — мы кликаем мышкой и ровно в том месте вниз летит невидимый луч, он ударяется о колайдер уточки и запоминает его.

Далее идет проверка, если колайдер не равен пустоте и на нем есть компонент Target, то в этом случае мы вызываем у него метод Hit, как вы помните он выбивает нашу уточку. Этот компонет мы можем повесить на пустой объект с названием Shooter. Теперь наши уточки выбиваются)

Осталось добавить только перекрестье, чтобы было удобно целиться(на скринах для удобства оставлял, сейчас добавим и вам:))

Берем спрайт перекрестья и создаем его на сцене, после чего создаем скрипт

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

Этот скрипт добавьте на объект перекрестья и он будет следовать за вашей мышкой всегда)

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

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

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

Курс БОРИС расскажет вам о разработке игр в целом, C# введение и Unity введение дадут вам понятие о самых азах разработки игр, а бесплатные курсы по созданию кликера и змейки помогут вам закрепить это на практике.

Были рады для вас стараться <3