Using Sketch and TexturePacker to create 2D Sprites

Unicorn Agency
Mar 1, 2018 · 3 min read
The end result (though the gif rasterization looks poor on medium)

There are a myriad of products and solutions for making 2D sprites. Spriter and DragonBones are among my favorite programs. They have their place and are definitely worth learning, unless you want to just make something ridiculously simple and quick. Today, I’m going to teach you the most ridiculously easy way to create 2D sprites with Sketch and TexturePacker (both of which you can try for free).

Our eight artboards for this sprite, each 64x64

Starting with sketch, let’s create an Artboard that is 64x64. Now rinse and repeat as many times as you want/need for your animation. In our case, we made eight in total. I recommend also creating guides so you can mark the center points of each Artboard (it will help you line up your sprites).

Our vector image that we’ll work with. You can draw this with the “Vector” pen tool and edit by double clicking (as depicted on the left).

Create a vector of your choosing. We’re going to keep this super simple, so we’ll just take the pen tool and draw abstract butterfly shape. You’ll want to center the sprite on the X and Y axis in the Artboard based upon where the “head” should be. If you center based upon bounds, you’re artwork will bounce all over the place. Since our butterfly wings will pivot around the head, we want to keep those center anchor points near the (0, 0) origin.

If you’re following along, you should have an image on your first Artboard. Now duplicate this image to the second, and drag the outer anchors of the wings down about 5–10px each. This is enough movement to create a flapping effect without being too jittery. Rinse and repeat for each of your Artboards.

Now we just need to name our artboards and export them. I recommend giving them a unique name like: <IDENTIFIER>-<FRAME NUMBER>

Select all your Artboards on the left and click “Make Exportable” on the right. Make sure you’ve named your Artboards both for easier mental management, as well as use in programs (sprites are often identified by these frame names). You can export at any size you prefer. I’m going to leave at the default 1x PNG image and export these to my desktop.

Now you’ll just drag and drop these into TexturePacker. You can select all of the Sprites in the left side and preview the animation. You’ll find presets in TexturePacker for nearly every major engine, program and tool. In our case, we’re going to be using these assets in Pixi, so we select that preset and the “Publish sprite sheet.”

Exporting our sprite atlas for Pixi.js

And with that, you have a combined sprite along with a json atlas config. These assets are now ready to use in any number of gaming frameworks!

If you like it, clap it up!

Follow me on twitter or instagram!

Clay is a Hustler, Designer, Engineer, and Founding Unicorn. Outside of work his interests include nature, travel, linguistics, and music. Get in touch to work with this majestic creature: email, website, @UnicornHQ, Unicorns on Facebook.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store