Quote Codes Diaries 5: Animation of the Primitive Font

Hey Folks,

Wishing you all a very happy and prosperous New Year! Let’s kick off Quote Codes Diaries 5 with the Animation of the Primitive Font!

Quote Codes Diaries 5: Animation of the Primitive Font
It’s time to see these animated!

In the previous blogs, I explained the concept of Animography and how it inspired us to animate our Primitive Font. Then next we saw the basic practices one must always follow in an animation project to keep the project scalable and customizable and avoid silly errors.

Today, we will see the results of all that planning and hard work. Here is our dearest Primitive Font in all its glory!

Quote Codes Diaries 5: Animation of the Primitive Font

Each character in our font is unique and has a custom animation. The whole project lasted just over 2 months for us.

Quote Codes Diaries 5: Animation of the Primitive Font

Remember we said that we wanted to restrict the animation of each character within its grid.

Quote Codes Diaries 5: Animation of the Primitive Font

Here are the remaining characters!

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

This one’s our favorite!

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

And then finally the symbols.

Quote Codes Diaries 5: Animation of the Primitive Font

 

Converting your animations into Sprite Sheets.

So you spent all this time animating in After Effects and now want to use them in your app. Traditionally sprite sheets are made by painfully drawing each frame one-by-one. But now there is a way to export your animations into sprite sheets directly from After Effects itself!

Thanks to Matthias Guntrum and his AE script Sheetah, you can now export any animation into a sprite sheet in no time. Just head to the Sheetah page and download the package –> unzip and  Merge sheetah’s After Effects/ScriptUI Panels folder with your following After Effects Installation folder: [path]/Adobe After Effects [version_number]/Support Files/Scripts/ScriptUI Panels

Now just restart After Effects, open your animation file and go to Window –> Sheetah.jsx.

Quote Codes Diaries 5: Animation of the Primitive Font
Sheetah will be available under the Window panel

A Sheetah popup will display on your AE project. Select the output type from the 3 available options (png, tga or tif) and hit Save Spritesheet. Export in your desired destination folder and thats it!

Quote Codes Diaries 5: Animation of the Primitive Font
Export your animations into sprite sheets in a matter of seconds

Your sprite sheet is now ready for use in your app!

Quote Codes Diaries 5: Animation of the Primitive Font
Here is our character sprite sheet

I hope you enjoyed reading about our thoughts and process behind the making and animation of the Primitive Font. Stay tuned for the next Quote Codes Diary where Joseph will explain how we started thinking about using the font in an app which ultimately resulted in Quote Codes!

Quote Codes Diaries 5: Animation of the Primitive Font

Till then don’t forget to Pre-order Quote Codes on the Appstore here, it comes out on Jan 18, 2018. Pre ordering ensures that the app automatically downloads onto your device on Jan 18