Работа со спрайтами (Unity3d)
Всем привет.
Вначале небольшой экскурс.
Эта статья является своеобразным переводом обучающей программы от Jesse Freeman. Ему спасибо за мою теперешнюю возможность получить инвайт. Остальным спасибо за понимание, что это моя первая статья.
В утопическом мире населенном только хабралюдьми, я постараюсь сделать так, чтобы за этой статьей последовало еще 9, но мир не идеален, так что пока не известно как всё пойдет. Вроде всё, тогда поехали.
Импортирование спрайтов
Отлично, теперь перетащим спрайт игрока на сцену, и что мы видим спрайт стал gameobject’ом. 
Следующее свойство спрайтов о котором я расскажу называется Pixels To Units. Как вы видите спрайт игрока 80×80 пикселей, а в Unity 100×100 пикселей соответствуют одному квадратному метру, поэтому перейдя к настройкам импорта спрайта в строке Pixels To Units вы увидите значение 100 и это означает, что спрайт отображается корректно.Давайте изменим значение на 80, в таком случае вы увидите, что спрайт игрока увеличился, теперь он занимает равно один юнит квадратный.
Примечание от переводчика для более корректного отображения спрайтов рекомендуется использовать в этом поле значение 100.
Следующее свойство спрайтов о котором я расскажу называется Pivot. Если кратко — это точка привязки. По умолчанию установлена на центр. Вы можете изменить ее в случае необходимости, но в большинстве случае привязка в центре подходит. Здесь обойдемся без иллюстраций.
Едем дальше.
Поле Filter Mode по умолчанию имеет значение Bilinear, но так как у нас Pixel Art нам нужно изменить его значение на Point, после применения изменений вы видите, что спрайт стал выглядеть лучше, но при приближении видны аномалии, для того чтобы избавиться от них изменим значение поля Format на TrueColor.
Теперь спрайт не имеет никаких аномалий. Запомните такие настройки, поскольку их нужно применять каждый раз при работе с Pixel Art’ом.
Спрайты
Спрайты — это двухмерные графические объекты. Если вы привыкли работать в 3D, Спрайты — это, по сути, стандартные текстуры, но существуют специальные приемы комбинирования текстур спрайтов и управления ими для повышения эффективности и удобства во время разработки.
Unity предоставляет заполнитель Создание спрайтов, встроенный редактор спрайтов, класс Визуализатор спрайтов Компонент, позволяющий отображать изображения в виде спрайтов для использования как в 2D-, так и в 3D-сценах. Подробнее
См. в Словарь и Упаковщик спрайтов Средство, которое плотно упаковывает графику из нескольких текстур спрайтов в одну текстуру, известную как атлас. Unity предоставляет утилиту Sprite Packer для автоматизации процесса создания атласов из отдельных текстур спрайтов. Подробнее
См. в Словарь
См. раздел Импорт и настройка спрайтов ниже для получения информации о настройке ресурсов как спрайтов в вашем проекте Unity.
Инструменты для спрайтов
Создание спрайтов
Используйте Конструктор спрайтов для создания спрайтов-заполнителей в своем проекте, чтобы вы могли продолжать разработку без необходимости поиска или ожидания графики.
Редактор спрайтов
Редактор спрайтов позволяет извлекать графику спрайтов из большого изображения и редактировать несколько изображений компонентов в рамках одной текстуры в редакторе изображений. Вы можете использовать это, например, чтобы сохранить руки, ноги и тело персонажа как отдельные элементы на одном изображении.
Визуализатор спрайтов
Спрайты визуализируются с помощью компонента Sprite Renderer, а не Mesh Renderer Компонент сетки, который берет геометрию из Mesh Filter и визуализирует ее в позиции, заданной компонентом Transform объекта. Подробнее
См. в Словарь , используемый с 3D-объекты 3D-игровые объекты, такие как куб, ландшафт или тряпичная кукла. Подробнее
См. в Словарь . Используйте его для отображения изображений в виде спрайтов для использования как в 2D, так и в 3D сценах Сцена содержит среду. и меню вашей игры. Думайте о каждом уникальном файле сцены как об уникальном уровне. В каждой сцене вы размещаете свое окружение, препятствия и декорации, по сути проектируя и создавая свою игру по частям. Подробнее
См. в Словарь .
Упаковщик спрайтов
Используйте упаковщик спрайтов, чтобы оптимизировать использование и производительность видеопамяти вашим проектом.
Импорт и настройка спрайтов
Спрайты – это тип актива любого мультимедиа или данных, которые можно использовать в игре. или проект. Ресурс может быть получен из файла, созданного вне Unity, например, из 3D-модели, аудиофайла или изображения. Вы также можете создавать некоторые типы ресурсов в Unity, например контроллер аниматора, аудиомикшер или текстуру рендеринга. Подробнее
См. Словарь в проектах Unity. Вы можете увидеть их готовыми к использованию через Проект В Unity вы используете проект для проектирования и разработки игры. В проекте хранятся все файлы, связанные с игрой, такие как ресурсы и файлы сцен. Подробнее
Посмотреть в Словарь .
Есть два способа добавить спрайты в свой проект:
В Finder (Mac OS X) или Проводнике (Windows) на своем компьютере поместите изображение непосредственно в папку Assets вашего проекта Unity.
Unity обнаруживает это и отображает в представлении Project вашего проекта.
В Unity перейдите в раздел Ресурсы > Импортировать новый ресурс, чтобы открыть Finder (Mac OS X) или Проводник (Windows) на вашем компьютере.
Отсюда выберите нужное изображение, и Unity поместит его в представление Project.
Подробнее об этом и важной информации об организации папки Активы см. в разделе Импорт.
Настройка изображения в качестве спрайта
Если режим вашего проекта установлен на 2D, импортируемое изображение автоматически устанавливается как спрайт. Подробнее о настройке режима проекта на 2D см. в разделе Проекты 2D или 3D.
Однако, если режим вашего проекта установлен на 3D, ваше изображение устанавливается как текстура изображение, используемое при рендеринге GameObject, Sprite или элемент пользовательского интерфейса. Текстуры часто применяются к поверхности сетки, чтобы придать ей визуальную детализацию. Подробнее
См. в Словарь , поэтому вам нужно изменить Тип текстуры актива :
- Нажмите на объект, чтобы открыть его инспектор импорта.
- Установите для параметра Тип текстуры значение Спрайт (2D и пользовательский интерфейс):
Подробнее о настройках Sprite Тип текстуры см. в разделе Тип текстуры: Sprite (2D и пользовательский интерфейс).
Сортировка спрайтов
Визуализаторы в Unity сортируются по нескольким критериям, таким как порядок слоев или расстояние от камеры. Настройки графики Unity (меню: Правка > Настройки проекта Обширный набор настроек, позволяющих настроить способ Физика, звук, сеть, графика, ввод и многие другие области вашего проекта ведут себя правильно. Подробнее
См. Словарь , затем выберите категорию Графика ) предоставляют параметр под названием Режим сортировки с прозрачностью, который позволяет управлять сортировкой спрайтов в зависимости от того, где они находятся по отношению к камере. В частности, он использует положение спрайта на оси, чтобы определить, какие из них прозрачны по отношению к другим, а какие нет.
Примером использования этого параметра является сортировка спрайтов по оси Y. Это довольно распространено в 2D-играх, где спрайты, расположенные выше, сортируются позади спрайтов, расположенных ниже, чтобы они отображались дальше.
Доступны четыре параметра Режим прозрачной сортировки:
По умолчанию — сортировка на основе того, является ли компонент Камера компонентом, который создает изображение с определенной точки обзора в вашем место действия. Вывод либо рисуется на экране, либо фиксируется в виде текстуры. Подробнее
See in Словарь установлен режим Projection в Перспектива или Орфографика
Перспектива – сортировка по перспективе. Перспектива сортирует спрайты по расстоянию от положения камеры до центра спрайта.
Орфографический — сортировка по орфографическому виду. В ортогональном представлении спрайты сортируются по расстоянию вдоль направления взгляда.
Пользовательская ось — сортировка на основе заданной оси, установленной на оси сортировки с прозрачностью
Если для параметра Режим сортировки с прозрачностью установлено значение Пользовательский, необходимо установить Ось сортировки с прозрачностью:
Если для параметра Режим сортировки с прозрачностью задано значение Пользовательская ось, визуализаторы в виде сцены Интерактивный взгляд на мир, который вы создаете. Вы используете Scene View для выбора и размещения пейзажей, персонажей, камер, источников света и всех других типов игровых объектов. Дополнительная информация
См. в Словарь отсортированы по расстоянию этой оси от камеры. Используйте значение от –1 до 1 для определения оси. Например: X=0, Y=1, Z=0 устанавливает направление оси вверх. X=1, Y=1, Z=0 задает направление оси по диагонали между X и Y.
Например, если вы хотите, чтобы спрайты вели себя так, как показано на изображении выше (те, что выше по оси Y, стоят за спрайтами, которые ниже по оси), установите Режим сортировки с прозрачностью на Пользовательская ось и установите значение Y для Оси сортировки по прозрачности на значение выше 0.
Сортировка спрайтов с помощью скрипта
Вы также можете сортировать спрайты для каждой камеры с помощью скриптов фрагмента кода, который позволяет создавать собственные компоненты, запускать игру событий, изменяйте свойства компонентов с течением времени и реагируйте на ввод пользователя любым удобным для вас способом. Подробнее
Посмотреть в Словарь , изменив следующие свойства в Camera:
TransparencySortMode (соответствует Режиму сортировки с прозрачностью)
2D игра на Unity. Подробное руководство. Часть 1
Начнем с самого простого: загрузки и настройки 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
MonoDevelop 4 — существенно лучше, чем старый MonoDevelop 2 в предыдущих версиях Unity. Он, конечно, далек от совершенства, но ничего лучшего под на Mac не придумано.
На каком языке программировать в Unity?
Unity позволяет кодировать на трех языках: JavaScript, C# и Boo. Рекомендую использовать C# — он более мощный и проще.
Научиться пользоваться в главным интерфейсом Unity достаточно просто. Вам, может быть, будет страшно в первый раз, когда открываете программу, но уже через несколько часов вы будете чувствовать себя в нем как рыба в воде.
Вот несколько ссылок, которые могут быть вам полезными:
- Изучение интерфейса Unitys : основа всех основ. Не зная интерфейса, вы не сможете создавать игры в Unity 3D
- Создание сцены в Unity : изучение этого раздела поможет вам создать свою собственную сцену
Первая сцена. Создаем новый проект.
Выберите меню File , а затем создаqnt новый проект. Не выбирайте нивакой стандартный пакет на первое время. Вы можете повторно импортировать их позже, если вы захотите, просто поначалу они будут просто сбивать вас с толку.
Выберите 2D настройки. Как и прежде, вы можете изменить этот флаг в настройках проекта позже.
Не беспокойтесь о названии. Оно определяется в настройках, и чтобы изменить имя проекта достаточно просто переименовать папку.
Разметка и панели Unity
Перед вами пустая страница. С ней вы и будете работать, но вам потребуется время, чтобы настроить интерфейс в соответствии со своими конкретными нуждами. Лично мне удобнее, когда консоль находится рядом с игровым экраном, но если у вас маленький монитор, вы можете заменить панели вкладками.
Прежде чем перейти к созданию игры, уделите несколько минут, чтобы подготовить свой проект и сцены.
Чтобы держать все под рукой, советуем создать папки во вкладке Project (Проект). Эти папки будут созданы в папке Assets вашего проекта.
Внимание: папка Assets – это место, где хранится все, что вы добавляете во вкладке Project. Она может быть невидимой в Unity, в зависимости от выбранной разметки вкладки (одна или две колонки), но вы сможете увидеть ее, открыв приложение для экспорта файлов. 
Вот пример структуры, которую мы используем в наших проектах. Вы можете адаптировать ее под свои предпочтения.
Ассеты проекта
В вашей панели Project, вы можете найти различные типы ассетов:
Префабы
Многоразовые игровые объекты (например: пули, враги, бонусы).
Префабы можно рассматривать как класс в языке программирования, который может быть обработан в игровых объектах. Это некая форма, которую можно дублировать и изменить по своему желанию в сцене или во время выполнения игры.
Сцены
Сцена содержит игровой уровень или меню.
В отличие от других объектов, создаваемых в панели «Проект», сцены создаются в меню «Файл». Если вы хотите создать сцену, нажмите на кнопку «Новая сцена» в подменю и не забудьте потом сохранить ее в папку Scenes.
Сцены должны быть сохранены вручную. Это классическая ошибка в Unity — сделать некоторые изменения в сцене и ее элементы и забыть сохранить их после. Ваш инструмент контроля версий не увидите никаких изменений до тех пор, сцена не сохранится.
Звуки
Тут все предельно просто. Увидите, если захотите раскидать музыку по разным папкам.
Scripts
Весь код находится здесь. Мы используем эту папку в качестве эквивалента корневой папке в C# проекте.
Textures
Спрайты и изображения вашей игры. В 2D проекте вы можете переименовать эту папку в «Sprites».
Это неважно для 2D проекта, но, оставив название Textures (Текстуры), вы дадите возможность Unity автоматизировать некоторые задачи. Если вы хотите узнать подробную информацию по этой теме, вы можете прочитать об этом здесь , или здесь .
Наша первая игровая сцена
Панель Hierarchy (Иерархия) содержит все объекты, которые доступны в сцене. Это то, чем вы манипулируете, когда начинаете игру с помощью кнопки «Play».
Каждый объект сцены является игровым объектом для Unity. Вы можете создать объект в главной сцене, или в другом объекте игры. Также вы можете в любое время переместить объект чтобы изменить его родителя.
Как вы можете видеть здесь, у нас здесь 3 потомка для объекта Level .
Пустые объекты
В Unity можно создать пустой объект и использовать его в качестве «папки» для других игровых объектов. Это упростит структуру вашей сцены.
Убедитесь, что все они имеют координаты (0, 0, 0) и тогда вы сможете легко их найти! Пустые объекты никак не используют свои координаты, но они влияют на относительные координаты их потомков. Мы не будем говорить об этой теме в этом уроке, давайте просто обнулим координаты ныших пустых объектов.
Заполнение сцены
По умолчанию, новая сцена создается с объектом Main Camera (Главная камера). Перетащите ее на сцену.
Для начала создайте эти пустые объекты:
Scripts Мы добавим наши скрипты сюда. Мы используем этот объект, чтобы прикрепить сценарии, которые не связаны с объектом – например, скрипт гейм-менеджера. Render Здесь будет наша камера и источники света. Level
В Level создайте 3 пустых объекта:
- 0 — Background
- 1 — Middleground
- 2 — Foreground
Сохраните сцену в папке Scenes . Назовите ее как угодно, например Stage1 . Вот, что у нас получилось:
Мы только что создали базовую структуру нашей игры. На следующем этапе мы начнем делать забавные вещи: добавим на сцену фон и кое-что еще!
Добавляем фон в сцену
Наш первый фон будет статическим. Воспользуемся следующим изображением:
Импортируйте изображение в папку Textures (Текстуры). Просто скопируйте файл в нее, или перетащите его из проводника. Не беспокойтесь сейчас о настройках импорта.
Создайте в Unity новый игровой объект Sprite на сцене.
Что такое спрайт?
По сути, спрайт – это 2D-изображение, используемое в видео-игре. В данном случае это объект Unity для создания 2D-игр.
Добавляем текстуру спрайта
Unity может автоматически установить фон для вашего спрайта. Если ничего такого не произошло, или если вы хотите изменить текстуру, перейдите на вкладку инспектора и выберите background : (фон)
Мой спрайт не появляется в диалоговом окне! Убедитесь, что вы находитесь в вкдадке Assets диалогового окна «Select Sprite» (Выбрать спрайт). Если вы видите диалоговое окно пустым, — не пугайтечсь. Дело в том, что для некоторых установок Unity, даже со свежим новым 2D проектом изображения импортируются как «Текстура», а не «Спрайт». Чтобы это исправить, необходимо выбрать изображение на панели «Проект», и в «Инспекторе», изменить свойство «Текстура Type» имущество «Sprite»:
Итак, мы создали простой спрайт отображающий облака на небе. Давайте внесем изменения в сцену. В панели Hierarchy (Иерархия) выберите New Sprite . Переименуйте его в Background1 или что-то такое, что легко запомнить. Переименуйте его в Background1 или что-то такое, что легко запомнить. Затем переместите объект в нужное место: Level -> 0 — Background . Измените координаты на (0, 0, 0) .
Создайте копию фона и поместите его в (20, 0, 0) . Это должно отлично подойти к первой части.
Слои со спрайтами
Следующее утверждение очевидно, но обладает некими неудобствами: мы отображения 2D мир. Это означает, что все изображения на одной и той же глубине, то есть 0 . И вы графический движок не знает, что отображать в первую очередь. Слои спрайтов позволяют нам обозначить, что находится спереди, а что сзади.
В Unity мы можем изменить «Z» наших элементов, что позволит нам работать со слоями. Это то, что мы делали в этом руководстве перед обновлением до Unity 5, но нам понравилась идея идея использовать слои со спрайтами. У вашего компонента Sprite Renderer есть поле с именем Sorting Layer с дефолтным значением. Если щелкнуть на нем, то вы увидите:
Давайте добавим несколько слоев под наши нужды (используйте кнопку + ):
Добавьте фоновый слой к вашему спрайту фона:
Настройка Order in Layer — это способ ограничить подслои. Спрайты с меньшим номером оказываются перед спрайтами с большими числами.
Слой Default нельзя удалить, так как это слой, используемый 3D-элементами. Вы можете иметь 3D-объекты в 2D игре, в частности, частицы рассматриваются как 3D-объекты Unity, так что они будут рендериться на этом слое.
Добавление элементов фона
Также известных как props. Эти элементы никак не влияют на геймплей, но позволяют усовершенствовать графику игры. Вот некоторые простые спрайты для летающих платформ:
Как видите, мы поместили две платформы в один файл. Это хороший способ научиться обрезать спрайты с помощью новых инструментов Unity.
Получение двух спрайтов из одного изображения
Выполняйте следующие действия:
- Импортируйте изображения в папку «Текстуры»
- Выберите спрайт Platform и перейдите к панели Инспектор
- Измените «Sprite Mode» на «Multiple»
- Нажмите на кнопку Sprite Editor (Редактор спрайта)
В новом окне ( Sprite Editor ) вы можете рисовать прямоугольники вокруг каждой платформы, чтобы разрезать текстуру на более мелкие части:
Кнопка Slice в левом верхнем углу позволит вам быстро и автоматически проделать эту утомительную работу:
Unity найдет объекты внутри изображения и будет нарежет их автоматически. Вы можете установить дефолтное значение для точки вращения или минимальный размер каждого фрагмента. Для простого изображения без артефактов, это необычайно эффективно. Тем не менее, если вы используете этот инструмент, будьте осторожны и проверьте результат, чтобы убедиться, что вы получили то, что хотели.
В этом уроке проделаем эту операцию вручную. Назовите платформы platform1 и platform2 . Теперь, под файлом изображения, вы должны увидеть два спрайта отдельно:
Добавим их в сцену. Для этого мы будем выполнять те же действия что и для фона: создадим новый спрайт и выберим platform1 . Потом повторим эти действия для platform2 . Поместите их в объект 1 — Middleground . Убедитесь, что их позиция по оси Z равна нулю.
Prefabs (Префабы)
Сохранить эти платформы как префабы. Просто перетащите их в папку Prefabs :
Таким образом вы создадите Prefab , точно отвечающий оригинальному игровому объекту. Вы увидите, что игровой объект, который вы конвертировали в Prefab , представляет собой новый ряд кнопок прямо под его именем:
Создание префабов с объектами-платформами упростит их повторное использование. Просто перетащите Prefab на сцену, чтобы добавить копию. Попробуйте добавить другую платформу таким же образом.
Теперь вы можете добавить больше платформ, меняющих свои координаты, размеры и плоскости (вы можете поместить их на заднем или переднем плане, просто установите координату Z для платформы на 0 ).
На данном этапе все это выглядит еще сыроватым, но в следующих двух главах мы добавим параллаксный скроллинг, и сцена оживет у нас на глазах.
Прежде чем двигаться дальше, мы модифицируем наши слои, чтобы избежать каких-либо проблем с порядком их отображения. Для этого просто измените позицию игровых объектов по оси Z во вкладке Hierarchy (Иерархия) следующим образом:
| Слой | Позиционирование по оси Z |
|---|---|
| 0 — Задний фон | 10 |
| 1 — Средний фон | 5 |
| 2 — передний фон | 0 |
При переключении из 2D режима в 3D, в окне «Scene» (Сцена) вы будете четко видеть слои:
В следующем уроке:
Вы только что узнали, как создать простой статический фон и как отобразить его должным образом. Затем мы научили вас, как сделать простые спрайты. В следующей главе мы узнаем, как добавить игрока и его врагов.
How to use sprites in Unity?
A Sprite is a 2D Graphic object containing a texture. In 2D mode, Unity uses sprites by default. When working in 3D mode, sprites will appear to be paper-thin, because they have no Z-width.
How to create Sprites in Unity?
You can create a Sprite in the scene by following these steps:
- Drag an image from an external folder into Unity. This will create a Texture Asset;
- You may need to convert this texture to a sprite in the inspector window;
- Drag this texture asset to the hierarchy window. This will create a new gameObject with the same name as your texture, with a” Sprite Renderer” component attached to it.
How to use the Sprite Creator in Unity?
The sprite creator tool helps you to create temporary placeholder 2D sprites with different shapes. You can later replace them with the graphics you want to use.
To use this tool, in the main menu select “Assets->Create->Sprites” and then select the placeholder sprite you want to create (square, circle, triangle, diamond, hexagon, or polygon).
Now drag your placeholder sprite to the Scene view or to the Hierarchy view to create a new sprite gameObject. To change your placeholder sprite, select the gameObject and then in the “Sprite” field of the “Sprite Renderer” Component in the Inspector, click on the small circle to the right of the input field to bring up the Sprite Selector where you can browse and select from a the available sprite assets in your project.
How to use the Sprite Editor in Unity?
The Sprite Editor is primarily used to extract elements (sprites) from a composite image, so that you will get one image asset with multiple sprites extracted from it.
You have to set the “Texture Type” on the image you have selected to “Sprite (2D and UI)” in order to see the “Sprite Editor” button in the inspector window.
Also, you need to set the “Sprite Mode” to “Multiple” in the Inspector in order to get sprite textures with multiple elements.
Select the image asset in the Project view and click on the “Sprite Editor” button in the Inspector and the Sprite Editor displays.
The “Slice” menu at the top left is the most important control in the Sprite Editor. With this menu you can automatically extract elements from the image asset. After any modification, you must click the “Apply” or “Revert” buttons to keep or discard any changes you have made.
We will not discuss all the options here, but if you choose the default slicing type which is “Automatic”, the editor will attempt to guess the boundaries of sprite elements by transparency.
You can also identify the elements manually by dragging rectangles in different parts of the image. You can drag the handles or the edges of the rectangles to resize them around a specific area. When you select one of these rectangles, a panel appears in the bottom right of the window. In this panel you can tweak the different values as you need.
In case of manual selection, the trim tool can help you resize a selected rectangle so that it fits tightly around the edge of the graphic based on transparency.
When you click on the little triangle on the right of the image asset that you have edited with the “Sprite editor”, you will see all the new extracted elements. Now you can drag this image from the Project window to the Hierarchy window (or to the Scene view) and choose which sprite to display in the “Select Sprite” window, or instead, drag an extracted element (sprite).