Original subtitles

In this video, we're going to import all of the sprites and tile sets we're going to use in our game.

We're going to use the Super Grotto Escape Pack by Anthemus, which is completely free and under a Creative

Commons Zero license.

This means that you can basically do whatever you want with it and don't have to credit the creator,

but you're not going to download this from the original asset page.

I repackaged it and prepared everything for easy usage with Unreal Engine, and removed everything we're

not going to use to avoid confusion.

Depending on what side you're watching this course on, it might be attached to this lessons resources.

So please click there and download it.

Or there might be a small article in the lesson before this which tells you to download the assets.

So please do that.

After downloading the file, you'll end up with a zip file called paper Assets.

To be able to use these textures, we need to unzip the file and open up the archive.

And depending on what operating system you're on or what program you're using, you just have to right

click it and extract files.

And in here let's take a quick look at all of the assets we have here.

The public license file just explains that this is a CC0 asset.

And what you're allowed to do with it.

In the characters folder we have the enemies and the player, and every folder has a Json file and a

PNG file.

And I'll explain the difference between these two files later on.

In the environment folder, we have two different tile sets and a background for this stage.

In the folder we have different particle effects such as an explosion.

A fireball or a player, projectiles and many other things.

And we're going to use all of this throughout the course.

Back in Unreal Engine, open up the content drawer, and we now want to create a folder where we put

all of our paper assets.

And right in the content folder right click create a new folder.

And I always like to call this paper assets and open this up.

We first want to only import the player so we can go through everything step by step.

So let's create another folder here called characters.

And inside that yet another folder called player.

And open this up as well.

First, I'm going to show you the regular way of importing sprite sheets without a Json file.

This process is a bit cumbersome and takes some time.

However, more often than not, if you download sprite sheets from the internet, they're not going

to have a Json file.

The Json file is actually something I created myself using my pixel art software of choice, which is

called a sprite, and this allows you to export much more information about the sprite other than just

the sprite sheet.

So the Json will help you split up the animations into these different tags.

So we can also generate all of these animations inside of Unreal Engine with the click of a single button.

And this is the method I'm also going to show you after we go through the regular way of importing sprite

sheets.

So inside of the asset folder that you downloaded, go to Characters Player.

And again we have the Json file and the png file which is the sprite sheet.

This time around we're just going to use the png file.

And you can just click it and drag it into Unreal Engine.

Like this.

And inside of our player folder that we prepared, just let go of it and it's going to import the texture

here.

For some people I heard that they have problems with dragging and dropping.

In that case, you can just use the import button here instead and just navigate to the file.

That should work out for you.

Now that we have the player texture in here, we can just double click it to check the texture settings.

And the first thing you're going to notice is that if you zoom in with a mouse wheel, that all of this

looks very blurry and it doesn't really look like pixel art.

This is because the default texture settings use filtering, and they are actually not great for pixel

art.

There is a very easy fix though, and we can just drag this over here and in the content drawer we can

just right click the texture and go to Sprite Actions and apply paper 2D texture settings.

And you can see that instantly it starts looking great.

This command applies all of the ideal settings for pixel art.

So in here you can then see that yeah, we're not using Mipmaps.

The texture group is set to 2D pixels.

And we can also look for filter.

Filter.

And the filter is default from texture.

Group or nearest are the ones that look good, but if I select bilinear or trilinear, it actually looks

very bad.

So because we used apply paper 2D texture settings, default is also fine, but nearest also works.

And you can just select either one of these at this stage.

In the next step.

We then have to extract the sprites from the texture.

Because the way the texture is right now, we actually cannot use it.

To do this, we can just right click Sprite Actions, extract sprites, and this is going to open up

the Extract Sprites window.

In this window, we can just hold right click, which lets you move around and use the mouse wheel to

zoom in and out.

And to cut out the sprites, we basically just want to have this yellow box around every single sprite,

and it should always be the same size so that our sprite doesn't jump around.

And currently we're using the sprite extract mode of auto, which is not very great.

As you can see, this doesn't really work out because all of the boxes have different sizes and we just

want to set this to grid instead.

But now you can see that it's just one big box around the entire texture, which we also don't want.

We need to set the cell width and cell height here.

And the easiest way to do this is to just count the amount of columns.

So here we can see with 123456 and just go to cell width.

And since it's six divide by six and just hit enter.

And you can see that we get these lines cutting up our sprite sheet perfectly.

And we also want to do the same thing for the cell height.

So we have 123456789 ten 1112 1314.

So here just divide by 14.

Hit enter.

And you can see that we have the correct size now.

So you might be wondering why there's so much empty space in the sprite sheet.

When I exported from a sprite.

There are different settings and I exported every animation in a different row.

Why did I do that?

Because this actually makes it easier to update sprites.

If you work with the Json file, which we're going to use later, but using the regular method, it

would have been better that I just pack everything together so we don't have all of these empty spaces.

And there are a couple of more settings, like a number of cells, margin spacing.

But if the sprite sheet is set up correctly, you don't have to worry about them and then just hit extract.

And now the content browser.

You should see all of the different sprites that we have and also all of the white space.

So all of the white space, we can just delete these if we want to.

But again we're not going to use this method in the end.

So for now it doesn't really matter.

But yeah if you use this method you could just select the white space, hold shift and select the other

one.

And then just right click and delete.

And you could then just do it for all of these.

But again, we're not going to keep on using this.

But yeah, all of these are just single sprites now.

They aren't animations yet.

And the way we turn them into animations, let's just use this clamp animation.

We can select the first sprite, hold shift, select the last sprite, right click and create Flipbook.

And then we can just call it FBX underscore player clamp.

And if I hover here now, you should be able to see that the animation is actually playing.

And in here you can also stop and scrub along the timeline, and you can see how we go from one sprite

to the next and everything that a flipbook is, it is just a collection of sprites that play one after

another and create the illusion of movement.

And that is basically what all kinds of animation is.

If we click on play again, you can see that we have the frames per second setting here.

And in some cases the asset creator might give you a frames per second setting which they intended you

to use these assets with.

But more often than not, you just have to play around with the value and see what feels right.

So if you set this to a high value, the animation is going to play very fast.

If you set this to a low value, the animation is going to play very slowly, and usually you just put

in some values and see if they feel about right.

So I think for climbing around five is a good value.

And this is basically all we do inside of this flipbook.

So we can now close this down.

We can also close the texture.

And yes, so this is the regular process.

And we would then have to go through all of these other sprites, do the same thing here, like create

a flipbook and then go to the next one here.

Create a flipbook.

Again.

Make sure that we select all of the correct sprites, and this works fine, but it is a somewhat time

consuming workflow.

So I'm actually going to show you the better way of doing this.

Now we just want to delete all of these things inside of the player folder.

So we can just select one and press on control A to select all of them.

And then just right click one of them and delete.

And now in this window it should show all of the assets.

Just hit on delete.

And they're all gone now.

And just to make sure that everything is gone just save all file save all.

And now I'm going to introduce you to the Json method, which I think is so much better.

But again this depends on you actually having access to a Json file or being able to use a sprite yourself

and create one.

Let's first import the character using this back in the assets you downloaded.

Again, we have the player Json and the PNG for the player.

You actually don't have to select both of them and drag them in.

If you just drag the Json in, it is connected to the player PNG and it understands that it also needs

to import this one.

You actually get an error if you try to drag both in, so just select the Json and drag it into Unreal

Engine inside of the player folder and let go.

And you can see that we have something completely different.

Now we have the player sprite sheet asset, and in here we can't really do anything but it it shows

you that the texture is connected and all of these things.

But we don't have to change anything here.

We have the frames folder.

This already cut out all of the different frames, the sprites that we extracted ourselves manually

before it did this all for us by itself.

And we then have the textures folder, which again just has this one texture file that is the sprite

sheet, and it already applied the paper 2D texture settings.

Because if we zoom in, you can see that it already looks crisp and it looks like pixel art.

So it did all of the steps we did manually before it did them all for us just by importing this Json

file.

So this is a huge time saver.

But the best thing is what I'm about to show you.

Now we can just right click the sprite sheet and create Flipbooks.

And this will then generate all of the different animations that I set in a sprite before and baked

into the Json file.

And again I can just hover over and you can see the animation.

Well, some of these actually quite a bunch of these are just single frame flipbooks so they're not

going to move.

But this one, the run shoot for example, is moving.

The idle is moving.

So a lot of them already have the animation in.

But yeah these single frame ones we still need to create a flipbook for them for ease of use.

But one thing the Jason sadly cannot do, at least as far as I know, is save a setting.

So we still have to do that manually.

So again, we can just start with the player, climb and go in here and set it to seven.

And this is just the value that I came up with when I prototyped this.

And we can save.

And we then have to do the same thing for all the others, which again is a bit cumbersome.

So we could go into the player idle again, type in seven and again it looks fine.

So I think seven is the good baseline, but there are cases where some of the animations have a different

setting.

But for now let's just use seven as the baseline.

And there is actually a better way of doing this.

Instead of going into every one of them one by one, we can just select the first one, hold shift,

select the last one, right click any of them.

Go to Asset Actions and there is edit selection and property matrix.

And this is something we're going to use all the time when working with sprites, with Flipbooks and

those kind of things.

And this just lets us set properties on multiple assets at the same time.

This is not exclusive to Flipbooks.

You could also do this for sound files for any other type of file, but it is extremely convenient for

paper assets.

So in here we just want to click one of them and then hit control A to select all of them to make sure

that everything applies to all of them.

On the right side, we can then look for the frames per second.

And here it says multiple values because not all of them have the same value set up.

And we can just click in here and type in seven and hit enter.

And you can see now shows the star, which means there's changes for all of these that are unsaved.

And we can just hit on save to save all of them.

And if we go back now, I can just open up any one of them, like maybe the wall slide and you can see

that it now has the pH of seven.

Again, this is a flipbook that only has a single frame.

So for this one it doesn't really matter.

But this proves that all of these now have the same pH setting setup.

And we might do some adjustments later.

But this is a good baseline to start from.

Now let's also import the assets for the enemies, so we can go back to paper assets.

And we can just drag the entire enemy folder in here.

So back in the files you downloaded, go back to paper assets characters.

And here we have the enemies right.

So we have the bat, the crab, the fly and the lizard.

And we can just grab the entire enemy folder and drag it into Unreal Engine.

Next to the characters.

And you can see there's, uh, some errors, import errors showing up, but this is actually not an

issue.

Like I said before, we only want to drag in the Json file because it is connected to the sprite sheet.

But now we just dragged in the entire folder.

So it also tried to import the sprite sheet, which caused an error, but the error doesn't really cause

any issues.

This was just a convenient way of getting all of the assets in here.

Now in here you can see that we have all of the different frames, we have all of the different textures

and all of the different sprite sheet asset files.

And it is very convenient that all of these are selected for us already.

So we can just right click and create Flipbooks.

And this is going to create the Flipbooks for all of these different enemy types.

And now just threw us into the lizard folder.

But if I go to the fly folder for example, you can see that we have the flipbook here.

For the bat you can see we have the flipbook here for the crab.

You can see we have the flipbook here.

But again, these are all playing kind of fast.

And we again want to set the setting.

But the problem we have now is that they're all in different folders.

So we cannot really select all of them at the same time.

There is a trick though, which we can use with filters.

And again, filters are also super useful if we want to bulk edit things.

So we can click here on the filters.

And this allows us to only show certain assets in the content browser at one time.

So we can scroll down to paper 2D and we want the paper flipbook.

So just select the paper flipbook.

And now we only see the bad here.

But if we go to the enemies folder, we see the flipbooks for all of the enemies now.

And again.

Now we can just select the first one.

Hold shift.

Select the last one.

We can then right click.

Acid actions edit selection property matrix again here control A, select all of them and then set the

frames per second to seven.

And again this is just a baseline.

We might change this later.

Save it.

And now all of these animations play at a different speed.

And to show everything normally.

Again, we can just click on the filter to remove it.

And now we just have our folder view again.

Now while we're at it, let's also import the files for our visual effects and then also the environment.

So go back to paper assets.

Actually I just noticed that the enemies folder should be inside the characters.

So we can just drag this here move into characters.

And everything still works the same.

But yeah.

Now go back to paper assets again.

Go to the files you downloaded now.

Not in the characters, but the paper assets.

We have the FX here and the environment.

We can just select both of them, hold Ctrl and then drag them into Unreal Engine like this.

But again, you can see that there are some errors showing up, but they don't matter.

As we talked about before.

And while we have all of these selected, just right click create Flipbooks.

And these are the flipbooks for the visual effects.

And back here in the paper assets folder again.

Now you can see we have the visual effects.

We don't have to worry about the FX for now.

That's something we're going to take care of later.

And we also have the environment.

And these are the tile sets and the background.

And these actually work quite differently.

We have to create a tile set and a tile map.

But that is something we're going to take care of way later in the course.

What I do want to do though now, is to just select all of them and just apply paper to the texture

settings in the Sprite Actions menu, like this.

And the rest we're going to do later.

There is one more thing that I want to show you though, when it comes to assets, and we can just open

up any texture, it doesn't matter which one.

And like I told you before, there are certain settings we need here to make sure the pixel art looks

crisp.

And the biggest one is the filter.

If you look for the filter and if we apply paper to the texture settings or use the Json import, this

is set to default from texture group, and this makes the assets look good.

In Unreal Engine.

However, there is a bug that if you package the game with this setting, they're actually going to

look blurry in your package build.

And the only way to work around this is to actually select nearest instead of default from texture group.

And this will solve the issue and make sure that all of your pixel art also looks crisp in a package

built that you can give to your players.

But again, we don't want to do this one by one.

So we can again just make another filter here.

Go to the filters menu and we can look for texture.

And it is just the regular texture here.

Turn this on.

And again now we just want to go to the whole paper assets folder.

Now we have the backgrounds.

We have the enemies the particle effects the player.

Everything.

In here we can just select all of these go to Asset Actions.

And edit selection property matrix.

Again, control a select everything on the right.

We can just search for filter and set the filter to nearest and save.

And this is a little annoying step that you might forget about, but this is very important if you actually

want to package your game, so it's best to just do this right away after you imported all of your textures.

And we can just exit out here.

And again, just to get rid of the filter.

And we can just look at our different folders again now.

And this is everything I wanted to show you about importing sprites.

And this should give you a very good understanding of the fundamentals, and also how amazing the Json

import is and how much time it can save you.

In the next lesson, we're going to make the actual character blueprint.