Creating Sprite Sheets in Five Minutes With Texture Packer

So you’ve started working on your project, you got the basics down and now you are at the part where you actually want to implement some graphics… but you’re not quite sure how to do that. Let me introduce you to Texture Packer.

---

What Is Texture Packer?

Created by the guys over at Code n’ Web, Texture Packer is a great little piece of software that allows you to pack textures, assets, and pretty much anything you want in a nifty little sheet that is compatible with tons of frameworks!
A free version is available, but some features are disabled.
I love Texture Packer because it’s easy to use, it’s super flexible and it works with the engines you already use. It does an amazing job of letting you optimize your sheets with various options such as color depth, auto scaling, dithering and trimming invisible pixels. It also exports to many formats compatible with Cocos 2D, Unity, Corona, any engine that supports JSON, and more.

---

The Main Interface

Before we start to make our own sheet, let’s look at the interface for a second.

The main Texture Packer interface.

All the settings on the left might look a bit menacing but don’t worry, they are actually really easy to set up. And even better, you only have to set them once; you can then save them and re-use them later for any other sheet you want to create!
As you can see, the sheet’s settings are on the left, the list with our assets is on the right (which is empty right now), and the sheet preview itself in the center.

---

Let’s Get Started!

The first thing to do is open your folder with your magical art, and drag and drop it into Texture Packer’s assets list.

As you can see, they instantly appear in your sheet. You can click on a specific asset in that list and it will highlight in the sheet. (This works the other way around as well.)
Tip: Right under the preview sheet there are some zoom options; feel free to play with those until the sheet fits nicely on screen for a better preview.
Let’s take a look at the mess of options on the left. There are only three categories you have to worry about:

• Output settings: These take care of where your sheet will be exported and the compression that’s applied to it.
• Geometry settings: These take care of the sheet’s size and asset scaling.
• Layout settings: These are all about assets’ placement in your sheet and overall optimization.

We’ll go through each of these in turn.

---

Output Settings

Data Format

This is the format for the sheet’s data file containing all the information you need, such as coordinates, dimensions, and rotation.
Currently, the following options are available: Cocos2D, Corona, Sparrow/Starling, LibGDC, JSON, Unity3D, LibGDX, Css, Gideros, CEGUI/OGRE, AndEngine, AppGameKit, Slick2D, Moai, BHive, Xml, BatteryTech SDK , EaseIJS, Kwik2 and plain text.

Data File

This is the path where the data file will be saved, it’s a good practice to keep it in the same folder as the sheet itself.
Tip: It’s a good idea to set the output folder so the sheet and its data file are exported directly into your engine’s directory.

Texture Format

From here you select the format of the sheet’s image. PNG is recommended, unless you need something else specific for your project.

Png Opt. Level, DPI, and Premultiply Alpha

Unless you know what you are doing, leave these settings untouched: Png Opt Level at “none”, DPI at 72 and Premultiply Alpha unchecked.

Image Format

In other words, color depth. It’s indicated to leave this untouched as well; the default RGBA8888 is the highest quality option. In case you are going for a specific look or you highly value the size of your sheets you can choose a lower option such as RGBA4444.
The “A” in those abbreviations stands for “Alpha” (transparency), and you will notice that if you pick an option that says only “RGB” it will have a black background, meaning there is no alpha info there. If you need it, you can create an alpha map by selecting “ALPHA” from that list; this may come in handy in some cases so keep it in mind.

The difference between RGBA8888 and RGBA4444 is evident in the colors of the main body, above.

Dithering

If you haven’t touched the option from the previous step, dithering will be unavailable, but don’t worry about it. Now, in case you selected a lower option in the previous step, such as RGB444, you may notice that you can see where the color tones match… that’s ugly, so dithering is here to help you by mixing colors using some complex algorithms.
Try out the “FloydSteinberg” or “Atkinson” options and see how they look.

The effect of the dither is easiest to see in the shirt’s fabric.

Texture File

Just like the “Data File” option, from here you choose the path where the sheet image will be exported.
There is one more setting in the Output category called “Auto SD”. This allows you to automatically export a smaller version of the same sheet you are working on at the same time. This is useful when you work on an iOS app that requires two separate sheets in order to work on both normal and retina displays – Texture Packer has you covered.

---

Geometry Settings

Size

This is the place where you can change the size of the sheet. You can pick a maximum size or a fixed size. There are predefined, recommended values in the drop-down menu (all powers of two), but you can also manually input any values you want.
Unless you are working on a project that requires a specific size for the sheet, I suggest you enable the “Allow free sizes” option. This ensures that the sheet size is big enough to accommodate all the assets without leaving any wasted blank pixels. (Also, keep the “Pack” option on “Best”.)

Scale

From here you can easily re-size your entire sheet from the drop-down menu (also allowing you to add your own values). Right below the scaling number there is another option for the scaling method. The “smooth” and “fast” options are the most common; “fast” does the scaling without blending any pixel color (this could be used to scale up your pixelated graphics for a retro game), and “smooth” scales everything smoothly (obviously).
[...]
Read more: Creating Sprite Sheets in Five Minutes With Texture Packer