Quote Codes launched this week! And we would like to take this opportunity to thank you guys from the bottom of our hearts for the love and support you have shown towards the game. Quote Codes has been featured by Apple in over 83 countries worldwide and has broken into top 20 in its category in Canada and UK. We are just so so proud and humbled by the reception. Here is the download link again for the ones who haven’t already (Seriously what are you waiting for?) – https://itunes.apple.com/in/app/quote-codes/id1142929451?ls=1&mt=8
Right, lets continue the story of the game. In the previous blog, Joseph explained about his font choice and preference of a very whimsical and fun font. We thought we had something good going but as we started to develop we realized how wrong we were.
Design and App Flow Failures.
The first step we did was try to chalk out the App Flow of the game. How will the player navigate and interact with the game was crucial. We divided the app into 2 segments.
Main Game Screen (The main gameplay screen)
Game End Screen (The screen that shows the decoded quote)
Tutorial (static tutorial screen that shows the rules of the game)
Stats (stats depicting quotes the player has decoded)
Settings (A settings page)
Credits (A credits page)
Categories (Categories section so user can select themes of quotes)
Sometime on Illustrator and I came up with this mess.
Not making excuses but at the time Adobe hadn’t come out with the XD and our first instinct was to use illustrator from the very go.
So after the app flow we tried putting in the designs on them.
Our initial thoughts were to use the primitive font as main headers in UI which as you can see looks too cryptic and cluttered.
In the previous blog, Joseph explained how he thought the DK Clair De Lune font was perfect for the game. But, as you can see from these designs, though it looked alright, it wasn’t really readable and made the whole game scene quite confusing. Plus Apple’s Human Interface guidelines recommend to have a minimum tappable area of 44pt x 44pt. The keyboard buttons were falling short of the 44pt. Increasing them would make everything look even more cluttered.
Try and Try till you succeed.
Right so after those failures we decided to try another fresh approach, scrapped the whole layout, font and structure and try a completely new way by adding new fonts and icons. We even tried inverting and messing around with the colors this time to see how it looks.
New funky icons
Though they looked fun initially, it just felt too much. The whole concept of solving your favorite quotes was getting overshadowed by the funky design and colors. Plus, this used the Hamburger Menu which apple completely hated and they were right to do so – (Watch from 32 mins on HERE)
So 2 iterations of designs and 2 complete failures but we weren’t about to back down. More on this in future diaries.
Till then don’t forget to download Quote Codes – Our quirky word puzzler featured by Apple worldwide (had to say it again :p)
Quote Codes is a word puzzle game where you unlock your favorite quotes by substituting one letter at a time. In every game, each symbol stands for a letter. Your aim is to guess and decode the quotes!
• Beautiful and addictive word puzzle game. • Decode quotes ranging from all themes like Epic TV Shows, Timeless Movies, Classic Disney, Netflix Binge, Legendary Authors and many more! • Over 85 different themes to play. Solve quotes from Game of Thrones, 13 Reasons Why, Rumi, William Shakespeare, Lord of the Rings, Stranger Things and countless more. • Hand crafted custom animations of each symbol. Beautiful minimalistic visual design. • Completely free to play with minimum Ads. Earn coins by successfully decoding quotes! • Universal app with Facebook sync. Play on your iPhone and iPad and your progress will always be in sync.
It has been one amazing journey and we sincerely hope you enjoy the game. Also, be sure to keep checking the blog for our continuation of the Quote Codes Diaries. We will soon be diving deep into our development process and technologies used in the game.
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!
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!
Each character in our font is unique and has a custom animation. The whole project lasted just over 2 months for us.
Remember we said that we wanted to restrict the animation of each character within its grid.
Here are the remaining characters!
This one’s our favorite!
And then finally the symbols.
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.
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!
Your sprite sheet is now ready for use in your app!
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!
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
It has been just over a year since we started this blog and the reboot of Pixel Drop. We vowed to get our core principles right again and start fresh. At the start of 2017 we set out with many plans, but at the foremost was to form a strong bonded team of individuals who share the same passion as us. Only then can we convert the promises to reality and all the planning can be set in motion.
Pixel Drop was started way back in our college days but I always tell joseph that we become a studio only a few months back. Because, it was only a few months back that we were able to form that team of amazingly talented individuals ready to give their all (Thanks guys). And that is why I believe that 2018 will be the year of Pixel Drop. For us, every small thing as been a learning curve, hence we do such detailed blogs about our entire process (check out the Quote Codes Diaries) so anyone starting new can have all the basic knowledge at one place.
Now let’s get on with the fun stuff. Here is the year of Pixel Drop.
Quote Codes – Quote Codes is a word puzzle game where you unlock your favorite quotes by substituting one letter at a time. In every game, each symbol stands for a letter. Your aim is to guess and decode the quotes!
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
Shut The Window – This is the secret project we have been working in this holiday season. A really quick and fun game with breathtaking illustrations. More in this before the month end!
Tuta Tuk Tuk – We have been working on Tuta Tuk Tuk almost all of 2017, going through countless iterations, style’s and approach. But, now finally we have all the right combination to pull this off. Stay tuned for Tuta Tuk Tuk till mid Feb.
The WOW Signal – The WOW Signal is one of the most ambitious project we are undertaking. We take on the endless beautiful space with dynamic lighting and progressive mechanics. This game is going to be amazing. More details in the coming months.
Quantum Reaction – How can we forget Quantum? Our one and true love. But this time we are doing it different and doing it right! Quantum reaction will be our tribute to the some of the greatest minds in the science world. Stay tuned for this till April!