This tutorial will walk you through how to import images into your project and how to use them as sprites in your game.
- Unity Core Concepts (Official Unity Tutorial)
- Unity installed
- Unity account created
- Familiarity with basics (GameObjects, Components, Play Button, etc)
- Unity Project and Version Control Setup
- Unity project created
Step 1 – Gather Assets
Ideally, these will be your actual assets for your game that you have made.
If you have not yet created the assets for your game, you can still follow along with the tutorial by downloading some pre-made assets. 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.
If you don’t have your own assets, download the Simplified Platformer Pack assets now, and unzip the folder. Only use these if you do not have your own assets.
Step 2 – Open Unity Project
Step 3 – Import Assets
We now have our asset files, 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.
- 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.
- 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 assets into your project using one of the above methods.
NOTE: If you are using the pre-made assets, 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. You can arrange these further into sub-folders if you want to.
If you have audio assets, create an “Audio” folder and put those into that sub-folder. We won’t be covering audio in detail in this tutorial.
If this has all worked correctly, you should now see your image files in your Project window in Unity:
Step 4 – Set Sprite 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. Make the following changes:
- Filter Mode: Point (no filter)
- Compression: None
If things still aren’t looking quite right, you can try some of the settings in this article: Making your Pixel Art Game look Pixel Perfect in Unity3D.
Step 5 – Slice Sprite Sheets
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 from the example assets use this style.
If you have any sprites in a spritesheet (multiple sprites or animation frames in one file), continue with this step. If you do not, you can skip this step.
Click on one of the spritesheet 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 – if you have used Piskel to create your spritesheets, they should also be evenly spaced like this. 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.
NOTE: 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!
The example image has 4 columns and 2 rows, so I put a 4 in the “C” field and a 2 in the “R” field – you should count your rows and columns and put the correct number in the C and R fields. 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. Take a moment to make sure these are correct before continuing.
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.
Step 6 – Test The 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). NOTE: These fields are now
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!