How to Animate Sprites in Tiled

When I first started animating for Binary Cocoa I would usually draw my sprites and give them to Joseph hoping they would turn out alright. Sometimes I would check them in After Effects but the process was kinda tedious so I used a trial and error approach. Thankfully the results weren’t horrible all the time, but we might have avoided so many disasters if I just had a simple animation function. Thankfully, Tiled came with one! Here is how I use it:

1. Assemble your sprite sheet so that each sprite is the same width and height. Here is a sprite sheet I created for Hexapod Defense Force:

2. Drop your sprite sheet into Tiled and make sure you enter in the dimensions for one tile. You will see your sprite sheet on the left side of the program and it will divided for you.

3. Select View and Tile Animation Editor. You’ll see your sprite sheet in the middle of the editor. Double click your sprites in the order you wish to have them animate.It’ll show you a preview of your animation in the bottom left corner:

4. Click close and watch your animation! Make some adjustments as it needs it. Hopefully you’ll find that your animation skills benefit from you have a program that lets you easily check your animations. The initial measuring of sprites can be a little cumbersome to the uninitiated but if you can wrangle that aspect you’ll be soon be flying.

Check back here weekly for Binary Cocoa updates and game development tips!