Monster Math - Journey to the Android launch!

Its been a thrilling roller coster ride for all of us at Makkajai.  I remember the days when we were building our first game Monster Math Classic on iOS,

• We had no clue of how to develop a game?
• How to market it?
• How to get customers etc.  

All we knew was that, we had an idea and a lot of determination to execute it :D

In November 2014 we launched Monster Math Classic our first game on iOS.  Even though this was our very first game, we still managed to get lot of love from parents, teachers and students.  They had very kind words to say about our game.  Not just that, they also gave us some very awesome feedback, which could take user engagement to the next level.  We heard our customers and we incorporated their feedback which made them even more happier.

Somewhere in October 2015 we launched two new games Monster Math and Monster Math Multiplayer which got an even better acceptance than Monster Math Classic.  All these were still iOS only games.

One question which kept on coming from our customers was: When is it getting launched on Android!

It was not as if we didn't want to launch on Android.  We wanted to, but since our game was using Cocos2d (A game engine only for iOS), we couldn't do it just by a flip of a switch.

Somewhere in March 2016, we decided we need to launch our game on all major platforms, so that more and more kids can take advantage of our solution.  We started the effort on porting Monster Math solution to Cocos2dx.

When I first started to port, it felt like a never ending task.  We had around 50K+ line of Objective C code to be ported to C++.  Just the though of doing this humongous task -- that too all alone -- gave me nightmares :D.

There were many many problems to solve before we could could even compile an APK.  But as our dear friend Mark Watney (The Martian) says:

At some point, everything's gonna go south on you... everything's going to go south and you're going to say, this is it. This is how I end. Now you can either accept that, or you can get to work. That's all it is. You just begin. You do the math. You solve one problem... and you solve the next one... and then the next. And If you solve enough problems, you get to come home!

So thats exactly what we did, we started solving one problem at a time.  First problem was how can we quickly port Objective C code to C++ with minimal effort?

Instead of manually re-writing 50K+ line of Objective C code to C++, I wrote a quick and ugly Objective C to C++ translator.  It reads and parses any Objective C file and translates code into C++.  Simple right?  This translator does not generate compilable C++ code (because that would be difficult and time consuming).  It only get 90-95% of the job done!

This one step alone saved us few months of mundane work :D

• After the initial translation was done, I manually fixed the compilation errors.  
• Replaced Core Data/Realm with SQLite.
• Added memory management code, since there is no ARC to cover us.
• Replaced various SDK's with cross-platform equivalent.
• Where a cross-platform equivalent SDK was not available, we used platform specific code to integrate native SDK's.

After solving innumerable such small problems, on July 14 2016 (after around 4 months of starting the project) we launched Monster Math on Android!

I am very grateful to have gotten this opportunity, I learned (and unlearned :P) so many things in such a short duration.  I am super excited (and proud at the same time) to have achieved this feat.

Finally, I hope Monster Math on Android gets even more love from its users.  Keep Calm and Have Fun!

How we reduced the size of our iOS app Monster Math from ~108MB to ~39MB - Part 3

This is the third and final post in the series of posts where, I will explain, How we reduced the size of our iOS app Monster Math from around 108MB to 39 MB.

In the previous post, I explained how we first converted our 24bit PNG images to 8bit PNG and then converted those 8bit PNG images to WebP images.

If you didn't get a chance to catchup on this series yet then, I suggest first read Part 1 and then Part 2 and then continue reading this last post.

Convert All Sounds and Music files from WAV (or any other format to) AAC Format

I said this in the first post and I will say it again, "WAV files are huge, don't use them period!".

We converted all the WAV files into AAC format.  This gives us enormous savings of around 70-80% per file!

To convert WAV files to AAC, we will use the Audio File Converter (afconvert) tool which comes pre-installed with MAC.  A small shell script to convert all WAV files to AAC would look like this

This simple shell script will find all the WAV files in a given directory and passes them to afconvert which converts them into AAC format.  

The results are awesome, you got to see it to believe it!

Reducing bit rate of AAC Voices to 32K

We had like a ton of voices in our app in AAC format.  Reducing the bit rate of all these AAC voices to 32K give us another 70-80% reduction in the file size!

To reduce the bit rate we will use the same afconvert command with a slight modification.  This command has an option via which we can specify the bitrate to be used.

Only real difference between the previous and this script is the option "-b 32000".  This will make sure that all the converted files will have 32000 as the bit rate!

These were the last two important methods that gave us significant size reductions in the final binary.

Thats all folks, have fun reducing the size of your binaries!

How we reduced the size of our iOS app Monster Math from ~108MB to ~39MB - Part 2

This is the second post in the series of posts where, I will explain how we reduced the size of our iOS app Monster Math from around 108MB to 39 MB.

The previous post, I described the steps we took to get the size improvements, in this post I will try explain a few steps in a bit more detail. 

Converting 24bit PNG's to 8bit PNG's

Of course its possible to update each image manually and save it as 8bit PNG using PhotoShop, but let me put it this way, it wont be convenient, doing it this way.  We had like a ton of images to be converted, so best option would have been a command line tool that we could invoke using a shell script.

With that in mind, we used pngquant a command line utility that does lossy compression of PNG files.  It conveniently converts 24bit PNG files into 8bit PNG files with a simple command.  

This simple shell script will find all the PNG files in a given directory and passes them to pngquant and converts them into 8bit PNG images.  

The results are pretty sweet, it save around 70% of the size of the original 24bit PNG image.

Converting 8bit PNG's to WebP

As mentioned in the earlier post, WebP is an image format that provides lossless and lossy compression for images.  Using the lossless compression on an 8bit PNG gives a whooping 26% reduction in image size.

To convert PNG images into WebP download and install the utilities provided by Google from here.  The simple shell script to convert PNG images to WebP looks like this
This script basically finds all the PNG images in the folder and passes it on to the WebP converter and creates new files with .webp extension.

To render webp images using UIImage use the iOS-WebP library or any other similar library.  Our game uses Cocos2d, to add WebP support to Cocos2d just refer this post

These were the two important methods that gave us significant size reductions in the final binary.  In the next post, I will talk about how we reduced the size of music and sound files of our game.

How we reduced the size of our iOS app Monster Math from ~108MB to ~39MB - Part 1

Somewhere in November we released our iOS app Monster Math.  When we first released the app it was about 108MB large.  With so many high resolution images and sound and music files that it was bound to be a big binary file.

We knew from the very beginning that, having a binary this big is not ideal.  Some of the common problems with having big binaries are:

• The time taken for end users to download and start using the app, linearly increases with size of binary.
• People just don't sit around and watch the app being downloaded, they browse/download other apps, do other stuff, if the download takes longer we might end up getting a download but losing a user.
• Not to mention the space that it takes up on the device.  Might not be such a big problem for the iPads but certainly a concern for iPhones.
• Time taken to distribute the alpha/beta/prod builds increases with the size of binary.

These are just a few points but the list can go on and on.  After a few releases, we started actively looking for ways to reduce the size of our binary.  We evaluated numerous options and finally managed to reduce the binary size to around 39MB only!

How Do They Do It!

This post is a developer log of all the things we did to actually get us such great savings on the binary size!

NOTE: Detailed examples of how to do each of the following steps will be covered in subsequent posts.

Identify Biggest Assets In The App

• This one is by far the easiest step of all, we can easily do a file system sort by size descending, on all the files that get shipped into your application.
• No surprises here, as expected, biggest chunk comes from
• Image files
• Music files
• Sound files

Converting 24bit PNG's to 8bit PNG's

• All images in our application were in PNG format.  
• One option was to convert them to JPEG to reduce the size, but I was not too keen on that.
• Digging a bit deeper we realised that all our images were PNG 24 bit.  
• We changed all of them to PNG 8 bit
• We could not see any huge drop in quality - not that we are any experts on the topic - but for a regular user it didn't make much difference.
• This single step will get you around 70-80% reduction in size of all the image assets in your application.  Awesome isn't it!

Converting 8bit PNG's to WebP

• We were still not satisfied with our final binary size, so we went hunting for more optimisations.
• What we stumbled upon was a new image format called WebP from google.
• Its an awesome format, provides lossless and lossy compression for images.
• The lossless compression is a whooping 26% smaller than the PNG's.
• To use WebP in your iOS app you will need to integrate iOS-WebP or a similar SDK.
• This added awesomeness, did come with some headaches.  
• The performance of the game took a bit of a hit, because of added overhead of decoding WebP images
• This was more apparent when bigger images needed to be decoded for e.g. the backgrounds of scene.
• To get around this problem we eagerly decoded some of the most commonly used WebP images into PNG's on first launch of the game.
• And from within the game we use these decoded PNG images.  This solved the performance issue to a great extent.

I know you are itching to look at the code of how we did all this, but please bare with me till the subsequent posts to see the details of each step.

Convert All Sounds and Music files from WAV (or any other format to) AAC Format

• WAV files are huge, don't use them period!
• Converting them to AAC format gave us big savings around 70-80% on each file.

Reducing bit rate of AAC Voices to 32K

• We noticed that reducing the bit rate of all voices (yep! we have voice overs in our app) to around 32K didn't impact the quality much (Note that we only reduced the bitrate of Voices not the background music).  
• They felt the same when they were played back - again no experts on the subject - but for a normal user it didn't seem to make much difference.
• This give us another 70-80% reduction in size per voice file!

Seem like a lot of work?  But the end result is equally rewarding, we did manage to reduce the size of our binary to be just under 40MB!

We started from ~108MB and came down to ~39MB, its like more than 63% reduction in the final size!

As mentioned early, watch out for the next set of posts where I will explain in detail on how to perform each of the above steps with code examples.  Till then, keep rocking!