WEBVTT

00:00:01.257 --> 00:00:03.709
The Sprite Editor is used to take images

00:00:03.709 --> 00:00:07.689
containing multiple elements like an atlas or sprite sheet

00:00:07.689 --> 00:00:10.338
and slice them in to individual sprites.

00:00:14.002 --> 00:00:16.277
It is important that the sprite mode of the image

00:00:16.277 --> 00:00:18.277
is set to Multiple.

00:00:19.371 --> 00:00:21.371
Images with sprite modes set to single

00:00:21.371 --> 00:00:24.443
cannot use the sprite editor window at this time.

00:00:24.943 --> 00:00:29.033
For more information on sprites, sprite mode and the sprite type

00:00:29.033 --> 00:00:31.033
please see the information link below.

00:00:32.306 --> 00:00:34.679
When sprite mode multiple is selected

00:00:34.679 --> 00:00:37.000
the sprite editor button will appear on the

00:00:37.000 --> 00:00:39.000
texture importer in the inspector.

00:00:40.011 --> 00:00:43.300
Click the sprite editor button to open the sprite editor.

00:00:45.292 --> 00:00:47.445
The sprite editor can also be opened by selecting

00:00:47.445 --> 00:00:50.452
Window - Sprite Editor.

00:00:52.665 --> 00:00:55.568
The sprite editor window is a standard Unity window.

00:00:55.568 --> 00:00:58.529
It can be used and docked like any other window.

00:01:00.217 --> 00:01:02.536
To create sprites in the sprite editor window

00:01:02.536 --> 00:01:04.673
slice the image by clicking and dragging

00:01:04.673 --> 00:01:06.423
over the desired elements.

00:01:06.785 --> 00:01:10.531
This will create rectangular selections that define each sprite.

00:01:11.445 --> 00:01:13.445
The rectangular selection can be adjusted

00:01:13.445 --> 00:01:15.445
by clicking and dragging the rectangle.

00:01:16.567 --> 00:01:19.856
Click and drag anywhere inside the rectangle to move it.

00:01:20.605 --> 00:01:24.286
Click and drag any of the corners or edges to resize it.

00:01:29.095 --> 00:01:31.095
Click and drag the pivot point gizmo to move

00:01:31.095 --> 00:01:33.318
the pivot point for that sprite.

00:01:37.062 --> 00:01:39.981
When a sprite is selected a sprite panel appears

00:01:39.981 --> 00:01:41.981
in the lower right of the sprite editor

00:01:41.981 --> 00:01:44.607
with details about the selected sprite.

00:01:45.614 --> 00:01:47.614
Name is the name of the sprite.

00:01:48.542 --> 00:01:51.731
The name is created from the name of the original image

00:01:51.731 --> 00:01:54.364
and the order in which it was sliced from that image,

00:01:54.364 --> 00:01:55.944
starting with 0.

00:01:56.615 --> 00:01:58.203
Position defines where the sprite

00:01:58.203 --> 00:02:00.203
is on the image, in pixels.

00:02:00.924 --> 00:02:04.153
X and Y define the start point of the sprite.

00:02:04.153 --> 00:02:06.153
measured from the lower left corner of the image.

00:02:06.153 --> 00:02:08.805
to the lower left corner of the sprite.

00:02:09.606 --> 00:02:11.955
W and H define the width and height

00:02:11.955 --> 00:02:13.955
of the sprite, from the start point.

00:02:16.416 --> 00:02:18.416
The trim button can be used to trim off any

00:02:18.416 --> 00:02:20.306
excess space around the element,

00:02:20.306 --> 00:02:22.978
creating the tightest fitting rectangle possible.

00:02:25.334 --> 00:02:27.334
Pivot sets the pivot point for this sprite.

00:02:27.986 --> 00:02:30.291
The pivot drop-down menu includes presets

00:02:30.291 --> 00:02:32.995
for each corner and the centre of each edge.

00:02:34.269 --> 00:02:36.269
Custom allows for a custom pivot point

00:02:36.269 --> 00:02:38.890
to be set numerically under Custom Pivot.

00:02:40.496 --> 00:02:42.300
Along the top of the sprite editor are a

00:02:42.300 --> 00:02:43.859
number of tools.

00:02:44.552 --> 00:02:46.203
The slice menu,

00:02:46.896 --> 00:02:48.896
the revert and apply buttons,

00:02:49.672 --> 00:02:51.672
the RGB alpha toggle

00:02:52.683 --> 00:02:54.683
and the zoom slider.

00:02:56.550 --> 00:03:00.140
The slice menu is used to automatically create sprites

00:03:00.140 --> 00:03:02.785
by slicing the sprite elements from the image.

00:03:03.731 --> 00:03:07.018
The slice type is either automatic or grid.

00:03:07.960 --> 00:03:10.499
Automatic is best for slicing individual

00:03:10.499 --> 00:03:12.499
uneven elements, like from an atlas.

00:03:13.648 --> 00:03:15.648
Elements on the image are automatically

00:03:15.648 --> 00:03:17.939
detected based on the empty space around them.

00:03:18.659 --> 00:03:20.896
Each sprite will have effectively been trimmed

00:03:20.896 --> 00:03:22.146
as a result.

00:03:23.065 --> 00:03:26.301
With automatic selected minimum size defines the

00:03:26.301 --> 00:03:29.123
minimum size for each individual sprite.

00:03:30.051 --> 00:03:32.697
If this value is set too high smaller elements

00:03:32.697 --> 00:03:34.697
that are near each other could be combined

00:03:34.697 --> 00:03:36.780
in to 1 larger sprite to meet

00:03:36.780 --> 00:03:38.780
the minimum size requirements.

00:03:39.667 --> 00:03:41.667
Pivot sets the default pivot point that will

00:03:41.667 --> 00:03:43.585
be applied to all sprites when they are

00:03:43.585 --> 00:03:45.115
spiced from the image.

00:03:46.085 --> 00:03:49.644
Just like the sprite panel, the pivot drop-down menu

00:03:49.644 --> 00:03:52.683
includes presets for each corner and the centre of each edge.

00:03:54.689 --> 00:03:57.750
To set a custom pivot, once the sprites have been sliced

00:03:57.750 --> 00:03:59.750
select any sprite and adjust it's pivot point

00:03:59.750 --> 00:04:01.750
in the sprite panel,

00:04:01.750 --> 00:04:04.054
or adjust it visually in the editor.

00:04:05.645 --> 00:04:07.825
Method lets you choose how to deal with existing

00:04:07.825 --> 00:04:10.060
sprites in the sprite editor window.

00:04:10.988 --> 00:04:13.334
Delete Existing will replace any sprites

00:04:13.334 --> 00:04:15.705
that already exist with new sprites.

00:04:16.649 --> 00:04:18.842
Smart will attempt to create new sprites

00:04:18.842 --> 00:04:21.329
while retaining and adjusting existing ones.

00:04:22.240 --> 00:04:24.240
Safe will add new sprites without

00:04:24.240 --> 00:04:26.685
changing any sprites already created.

00:04:28.909 --> 00:04:31.944
When the settings are correct select the Slice button

00:04:31.944 --> 00:04:34.695
to slice the image in to individual sprites.

00:04:35.963 --> 00:04:39.232
After slicing, each sprite can be edited individually.

00:04:41.486 --> 00:04:44.094
With the sprite sheet, where each element is designed

00:04:44.094 --> 00:04:46.784
to be a regular identical size,

00:04:46.784 --> 00:04:49.508
if Slice Type Automatic is used

00:04:49.508 --> 00:04:52.352
small changes in the individual sprite's shape

00:04:52.352 --> 00:04:54.352
and the amount of empty space surrounding it

00:04:54.352 --> 00:04:57.161
could cause the sprites to be cut out unevenly.

00:04:58.371 --> 00:05:01.777
To evenly slice a sprite sheet made of regular elements

00:05:01.777 --> 00:05:03.777
choose Slice Type Grid.

00:05:05.948 --> 00:05:09.202
Pixel Size sets the size of the grid in pixels.

00:05:10.489 --> 00:05:13.151
Pivot sets the default pivot point that will be applied

00:05:13.151 --> 00:05:16.136
to all sprites when they are sliced from the image.

00:05:16.136 --> 00:05:19.235
To set a custom pivot, once the sprites have been sliced,

00:05:19.235 --> 00:05:21.595
select any sprite and adjust it's pivot point

00:05:21.595 --> 00:05:24.956
in the sprite panel, or adjust it visually in the editor.

00:05:25.926 --> 00:05:28.340
When the settings are correct use the slice button

00:05:28.340 --> 00:05:30.895
to slice the image in to individual sprites.

00:05:32.017 --> 00:05:35.341
After slicing each sprite can be edited individually.

00:05:36.199 --> 00:05:38.990
When slicing is complete, to save any changes,

00:05:38.990 --> 00:05:40.990
select Apply.

00:05:41.421 --> 00:05:44.454
Or discard any change by selecting Revert.

00:05:46.487 --> 00:05:48.487
The RGB Alpha toggle switches the

00:05:48.487 --> 00:05:51.587
display of the sprite editor between the colour image

00:05:51.587 --> 00:05:54.146
and it's alpha channel, making it easier to see

00:05:54.146 --> 00:05:56.849
fine details when manually adjusting edges.

00:05:57.929 --> 00:06:01.418
The zoom slider controls the zoom when viewing the image.

00:06:03.589 --> 00:06:05.589
When an image has been successfully edited

00:06:05.589 --> 00:06:07.589
and the changes applied

00:06:08.089 --> 00:06:10.494
the asset will update in the project window.

00:06:12.164 --> 00:06:14.566
And a new sprite, or set of sprites

00:06:14.566 --> 00:06:17.082
can be seen as a child or group of children

00:06:17.082 --> 00:06:18.579
under the image.

00:06:19.292 --> 00:06:21.833
When viewing thumbnails in the project view

00:06:21.833 --> 00:06:24.676
click the turn-down arrow to see any children.

00:06:26.639 --> 00:06:30.136
Each child represents a useable sprite from that image.

00:06:30.981 --> 00:06:32.662
Any of these sprites can be used in the

00:06:32.662 --> 00:06:35.459
project independently, or grouped together

00:06:35.459 --> 00:06:37.459
to create a character, for example,

00:06:38.139 --> 00:06:40.776
or used sequentially as animations.