Join Jesse Freeman for an in-depth discussion in this video Importing artwork, part of Unity 5 2D: Emulate Palette Swapping for Sprites.
- View Offline
- Over the course of the next few videos, we're going to build a very basic palette swapping system into Unity. Palette swapping is the technique of where we take a sprite and change its colors on the fly. You're probably familiar with this in video games where you'd have boss or an enemy, and in each level, it'd be the same artwork but just different colors, such as a red shirt or a green shirt, depending on the level or strength of that person. Now, let's create a simple project. We'll call this PaletteSwapping, and you can save it anywhere you want on your computer.
Just make sure that you have 2D mode selected before you create the project. As you can see, I already have Unity set up to the way that I like to work. I've moved the Scene tab to the top, the Game panel to the bottom, along with my Animation and Animator, Hierarchy and Spectors, over to the right, and the Project and Console below them. If you're using Unity for the first time, this is gonna be a little bit different, but feel free to set up your panels however you want. Now, the first thing that we're gonna want to do is create a new folder called Artwork.
Here, let's go to Create, and we'll make a folder and we'll call this Artwork. And we'll open this up. Now let's go into the project files and take the two sprite sheets and drag them in. Here you'll see, we have a person sprite sheet, and we have a zombie sprite sheet. Now before we can use them, we'll just have to tweak a few settings in order to make them easy to use inside of this project. We'll select both of the textures and let's change their Sprite Mode to multiple, we'll change their Pixels to Units to one, we'll set the Filter Mode to point, and we'll change the Format to true color.
And hit Apply. Now let's select the person-sprite-sheet, and open up the Sprite Editor. Here you'll see, we have all of our artwork on a single texture. Let's go to Slice, Grid, and we're gonna change the values so that we can cut out each of the sprites from the sprite sheet. Here we're gonna set the X and Y of the pixel size to 34. Next, we'll set the Offset to two. And the Padding to two as well. And let's hit Slice.
As you can see, we have each of our sprites now cut out, and there's a little bit of a gap between each of the sprites. This is important because when you're doing 2D animation in Unity from sprite sheets sometimes a little bit of the pixels above a sprite might bleed through. In this case, if it does, it'll simply sample the transparent part of the texture. Now, there is another thing you might notice up here at the top, and these are a bunch of little colors. If we zoom in and take a look at this, you'll see here I've included a single pixel representing each of the color of the palette for the sprite sheet.
As we get into sampling colors out of the texture, we'll be working from the uppermost point of the texture and working our way to the right and then down and to the right through all of the pixels of the artwork. Since we're putting the color texture information at the top, this will be the first thing we'll read, and it'll help speed up when we start to build out our color palettes. Also because we have Padding and Offset between each of our sprites, this will never show up inside of our sprites.
Let's hit Apply to save these changes, close the window, and do the same thing for our zombie sprites. Here we'll notice that since we just made modifications to another sprite sheet, the same values are already saved. So hit slice, and hit apply, and now we're done. In the next video, we're going to start building out the foundation for our palette, which is where we're going to store colors. And also, how to extend Unity's IDE in order to allow us to create the palettes through its create menu.
- Importing artwork
- Working with sprites and animations
- Creating scriptable objects
- Sampling colors from sprite textures
- Extending Unity and building a custom inspector
- Creating custom textures
- Optimizing the palettes
- Cleaning up sprites in Photoshop