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).
I wouldn’t recommend scaling sprites up with the “smooth” method. You could do that directly in your project if you really need to; there’s no use in having huge sheets.
Tip: If you look at the bottom right corner of the program, you will notice some numbers that represent the width, height and size of your sheet. You should keep an eye on that.Layout Settings
Algorithm and Heuristics
In short, these are the settings that determine how the assets are arranged in your sheet. There are multiple options that result in multiple outcomes but for best result I recommend keeping them on the default “MaxRects” and “Best”. This ensure the best placement of the assets in the sheet so there are as few invisible pixels as possible. Keep in mind, invisible pixels = wasted space.
Padding
Padding determines the space between your assets; it’s a good practice to leave them some space to breathe.
If the assets are right next to each other, when you rotate them in-engine, ugly artifacts will appear around their edges due to neighbor assets and anti aliasing. I recommend setting the Border and Shape padding to 2 while leaving the Inner padding at 0.
Extrude
This is quite an important setting when it comes to tile-based engines. It extends the pixels around an asset by the value you picked – for example, if you pull out a tile asset from your sheet and place it in your engine, you will notice tiny gaps between each tile.
This is most likely due to anti aliasing (in case you have it in your engine), so a super easy way to fix this is to set the Extrude option to 1. This also fixes other potential problem and doesn’t change the assets visually at all.
Common Divisor
If your sheet size needs to be divisible by a specific number, this is where you can set that. This will change the size of the sheet, filling it with invisible pixels to match a specific value. It helps in the case where your engine requires the sheets to be a power of two, for example, and it also helps to keep identical layout over multiple scaling factors.
The default value is 1, which means the size of the sheet is the size you’ve set in the Geometry section.
Reduce Border Artifacts, Rotate, Trim and Crop
The “reduce border artifacts” option tries to reduce shadows and imperfections around assets’ borders. It’s off by default and I’d suggest you leave it that way.
The “rotate” option enables rotation of the assets for the best space management. In many cases this will pack the assets better, which saves space since the sheet ends up smaller, however it might be an extra thing to worry about in your engine. Most of the time, it’s a pain to account for rotated assets and revert them to their original state in-engine, and this might even create some problems.
“Trim” is an awesome feature that cuts away the invisible pixels in your assets, keeping only what’s visible. This saves quite a bit of space and packs everything nicely, and also makes everything render faster since the engine doesn’t have to worry about that many invisible pixels. It’s generally good to keep this option on, but if you need an asset’s size to be a specific value based on its transparency, then this will interfere with that… so keep that in mind.
“Crop” basically does the same thing as “trim” but sometimes it affects the dimensions of the asset, so I’d recommend using “trim” instead and keeping “crop” disabled.
Also below these options there is a ”threshold” setting, which determines how many transparent pixels the “trim” and “crop” options remove. If you raise this number, “trim” and “crop” will start hiding barely visible pixels – it’s basically linked directly to the alpha of the pixel, which determines whether it’s removed or not.
Shape Outlines, Auto Alias and Heuristic Mask
The “shape outline” feature adds a red bounding box around every asset as shown in the image below. This is a great thing to have when you want to debug and see exactly where things go in your engine.
“Auto alias” is a great option: when you have multiple assets that are identical but have different names, you can enable this option and the asset will be added only once in the sheet, while being exported multiple times in the data file, each with the appropriate name. This is mostly used when you need the same asset twice in-engine with different names or values.
And finally the “heuristic mask” option is for assets that require transparency but have a solid color background. Basically, this feature removes the background color and makes it into transparent pixels. You really shouldn’t use this option since it usually results in sharp ugly edges (unless your assets are pixelated to begin with). It is best to handle the transparency yourself before packing your assets into the sheet.
And There We Go!
Now you are done with all the settings, you can push that “Publish” button at the top to export your sheet (or alternatively Ctrl-P). To prevent the whole setting-up part next time you need a sheet, just click the “Save Defaults” button up there; this will save the current settings as default and they will be there every time you open the program, which saves you a lot of time.
Texture Packer also supports integration with your engine through command lines. This means you don’t even have to open the program to export your sheets, which makes things way way more faster. More on that here.
And that’s about it, now you know how to set up your own asset sheet and export it. Now go play around with the settings and values to see what is best for your project. Have fun and start exporting!