1
00:00:03,080 --> 00:00:07,130
In this lecture, we're bringing our sprite sheets into our project and we're slicing them up.

2
00:00:07,130 --> 00:00:12,170
So we have individual assets that we can be using as tiles, and we're going to be slicing them up using

3
00:00:12,170 --> 00:00:13,880
the Sprite editor.

4
00:00:14,090 --> 00:00:15,740
Let's start by creating a new project.

5
00:00:15,740 --> 00:00:20,390
So from within Unity Hub, click on New and then make sure you've selected on 2D.

6
00:00:20,390 --> 00:00:21,950
Name your project whatever you want.

7
00:00:21,950 --> 00:00:24,080
I'll be naming my entire Vania.

8
00:00:24,380 --> 00:00:27,440
I've already created mine ready to go for this lecture.

9
00:00:27,440 --> 00:00:29,090
So that's why it's saying path already exists.

10
00:00:29,090 --> 00:00:32,270
Save it all, you want to save it and then click the create button.

11
00:00:32,270 --> 00:00:35,000
As I said, I've already created mine, so go ahead and create yours.

12
00:00:35,000 --> 00:00:36,500
That will bring you to this screen.

13
00:00:36,500 --> 00:00:39,320
While yours is creating and getting started.

14
00:00:39,320 --> 00:00:43,880
What you might want to do against this lecture is to grab the assets that I've provided for you that

15
00:00:43,880 --> 00:00:46,430
you can download if you've already got your own assets.

16
00:00:46,430 --> 00:00:47,270
You don't need to do this.

17
00:00:47,270 --> 00:00:49,010
But I've given these to you as a zip file.

18
00:00:49,010 --> 00:00:52,550
Unzip the zip file and have all these assets ready.

19
00:00:52,550 --> 00:00:57,230
If you're going to use these assets when you are ready to go, I'm going to in my new project that should

20
00:00:57,230 --> 00:00:58,550
have opened up by now for you.

21
00:00:58,550 --> 00:00:59,390
Hopefully it has.

22
00:00:59,390 --> 00:01:03,770
I'm going to highlight all of these assets and then drag them into my project into unity.

23
00:01:03,770 --> 00:01:04,879
That should bring them all in.

24
00:01:04,879 --> 00:01:05,090
Yep.

25
00:01:05,090 --> 00:01:05,600
Nice and neat.

26
00:01:05,600 --> 00:01:07,030
Let's do a little bit of structuring here.

27
00:01:07,040 --> 00:01:13,220
So a right click anywhere in here, create a folder and we'll name this sprites and then let's grab

28
00:01:13,220 --> 00:01:17,120
all these things we just brought in to bring and then throw them in there.

29
00:01:17,450 --> 00:01:24,530
Now the assets that I'm using come from the super platform assets asset pack on the Unity Asset Store,

30
00:01:24,530 --> 00:01:25,250
Fox Film.

31
00:01:25,250 --> 00:01:30,350
The wonderful creators of this asset pack have said that, yes, you and I can use a limited subset

32
00:01:30,350 --> 00:01:32,660
of these in our student project to play around with.

33
00:01:32,660 --> 00:01:36,680
But if you want to use these in a commercial project, in other words, if you want to publish your

34
00:01:36,680 --> 00:01:40,700
game or sell you a game or get your game out there, then you need to come along and buy this asset,

35
00:01:40,700 --> 00:01:42,080
pack great assets.

36
00:01:42,080 --> 00:01:46,910
I've gone and modified them a little bit, so I've gone and colorize them.

37
00:01:46,910 --> 00:01:49,130
I've changed the sprite sheets around a little bit.

38
00:01:49,130 --> 00:01:52,010
So if you do go and buy that asset pack, things will look a little bit different.

39
00:01:52,010 --> 00:01:53,210
Just bear that in mind.

40
00:01:53,210 --> 00:01:58,220
So we've got a couple of sprite sheets in here and these are all these tiles presented on one sprite

41
00:01:58,220 --> 00:01:58,370
sheet.

42
00:01:58,370 --> 00:02:01,340
If I was to drag this into the game and go blank, there it is.

43
00:02:01,340 --> 00:02:02,870
It's not very useful, is it?

44
00:02:02,870 --> 00:02:08,360
We need to cut this up so I can say just take this one tile and put it there and there's one tile and

45
00:02:08,360 --> 00:02:08,960
put it there.

46
00:02:08,960 --> 00:02:10,160
So it's a bit of a process.

47
00:02:10,160 --> 00:02:12,680
I'll teach you now for cutting up your sprite sheets.

48
00:02:12,680 --> 00:02:15,650
But first of all, I want to get the size of these things correct.

49
00:02:15,650 --> 00:02:20,780
And I know from playing around with it that I want to have I click on my asset down here, I want to

50
00:02:20,780 --> 00:02:25,670
have my pixels per unit at 32, so I'm going to go and grab all of these one.

51
00:02:25,670 --> 00:02:31,280
So the background, the coins, the enemy, the letter, the gingiva, that's the name of our player

52
00:02:31,370 --> 00:02:35,900
because he's got red hair, the spikes and this thingy down the end, the exit.

53
00:02:35,900 --> 00:02:39,970
I'm going to change all these, the 32 pixels per unit and then click apply.

54
00:02:39,980 --> 00:02:42,050
We've talked about this in other parts of the course.

55
00:02:42,050 --> 00:02:49,550
That means that for our graphic, our PNG that we bring into our project, we're saying we want 32 of

56
00:02:49,550 --> 00:02:54,770
the pixels from this image we've brought in to correspond to one unity unit and the unity units you

57
00:02:54,770 --> 00:02:59,990
can see along here, this is one unity unit, two unity units where our grid lines are showing our unity

58
00:02:59,990 --> 00:03:00,410
units.

59
00:03:00,410 --> 00:03:02,560
So 32 pixels per unit is the size.

60
00:03:02,570 --> 00:03:05,540
It's going to look pretty good if I just drag my character sheet in there.

61
00:03:05,540 --> 00:03:10,010
If I drag the character shooting there, you can see that's roughly the size I want my character running

62
00:03:10,010 --> 00:03:10,760
around on the screen.

63
00:03:10,760 --> 00:03:14,360
Obviously, there's not going to be 50 of him, which is going to take one of those as he runs around.

64
00:03:14,360 --> 00:03:17,850
But that's a good way of saying, yeah, that's around the right size that we want it.

65
00:03:17,870 --> 00:03:20,120
Click on that and say back to the 100.

66
00:03:20,120 --> 00:03:22,520
Then you'll see that it's way too little on the screen.

67
00:03:22,520 --> 00:03:23,240
It doesn't make sense.

68
00:03:23,240 --> 00:03:24,470
So back to TH2.

69
00:03:24,470 --> 00:03:28,130
Now, I want to get these things out of my scene because I just drag them in there to show you what's

70
00:03:28,130 --> 00:03:28,460
going on.

71
00:03:28,460 --> 00:03:30,260
So I'm going to click in the hierarchy and delete.

72
00:03:30,260 --> 00:03:32,660
And now what we want to do is find one of our sprite sheets.

73
00:03:32,660 --> 00:03:37,880
I'm going to click on our Spar Super Platform assets, rock, grass, water.

74
00:03:37,880 --> 00:03:42,470
And now you'll see from within the inspector there is a sprite mode.

75
00:03:42,470 --> 00:03:48,560
We want to change that from single to multiple that says this is not one single sprite, this is multiple

76
00:03:48,560 --> 00:03:51,920
sprites contained within this area, contained within our PNG.

77
00:03:51,920 --> 00:03:53,480
And then click on the Sprite Editor button.

78
00:03:53,480 --> 00:03:54,320
I get a little bit of a warning.

79
00:03:54,320 --> 00:03:55,880
I've messed around with some things here.

80
00:03:55,880 --> 00:03:59,150
The pixels per unit and I forgot to click apply but it gives you a little warning.

81
00:03:59,150 --> 00:04:01,010
Say, Oh, did you forget to click Apply?

82
00:04:01,010 --> 00:04:02,720
Rick You can click Apply now.

83
00:04:02,720 --> 00:04:04,130
So thank you for that unity.

84
00:04:04,130 --> 00:04:08,690
And you can see here's our sprite sheet with our platform tile things really cool.

85
00:04:08,690 --> 00:04:10,130
A little bit of water down the bottom.

86
00:04:10,130 --> 00:04:13,940
As I said before, I've rearranged the assets that I got from the asset pack provider.

87
00:04:13,940 --> 00:04:14,720
I've brightened it.

88
00:04:14,720 --> 00:04:17,510
So it's a little bit easier for you to see as I'm recording my video here.

89
00:04:17,510 --> 00:04:20,779
Now, up in the top left, we've got an option which says Slice.

90
00:04:20,779 --> 00:04:22,850
And when I click on that, you can see we've got a few options.

91
00:04:22,850 --> 00:04:25,670
Automatic grid by cell size, grid by cell count.

92
00:04:25,670 --> 00:04:30,800
If I click on automatic, then what that says is, Hey, Unity, just go ahead and figure out where

93
00:04:30,800 --> 00:04:34,610
you think you should chop this up and then click on Slice Bump.

94
00:04:34,640 --> 00:04:36,680
You can see we've got a little white outline there.

95
00:04:36,680 --> 00:04:41,870
If I click on any of these, you can see that it slice it up exactly around where I wanted my asset

96
00:04:41,870 --> 00:04:42,290
to be.

97
00:04:42,290 --> 00:04:45,080
And also as I click through it, you can see that it changes the name of it.

98
00:04:45,080 --> 00:04:47,690
Underscore seven, underscore eight, underscore nine.

99
00:04:47,690 --> 00:04:51,770
So I was given each of these an individual, individual name and it sliced them up.

100
00:04:51,770 --> 00:04:54,050
Now the last step in this is up in the top, right?

101
00:04:54,050 --> 00:04:57,110
If I click on apply, then that goes ahead and does it.

102
00:04:57,110 --> 00:04:59,210
It makes this into separate images.

103
00:04:59,210 --> 00:04:59,870
What does that mean?

104
00:04:59,870 --> 00:05:02,180
Well, that's X out of our Sprite editor find.

105
00:05:02,370 --> 00:05:06,570
Our Sprite sheet, we're working on open that up by clicking the little arrow thingy and you can see

106
00:05:06,570 --> 00:05:09,240
now it's got all these individual sprites, it's chopped it up.

107
00:05:09,240 --> 00:05:13,350
If I was to grab one of these and drag it into the scene and drag another one near the scene, then

108
00:05:13,350 --> 00:05:18,870
these are now individual assets that we can use within unity, all being pulled from our one singular

109
00:05:18,870 --> 00:05:22,640
sprite sheet so that that stays as a single asset, as a single sprite sheet.

110
00:05:22,650 --> 00:05:26,220
We've just given some logic to say how it's chopped up and how it's presented.

111
00:05:26,220 --> 00:05:29,430
So once again, I'm going to delete all those because I was just mucking around and showing you how

112
00:05:29,430 --> 00:05:30,120
that works.

113
00:05:30,120 --> 00:05:31,710
Okay, so that's for our rock assets.

114
00:05:31,710 --> 00:05:35,100
We're going to do a similar process for our background, but I'll get to that in a moment because one,

115
00:05:35,100 --> 00:05:39,090
what I want to show you is a slightly different way of doing things with our character.

116
00:05:39,090 --> 00:05:45,090
So click on the character, jump over to the inspector change from sprite mode single to Sprite mode,

117
00:05:45,090 --> 00:05:46,550
multiple click apply.

118
00:05:46,560 --> 00:05:48,720
Don't forget that and click on Sprite Editor.

119
00:05:48,720 --> 00:05:54,150
Now we can see with our Sprite editor if I was to go up to slice and click on automatic and then say

120
00:05:54,150 --> 00:05:57,870
slice, it will slice exactly around the pixels that it sees.

121
00:05:57,870 --> 00:05:59,610
It's like, okay, you've got pixels there.

122
00:05:59,610 --> 00:06:01,290
I'm going to hug the corner of these.

123
00:06:01,290 --> 00:06:01,830
Exactly.

124
00:06:01,830 --> 00:06:02,550
Hug the corners.

125
00:06:02,550 --> 00:06:06,750
And that might seem like it makes sense, but if you see we've got a little bit of a run and a little

126
00:06:06,750 --> 00:06:08,880
bit of a jump and a bit of a roll in here.

127
00:06:08,880 --> 00:06:12,900
And if you just look at this exactly, you can see that my character is at this level.

128
00:06:12,900 --> 00:06:17,820
As I scroll along, you can see that it's gone up a little bit higher, up a little bit higher, whereas

129
00:06:17,820 --> 00:06:21,210
the slicing is still right around the character.

130
00:06:21,210 --> 00:06:25,440
So that means it's not going to translate the character up and down within this area.

131
00:06:25,440 --> 00:06:30,240
So if I want to retain this artist's good work of saying he's kind of jumping up in the air and then

132
00:06:30,240 --> 00:06:36,510
down, or when he does this role that he's on a particular plane, then in instead of doing this automatic

133
00:06:36,510 --> 00:06:41,010
technique, I'm going to jump up to slice and click on grid by cell size.

134
00:06:41,010 --> 00:06:44,280
And you can see we've got these red outlines that have been presented everywhere.

135
00:06:44,280 --> 00:06:47,610
Now, I've gone and played around with this before I started the lecture, so let me put it back to

136
00:06:47,610 --> 00:06:50,580
what the settings possibly were before we started off.

137
00:06:50,580 --> 00:06:53,550
It's probably like this 64 by 64 zero padding.

138
00:06:53,550 --> 00:06:57,300
And you can see that the big red lines which says this is the way we're going to slice this up, it

139
00:06:57,300 --> 00:06:59,460
doesn't match up to our character at all.

140
00:06:59,460 --> 00:07:02,190
I'm going to make our pixel size 32 by 32.

141
00:07:02,190 --> 00:07:06,990
And then I also know just because I know this and I've looked at it and I've measured it, I know that

142
00:07:06,990 --> 00:07:08,340
there's a padding between this.

143
00:07:08,340 --> 00:07:12,150
So the artist has created this saying, I'm going to make a block and then I'm going to give a little

144
00:07:12,150 --> 00:07:16,590
bit of space between it and block, a little bit of space as we had for our other assets.

145
00:07:16,590 --> 00:07:20,550
You can see just a little down here, you can see there's a block and then a space and a block and a

146
00:07:20,550 --> 00:07:25,620
space on our rock assets we chopped up before the same thing is taking place with our characters.

147
00:07:25,620 --> 00:07:31,710
So clicking on Slice again, I'm going to add some padding of six and six and that means that we have

148
00:07:31,890 --> 00:07:35,430
we slice up our sprite and then a bit of padding, slice it up, bit of padding, slice up, bit of

149
00:07:35,430 --> 00:07:35,910
a padding.

150
00:07:35,910 --> 00:07:36,330
Perfect.

151
00:07:36,330 --> 00:07:41,490
So that is now looking pretty good, except I keep clicking off it when I click on Slice now it will

152
00:07:41,490 --> 00:07:44,160
slice things up and show our white outlines.

153
00:07:44,160 --> 00:07:47,880
So you can see when he's doing these little rolly thing here is off the ground a little bit, which

154
00:07:47,880 --> 00:07:49,110
I think is what the artist wanted.

155
00:07:49,110 --> 00:07:52,680
And if he's doing this kind of jumping thing, he's off the ground once again.

156
00:07:52,680 --> 00:07:53,610
He's he's doing his little run.

157
00:07:53,610 --> 00:07:56,580
There's a bit of a bubble up in the air and his legs go up in the air.

158
00:07:56,580 --> 00:07:59,580
So his head staying at a similar height up and down a little bit.

159
00:07:59,580 --> 00:08:03,930
So anyway, that's the better way to slice it up when you know that the artist is working within a block,

160
00:08:03,930 --> 00:08:06,480
but moving the character up and down within the block.

161
00:08:06,480 --> 00:08:12,270
Once again we hit apply an X out of this and you can see if I click on my character, open that up.

162
00:08:12,270 --> 00:08:14,940
You can see a whole bunch of I've got our assets in here now.

163
00:08:14,940 --> 00:08:15,900
I've got another couple of things to do.

164
00:08:15,900 --> 00:08:17,790
We've got the enemy, you've got the coins and got the background.

165
00:08:17,790 --> 00:08:22,290
I'm going to set this to as a challenge, slice up those sheets, slice up so we have clean individual

166
00:08:22,290 --> 00:08:27,030
assets for background tiles, platforming tiles, the character animation, which I've done already,

167
00:08:27,030 --> 00:08:31,050
the enemy animation, which you've got access to and anything else you might have cooked up when you

168
00:08:31,050 --> 00:08:34,049
went and grabbed assets or when you created your own assets.

169
00:08:34,049 --> 00:08:35,100
So this is your challenge.

170
00:08:35,100 --> 00:08:35,909
Pause video.

171
00:08:35,940 --> 00:08:38,159
Take that on and I'll see you back here when you're done.

172
00:08:40,190 --> 00:08:43,090
I am going to do this pretty quickly because we've already done it a couple of times.

173
00:08:43,100 --> 00:08:46,250
Click on the background and make sure it's at 32 pixels per unit.

174
00:08:46,250 --> 00:08:47,780
Yes, change it to multiple.

175
00:08:47,780 --> 00:08:51,590
Click on Sprite editor apply because I've got that again up to slice.

176
00:08:51,590 --> 00:08:56,420
I'm going to put this back to automatic and slice and that's done it around perfectly.

177
00:08:56,420 --> 00:08:56,760
Excellent.

178
00:08:56,760 --> 00:08:57,980
And then click apply.

179
00:08:58,010 --> 00:09:01,220
That one should be all done and looks like it's all done.

180
00:09:01,220 --> 00:09:01,730
Great.

181
00:09:01,730 --> 00:09:03,650
And then we've got here, we've got the coins.

182
00:09:03,650 --> 00:09:04,880
Let's click on that.

183
00:09:04,880 --> 00:09:07,340
Change it to multiple once again, click apply.

184
00:09:07,340 --> 00:09:10,100
So I don't forget, like I do every time click on Sprite editor.

185
00:09:10,100 --> 00:09:11,270
Now how are we going to do this?

186
00:09:11,270 --> 00:09:16,010
Well, let's see what happens if we do grid by cell size with the 32 and the six.

187
00:09:16,010 --> 00:09:16,700
That looks perfect.

188
00:09:16,700 --> 00:09:18,500
It looks like these coins are right in the middle of it.

189
00:09:18,500 --> 00:09:23,630
You can see it's rotating around great sun, click on slice and then click on Apply Again.

190
00:09:23,630 --> 00:09:24,380
That looks good.

191
00:09:24,380 --> 00:09:25,370
And then what else have we got?

192
00:09:25,370 --> 00:09:32,030
We've got our enemy facing to the right once again, change to multiple click on Apply Sprite Editor.

193
00:09:32,030 --> 00:09:36,590
I think this is going to be if we're going to splice grid by cell size, that doesn't look like it's

194
00:09:36,590 --> 00:09:37,550
worked at all, does it?

195
00:09:37,550 --> 00:09:38,660
Let's see what happens here.

196
00:09:38,660 --> 00:09:39,620
We've got this offset.

197
00:09:39,620 --> 00:09:40,850
I didn't tell you about this before.

198
00:09:40,850 --> 00:09:41,780
Apologies for that.

199
00:09:41,780 --> 00:09:46,160
But maybe if we do an offset that will move all of the boxes along to the right because it looks like

200
00:09:46,160 --> 00:09:47,990
this wasn't cropped all the way on the left.

201
00:09:47,990 --> 00:09:49,700
So if we put it to six, how does that look?

202
00:09:49,700 --> 00:09:50,480
Not quite there yet.

203
00:09:50,480 --> 00:09:55,400
If we put it to ten, then on the lefty righty, it looks like we're pretty good.

204
00:09:55,400 --> 00:09:56,230
That guy fits in.

205
00:09:56,270 --> 00:09:56,750
That fits in.

206
00:09:56,750 --> 00:09:58,700
But on the upper downy, not quite.

207
00:09:58,700 --> 00:10:00,500
So I'm going to put a little bit of padding as well.

208
00:10:00,950 --> 00:10:02,800
What happens if we make this fully tend?

209
00:10:02,810 --> 00:10:07,520
That's too far and if we make it six, you know what, we need a little bit less than that.

210
00:10:07,520 --> 00:10:08,540
Make it four.

211
00:10:08,570 --> 00:10:09,050
Okay.

212
00:10:09,050 --> 00:10:10,820
So I hadn't mentioned that to you before.

213
00:10:10,820 --> 00:10:12,050
Apologies for that.

214
00:10:12,350 --> 00:10:16,340
But we do have a little bit of offset that we needed for this slicing up this character.

215
00:10:16,340 --> 00:10:22,100
If you figured out yourself, well done being a clever sausage and if not, then we've done it now and

216
00:10:22,100 --> 00:10:22,880
we've sliced this up.

217
00:10:22,880 --> 00:10:23,780
Looks pretty good.

218
00:10:23,780 --> 00:10:29,270
I'm going to click on slice, click on Apply X out of that as well.

219
00:10:29,270 --> 00:10:33,920
And the ladder is sliced up already because it's one individual unit and the spikes are sliced up already.

220
00:10:33,920 --> 00:10:38,750
So I believe we have done everything on there yet the exit is as it should be.

221
00:10:38,750 --> 00:10:39,290
So there we go.

222
00:10:39,290 --> 00:10:40,550
We've sliced up our sprite sheets.

223
00:10:40,550 --> 00:10:41,960
I will see you in the next lecture.