Что такое спрайт в юнити
Компонент 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
Описывает объект Sprite для использования в 2D геймплее.
«Спрайты» — 2D графические объекты, используемые для персонажей, бутафории, снарядов и других элементов 2D геймплея. Графика получается из растровых изображений — Texture2D. Класс Sprite прежде всего определяет часть изображения, которая должна быть использована для определенного спрайта. Затем эта информация используется компонентом SpriteRenderer на игровом объекте для реального отображения графики.
Variables
associatedAlphaSplitTexture | Returns the texture that contains the alpha channel from the source texture. Unity generates this texture under the hood for sprites that have alpha in the source, and need to be compressed using techniques like ETC1.Returns NULL if there is no associated alpha texture for the source sprite. This is the case if the sprite has not been setup to use ETC1 compression. |
border | Возвращает границы размеров спрайта. |
bounds | Bounds of the Sprite, specified by its center and extents in world space units. |
packed | Возвращает true если спрайт запакован в атлас. |
packingMode | Если спрайт запакован (см. Sprite.packed), возвращает SpritePackingMode. |
packingRotation | Если спрайт запакован (см. Sprite.packed), возвращает SpritePackingRotation. |
pivot | Местоположение спрайта на оригинальной текстуре, определена в пикселях. |
pixelsPerUnit | Количество пикселей спрайта, соответствующих одной единице в мировом пространстве. (Read Only) |
rect | Местоположение спрайта на оригинальной текстуре, определена в пикселях. |
texture | Получает ссылку на используемую текстуру. Если она упакована, будет указатель на атлас, если нет — на источник спрайта. |
textureRect | Получить прямоугольник спрайта, используемый на его текстуре. Вызывает исключение, если этот спрайт упакован в атлас. |
textureRectOffset | Получает смещение прямоугольника этого спрайта, использующего его текстуру относительно оригинальной границы спрайта. Если тип меша спрайта FullRect, смещение нулевое. |
triangles | Returns a copy of the array containing sprite mesh triangles. |
uv | Возвращает границы размеров спрайта. |
vertices | Returns a copy of the array containing sprite mesh vertex positions. |
Public Functions
GetPhysicsShape | Gets a physics shape from the Sprite by its index. |
GetPhysicsShapeCount | The number of physics shapes for the Sprite. |
GetPhysicsShapePointCount | The number of points in the selected physics shape for the Sprite. |
OverrideGeometry | Создаёт новый объект Sprite. |
OverridePhysicsShape | Sets up a new Sprite physics shape. |
Static Functions
Create | Создаёт новый объект Sprite. |
Работа со спрайтами (Unity3d)
Всем привет.
Вначале небольшой экскурс.
Эта статья является своеобразным переводом обучающей программы от Jesse Freeman. Ему спасибо за мою теперешнюю возможность получить инвайт. Остальным спасибо за понимание, что это моя первая статья.
В утопическом мире населенном только хабралюдьми, я постараюсь сделать так, чтобы за этой статьей последовало еще 9, но мир не идеален, так что пока не известно как всё пойдет. Вроде всё, тогда поехали.
Импортирование спрайтов
Чтобы импортировать спрайты в ваш проект в Unity достаточно просто перетащить необходимые файлы в любую выбранную вами папку во вкладке Project. Внизу иллюстрация.
Как видите всё до безобразия просто. Теперь давайте на примере какого-нибудь спрайта рассмотрим настройки. Перейдем к Assets\Artwork\Sprites\Player и кликнем по текстуре игрока. В инспекторе откроется меню. Если по каким-либо причинам в открывшемся меню напротив вкладки Texture Type указано Texture, то у вас сейчас используется 3D-проект, это легко исправить просто создав новый проект, не забыв переключить на 2D. Внизу иллюстрация.
Как исправить
Если всё правильно
Отлично, теперь перетащим спрайт игрока на сцену, и что мы видим спрайт стал 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’ом.
Внимание:
этот надстройку необходимо применить ко всем спрайтам, а их много и они разложены по папкам по этому внизу будет прикреплена иллюстрация того, как Вы можете сэкономить себе кучу времени.
Возможно следующие уроки будут объемнее, а пока всё.
That is all folks.
Как правильно разрезать изображения на спрайты в Unity
Приветствую начинающих разработчиков! Для разработки 2д игр используют изображения, называемые спрайтами. И как правило, для лучшей оптимизации игры, данные спрайты обычно размещают на одном большом изображении, которые в дальнейшем с помощью редактора Unity вырезаются из этого большого изображения, на множество мелких спрайтов.
В данной статье мы научимся правильно разрезать изображение на спрайты, а так же предварительно настраивать данное изображение перед нарезкой.
Обычные спрайты
Для начала в окне Project выберите то изображение, которое хотите разрезать на спрайты. Я скачал с интернета вот такой набор UI интерфейса. Вот его мы и будет разрезать на мелкие спрайты под каждый UI элемент.
Для начала кликнем на наше изображение в окне Project, и далее в окне Inspector настраиваем наше изображение следующим образом(1):
- В поле Sprite Mode указываем значение Multiple, которое говорит о том, что данная картинка содержит не один, а множество спрайтов.
- В поле Pixel Per Unit можете оставить значение 100. Чем меньше это значение, тем больше по размерам будут Ваши спрайты — и наоборот.
- Если у вас пиксельная графика, то в поле Filter Mode указываем значение Point (no filter), чтобы разрезанные спрайты не создавали эффект размытости.
- В поле Compression желательно поставить None.
- Далее Жмём кнопку Apply(2), чтобы сохранить все настройки.
Отлично, настройка произведена, и теперь нажав на кнопку Sprite Editor(3), мы откроем новое окно Sprite Editor, в котором и будет происходить разрезание спрайтов.
Особенность данных спрайтов в том, что все они имеют разные размеры, и расположены на изображении хаотично, поэтому разрезание таких спрайтов происходит легче всего. В новом открывшем окне Sprite Editor необходимо проделать всего 4 простых действия:
- (1) Жмём кнопку Slice.
- (2) В поле Type выбираем Automatic, чтобы юнити автоматически разрезал наше изображение на множество спрайтов.
- (3) Далее жмём кнопку Slice, и после чего все ваши спрайты будут обёрнуты в белый контур, который обозначает границы каждого спрайта. Контуры каждого спрайта можно в ручном режиме отредактировать, если что-то где-то выделено не правильно.
- (4 ) Далее жмём кнопку Apply, и закрываем данное окно.
В итоге в окне Project внутри изображения с UI элементами можно наблюдать множество нарезанных спрайтов.
Всё готово, и теперь можно работать с каждым отдельным спрайтом.
Спрайты для анимаций
Перейдём теперь к более сложному разрезанию, ведь бывают случаи, когда нам необходимо разрезать спрайты для анимаций какого-либо объекта, например персонажа.
Если же в предыдущем случае все спрайты имели разные размеры, и предназначались для разных объектов, то в данном случае все спрайты должны иметь одинаковые размеры, и предназначаться к одному объекту. Поэтому автоматическая нарезка здесь точно не подойдёт.
Для таких видов изображений, в окне Sprite Editor в поле Type необходимо выбрать Grid By Cell Size, чтобы разрезание происходило по сетке с теми размерами ячеек, которые мы укажем. В поле Pixel Size указываем размеры ячеек данной сетки в пикселях. Указывайте то значение, какого размера является каждый ваш спрайт. У меня это 296×296.
После нажатия на кнопку Slice, мы можем увидеть сетку из шести ячеек, обведённые тонким красным контуром, чтобы мы могли видеть, правильно ли будет происходить нарезка спрайтов. Обратите внимание, что шестая ячейка пустая, поэтому здесь нарезаться ничего не будет.
Готово, спрайты в количестве пяти штук нарезаны, и теперь их можно спокойно использовать для своей анимации.
Спрайты для тайлмапа
Последнее что хотелось бы затронуть, это разрезание изображения на спрайты для тайлмапа. Разрезка спрайтов в 90% случаях происходит по сетке, то-есть так же, как и в предыдущем примере. Размеры спрайтов здесь могут быть разными, НО, все итоговые нарезанные тайлы — одинаковыми, так как спрайт может состоять из нескольких одинаковых по размеру тайлов.
Но здесь есть одна важная особенность. Перед разрезанием изображения, необходимо в окне Inspector в поле Pixels Per Unit указать размер ваших тайлов. Например, если все Ваши тайлы имеют размеры 64×64 пикселей, то в это поле необходимо вписать 64.
Ну а далее можно спокойно переходить к разрезанию спрайтов на тайлы по сетке, нажав кнопку Sprite Editor.
На этом всё. Из выше сказанного можно все наши спрайты условно разделить на 3 вида:
- Обычные спрайты, где все спрайты расположены хаотично, и все они имеют разные размеры. Данные спрацты ВСЕГДА разрезаются в автоматическом режиме.
- Спрайты для анимации. В 90% случаях спрайты должны иметь одинаковый размер, и разрезаются по сетке.
- Спрайты для тайлмапа. Спрайты могут быть разных размеров, но все разрезанные в итоге тайлы — одинаковыми! Разрезаются тайлы в 99% случаев по сетке.
Конечно же, данная классификация условная, как и все те настройки, которые мы производили в данной статье. Безусловно, настраивать спрайты и разрезать их не обязательно так, как описаны в данной статье. Я лишь рассказал о частоиспользуемых и удобных методах нарезок и настроек.
Если данная статья была полезной, буду рад лайкам. А так же оставляйте свои вопросы в комментариях.