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

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

Компонент Sprite Renderer позволяет вам отображать изображения в виде спрайтов( Sprites ), чтобы использовать их и в 2D и в 3D сценах.

Add it to a GameObject via the Components menu (Component > Rendering > Sprite Renderer or alternatively, you can just create a GameObject directly with a Sprite Renderer already attached (menu: GameObject > 2D Object > Sprite).

Свойство:	Функция:
Sprite	Спрайт, который надо рендерить. Спрайты можно создать из текстур используя настройку Sprite в импортере текстур (Texture importer).
Color	Цвет меша, который рендерится.
Flip	Flip the sprite in the X or Y planes.
Material	Материал, используемый для рендера спрайта.
Sorting Layer	Слой, используемый для задачи приоритета наложения во время рендеринга.
Order In Layer	Приоритет наложения спрайта в рамках его слоя. Чем ниже число, тем раньше будет рендериться спрайт, а спрайты с числами повыше, будут рисоваться поверх тех, что ниже.

Детали

В 3D графике внешний вид объекта может быть разным в соответствии с освещением и с точкой обзора на объект. А вот в 2D изображение просто отображается на экране без каких-либо трансформаций, кроме базовых перемещения, масштабирования и вращения. Позиция спрайта задаётся 2D координатами, таким образом здесь нету концепта “глубины” или расстояния от камеры.

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

Иногда, два или более объекта в одном и том же сортировочном слое могут накладываться (например, 2 персонажа в сайд-скроллере). Свойство order in layer может быть использовано, чтобы задать приоритеты спрайтам в одном и том же слое. Так же, как и со слоями сортировки, применяется правило, что сначала рендерятся объекты с более низким значением номера и перекрываются объектами с более высоким значением. Для деталей о редактировании слоёв сортировки см.layer manager.

Рендеринг

Sprite Renderer использует текстуру указанную в свойстве Sprite, но использует шейдер и другие свойства из свойства Material (это выполняется используя за сценой MaterialPropertyBlock). Это значит, что вы можете использовать один и тот же материал для рендера разных спрайтов не трогая каждую текстуру по отдельности.

Спрайт рендерится на меше, который использует позицию, цвет и UV на каждой вершине, но у него нет вектора нормали. Если ваш материал требует векторы нормалей, то вы можете рассчитать их используя вертексный шейдер (см. Surface Shader Examples.

Стандартные шейдеры, используемые для спрайтов:

• Sprites/Default — простой шейдер с альфа смешиванием, который не взаимодействует с освещением в сцене.
• Sprites/Diffuse — просто шейдер поверхности с альфа смешиванием который взаимодействует с освещением. Он генерирует переднесторонний вектор нормали (0,0,–1).

Flipping

While Sprites can be flipped by setting negative transform.scale , this has the side effect of also flipping the child GameObjects and also flipping the colliders, which can be performance intensive or otherwise not preferred.

The SpriteRenderer flipping feature provides a lightweight alternative which doesn’t affect any other components or GameObjects. It simply flips the rendered sprite on x or y axis and nothing else.

Sprite Editor

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

NOTE:

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.)

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

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

1. Select the 2D image you want to edit from the Project View(Fig 1: Project View). Note that you can’t edit a sprite which is in the Scene View.
2. Click on the Sprite Editor button in the Texture Import Inspector(Fig 2: Texture Import Inspector) and the Sprite Editor displays (Fig 3: Sprite Editor).

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.

Shape

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.)

Как в Unity настроить спрайты в стиле пиксель арт?

Как правило, это не просто одна картинка, а несколько. Так называемый атлас или sprite sheet (спрайт шит).

Для этого нам нужен графический файл, который можно просто перетащить в папку Sprites (если её нет, создать) проекта в окно Project.

Шаг 2. Выделить импортированное изображение в окне Project и перейти к настройкам в окне Inspector.

Шаг 3. Если графический файл при импорте автоматически не сконвертировался в спрайт, выбрать для свойства Texture type значение Sprite (2D and UI).

Шаг 4. Если загружен атлас, задать свойству Sprite Mode значение Multiple.

Возможно при этом потребуется отрегулировать Pixels Per Unit (количество пикселей на юнит). Чем больше это число, тем меньшего размера на сцене будет спрайт. И наоборот. Это значение можно регулировать и после того, как спрайт будет помещен на сцену.

Шаг 5. Нажать на кнопку Sprite Editor и нарезать спрайты в атласе.

Шаг 6. Для установки не размытого, а четкого отображения спрайта в стиле pixel art выбрать свойству Filter Mode значение Point (no filter).

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

Импортирование 2D-ресурсов в Unity

В этом уроке вы научитесь импортировать 2D-ассеты в Юнити, чтобы создать спрайты как из одного изображения, так и из таблицы спрайтов (атлас спрайта), содержащей несколько ассетов, которые вы настроите в редакторе спрайтов.

1. Подготовка 2D-ресурсов изображений для импортирования в Юнити

Импортирование двумерных ассетов, известных как спрайты, в Unity относительно простой и легкий процесс.

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

Называйте ассеты так, чтобы их назначение было понятным. Такое название, как Title_Screen_Background упростит распознавание, чем, например, названия файлов New Image 27 или Untitled3 . Если спрайт является частью анимации, хорошей практикой будет дать каждому кадру в этой анимации такое же имя, пронумеровав каждый так, чтобы они отображались по порядку в окне Project. Например, может быть двенадцать спрайтов с именами от Player_Barbarian_Walk_North_00 до Player_Barbarian_Walk_North_11 .

Unity может импортировать 2D-ресурсы либо в виде отдельных файлов, где каждый элемент пользовательского интерфейса или кадр анимации представляет собой отдельный файл, либо как множество ресурсов, сгруппированных в одно изображение (часто называемое Sprite Sheet — таблицей спрайтов или Sprite Atlas — атласом спрайтов).

Примечание. Атлас спрайтов — это изображение, содержащее набор непоследовательных спрайтов, в то время как таблица спрайтов — это изображение, содержащие последовательные спрайты, обычно используемые для анимации.
При работе с редактором спрайтов следует учитывать несколько важных моментов. Таблица спрайтов должна иметь размер, равный степени 2 (512 * 512, 1024 * 512, 1024 * 1024 и т.д.), чтобы избежать проблем с таблицами неправильного размера. Также для правильной работы в Unity у таблицы спрайтов должен быть параметр Sprite Mode со значением Multiple. Если установлено значение Single, вы не сможете использовать функции редактора спрайтов.

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

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

Большинство инструментов анимации могут экспортировать таблицы спрайтов, а их тщательная организация и присвоение имен могут автоматизировать настройку спрайтов в Unity.

Другой случай, когда вы можете хранить отдельные элементы на одном листе, — это компоновка спрайтов для тайловых карт. Для получения дополнительной информации о тайловых картах смотрите урок «Введение в тайловые карты Unity».

2. Импортирование одного спрайта

При импортировании одного спрайта Юнити назовет этот спрайт именем файла изображения. Например, Hamburger.png станет Hamburger. Создайте или откройте 2D-проект в Unity и поместите спрайт (Рисунок 1) в окно Project, или где-нибудь внутри Assets используя проводник Windows (или Finder на Mac).

Нажмите на только что импортированный спрайт в окне Project, чтобы открыть инспектор для настроек импорта (Рисунок 2).

Для большинства задач важны следующие параметры:

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

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

Этот параметр полезен, если вы создаете игровой мир на основе тайлов; параметр Pixels Per Unit равный размеру одной единицы мира облегчает быстрое построение миров, удерживая клавишу Ctrl (Command на Mac), чтобы двигать их на одну единицу за раз.

Еще одна особенность, которую стоит учитывать при настройке Pixels Per Unit — какая часть мира должна быть видимой на экране. Именно здесь параметр Pixels Per Unit имеет важность вместе с размером (ортогональной) камеры.

Для игры-приключения в стиле ретро можно было бы сделать спрайты 16×16, установив параметр Pixels Per Unit на 16. Размер ортогональной камеры — половина вертикального размера экрана в единица Unity. Чтобы сделать игровой миры высотой 244 пикселей на экране, разделите половину 224 (112) на 16, чтобы получить размер ортографической камеры (в данном случае 7).

Pivot: опору можно рассматривать как точку привязки спрайта. Чтобы сталактит свисал с потолка нужно установить его pivot на значение Top, а его позицию установить как у потолка. Для любого персонажа или элемента декора, который должен стоять на земле, обычно устанавливается значение Bottom. Существует 10 вариантов поворота: любое из трех горизонтальных положений (центр и края) в сочетании с любым из трех вертикальных положений или настраиваемый поворот, указанный в диапазоне 0–1 в обоих измерениях. Центр установлен по умолчанию и подходит для многих целей.

Filter Mode: Определяет визуальное качество спрайтов. Возможные настройки: Point (без фильтра), Bilinear и Trilinear. В режиме Point, вместо интерполяции между исходными пикселями, пиксели повторяются или пропускаются, чтобы спрайт выглядел больше или меньше. Bilinear — это 2D-сглаживание, которое полезно для элементов с высоким разрешением или на основе фотоизображений. Trilinear переходы между MIP-картами, которые обычно не используются для 2D-элементов.

3. Импортирование и настройка нескольких спрайтов в одно изображение при помощи Sprite Editor

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

Создайте или скачайте изображение с несколькими спрайтами и импортируйте его в проект (Рисунок 3).

1. Нажмите на изображение в окне Project, чтобы открыть окно Inspector
2. Установите режим спрайта на Multiple (Рисунок 4).
3. Установите параметрам Pixel Per Unit и Filter Mode выбранные значения и нажмите на кнопку Apply.
4. Нажмите на Sprite Editor (Рисунок 5), чтобы открыть окно редактора спрайтов (Рисунок 6). Если вы еще не установили пакет 2D Sprite, который включает редактор спрайтов, то программа предложит это сделать.

1. Первое, что нужно сделать — это нарезать изображение на спрайты. Нажмите на Slice в левом верхнем углу редактора спрайтов (Рисунок 7).

Настройки для параметра Type следующие:

Automatic: Редактор спрайтов определяет области, которые окружены прозрачностью, и назначает их как спрайты.

Grid By Cell Size: Сетка нарезается равномерно с указанием пользователем размера каждой ячейки. Это наиболее распространенный параметр при построении проектов на основе тайлов, или проекты, в которых большая часть или вся область спрайтов на листе одинакового размера (например, значки или другие унифицированные элементы интерфейса, или строительные блоки игрового мира).

Grid By Cell Count: Сетка нарезается равномерно с указанием пользователем количества строк и столбцов спрайтов. Можно использовать этот параметр вместо Grid By Cell Size, если таблица спрайтов была сгенерирована программой, в которой вы уже определили количество строк и столбцов.

Cell Size: определяется либо Pixel Size, либо количеством Column и Row, в зависимости от того, какой неавтоматический параметр вы выбираете.

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

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

Keep Empty Rects: определяет спрайт даже если в нем нет изображения в автоматически сгенерированной области, при нарезке по размеру ячейки или количеству.

Pivot: определяет опорную точку спрайта. Например, спрайт с параметром Pivot, у которого установлено значение Center (по умолчанию), будет центрировано вокруг исходной точки, если для его позиции устанавливаются значения 0, 0, 0.

1. Установите свои настройки и нажмите на Slice.
2. По умолчанию все имена спрайтов — это комбинации исходного файла изображения и позиции спрайта в последовательности спрайтов (подразумевается порядок чтения слева-направо, сверху-вниз), начиная с 0.
3. Нажмите на спрайт, чтобы выделить его. Теперь вы можете переименовать его, отрегулировать его позицию и размер, и добавить границы (для 9-нарезки). чтобы узнать больше о том, что такое 9-нарезка, посмотрите Использование 9-Нарезки для масштабируемых спрайтов.
4. Чтобы создать новый спрайт без использования инструмента нарезки (или после того, как вы его использовали), нажмите где-нибудь на изображении (начиная снаружи любых существующих спрайтов, иначе вы закончите выделение и передвинете спрайт) и перетащите, чтобы создать спрайт.
5. После выбора вы также можете удалить назначенный спрайт. Обратите внимание, что это не удаляет выбранную часть изображения. Вы также можете перетащить края спрайта, чтобы изменить его размер. Зажмите Ctrl/Command при перетаскивании, чтобы отрегулировать границы спрайта. В данном примере изображения мы удалили спрайты из центральной и нижней части столбца. Затем мы перетащили нижний край верхнего спрайта вниз к нижней части таблицы спрайтов, чтобы сделать весь столбец одним большим спрайтом (Рисунок 8).
6. Когда закончите, нажмите Apply и закройте окно редактора спрайтов (Рисунок 9).

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

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