Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

Работа с 2D-инструментами в Unity

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Dmitriy Sirosh (you can also view the original English article)

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

1. Обзор приложения

В этом уроке вы узнаете, как создать 2D проект и создать мобильную 2D игру в Unity используя язык программирования C#.

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

В этом проекте вы узнаете следующие аспекты разработки в Unity:

  • создание 2D-проекта в Unity
  • ознакомление с интерфейсом Unity
  • создание префаба
  • добавление скриптов к игровым объектам
  • работа с физикой столкновений
  • использование таймеров

2. Создание нового проекта в Unity

Откройте Unity и выберите New Project в меню File, чтобы открыть новый диалог проекта. Выберите каталог для своего проекта и выберите для параметра Set up defaults for (Настройки по умолчанию) значение 2D.


3. Настройки сборки

На следующем этапе вы познакомитесь с интерфейсом Unity. Выберите проект для мобильной разработки, щелкнув на Build Settings в меню File и выберите нужную вам платформу для вашей будущей игры.

В Unity можно создавать игры для iOS, Android, BlackBerry и Windows Phone 8, и это великолепно, если вы планируете разрабатывать мобильную игру для нескольких платформ.


4. Устройства

Поскольку мы собираемся создать 2D игру, первое, что нам нужно сделать после выбора платформы - это выбрать размер картинок, которые мы будем использовать в игре:

iOS:

  • iPad without Retina: 1024px x 768px
  • iPad with Retina: 2048px x 1536px
  • 3.5" iPhone/iPod Touch without Retina: 320px x 480px
  • 3.5" iPhone/iPod with Retina: 960px x 640px
  • 4" iPhone/iPod Touch: 1136px x 640px

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

  • Asus Nexus 7 Tablet: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854px x 480px, 228 ppi
  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi

И то же самое для Widows Phone и BlackBerry:

  • Blackberry Z10: 720px x 1280px, 355 ppi
  • Nokia Lumia 520: 400px x 800px, 233 ppi
  • Nokia Lumia 1520: 1080px x 1920px, 367 ppi

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


5. Экспорт графики

В зависимости от того устройства, на которое вы ориентируетесь, вам может потребоваться преобразовать изображения до рекомендуемого размера и плотности пикселей. Вы можете сделать это в своем любимом графическом редакторе. Я использовал функцию Adjust Size... в меню Tools в приложении Preview (Просмотр) на OS X.


6. Интерфейс Unity

Обязательно нажмите кнопку 2D на панели Scene (Сцена). Вы также можете изменить разрешение, которое используется для отображения сцены, на панели Game.


7. Интерфейс игры

Игровой интерфейс нашей игры будет довольно простым. Вы можете найти арт и скрипты в исходных файлах, прилагаемых к этому уроку.


8. Язык

Вы можете использовать один из трех языков программирования, которые поддерживает Unity: C#, UnityScript, который по синтаксису похож на JavaScript и Boo. У каждого языка есть свои плюсы и минусы, но вам решать, какой из них вы предпочтете. Мне больше нравится C#, так что его и будем использовать.

Если вы решите использовать другой язык, то обратитесь к Unity's Script Reference для изучения примеров.


9. 2D-графика

Unity стала отличной платформой для создания 3D-игр для различных платформ, таких как Microsoft Xbox 360, Sony PS3, Nintendo Wii, Интернет и различные мобильные платформы.

Хотя Unity всегда можно было использовать для разработки 2D-игр, но это не было официально объявлено до выпуска версии Unity 4.3, которая включала встроенную поддержку 2D. На следующем этапе, мы изучим как работать с изображениями как спрайтами вместо текстур.


10. Звуковые эффекты

Я использую несколько звуков для улучшения игрового процесса. Звуковые эффекты, используемые в этом уроке, можно найти на Freesound.org.


11. Импорт ассетов

Прежде чем мы начнем разработку, нам нужно добавить наши ассеты в проект Unity. Есть несколько способов сделать это:

  • выберите Import New Asset из меню Assets
  • добавьте элементы в папку assets в своем проекте
  • перетащите ассеты в окно проекта

После завершения этого шага, вы должны увидеть ассеты в папке Assets вашего проекта на панели Project.

12. Создание сцены

Мы готовы создать сцену нашей игры путем перетаскивания объектов на панель Hierarchy (Иерархия) или Scene (Сцена).


13. Фон

Начните с перетаскивания фона на панель Hierarchy (Иерархия). Затем он должен появиться на панели Scene (Сцена).

Поскольку вкладка Scene (Сцена) настроена на отображение 2D-вида, вы можете выбрать Основную камеру (Main Camera) в панели Hierarchy (Иерархия), при этом вы увидите то, что камера будет отображать. Вы также можете увидеть это переключившись в режим игры. Чтобы сделать всю сцену видимой, измените значение Size (Размер) для Основной камеры (Main Camera) на 1.6 в панели Inspector (Инспектор).


14. Космический корабль

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


15. Коровник

Выберите коровник на панели Assets и перетащите его на сцену. Поместите его, как это показано ниже на скриншоте.


16. Коллайдер коровника

Чтобы убедиться, что коровник реагирует на столкновение с коровой когда она пытается войти внутрь – нужно добавить один компонент, а точнее Box Collider 2D.

Выберите коровник в сцене, откройте панель Inspector и нажмите Add Component. Из списка компонентов выберите Box Collider 2D из раздела Physics 2D. Обязательно проверьте стоит ли галочка в поле Is Trigger.

Мы хотим, чтобы коровка реагировала, когда она попадает в дверь коровника, поэтому нам нужно сделать коллайдер немного меньше. Перейдите на вкладку Inspector и измените значения коллайдера Size (высота и ширина коллайдера) и Center (координаты центра коллайдера) так, чтобы он располагался поближе к двери коровника.


17. Скрипт для обработки столкновений с коровником

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

Выберите коровник и нажмите кнопку Add Component (Добавить компонент) на панели Inspector. Выберите New Script (Новый скрипт) и назовите его OnCollision. Не забудьте поменять язык на C#.

Откройте только, что созданный файл и добавьте следующий фрагмент кода.

Этот фрагмент кода реагирует на столкновение между объектами, к которым привязан скрипт, коровником и объектом названым cow(Clone) - один из экземпляров коровки, Prefab (префаб) который мы создадим позже. Когда происходит столкновение, проигрывается звук и объект коровка уничтожается.


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

Для воспроизведения звука, когда коровка попадает в коровник, нужно для начала прикрепить этот звук к коровнику. Щелкните мышью на коровник во вкладке Hierarchy или на самой сцене (вкладка Scene), нажмите кнопку Add Component во вкладке Inspector и выберите в разделе Audio пункт Audio Source.

Снимите галочку Play on Awake и нажмите маленькую точку справа, под иконкой шестеренки, чтобы выбрать звук коровника.

Вы можете увеличить размер значков в пользовательском интерфейсе Unity (gizmos), нажав Gizmos на вкладке Scene и отрегулировав положение ползунка.


19. Луч

Перетащите изображение луча из вкладки Assets на сцену и добавьте к нему коллайдер. Это необходимо для обнаружения столкновения луча с невезучей коровой. Проверьте включен ли параметр Is Trigger на панели Inspector.

20. Скрипт для луча

Создайте новый скрипт, повторите шаги, проделанные ранее. Назовите скрипт Bullet и замените его содержимое следующим фрагментом кода:

Здесь много кода, но он не сложен. Давайте посмотрим, что происходит. Сначала мы создаем экземпляр AudioClip с именем cowSound, который мы будем использовать для хранения аудио файла. Это просто еще один способ воспроизведения звука, если вы не хотите привязывать к объекту два аудио компонента. Мы объявили переменную как публичную, поэтому мы можем получить к ней доступ из вкладки Inspector. Нажмите маленькую точку справа от cowSound и выберите аудио файл.

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

Мы обнаруживаем касания экрана, делаем луч видимым и воспроизводим звук луча (см. ниже). Если объект луч виден, он начинает двигаться вниз, чтобы попасть в корову.

Также мы предусмотрели проверку не оказался ли наш луч за границами сцены. Если это так, то мы возвращаем его на место и наше НЛО может стрелять снова (проверьте значения х и у луча во вкладке Inspector).

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


21. Добавляем звук для луча

Чтобы добавить аудио к нашему космическому лучу необходимо выбрать во вкладке Hierarchy или Scene наш луч и нажать на кнопку Add Component во вкладке Inspector. Выберите Audio Source из раздела Audio. Снимите галочку с Play on Awake и нажмите маленькую точку справа от Audio Clip, чтобы выбрать звуковой файл.


22. Добавление коровки

Перетащите изображение коровки из панели Assets и поместите ее в сцену, как показано ниже.


23. Rigid Body 2D

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


24. Коллайдер коровки

Мы также должны привязать к коровке коллайдер, чтобы определять столкновения с коровником и лучом. Обязательно проверьте флажок Is Trigger во вкладке Inspector.


25. Скрипт движения коровки

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

Класс MoveCow анимирует корову во время ее движения на экране с помощью переменной moveSpeed. Метод InvokeRepeating изменяет скорость коровы, заставляя ее пускаться галопом начиная с того момента, когда она достигает центра сцены. Это делает игру более сложной.


26. Создаем префаб для коровки

Теперь, когда мы привязали к коровке все необходимые компоненты, пора преобразовать ее в Prefab. Что такое Prefab? Давайте посмотрим в справочном руководстве Unity:

"Префабы (Prefabs) – это GameObject (игровые объекты) предназначенные для многократного использования, которые находятся во вкладке Project View. Префабы можно добавлять в любое количество сцен, несколько раз для каждой сцены. Когда вы добавляете Prefab в сцену, вы создаете его экземпляр. Все экземпляры префаба связаны с оригинальным префабом и, по сути, являются его клонами. Независимо от того, сколько экземпляров вы создали для своего проекта, любые изменения, коснувшиеся оригинального префаба, будут применены ко всем его экземплярам".

Если вы когда-либо изучали Flash и ActionScript, это должно звучать для вас знакомо. Чтобы преобразовать коровку в префаб, перетащите ее с панели Hierarchy на панель Assets. В результате название на панели Hierarchy станет синим.

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


27. Скрипт Spawner

Сценарий Spawner отвечает за появление коровок. Откройте MonoDevelop или ваш любимый C# редактор и создайте новый скрипт:

Мы используем метод InvokeRepeating для клонирования коровок с применением значений, установленных для spawnTime и spawnDelay. Игровой объект коровки GameObject cow установлен в значение public и создан с использованием Inspector. Нажмите маленькую точку справа и выберите префаб коровки.


28. Игровой объект Spawner

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


29. Тестирование

Пришло время протестировать игру. Нажмите Command + P для запуска игры в Unity. Если все работает как надо, вы готовы к заключительному шагу.


30. Настройки проигрывателя

Когда вы довольны своей игрой, пришло время выбрать Build Settings в меню File и нажать кнопку Player Settings. Это вызовет Player Settings на панели Inspector, где вы можете настроить параметры для своего приложения.


31. Иконка приложения

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


32. Изображение для заставки

Иконка приложения или картинка-заставка, которая показывается при запуске приложения.

33. Сборка

После того, как ваш проект сконфигурирован, вернитесь в Build Settings и нажмите кнопку Build. Вот и все, что нужно, чтобы создать свою игру для тестирования и/или распространения.

34. Xcode

Если вы делаете игры для iOS, вам понадобится Xcode, чтобы скомпилировать конечный двоичный (бинарный) код для приложения. Откройте Xcode проект и выберите Build из меню Product.

Заключение

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.