This tutorial will walk you through how to import images into your project and how to use them as sprites in your game. No previous actions or tutorials are required - this can be done in a completely empty, new project, with no prior knowledge.

Download Assets

To start, you will need some images to use. If you already have assets for your game, please use those.

For this tutorial, we have provided several images from the asset website Kenney Assets (www.kenney.nl). We will be using the Simplified Platformer Pack for this tutorial.

Download the assets now, and unzip the folder.

• Windows unzipping help
• Mac unzipping help

Import Assets

We now have our assets downloaded, but Unity doesn't know about them. To get Unity to use our assets, we need to import them into the project. In Unity, anything that you want to use in your game must be in the Assets folder inside your project's main folder. If your image is not in this folder, Unity can't find it.

There are two ways to add images to your project.

1. You can copy the files into the Assets folder through your operating system's file browser, just like any other file. The next time you open Unity it will import these files into the project.
2. Alternatively, you can drag the files into your Unity project, into the Project window. This will automatically copy the files into the correct folder and import them into the project.

Import your downloaded assets into your project using one of the above methods.

NOTE: Copy both the "PNG" and the "Tilesheet" folders in - these are two ways of representing sprites. You don't normally need both, but we'll use both in this tutorial to see how they work. You will not need the "Vectors" folder for this project.

You should also put these into a "Sprites" or "Graphics" sub folder in your Assets folder. This helps keep your project tidy. You can create this by right-clicking Assets and choosing Create > Folder, then dragging the image folders into it.

If this has all worked correctly, you should now see your image files in your Project window in Unity:

Import Settings

Click on one of your image files and look at the inspector window. You will see all the import settings for the image file.

These are the default sprite import settings. There is a lot to take in here - you can find detailed information about these settings on Unity's Texture Component manual page.

If you are working with pixel art, you'll need to make some specific adjustments to avoid blurriness and colour distortion. See the Cheat Sheet - Pixel Art Image Settings for more information.

Sprite Editor

The images in the PNG folder are all separated - one sprite per image file. If you look at the entry for one of these files in the project view, you will see the file actually contains another object inside it - you can see this by clicking the triangle next to the file name:

This inner object is the actual sprite. For all of these files, we have one sprite per file. However, sometimes you will encounter a different format for sprites, where many sprites are all combined in one file. This is done to improve performance. The sprites in the Tilesheets folder use this style.

Click on one of the Tilesheet files. Right now, Unity thinks, just like for the PNG folder files, that there is only one sprite in this image file. We need to show it that there are multiple sprites in the file. To do that, change the sprite mode to "Multiple", click the "Apply" button, then click the "Sprite Editor" button.

This will open the Sprite Editor window. In this window, you can control which part of an image is used for a sprite, where the sprite's pivot is, and even set up 9 slicing.

Next, we'll slice our sprite sheet image into several sprites. This image is evenly spaced so it's very easy to slice. Select "Slice" in the top left corner of the Sprite Editor. Change the Type to "Grid by Cell Count" - this is the easiest way when we have a small number of sprites on the sheet that are evenly spaced. If you had a huge number of sprites, using Cell Size is easier since you don't want to count the number of rows/columns, and if they aren't evenly spaced then "Automatic" should be used - but note that this will make sprite based animations look jittery!

Our image has 4 columns and 2 rows, so put a 4 in the "C" field and a 2 in the "R" field. You can leave everything else the same - these should be used if there are borders either between our cells or around the outside edge of the image, or if you want to change the pivot point for all the cells at once.

Once your settings are correct, click "Slice". You will now see faint lines between your sprites - if you click on one of the sprites, you will see information for that sprite pop up in the lower right corner, and can more clearly see the outline for the sprite.

Click "Apply" in the top right of the Sprite Editor to save your changes, then look at the image in the project view. You will see the single image now has multiple sprites inside it, similar to a folder. These sprites can be used in the exact same way any single-sprite image could be used, either stand alone or in animations.

Sprite Renderer

To actually use these sprites in the game, you need to attach a Sprite Renderer component to a GameObject in the scene, then assign a sprite to that Sprite Renderer. You can do this manually, by creating a GameObject in the scene, adding the Sprite Renderer component, and finally then either dragging the sprite to the Sprite Renderer's sprite field, or using the circle button next to the field to select the sprite you want.

But, there is an easier way often used to get your sprites into the game. That is to simple drag them from the project folder into the scene. This will automatically create a GameObject with a Sprite Renderer attached and the correct sprite in the Sprite Renderer. Do this now with one of the character sprites.

If you select your new Game Object, you should see the Sprite Renderer component.

There are a lot of fields here that allow you to change the way the sprite is displayed.

• The Sprite field tells the renderer which sprite will be drawn to the screen. Sprite-based animation is achieved by changing which sprite is displayed over time.
• The Color field lets you tint the sprite, changing it's colour. This is multiplicative, meaning it combines the existing colour of the sprite with the colour in this field. If your sprite is yellow and you tint it blue, it will turn a greenish colour.
• The Flip fields let you flip the sprite either horizontally or vertically. This will allow you to change the look of the sprite without changing anything in the GameObject itself.
• The Sorting Layer and Order in Layer fields control which sprites are drawn on top of other sprites. This is completely separate from the "Layer" attached to all Game Objects (in the top right of a Game Object's inspector window) - those are for physics, not drawing. Layers at the top of the list (or lower order number) are drawn first, and therefore are underneath other sprites (think layers of paint on a canvas - the first ones painted will go underneath later paint layers).

The Material, Draw Mode, Mask Interaction, and Sprite Sort Point fields control how the sprite is drawn to the screen. These are more advanced and can be ignored for now - check Unity's documentation if you want more information about them.

Play around with these settings and observe the results. You now know enough to create visuals for your game!

However, in games, still images aren't enough - we need animation! To learn about animation, check out the Tutorial: Animation.