In this lecture, we're bringing our sprite sheets into our project and we're slicing them up.
So we have individual assets that we can be using as tiles, and we're going to be slicing them up using
the Sprite editor.
Let's start by creating a new project.
So from within Unity Hub, click on New and then make sure you've selected on 2D.
Name your project whatever you want.
I'll be naming my entire Vania.
I've already created mine ready to go for this lecture.
So that's why it's saying path already exists.
Save it all, you want to save it and then click the create button.
As I said, I've already created mine, so go ahead and create yours.
That will bring you to this screen.
While yours is creating and getting started.
What you might want to do against this lecture is to grab the assets that I've provided for you that
you can download if you've already got your own assets.
You don't need to do this.
But I've given these to you as a zip file.
Unzip the zip file and have all these assets ready.
If you're going to use these assets when you are ready to go, I'm going to in my new project that should
have opened up by now for you.
Hopefully it has.
I'm going to highlight all of these assets and then drag them into my project into unity.
That should bring them all in.
Yep.
Nice and neat.
Let's do a little bit of structuring here.
So a right click anywhere in here, create a folder and we'll name this sprites and then let's grab
all these things we just brought in to bring and then throw them in there.
Now the assets that I'm using come from the super platform assets asset pack on the Unity Asset Store,
Fox Film.
The wonderful creators of this asset pack have said that, yes, you and I can use a limited subset
of these in our student project to play around with.
But if you want to use these in a commercial project, in other words, if you want to publish your
game or sell you a game or get your game out there, then you need to come along and buy this asset,
pack great assets.
I've gone and modified them a little bit, so I've gone and colorize them.
I've changed the sprite sheets around a little bit.
So if you do go and buy that asset pack, things will look a little bit different.
Just bear that in mind.
So we've got a couple of sprite sheets in here and these are all these tiles presented on one sprite
sheet.
If I was to drag this into the game and go blank, there it is.
It's not very useful, is it?
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
put it there.
So it's a bit of a process.
I'll teach you now for cutting up your sprite sheets.
But first of all, I want to get the size of these things correct.
And I know from playing around with it that I want to have I click on my asset down here, I want to
have my pixels per unit at 32, so I'm going to go and grab all of these one.
So the background, the coins, the enemy, the letter, the gingiva, that's the name of our player
because he's got red hair, the spikes and this thingy down the end, the exit.
I'm going to change all these, the 32 pixels per unit and then click apply.
We've talked about this in other parts of the course.
That means that for our graphic, our PNG that we bring into our project, we're saying we want 32 of
the pixels from this image we've brought in to correspond to one unity unit and the unity units you
can see along here, this is one unity unit, two unity units where our grid lines are showing our unity
units.
So 32 pixels per unit is the size.
It's going to look pretty good if I just drag my character sheet in there.
If I drag the character shooting there, you can see that's roughly the size I want my character running
around on the screen.
Obviously, there's not going to be 50 of him, which is going to take one of those as he runs around.
But that's a good way of saying, yeah, that's around the right size that we want it.
Click on that and say back to the 100.
Then you'll see that it's way too little on the screen.
It doesn't make sense.
So back to TH2.
Now, I want to get these things out of my scene because I just drag them in there to show you what's
going on.
So I'm going to click in the hierarchy and delete.
And now what we want to do is find one of our sprite sheets.
I'm going to click on our Spar Super Platform assets, rock, grass, water.
And now you'll see from within the inspector there is a sprite mode.
We want to change that from single to multiple that says this is not one single sprite, this is multiple
sprites contained within this area, contained within our PNG.
And then click on the Sprite Editor button.
I get a little bit of a warning.
I've messed around with some things here.
The pixels per unit and I forgot to click apply but it gives you a little warning.
Say, Oh, did you forget to click Apply?
Rick You can click Apply now.
So thank you for that unity.
And you can see here's our sprite sheet with our platform tile things really cool.
A little bit of water down the bottom.
As I said before, I've rearranged the assets that I got from the asset pack provider.
I've brightened it.
So it's a little bit easier for you to see as I'm recording my video here.
Now, up in the top left, we've got an option which says Slice.
And when I click on that, you can see we've got a few options.
Automatic grid by cell size, grid by cell count.
If I click on automatic, then what that says is, Hey, Unity, just go ahead and figure out where
you think you should chop this up and then click on Slice Bump.
You can see we've got a little white outline there.
If I click on any of these, you can see that it slice it up exactly around where I wanted my asset
to be.
And also as I click through it, you can see that it changes the name of it.
Underscore seven, underscore eight, underscore nine.
So I was given each of these an individual, individual name and it sliced them up.
Now the last step in this is up in the top, right?
If I click on apply, then that goes ahead and does it.
It makes this into separate images.
What does that mean?
Well, that's X out of our Sprite editor find.
Our Sprite sheet, we're working on open that up by clicking the little arrow thingy and you can see
now it's got all these individual sprites, it's chopped it up.
If I was to grab one of these and drag it into the scene and drag another one near the scene, then
these are now individual assets that we can use within unity, all being pulled from our one singular
sprite sheet so that that stays as a single asset, as a single sprite sheet.
We've just given some logic to say how it's chopped up and how it's presented.
So once again, I'm going to delete all those because I was just mucking around and showing you how
that works.
Okay, so that's for our rock assets.
We're going to do a similar process for our background, but I'll get to that in a moment because one,
what I want to show you is a slightly different way of doing things with our character.
So click on the character, jump over to the inspector change from sprite mode single to Sprite mode,
multiple click apply.
Don't forget that and click on Sprite Editor.
Now we can see with our Sprite editor if I was to go up to slice and click on automatic and then say
slice, it will slice exactly around the pixels that it sees.
It's like, okay, you've got pixels there.
I'm going to hug the corner of these.
Exactly.
Hug the corners.
And that might seem like it makes sense, but if you see we've got a little bit of a run and a little
bit of a jump and a bit of a roll in here.
And if you just look at this exactly, you can see that my character is at this level.
As I scroll along, you can see that it's gone up a little bit higher, up a little bit higher, whereas
the slicing is still right around the character.
So that means it's not going to translate the character up and down within this area.
So if I want to retain this artist's good work of saying he's kind of jumping up in the air and then
down, or when he does this role that he's on a particular plane, then in instead of doing this automatic
technique, I'm going to jump up to slice and click on grid by cell size.
And you can see we've got these red outlines that have been presented everywhere.
Now, I've gone and played around with this before I started the lecture, so let me put it back to
what the settings possibly were before we started off.
It's probably like this 64 by 64 zero padding.
And you can see that the big red lines which says this is the way we're going to slice this up, it
doesn't match up to our character at all.
I'm going to make our pixel size 32 by 32.
And then I also know just because I know this and I've looked at it and I've measured it, I know that
there's a padding between this.
So the artist has created this saying, I'm going to make a block and then I'm going to give a little
bit of space between it and block, a little bit of space as we had for our other assets.
You can see just a little down here, you can see there's a block and then a space and a block and a
space on our rock assets we chopped up before the same thing is taking place with our characters.
So clicking on Slice again, I'm going to add some padding of six and six and that means that we have
we slice up our sprite and then a bit of padding, slice it up, bit of padding, slice up, bit of
a padding.
Perfect.
So that is now looking pretty good, except I keep clicking off it when I click on Slice now it will
slice things up and show our white outlines.
So you can see when he's doing these little rolly thing here is off the ground a little bit, which
I think is what the artist wanted.
And if he's doing this kind of jumping thing, he's off the ground once again.
He's he's doing his little run.
There's a bit of a bubble up in the air and his legs go up in the air.
So his head staying at a similar height up and down a little bit.
So anyway, that's the better way to slice it up when you know that the artist is working within a block,
but moving the character up and down within the block.
Once again we hit apply an X out of this and you can see if I click on my character, open that up.
You can see a whole bunch of I've got our assets in here now.
I've got another couple of things to do.
We've got the enemy, you've got the coins and got the background.
I'm going to set this to as a challenge, slice up those sheets, slice up so we have clean individual
assets for background tiles, platforming tiles, the character animation, which I've done already,
the enemy animation, which you've got access to and anything else you might have cooked up when you
went and grabbed assets or when you created your own assets.
So this is your challenge.
Pause video.
Take that on and I'll see you back here when you're done.
I am going to do this pretty quickly because we've already done it a couple of times.
Click on the background and make sure it's at 32 pixels per unit.
Yes, change it to multiple.
Click on Sprite editor apply because I've got that again up to slice.
I'm going to put this back to automatic and slice and that's done it around perfectly.
Excellent.
And then click apply.
That one should be all done and looks like it's all done.
Great.
And then we've got here, we've got the coins.
Let's click on that.
Change it to multiple once again, click apply.
So I don't forget, like I do every time click on Sprite editor.
Now how are we going to do this?
Well, let's see what happens if we do grid by cell size with the 32 and the six.
That looks perfect.
It looks like these coins are right in the middle of it.
You can see it's rotating around great sun, click on slice and then click on Apply Again.
That looks good.
And then what else have we got?
We've got our enemy facing to the right once again, change to multiple click on Apply Sprite Editor.
I think this is going to be if we're going to splice grid by cell size, that doesn't look like it's
worked at all, does it?
Let's see what happens here.
We've got this offset.
I didn't tell you about this before.
Apologies for that.
But maybe if we do an offset that will move all of the boxes along to the right because it looks like
this wasn't cropped all the way on the left.
So if we put it to six, how does that look?
Not quite there yet.
If we put it to ten, then on the lefty righty, it looks like we're pretty good.
That guy fits in.
That fits in.
But on the upper downy, not quite.
So I'm going to put a little bit of padding as well.
What happens if we make this fully tend?
That's too far and if we make it six, you know what, we need a little bit less than that.
Make it four.
Okay.
So I hadn't mentioned that to you before.
Apologies for that.
But we do have a little bit of offset that we needed for this slicing up this character.
If you figured out yourself, well done being a clever sausage and if not, then we've done it now and
we've sliced this up.
Looks pretty good.
I'm going to click on slice, click on Apply X out of that as well.
And the ladder is sliced up already because it's one individual unit and the spikes are sliced up already.
So I believe we have done everything on there yet the exit is as it should be.
So there we go.
We've sliced up our sprite sheets.
I will see you in the next lecture.