Animation Design Tips

Become a Subscriber

When following resources for learning Game Development in Swift, many articles, tutorials, and books fail to cover the aspect of creating artwork. While it’s convenient to leave artwork creation to a true illustrator or designer there are many situations where you may need to produce or modify artwork yourself. In this post, we will look at the basics of creating artwork using various tools and techniques. We will also identify some of the best practices and tips of game design.

Sprite Making Software

Full disclosure: I’m not an illustrator. I would love to discover that there is some incredibly easy way to create animated sprites and test iterations more quickly, but to date, the way I do it in this post is the easiest and most efficient way. On a fairly regular basis I use Adobe Illustrator, Sketch App for Mac, and Adobe Photoshop as these are some of the most robust tools for creating any 2D graphics.

Rendering

Rendering is probably the single most important topic to understand when creating graphics. I won’t dive deep into many other components of design in this post, but it is crucial you understand the core aspects of rendering in terms of both graphics creation and implementation of those graphics. The first thing you need to know about graphics is the difference between raster and vector images.

Vector rendering is a means of drawing a graphic using code and math to generate and render pixels on the fly. A rendering engine uses the math and markup as a set of blue prints to then draw pixels on the screen. Vectors tend to be significantly easier to modify, scale, and render because of their simplicity.

Raster images, which use individual pixel data to create a graphic, save each pixel as a color and opacity value. These pixels, once drawn, can only be scaled down without losing quality and require a lot more of an artistic approach to modify.

Illustrator and Sketch default to using vector tools and are strongly suited for creating vector only graphics, while Photoshop is better equipped for raster images, even though it supports vector to some degree as well. Using these tools for their individual strengths gives you the ability to leverage the best of both worlds. Just remember the rule of thumb: rasters scale down, not up.

Gathering Resources

To make a character, you can piece together various royalty free components from around the web with your own custom shapes and layers. Make sure to check copyright licensing, and consider purchasing from sites like graphicriver.net or istockphoto.com to ensure that you have permission to adapt the work to your project. Many times you will want to create custom artwork, but with many illustrations a significant amount of time and effort can be saved by leveraging free design resources. To ensure safety of copyright and ensure originality, however, it is still advantageous to create all design from scratch.

Animation Illustration

Once a character is illustrated, and you are satisfied with the look and feel of the character, you are ready to create the frames that will bring you character to life with the appearance of motion. A good starting point is to draw a sketch animation with paper and pencil on a notebook. This way you can establish the posture and stance of the movements and flip back and forth between the pages to make quick iterations. Each frame should represent a small movement of the character in motion and you can use model sheets from various other artwork sites to reference for your own motion. Once you have established a pencil sketch, you can also scan it in to use them as guides in your illustration software.

To test your animation, you can export the individual images and test them with free tools such as gifmaker. For quicker iterations and refinements, it may be worth the time to export each frame into a layer in Photoshop and then animate the layers as timeline frames. To do this in Photoshop CC (for other versions a quick google search should help you out) open the Timeline toolpane from Window > Timeline. In the upper right of the tool pane you can then select the dropdown menu and Make Frames From Layers. After which you can then manipulate the frames on your timeline. You can select the duration between frames, playback loop, and play controls to see your animation. Each frame represents a layer, so you can tweak them as needed by selecting the frame and toggling the layer visibility that goes with it. This way it is easy to mask, reposition, or change the order of frames as needed.

Once your layers are dialed in, you can go to File > Save for Web and select the GIF preset (upper right of the popup window that will appear). This saves an animating gif that will closely represent how your character will look in the game. An added bonus is these animated gifs are easily shared on twitter and facebook for bragging rights! If your layers are good to go, save each one out as a PNG image. Now you have some great image assets to use in our Sprite Kit tutorial!