Using Sketch and TexturePacker to create 2D Sprites
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).
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).
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.
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.”
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!
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.
