Как скреплять спрайты в unity

Импортирование спрайтов

Как исправить

Если всё правильно

Pixels To Units . Как вы видите спрайт игрока 80x80 пикселей, а в Unity 100x100 пикселей соответствуют одному квадратному метру, поэтому перейдя к настройкам импорта спрайта в строке Pixels To Units вы увидите значение 100 и это означает, что спрайт отображается корректно.Давайте изменим значение на 80, в таком случае вы увидите, что спрайт игрока увеличился, теперь он занимает равно один юнит квадратный.

GIF

Следующее свойство спрайтов о котором я расскажу называется Pivot . Если кратко - это точка привязки. По умолчанию установлена на центр. Вы можете изменить ее в случае необходимости, но в большинстве случае привязка в центре подходит. Здесь обойдемся без иллюстраций.
Едем дальше.

Поле Filter Mode по умолчанию имеет значение Bilinear, но так как у нас Pixel Art нам нужно изменить его значение на Point, после применения изменений вы видите, что спрайт стал выглядеть лучше, но при приближении видны аномалии, для того чтобы избавиться от них изменим значение поля Format на TrueColor.
Теперь спрайт не имеет никаких аномалий. Запомните такие настройки, поскольку их нужно применять каждый раз при работе с Pixel Art"ом.

В первой главе вы найдете основную информацию по загрузке и установке Unity и подготовке первой сцены нашей игры.

Настройка среды в Unity

Начнем с самого простого: загрузки и настройки Unity .

Загрузите последнюю версию с официального сайта или торрента и запустите установочный файл.

Для редактирования кода в Unity (4.0.1 и выше) служит редактор MonoDevelop. Если вы работаете в Windows, вы можете (и я вам советую) использовать альтернативый редактор Visual Studio 2013 Desktop (C#) для Windows , после чего в настройках Unity измените редактор по умолчанию на Visual Studio.

Полезно знать: невозможно использовать отладчик Visual Studio 2013 Express с Unity. Вы должны иметь Pro версию Visual Studio и купить UnityVS плагин. С версией Express, вы будете иметь лучший редактор кода, но отсутствие отладчика сведет на нет все его достоинства.

Mac OS X

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

Наша первая игровая сцена

Панель Hierarchy (Иерархия) содержит все объекты, которые доступны в сцене. Это то, чем вы манипулируете, когда начинаете игру с помощью кнопки "Play".

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

Как вы можете видеть здесь, у нас здесь 3 потомка для объекта Level .

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

Убедитесь, что все они имеют координаты (0, 0, 0) и тогда вы сможете легко их найти! Пустые объекты никак не используют свои координаты, но они влияют на относительные координаты их потомков. Мы не будем говорить об этой теме в этом уроке, давайте просто обнулим координаты ныших пустых объектов.

Заполнение сцены

По умолчанию, новая сцена создается с объектом Main Camera (Главная камера). Перетащите ее на сцену.

Для начала создайте эти пустые объекты:

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

В Level создайте 3 пустых объекта:

• 0 - Background
• 1 - Middleground
• 2 - Foreground

Сохраните сцену в папке Scenes . Назовите ее как угодно, например Stage1 . Вот, что у нас получилось:

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

Мы только что создали базовую структуру нашей игры. На следующем этапе мы начнем делать забавные вещи: добавим на сцену фон и кое-что еще!

Добавляем фон в сцену

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

Импортируйте изображение в папку Textures (Текстуры). Просто скопируйте файл в нее, или перетащите его из проводника. Не беспокойтесь сейчас о настройках импорта.

Создайте в Unity новый игровой объект Sprite на сцене.

Что такое спрайт?

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

Добавляем текстуру спрайта

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

Вы должны нажать на маленький круглый значок справа от поля ввода, чтобы появилось Select Sprite (Выбрать спрайт) в Инспекторе

Мой спрайт не появляется в диалоговом окне! Убедитесь, что вы находитесь в вкдадке Assets диалогового окна "Select Sprite" (Выбрать спрайт). Если вы видите диалоговое окно пустым, - не пугайтечсь. Дело в том, что для некоторых установок Unity, даже со свежим новым 2D проектом изображения импортируются как "Текстура", а не "Спрайт". Чтобы это исправить, необходимо выбрать изображение на панели "Проект", и в "Инспекторе", изменить свойство "Текстура Type" имущество "Sprite":

Итак, мы создали простой спрайт отображающий облака на небе. Давайте внесем изменения в сцену. В панели Hierarchy (Иерархия) выберите New Sprite . Переименуйте его в Background1 или что-то такое, что легко запомнить. Переименуйте его в Background1 или что-то такое, что легко запомнить. Затем переместите объект в нужное место: Level -> 0 - Background . Измените координаты на (0, 0, 0) .

Создайте копию фона и поместите его в (20, 0, 0) . Это должно отлично подойти к первой части.

Tip : Вы можете создать копию объекта с помощью клавиш cmd + D в OS X или ctrl + D Windows .

Слои со спрайтами

Следующее утверждение очевидно, но обладает некими неудобствами: мы отображения 2D мир. Это означает, что все изображения на одной и той же глубине, то есть 0 . И вы графический движок не знает, что отображать в первую очередь. Слои спрайтов позволяют нам обозначить, что находится спереди, а что сзади.

В Unity мы можем изменить "Z" наших элементов, что позволит нам работать со слоями. Это то, что мы делали в этом руководстве перед обновлением до Unity 5, но нам понравилась идея идея использовать слои со спрайтами. У вашего компонента Sprite Renderer есть поле с именем Sorting Layer с дефолтным значением. Если щелкнуть на нем, то вы увидите:

Давайте добавим несколько слоев под наши нужды (используйте кнопку +):

Добавьте фоновый слой к вашему спрайту фона:

Настройка Order in Layer - это способ ограничить подслои. Спрайты с меньшим номером оказываются перед спрайтами с большими числами.

Слой Default нельзя удалить, так как это слой, используемый 3D-элементами. Вы можете иметь 3D-объекты в 2D игре, в частности, частицы рассматриваются как 3D-объекты Unity, так что они будут рендериться на этом слое.

Добавление элементов фона

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

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

Получение двух спрайтов из одного изображения

Выполняйте следующие действия:

1. Импортируйте изображения в папку "Текстуры"
2. Выберите спрайт Platform и перейдите к панели Инспектор
3. Измените "Sprite Mode" на "Multiple"
4. Нажмите на кнопку Sprite Editor (Редактор спрайта)

В новом окне (Sprite Editor) вы можете рисовать прямоугольники вокруг каждой платформы, чтобы разрезать текстуру на более мелкие части:

Кнопка Slice в левом верхнем углу позволит вам быстро и автоматически проделать эту утомительную работу:

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

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

Добавим их в сцену. Для этого мы будем выполнять те же действия что и для фона: создадим новый спрайт и выберим platform1 . Потом повторим эти действия для platform2 . Поместите их в объект 1 - Middleground . Убедитесь, что их позиция по оси Z равна нулю.

Prefabs (Префабы)

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

Заметка о кнопках "Prefab": При последующей модификации игрового объекта, вы можете использовать кнопку "Apply", чтобы применить эти изменения к Prefab , или кнопку "Revert", чтобы отменить все изменения игрового объекта в свойстваъ Prefab . Кнопка "Select" переместит выбранные свойства в ассет Prefab в окне проекта (они будут выделены).

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

Теперь вы можете добавить больше платформ, меняющих свои координаты, размеры и плоскости (вы можете поместить их на заднем или переднем плане, просто установите координату Z для платформы на 0).

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

Слои

Прежде чем двигаться дальше, мы модифицируем наши слои, чтобы избежать каких-либо проблем с порядком их отображения. Для этого просто измените позицию игровых объектов по оси Z во вкладке Hierarchy (Иерархия) следующим образом:

При переключении из 2D режима в 3D, в окне "Scene" (Сцена) вы будете четко видеть слои:

Кликнув на игровом объекте Main Camera , вы увидите, что флажок Projection установлен на Orthographic . Эта настройка позволяет камере визуализировать 2D игру без учета трехмерных свойств объектов. Имейте в виду, что даже если вы работаете с 2D объектами, Unity по-прежнему использует свой 3D движок для визуализации сцены. Рисунок выше это наглядно демонстрирует.

В следующем уроке:

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

• Tutorial

Часть 1: заготовка персонажа и анимация покоя

Всем добрый день. В относительно недавно вышедшей Unity 4.3 появились инструменты для создания 2D игр. Конечно, такие игры можно было создавать и раньше, но это делалось при помощи дополнительных ухищрений (вот с хабра). Теперь же появилась поддержка 2D «из коробки». Надеюсь, разработчики продолжат ее развивать, а пока я хочу рассказать о некоторых приемах работы с новыми 2D инструментами.

Для основы урока я взял официальный видеоурок с сайта Unity3d.com. В нем создается анимированный управляемый 2D персонаж. Он может стоять, бегать, прыгать. Все это сопровождается соответствующими анимациями. Урок довольно длинный (почти полтора часа) и содержит немного «воды», поэтому я решил сделать некий текстовый перевод. В этой части речь пойдет о самых основах - создадим статичную платформу для нашего персонажа, самого персонажа, и сделаем персонажу анимацию покоя. Бег и прыжки рассмотрим позже, но основу для этого создадим сейчас. Все операции я постараюсь описывать подробно, но основные знания об интерфейсе Unity у вас должны быть. На том же официальном сайте Unity есть хорошие и быстрые уроки по интерфейсу.

Итак, начнем. Создадим новый проект в Unity. Выберем папку для расположения проекта, импортировать дополнительные пакеты не будем. Обязательно укажем, что мы создаем проект, настроенный на 2D игру (Setup defaults for: 2D ).

Проект создан. В окне Project у нас должна быть одна папка - Assets . Давайте создадим в ней подпапку Sprites , где будем хранить спрайты - графические файлы, необходимые для отображения персонажей, фона, пола, бонусов и прочих игровых объектов. Нам нужен спрайт, для отображения платформы, по которой будет бегать наш персонаж. Для этого подойдет любое прямоугольное изображение. В конце поста я указал ссылку на архив со спрайтами, которые использовались в уроке. Это немного спрайтов из игры Capitan Claw. Файл спрайта платформы называется Platform.png . Скопируем его в папку Sprites . Теперь нам надо перетащить спрайт Platform на окно Scene . В нашем проекте есть камера с именем Main Camera . Она-то и будет отображать то, что мы видим в игре. Перетащим спрайт платформы так, чтобы она оказалась в нижнем углу поля зрения камеры (если кликнуть по камере, то внизу сцены появится окошко Camera Preview , по которому можно контролировать, что в данный момент видит камера). Unity автоматически создаст игровой объект с двумя компонентами - Transform и Sprite Render . Первый отвечает за положение нашей платформы, второй - за ее отрисовку. Но нам еще нужно, чтобы персонаж не падал сквозь эту платформу, поэтому добавим к объекту платформы компонент Box Collider 2D , из раздела Physics 2D . Итого, сейчас у нас должно быть что-то вроде этого:

Теперь займемся персонажем. Создадим пустой игровой объект (Game Object - Create Empty ) и перетащим его так, чтобы он висел над левой частью платформы. Переименуем этот объект как Character и добавим к нему компонент Rigidbody 2D , для придания нашему персонажу физических свойств твердого тела. В компоненте Rigidbody 2D установим флажок Fixed Angle , чтобы предотвратить случайные вращения нашего персонажа, например, от столкновения с другими твердыми телами. Затем установим в поле Interpolate значение Interpolate . Документация Unity рекомендует устанавливать это значение для персонажей, управляемых игроком, особенно, если за ним следует камера. Это связано с синхронизацией расчета физики и отрисовкой графики. Подробности в документации.

Следующим шагом нам нужно добавить компонент Sprite Render , для отрисовки персонажа. Почему мы не можем просто перенести нужный спрайт, и получить автоматически сгенерированный Sprite Render , как в случае с платформами? Потому что наш персонаж, в отличии от платформ, будет отрисовываться не одним, а несколькими спрайтами, чтобы получился анимированный персонаж. Для этого нам придется выполнить ряд действий и первое из них - достать подходящие спрайтшиты (Sprite Sheet ). Спрайтшит - это изображение, на котором содержаться кадры анимации для нашего персонажа. Думаю, ни для кого не секрет, что анимация - последовательное и быстрое отображение неанимированных кадров, каждый из которых немного отличается от предыдущего. Погуглите по запросу Sprite Sheet , и вы сразу поймете, что это такое. Нам нужны спрайтшиты для состояний покоя, бега и прыжка. В архиве со спрайтами есть файлы Idle.png , Run.png , и Jump.png . Скопируем их в папку Sprites . На данном этапе должно быть следующее:

Приступим к анимированию персонажа, а конкретно - к анимированию состояния покоя, когда персонаж просто стоит и ничего не делает. Точнее говоря, он ничего не делает с точки зрения игровой логики, но он может переминаться с ноги на ногу, моргать, делать жесты, показывающие, что ему скучно так просто стоять и так далее. Для анимации покоя нам понадобиться файл Idle из нашей папки Sprites . Выделим этот файл. В окне Inspector отображаются свойства этого файла. Свойство Texture Type задано как Sprite , и это то, что нам нужно, а вот значение свойства Sprite Mode надо изменить с Single на Multiple . Таким образом, мы указали, что файл играет роль не одиночного спрайта, а представляет собой коллекцию спрайтов. Однако, эту коллекцию еще надо инициализировать. Для этого чуть кликнем по кнопке Sprite Editor , которая находится все в том же окне Inspector чуть ниже свойства Pixels To Units . Откроется новое окно. В нем мы видим содержимое нашего спрайтшита для состояния покоя: несколько похожих друг на друга кадров. Нам нужно их нарезать на отдельные изображения. Для этого нажмем на кнопку Slice в левом верхнем углу окна. Во-первых, нам надо задать способ (Type ) нарезки изображения: Grid или Automatic . Первый способ нарежет наше изображение сеточкой с настраиваемыми размерами ячеек (Pixel Size - X… Y...). То есть, в этом режиме надо подобрать такие значения, чтобы все кадры нормально уместились в ячейках, чтобы ничего лишнего не было отрезано и т.п. Во втором режиме нарезка на кадры будет произведена автоматически. Сама нарезка произойдет после нажатия кнопки Slice . Попробуйте применить разные способы нарезки и посмотрите, что из этого получается. В случае с моим спрайтшитом нормально подходит способ Automatic . Даже если какой-то из кадров вышел немного неудачно - его можно отредактировать, кликнув по нему и изменив значения высоты/ширины/расположения и других параметров в соответствующем окне или при помощи мышки. Подтвердим нарезку нажатием на кнопку Apply в правом верхнем углу и закроем это окно.

Теперь нам надо найти наш импортированный файл Idle в окне Project . В правой части файла есть треугольник (или в левой, при самом мелком мастабе значков). Кликнув по треугольнику, мы развернем коллекцию изображений, полученных в результате нарезки. Они будут иметь имена Idle_0 , Idle_1 и т. д. Теперь в окне Hierarchy выберем наш Character , и перетащим изображение Idle_0 в поле Sprite компонента Sprite Rende r. Наш персонаж отобразиться на сцене. Если он получился маленьким - можно увеличить его размеры до необходимых. Вот так:

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

Вернемся к анимации покоя. Для этого добавим к нашему Character еще один компонент - Animator (раздел Miscellaneous ). Изменим некоторые его свойства - снимем флаг с Apply Root Motion и установим флаг Anymate Physics . Apply Root Motion позволяет изменять положение объекта из самой анимации (что нам сейчас не нужно), а включенный флаг Anymate Physics задает выполнение анимации в цикле расчета физики, что как раз рекомендовано для движущихся твердых тел. Теперь создадим в папке Assets файл Animator Controller . Назовем его CharacterController . В окне Hierarchy выделим нашего персонажа Character и перетащим CharacterController в поле Controller компонента Animator :

Кликнем дважды по CharacterController - откроется новое окно Animator . В нем мы будем создавать различные состояния анимации (покой, бег, прыжок) и задавать условия перехода между ними. Для создания непосредственно анимаций нам нужно окно Animation . Если оно у вас еще не отображается его можно включить из главного меню Unity (Window - Animation ). Теперь выберем нашего персонажа Character в окне Hierarchy , а в окне Animation нажмем кнопку для создания новой анимации и выберем Create New Clip . На скриншоте ниже я отметил эту кнопку красной окружностью:

В стандартном диалоге сохранения файла сперва создадим папку Animations , а в нее сохраним наш файл анимации, назвав его Idle .

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

Осталось всего пара шагов. Переходим в папку Sprites , разворачиваем спрайт Idle , выделяем первое изображение Idle_0 , зажимаем шифт и выделяем последнее изображение Idle_7 . Все выделенные изображения переносим мышью на окно Animation . Зададим значение Sample равное 10 - этот параметр означает количество кадров анимации в секунду. Как известно, для хорошей анимации необходимо, чтобы она отображалась со скоростью не менее 24 кадров в секунду, однако, в нашем случае анимация состоит из довольно маленького числа кадров и при значении 24 она будет отображаться слишком быстро.

Запустим игру! Если все сделано правильно, наш Капитан Коготь должен стоять на платформе, дышать, и вилять хвостом.

На этом пока все. В следующий раз поговорим о реализации бегущего вправо-влево персонажа и соответствующей анимации.

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

Make sure the graphic you want to edit has its Texture Type set to Sprite (2D and UI) . For information on importing and setting up sprites, see Sprites .

Sprite textures with multiple elements need the Sprite Mode to be set to Multiple in the Inpsector. (See Fig 2: Texture Import Inspector… below.)

Открытие редактора спрайтов

Открытие редактора спрайтов

Select the 2D image you want to edit from the Project View .

Note that you can’t edit a sprite which is in the Scene View .

Click on the Sprite Editor button in the Texture Import Inspector (Fig 2: Texture Import Inspector) and the Sprite Editor displays .

Note: You can only see the Sprite Editor button if the Texture Type on the image you have selected is set to Sprite (2D and UI) .

Note: Set the Sprite Mode to Multiple in the Texture Import Inspector if your image has several elements.

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

Использование редактора

The most direct way to use the editor is to identify the elements manually. If you click on the image, you will see a rectangular selection area appear with handles in the corners. You can drag the handles or the edges of the rectangle to resize it around a specific element. Having isolated an element, you can add another by dragging a new rectangle in a separate part of the image. You’ll notice that when you have a rectangle selected, a panel appears in the bottom right of the window:

The controls in the panel let you choose a name for the sprite graphic and set the position and size of the rectangle by its coordinates. A border width, for left, top, right and bottom can be specified in pixels. There are also settings for the sprite’s pivot, which Unity uses as the coordinate origin and main “anchor point” of the graphic. You can choose from a number of default rectangle-relative positions (eg, Center, Top Right, etc) or use custom coordinates.

The Trim button next to the Slice menu item will resize the rectangle so that it fits tightly around the edge of the graphic based on transparency.

Note: Borders are only supported for the UI system, not for the 2D SpriteRenderer.

Автоматическая нарезка (slicing)

Isolating the sprite rectangles manually works well but in many cases, Unity can save you work by detecting the graphic elements and extracting them for you automatically. If you click on the Slice menu in the control bar, you will see this panel:

With the slicing type set to Automatic , the editor will attempt to guess the boundaries of sprite elements by transparency. You can set a default pivot for each identified sprite. The Method menu lets you choose how to deal with existing selections in the window. The Delete existing option will simply replace whatever is already selected, Smart will attempt to create new rectangles while retaining or adjusting existing ones, and Safe will add new rectangles without changing anything already in place.

Grid by Cell Size or Grid by Cell Count options are also available for the slicing type. This is very useful when the sprites have already been laid out in a regular pattern during creation:

The Pixel Size values determine the height and width of the tiles in pixels. If you chose grid by cell count, Column & Row determines the number of columns and rows used for slicing. You can also use the Offset values to shift the grid position from the top-left of the image and the Padding values to inset the sprite rectangles slightly from the grid. The Pivot can be set with one of nine preset locations or a Custom Pivot location can be set.

Note that after any of the automatic slicing methods has been used, the generated rectangles can still be edited manually. You can let Unity handle the rough definition of the sprite boundaries and pivots and then do any necessary fine tuning yourself.

Polygon Resizing

Open the Sprite Editor for a polygon and you have the option to change its shape, size, and pivot position.

Enter the number of sides you want the polygon to have in the Sides field and click Change .

Size and Pivot

SIZE: To change the polygon’s size, click on the sprite to display green border lines and the Sprite information box. Click and drag on the green lines to create the border you want, and the values in the Border fields change. (Note that you cannot edit the Border fields directly.)

PIVOT: To change the polygon’s pivot point (that is the axis point the polygon moves around), click on the image to display the Sprite information box. Click on the Pivot drop down menu and select an option. This displays a blue pivot circle on the polygon; its location depends on the pivot option to you have selected. If you want to change it further, select Custom Pivot and click and drag on the blue pivot circle to position it. (Note that you cannot edit the Pivot fields directly.)

Упаковщик спрайтов (Sprite Packer)

3. Простейшая игра

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

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

3.1. Создаем проект

1. После запуска Юнити, в верхнем главном меню выбираем «File -- New Project » (файл – создать проект).

В появившемся окне выбираем место на жестком диске, где сохранить проект. Рекомендуем написать путь к папке как можно короче, например: C:/Project_1 .

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

В нижней части окна выбираем двухмерную игру «Setup defaults for: 2D ».

После этого нажимаем кнопку «Create » (создать).

2. Перед нами открывается окно Юнити, состоящее из нескольких зон. Расположение зон можно сразу же настроить под себя в разделе «View» главного меню, поэтому ориентироваться будем не по сторонам экрана, а по названиям рабочих зон Юнити.

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

3. Создадим четкую иерархию проекта, создав папки для каждого вида файлов:

1). В окошке «Project » в его левом верхнем углу нажимаем кнопку «Create ».

2). В появившемся списке выбираем «Folder » (папка). В корневой папке «Assets» появится новая папка.

3). Создаём четыре папки, называем их так:

Prefabs (префабы – массивы объектов),

Scripts (скрипты – программный код),

Sounds (звуки – для звукового сопровождения игровых действий),

Sprites (спрайты – изображения для игровых объектов).

(Созданные папки можно переименовывать и перемещать в любое время с помощью перетаскивания элементов в окошке «Project»).

4). Вот так должен выглядеть конечный результат нашей операции:

3.2. Создаём игровую сцену

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

Создаём спрайт:

1. Открываем программу Paint. В свойствах изображения изменяем размер на «100 х 75». Рисуем корабль из простейших фигур, закрашиваем, вокруг корабля оставляем белый цвет. Сохраняем файл под именем «».

2. Созданный файл открываем в программе «Gimp». Слева выбираем инструмент «волшебная палочка», на изображении выбираем белый участок вокруг корабля. В главном меню на вкладке «Изображение» выбираем последнюю строчку «Color to alfa-cannel». После этого вокруг корабля будет прозрачный цвет. Если на изображении ещё остались белые участки, повторяем действия, пока не обесцветим всё ненужное. Сохраняем файл. Запоминаем папку, где лежит созданный файл.

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

Корабль	Космос	Пришелец	Выстрел

Создаём игровой объект:

1. В другом окне находим на компьютере файл изображения, который мы только что создали, перетаскиваем его в окно Юнити в зону «Project » на папку «Sprites ». Файл подгрузится в папку. После этого выделяем загруженный файл, в окне «Inspector » в строчке «Texture Type » выбираем значение «Sprite (2D and UI) ». Внизу нажимаем кнопку «Apply » (применить).

(Другой способ добавлять файлы: в зоне «Project» выбираем папку «Sprites», на ней нажимаем правой кнопкой мыши, в появившемся списке выбираем «Import New Asset», в появившемся окне ищем папку расположения и сам файл изображения).

2. Выбираем загруженный файл в зоне «Project », перетаскиваем его в зону «Scene (тёмно-серая часть рабочего окна Юнити, где есть изображение видеокамеры).

Справа в зоне «Inspector» смотрим на характеристики «Transform» - это координаты нашего объекта в игровом пространстве. После перетаскивания объект установился неровно (в координатах X и Y указаны не целые, а дробные числа). Нажимаем правой кнопкой мыши по меню «Transform », в появившемся списке выбираем «Reset Position ». После этого изображение встанет ровно по центру мира (X=0, Y=0).

Создаём фон:

1. Рисуем изображение звездного пространства – тёмный фон и несколько звезд. Размер изображения - 100 х 100, формат - .png. Можете использовать готовый файл изображения с нашего сайта.

2. Созданный файл добавляем в окно Юнити в папку «Sprites».

3. Перетаскиваем файл в окно игровой сцены. Как мы видим, новое изображение встало поверх старого, и корабля теперь почти не видно. Unity, да и вообще все редакторы, устроены так, что в них новые элементы ставятся поверх старого, но нам-то нужно, чтобы фон был на заднем плане. Чтобы исправить очередность изображений, выбираем игровой объект с фоном, в окне «Inspector» в свойствах «Transform » вставим значение «Z = 1 ». У изображения корабля должно стоять свойство «Z = 0». Z – это глубина расположения объекта в 2D играх. Чем больше значение Z, тем дальше объект находится от игровой камеры.

4. Другой способ: на сцене выбираем объект фона, в окне «Inspector» смотрим свойства «Sprite Renderer », в строчке «Sorting Layer » нажимаем кнопку и выбираем «Add Sorting Layer ». После этого появится новая строчка с названием слоя «Layer 1», переименовываем его в «Background ». Точно так же создаём ещё два слоя: «Foreground » и «GUI ».

5. Выбираем объект корабля, в окне «Inspector» в строчке «Sorting Layer» выставляем ему слой «Foreground». Выбираем объект фона, выставляем ему «Background». Теперь корабль будет отображаться поверх фона.

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

6. Выделяем объект фона из списка «Hierarchy » и удаляем его (клавиша «delete»), чтобы убрать фон с игровой сцены. В зоне «Project » выбираем изображение фона, в окне «Inspector » меняем его тип «Texture Type » на «Texture ». В строчке «Wrap Mode» ставим значение «Repeat». Нажимаем кнопку «Apply ». (Сайт сайт)

7. У нас есть текстура, теперь создадим для неё подходящий игровой объект. В верхнем главном меню выбираем строчку «Game Object | Create Other | Cube ». Изменяем имя появившегося объекта на «Background». В свойствах «Transform» изменяем расположение «Position: 0, 0, 1 » и размер «Scale: 100, 100, 1 ».

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

8. В свойствах куба удаляем раздел «Box Collider » (обработчик столкновений). Для этого нажимаем правой кнопкой мыши на разделе, в появившемся меню выбираем строчку «Remove Component ».

9. Наше изображение фона нельзя напрямую поместить в 3D-объект. Для начала изображение нужно преобразовать в материал. В зоне «Project » сверху нажимаем «Create | Material ». Появившийся материал называем «BackgroundMaterial». В свойствах «Shader » нажимаем на выпадающее меню, выбираем «Unlit | Texture ». В правой части свойств кликаем по квадрату с изображением текстуры «Texture box», из появившегося списка выбираем текстуру нашего фона (или же можно просто перетащить сюда файл текстуры из зоны «Project»). В свойстве «Tiling » проставляем значения x = 25 , y = 25 .

10. В зоне «Hierarchy» выбираем объект «Background». В его свойствах, под компонентом «Mesh Renderer » открываем «Materials » и меняем значение «Element 0 » на наш материал «BackgroundMaterial ».

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

3.3. Создаём скрипт

Для того, чтобы заставить игровые объекты двигаться, нам нужны скрипты. Скрипты – это своеобразные логические команды, которые предписывают объектам, как им себя вести в той или иной ситуации. В Unity можно писать скрипты на следующих языках программирования: C#, Boo, UnityScript. Мы будем использовать язык C#, так как он принадлежит к серии самых популярных языков программирования.

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

Реализация передвижений игрока

1. В области «Проекта» нажимаем правой кнопкой мыши на папке «Scripts », в выпадающем списке выбираем «Create » - «C# Script ». (Или же можно нажать на кнопке «Create» в верхнем левом углу области, и создать скрипт там). Назовём созданный файл - «PlayerScript ».

2. Делаем двойной клик по файлу скрипта, после этого откроется окно дополнительной программы «MonoDevelop» (это программа из комплекта Unity, предназначенная для написания скриптов).

После запуска «MonoDevelop» видим, что часть программного кода уже создана автоматически. Пока ничего не изменяем, а изучаем то, что появилось в коде по умолчанию.

Рассматриваем стандартный шаблон скрипта

В самом верху видим две строчки:

using UnityEngine;
using System.Collections.Generic;

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

В библиотеке «UnityEngine» содержатся описания всех стандартных объектов внутри движка Unity (объекты, их свойства, файлы, префабы, система наследования, связи между объектами).

В библиотеке «System.Collections.Generic» содержатся простейшие логические конструкции (классы, списки, перечни, массивы, таблицы, векторы), а так же источники внешних данных для нашей будущей игры (нажатие клавиш клавиатуры, кнопок мыши, свойства экрана).

public class PlayerScript: MonoBehaviour {

Это заголовок созданного нами скрипта. Заметьте, что третье слово «PlayerScript» - это название скрипта, оно соответствует тому, как мы назвали файл «PlayerScript.cs». После двоеточия указан класс нашего скрипта – «MonoBehaviour». Это стандартный класс для всех скриптов Юнити.

После символа «{» начинается перечень команд внутри скрипта. В самой последней строчке скрипт обязательно должен завершится символом «}».

Внутри скрипта видим строчки:

// Use this for initialization

void Update () {

Это две пустые стандартные функции. «void» - это команда вызова функции. «Start» и «Update» - названия функций.

«()» - означает что это процедурная функция, для неё не нужны внешние значения, и она не выдаёт результат, а просто выполняет определенные действия.

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

Перед функциями видим строчки текста, начинающихся с символов «//». Так обозначаются комментарии к программному коду. Эти записи никак не влияют на сам код, но они помогают разобраться в нём. В самом коде нельзя использовать русский язык даже для названия переменных, а вот в комментариях мы можем писать всё что угодно на любом языке.

Изменяем скрипт

3. Строчку «using System.Collections;» изменяем, чтобы получить больше возможностей при разработке. Дописываем подкатегорию «.Generic»:

using System.Collections.Generic ;

4. Функция «Start» выполняется один раз при создании объекта в игре, а функция «Update» повторяется каждое мгновение в процессе игры. «Start» нам не нужна, можем удалить её.

5. Создадим переменные значения, которые нам понадобятся. После строчки «public class PlayerScript: MonoBehaviour {» добавляем следующий текст:

// Изменение скорости перемещения героя
public float playerSpeed = 2.0f;

// Текущая скорость перемещения
private float currentSpeed = 0.0f;

// Создание переменных для кнопок
public List upButton;
public List downButton;
public List leftButton;
public List rightButton;

// Сохранение последнего перемещения
private Vector3 lastMovement = new Vector3();

Рассмотрим, что мы написали. В первой строчке:

«public» - публичный тип переменной (её смогут изменять другие игровые объекты).

«float» - тип значения, хранящегося в переменной, в данном случае – число с дробным значением.

«playerSpeed» - название переменной (можете назвать по другому).

«= 2.0f» - начальное значение, хранящееся в переменной. Дробное число написано в таком формате – число с точкой, а в конце буква «f», чтобы компьютеру было понятно, что это не обычная цифра, а число с дробным значением. Такой тип переменных используется для координат объекта в пространстве.

Остальные строчки написаны по тому же принципу, но в них есть несколько другие значения переменных:

«private» - приватный тип переменной (такую переменную может изменять только сам объект, переменная для внутреннего пользования).

«List» - тип переменной «массив из нескольких значений», в массиве содержатся ссылки на клавиши клавиатуры. «upButton», «downButton»,.. – названия применяемых клавиш.

«Vector3» - тип переменной «вектор в трех измерениях». «new Vector3()» - создание пустого вектора (обязательно для инициализации такого типа переменной).

Подвязываем скрипт к объекту

6. Сохраняем изменения в скрипте. Можем сделать это, нажав комбинацию клавиш «Ctrl + S». Сворачиваем окно «MonoDevelop», возвращаемся на экран Юнити.

7. В «иерархии» выбираем объект корабля. Перетаскиваем файл скрипта в свойства корабля в окно «инспектора». Там появится новое свойство объекта «Player Script (Script)». Здесь мы можем увидеть, что все публичные переменные отображаются в свойствах объекта, и мы можем поменять их прямо отсюда, не возвращаясь к программному коду.

8. Настроим управление нашим кораблём. В свойствах каждой переменной-кнопки «Up Button», «Down Button», «Left Button», «Right Button» в строчке «Size » ставим значение «2 ». После этого появляются два списка «Element 0» и «Element 1», в них выбираем те клавиши, которые будут соответствовать этой переменной. Для «Up Button» это «UpArrow » (клавиша со стрелкой вверх на клавиатуре) и «W ». В итоге мы должны назначить переменным все кнопки-стрелки и клавиши «W, A, S, D », как это показано на рисунке. (Открыв список, на клавиатуре можно нажимать клавишу с первой буквой названия клавиши, чтобы быстро найти её в огромном списке).

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

Пишем функции перемещения объекта

9. Возвращаемся в «MonoDevelop». Внутри функции «Update» прописываем ещё две функции. Размещение функций в «Update» означает, что они будут повторяться вновь и вновь, на протяжении всей игры:

// Update is called once per frame
void Update () {

// Поворот героя к мышке

// Перемещение героя

}

10. Выше мы написали лишь вызов наших функций. Теперь ниже нужно описать, что же собственно будут выполнять эти функции. После символа «}», закрывающего функцию «Update», и перед последним символом «}» добавляем код:

// Поворот героя к мышке
void Rotation() {
// Показываем игроку, где мышка
Vector3 worldPos = Input.mousePosition;
worldPos = Camera.main.ScreenToWorldPoint(worldPos);
// Сохраняем координаты указателя мыши
float dx = this.transform.position.x - worldPos.x;
float dy = this.transform.position.y - worldPos.y;
// Вычисляем угол между объектами «Корабль» и «Указатель»
float angle = Mathf.Atan2(dy, dx) * Mathf.Rad2Deg;
// Трансформируем угол в вектор
Quaternion rot = Quaternion.Euler(new Vector3(0, 0, angle + 90));
// Изменяем поворот героя
this.transform.rotation = rot;
}

11. Описываем функцию движения корабля «Movement»:

// Движение героя к мышке
void Movement() {
// Необходимое движение
Vector3 movement = new Vector3();
// Проверка нажатых клавиш
movement += MoveIfPressed(upButton, Vector3.up);
movement += MoveIfPressed(downButton, Vector3.down);
movement += MoveIfPressed(leftButton, Vector3.left);
movement += MoveIfPressed(rightButton, Vector3.right);
// Если нажато несколько кнопок, обрабатываем это
movement.Normalize();
// Проверка нажатия кнопки
if(movement.magnitude > 0)
{
// После нажатия двигаемся в этом направлении
currentSpeed = playerSpeed;
this.transform.Translate(movement * Time.deltaTime * playerSpeed, Space.World);
lastMovement = movement;
}
else
{
// Если ничего не нажато
this.transform.Translate(lastMovement * Time.deltaTime * currentSpeed, Space.World);
// Замедление со временем
currentSpeed *= 0.9f;
}
}

// Возвращает движение, если нажата кнопка
Vector3 MoveIfPressed(List keyList, Vector3 Movement) {
// Проверяем кнопки из списка
foreach (KeyCode element in keyList)
{
if(Input.GetKey (element))
{
// Если нажато, покидаем функцию
return Movement;
}
}
// Если кнопки не нажаты, то не двигаемся
return Vector3.zero;
}

12. Сохраняем файл скрипта, возвращаемся в окно Юнити, сохраняем сцену (в главном меню нажимаем «File | Save Scene ». Теперь можем запустить нашу игру. На вкладке «Game » нажимаем кнопку «Maximize on Play », чтобы игра запускалась во всё окно Юнити. Нажимаем клавишу «Play » в верхней части экрана для включения игры. (Для отключения игры снова нажимаем по клавише «Play »).

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