Quote Codes Diaries 6: The Idea For A Game

Joseph back again. Today in Quote Codes Diaries 6, we look at how we got the idea for the game!

The initial inspiration for Quote Codes was from a word game in my local newspaper ‘Mumbai Mirror’ that I played when I was in school. I don’t exactly remember the name but it was about figuring out a coded message.

Quote Codes Diaries 6: The Idea For A Game
A substitution cipher game in which one letter stands for another. I was addicted to this game!

Only one clue was given, that’s it. You had to bang your head against all things to figure it out. Sometimes it would take minutes, other times hours or even days! (Of course you could cheat a little by checking out part of the answer on the next page!) I loved doing this and reading ‘Pearls Before Swine’ comic strip!

Quote Codes Diaries 6: The Idea For A Game
A classic Pearls Before Swine comic strip

Fast forward to when we had made the Primitive Font, one day I happened to go through the newspaper again and was doodling some changes for the primitive font. Then it struck me – how would this be for the digital age. How can we adapt it for mobile. And that was the beginning of Quote Codes.
The primitive font was perfect for representation as a symbol. It was cryptic yet understandable. On searching further I came to know that this was a genre in itself – substitution cypher game.

Quote Codes Diaries 6: The Idea For A Game
The Primitive Font was cryptic yet had a defined structure to be understandable. It proved perfect for the cryptographic game concept

The next hurdle was what to base it on. What quotes to select. And the way was shown by ‘QuizUp’. The app had just gotten big and everyone I knew was hooked to it. So we studied their most popular categories and we had our answer-TV shows and movies. And of course others as well. But we focused mainly on TV shows because these had a certain sense of nostalgia associated with it. People felt delighted when they figured out the quote.

Quote Codes Diaries 6: The Idea For A Game
We looked at QuizUp for inspiration in selecting the topics and decided to start off with only TV Show quotes

This was followed by a frenzied 2 day work on the initial gameplay screen designs.

That story, we’ll cover in the next one!

Quote Codes Diaries 6: The Idea For A Game

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

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

Quote Codes Diaries 4: Animating in After Effects.

Hi Everyone,

Hope the holiday season is going well. Welcome to Quote Codes Diaries 4. Picking up from the previous blog, today we look into the process of animating your Animographies using After Effects.

Quote Codes Diaries 4: Animating in After Effects.
Today we look at some basic practices that will help you avoid silly mistakes in your After Effects animations

As I mentioned before, prior to this project we didn’t really have much experience in animation so everything had a learning curve. The entire project of animating the Primitive Font lasted just over 2 months, out of which a lot of time was actually spent on errors we encountered due to lack of experience.  Hence, I would like to take this as an opportunity to list down some common practices that you should follow for your projects so you can avoid silly mistakes.

Setting up your designs for import in After Effects.

This is the most basic but the most crucial part. In order to keep your animations scalable and customizable, it is really important to set up your designs well before you import them in AE (After Effects).

AE supports import of AI (Adobe Illustrator) files really well. Though it does support PSD files as well, it is much easier and efficient to import AI (explaining this below). Additionally, since vectors are completely scalable, I would definitely recommend designing your font’s in AI from the start itself.

Now, after you finish your designs, it is time to set up your AI file for import in After Effects.

Set up each character in separate AI files and break the  character design in different layers. It goes without saying that you should have a fairly basic idea of your animation before doing this. The point is to separate each part of the design you want to animate as a separate layer. So, if you don’t have a basic storyboard ready for your animation, I would recommend separating the design in as many layers as possible so you have the freedom later when you begin in After Effects.

Here is how we did it.

Quote Codes Diaries 4: Animating in After Effects.
This is our animation
Quote Codes Diaries 4: Animating in After Effects.
Notice how we separated each shape we planned to animate into separate layers

Importing in After Effects

Create a new project and go to file –> import –> file.

Quote Codes Diaries 4: Animating in After Effects.
Go to File –> Import –> File to import your AI file

Select your file and under Import –> Composition – Retain Layers. This will retain the layers we made in AI.

Quote Codes Diaries 4: Animating in After Effects.
Select Composition – Retain Layers, so your AI layers remain intact.

Now, here comes the advantage of using AI. Select the layers –> right click and select –> Create Shapes from Vector Layer.

Quote Codes Diaries 4: Animating in After Effects.
Right click on a layer and select Create Shapes from Vector Layer

Viola! your AI layer now becomes a shape layer in AE. Expand, scale, use it in any way, your design will not loose quality ever!

Quote Codes Diaries 4: Animating in After Effects.
Shape Layers created from vectors are completely scalable and customizable in AE

And that’s it! You are now ready to animate! Maintain a different composition for each character.

Quote Codes Diaries 4: Animating in After Effects.
Keep your AE project organized. Maintain different compositions for each character.

The separation of layers we did in AI ensures your animation is always customizable and converting them to vectors in AE ensures they are always scalable!

Plan out your animation on paper first before implementing in AE and go crazy with it. Animation is all about timing and once you start getting momentum it is a lot of fun.

Next time I will show you the final outcomes of our animations and also most importantly how to directly create sprite sheets for your games/apps, from After Effects itself – Yes it is possible!

Quote Codes Diaries 4: Animating in After Effects.

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

Quote Codes Diaries 3: Animation + Typography = Animography

Welcome to blog 3 of the Quote Codes Diaries. A quick recap –  Till now we saw the Origins and Making of the Primitive Font: How, at its core the Primitive Font is made up of only four basic shapes, Circle + Rectangle + Triangle + Line. All the characters then are a combination of these shapes with minor adjustments. The font gained popularity online on Behance and Typography Served.

Today, as promised we divulge into the fun bits, Animations!

Animation + Typography = Animography.

Quote Codes Diaries 3: Animation + Typography = Animography

Fast forward a few months after we finished the design of the font. One fine magical afternoon I was browsing through the internet and came across Animography – A webshop/typefoundry that provides motion designers, video-editors and others in the field of the moving image with animated typefaces.

Quote Codes Diaries 3: Animation + Typography = Animography

Quote Codes Diaries 3: Animation + Typography = Animography
Animography means animated typeface

Animography (animation+typography) at the time was new but gaining immense momentum. Imagine the possibilities here. You can use the animated typefaces in apps, trailers, games, videos, etc. It could instantly spruce up a project and make it more fun.

We wanted to do this, and we wanted to do this with our beloved Primitive Font. At the time we hadn’t even thought of making a game out this. We just wanted to animate and make it cool.

Animating The Primitive Font.

If you notice, most of the typefaces in Animography follow a very defined approach towards the animations of characters. Take Amelie By Shabello for example. All the characters come as drops from the top and then open up to their shapes.

Quote Codes Diaries 3: Animation + Typography = Animography
Amelie follows a defined animation process where all the characters start as drops and then expand to their shapes

Though this looks absolutely awesome, we wanted to create unique animations for each characters of our font. The design of the Primitive font is very structured and tight, through animations we wanted to break this and create a little bit of chaos.

But that being said, certain rules were still needed to be defined to maintain focus.

1. We wanted to follow the grid system used in design and constrain the animations within it.

Quote Codes Diaries 3: Animation + Typography = Animography
Animation of each character is to be constrained within their grids

2. We did not want to add more color in animations

Quote Codes Diaries 3: Animation + Typography = Animography
No extra color will be added in animation except the 2 above

3. We wanted to play with the basic shapes as much as possible.

Quote Codes Diaries 3: Animation + Typography = Animography
Focus to play with the basic shapes in characters

And, so we began the quest to animate the Primitive Font. This was our first proper animation project, so everything had a learning curve. Next time I will dive deep into the process and journey: failure and success. I will even explain the basics of setting up After Effects for your animographies, so that your project is scalable and customizable. Stay Tuned!

Quote Codes Diaries 3: Animation + Typography = Animography

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.

 

Quote Codes Diaries 2: The Making Of Primitive Font

Welcome to blog 2 of the Quote Codes Diaries. This time I’m going to dive into the details of the making of ‘Primitive Font’. (That’s our font featured on Typography Served on Behance for those of you who didn’t checkout our previous blog)

Quote Codes Diaries 2: The Making Of Primitive Font
The Primitive Font in all its glory

The Making Of Primitive Font

At its core Primitive Font is made up of four basic shapes

Circle + Rectangle + Triangle + Line

Quote Codes Diaries 2: The Making Of Primitive Font
The Font is made up of only four basic shapes

All designs are a combination of these shapes with minor adjustments. It is done by changing the sizes and the interactions between these shapes.

Everything except for the M and W is laid out on 3×3 grid  (M and W take a 4×3 grid due to its horizontal expanse). The grid was just a framework to work within certain guidelines. The geometry behind the shapes was a very deliberate effort. We wanted to achieve a very minimal representative of the alphabet. We did compromise a bit for legibility though.

Quote Codes Diaries 2: The Making Of Primitive Font
Everything except for the M and W is laid out on 3×3 grid (M and W take a 4×3 grid due to its horizontal expanse).

Let’s take C-D-O for example(The Big Short  anyone?). The basic shape is a circle. The letters are just variants of it.

Quote Codes Diaries 2: The Making Of Primitive Font
C-D-O All are formed using the basic shape of a circle

So the O is obviously a circle fitting the 3×3 grid. Simple. The C is just the circle with the right portion cut off. So we have C as well made from the circle cut off half way though the right grid block. The letter D is actually a slightly distorted mirror image of C. So we have the exact same principle with one exception. The straight line that other wise demarcates the D is now a curved one running along the circle’s circumference. And how do we give it a playful nature? Simple, add some colour into it!

Quote Codes Diaries 2: The Making Of Primitive Font
C-D-O filled with color

The use of colour is mainly in the negative spaces throughout the letters. The playful aspect can be seen in the F and the E as well. Traditionally both are separated by only an extra line (bottom line in the E). But we decided to give the E a lil bit of quirkiness. Instead of the middle line, we substituted it with a filled circle. And what do you know? It works out!

Quote Codes Diaries 2: The Making Of Primitive Font
F and E both are separated by only an extra line (bottom line in the E). But we decided to give the E a lil bit of quirkiness by adding a filled circle.

The rest of the letters follow similar principles. All but M and W; Z and I. These are formed purely from lines. This was so as to avoid any confusion in regards to legibility.

Quote Codes Diaries 2: The Making Of Primitive Font
M-W-Z and I, are formed purely from lines

Then comes the symbols set.

Quote Codes Diaries 2: The Making Of Primitive Font
Symbols of Primitive Font

Similarly we even designed a numbers set based on the same principles (though they are a bit abstract).

Quote Codes Diaries 2: The Making Of Primitive Font
Numbers of Primitive Font designed using the same principles

So these are my two cents on the Primitive Font. Hopefully, this cleared up matters a bit for you. Look out for our next post, this is where serendipity and the fun begins – Animations!

Quote Codes Diaries 2: The Making Of Primitive Font

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.