Frame Animations

One of the elements of our animatic features a number of frames surrounding the viewer in a circle. These frames have a slight animation on them, where they chase their tails. Fiona had done a little testing with this, but we decided that the corners should be slightly more rounded, and the lines more paint-like, rather than having a hard edge.


Painting in Photoshop

Some of my early research on painting helped inform my development of the painty frames. As these frames won’t be close to the viewer, they did not need a huge level of detail, but it was still important to reflect the oil paint style that the interview is referencing. I was aiming to create a stroke that was one singular colour with a hint of white, with a shape that mimicked the linear brush lines.


Image source:

After looking into Colin’s work up close, I began playing with a couple of Photoshop brushes to create my strokes. I created the illusion of a thicker paint in the center by using a build up of white to fill in the lines. I made the stroke more opaque in the middle, and let the lines disperse a little more to the outside as a real paint stroke would often do.

Animating in AE

I took to After Effects to do the animation and took a look at a few tutorials to see the best methods to animate the frames. Focus 8 gave the option of downloading a plugin to animate a flat layer along a path. While this is an interesting approach, I felt that it may distort the texture, so I decided to try something different.

In the end I chose to animate a stroke along a path, revealing the texture below. The Tron lines video below was the closest video that describes the process. This method allowed me to create the whole texture of the frame in Photoshop, and then draw a path to match the frames. I then added a stroke, set it to reveal what was below, feathered the stroke, separately feathered the mask and then animated it.

Transition Challenges

One thing that the animation does in the animatic is fade in for the transition, however, at the time of creating the frames I wasn’t sure if a fade in was possible in Unity. If it was not possible, I would have to animate the transition in this process (ie. snaking in from nothing), but if it did work, I would be able to just loop the animation.

In After Effects I created both animations to have options to work with. I did this by first animating the stroke growing. I then created another mask to be animated as the stroke completes it’s full rotation, which gives the impression that the frame is chasing its tail.

Saving out Sprite Sheets

After animation, I exported the files as a transparent png sequence which I then added into Photoshop to create my sprite sheets. I decided at this stage to create a loop (instead of the paint stroke growing from nothing) for the sprite sheet animation, as it is easier to add to a loop than remove from it, if required.

As I knew the textures were to be animated on sprite sheets, I had created my paintings on large 2K files so that I could maintain optimization in the space.

This slideshow requires JavaScript.

I began matching all of the pngs to a grid, making sure each lined up perfectly together, with no overlaps and no gaps between the images. This was a long and tedious process which took a couple of attempts to get right. Below is an example of the pink frames sprite sheet once complete.

Screen Shot 2016-04-17 at 7.25.49 PM.png

Testing in Unity

With the sprite sheets complete and the frames made, all that was left was testing in Unity. I set up the scene that Fiona had previously made the frames for, to try my new textures. I added a script to each model and edited the values, to match the size of my textures.

Editing the animation in Unity

After getting the sheets working I was not a fan of the total uniformity of the set up. Each frame animated at exactly the same time in exactly the same way which didn’t feel natural and was too far from the original animatic. After a bit of tweaking and testing, I discovered that I could edit the frame rates to stagger and slow down the animations. After doing this, it felt much more fluid and as I had imagined.

I finally packaged up these elements for Nicole to add into our master scene in Unity.



One thought on “Frame Animations

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s