Как сделать спрайт для unity
Перейти к содержимому

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

  • автор:

Спрайты в Unity: определение, как их создавать и использовать

Lorem ipsum dolor

Как создать спрайт для Unity? Для этого в игровом движке предусмотрены свои инструменты, о которых мы поговорим чуть ниже.

Спрайт — это графический объект, который используется при создании 2D-игр . Спрайт-технология пришла к нам еще в 80-х год ах . Первые игры делались с применением спрайтов. Все знают, что если взять несколько похожих картинок и в определенной последовательности быстро их «прокрутить», то получится анимация или видео. Многие вспомнят о том, что видео — это 24 кадра в секунду, которые видит человек. Именно по такой «прокрутке» кадров и происходит создание спрайт-объектов. К примеру, берется игровой персонаж , а затем созда ется несколько разных его изображений. Потом эти изображения помещают в контейнер и зацикливают их прокрутку. Таким образом , получается анимация. Если показ картинок «подвязать» к кнопкам управления, тогда появляется полноценный игровой объект, который будет реагировать на нажатие кнопок. Например, при движении вправо показываются одни картинки, влево — другие. А у пользователя создается впечатление, что игровой персонаж анимирован. Повторимся, что по факту происходит только смена картинок в кадре.

В Unity работа со спрайтами внедрена по умолчанию, когда движок настроен на разработку 2D-игр. Если спрайт посмотреть в 3D-режиме, тогда он окажется «плоским», как лист бумаги. Все потому, что спрайт — это 2D-объект и у него нет Z-ширины.

Как создать спрайт для Unity

Когда на Unity создается новый спрайт, ему необходимо задать текстуру. Текстура — это изображение, которое отражает внешний вид спрайта. Такое изображение прикрепляется к спрайту, создавая GameObject, который можно использовать в игре.

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

Чтобы создать спрайт на Unity , пройдите по следующему пути:

Assets → Create → Sprites

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

Редактирование спрайтов в Unity

  1. Открыть 2D-изображение в представлении проекта «Project View». Спрайт, который находится в режиме «Scene View» , редактироваться не может.
  2. Найти кнопку «Sprite Editor». Вам откроется редактор спрайтов, в котором будет несколько доступных инструментов. Например : изменение масштаба, изменение расцветки, изменение местоположения спрайта на экране, поворот спрайта, настроить прозрачность, обрезать и др.

Средство визуализации спрайтов в Unity

Отобразить спрайт в Unity помогает компонент Sprite Renderer. Его нужно добавлять в GameObject через меню Components:

Components → Rendering → Sprite Renderer

Когда создается 3D-графика, тогда способов отразить объемный объект очень много. Например, внешний вид объекта будет зависеть от его положения на экране, освещенности, перемещения, положения камеры и др. С 2D-объектами этого всего нет.

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

Заключение

  • Paint Net;
  • Krita;
  • SAI 2;
  • GIMP;
  • Clip Studio Paint;
  • и др.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Работа со спрайтами (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.

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

Fig 1: Project View Fig 2: Texture Import Inspector with Sprite Editor button

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

Fig 3: Sprite Editor

Помимо составного изображения, вы увидите различные элементы управления в заголовке окна редактора. Слайдер в правом верхнем углу управляет приближением, в то время как кнопка с цветными полосками слева от него переключает режим отображения альфа-канала и обычный вид изображения. Самый важный элемент управления это меню 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

Sprite Editor: Polygon resizing - shape

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

Size and Pivot

Sprite Editor: Polygon resizing - size and pivot point - click on the polygon to display these options

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 – создание спрайтов

Спрайты – это простые 2D-объекты, на которых есть графические изображения (так называемые текстуры ). Unity использует спрайты по умолчанию, когда движок находится в режиме 2D. При просмотре в трехмерном пространстве спрайты выглядят тонкими как бумага, потому что у них нет Z-ширины.

Спрайты

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

Всякий раз, когда Unity создает новый спрайт, он использует текстуру. Затем эта текстура применяется к свежему GameObject, и к нему прикрепляется компонент Sprite Renderer . Это делает наш gameObject видимым с нашей текстурой, а также дает ему свойства, связанные с тем, как он выглядит на экране.

Sprite Renderer

Чтобы создать спрайт в Unity, мы должны снабдить движок текстурой .

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

создание текстуры

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

Вид сцены

Давайте рассмотрим следующие моменты при создании спрайта –

  • Перетаскивая из внешнего источника в Unity, мы добавляем актив .
  • Этот актив является изображением, поэтому он становится текстурой.
  • Перетаскивая эту текстуру в иерархию сцены, мы создаем новый GameObject с тем же именем, что и у нашей текстуры, с прикрепленным Sprite Renderer.
  • Этот рендерер спрайтов использует эту текстуру для рисования изображения в игре.

Перетаскивая из внешнего источника в Unity, мы добавляем актив .

Этот актив является изображением, поэтому он становится текстурой.

Перетаскивая эту текстуру в иерархию сцены, мы создаем новый GameObject с тем же именем, что и у нашей текстуры, с прикрепленным Sprite Renderer.

Этот рендерер спрайтов использует эту текстуру для рисования изображения в игре.

Теперь мы создали спрайт в нашей сцене.

На следующем уроке мы рассмотрим некоторые модификаторы для спрайтов, которые у нас есть.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *