Friday, July 29, 2016

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!

Thursday, June 30, 2016

How to enable Immsersive Full Screen mode on Android with Cocos2dx

We are executing a project to port our flagship solution Monster Math 2 from Cocos2d to Cocos2dx.  This would enable us to release the solution on variety of different platforms including Android and Windows Mobile.

During the port, I came across one simple yet interesting problem -- Need to make the game UI truly full screen.

A lot of the Android devices have software navigation buttons at the bottom of their screens.

Android System Navigation Buttons
They seem to occupy part of the screen and block some part of the game UI.  Needless to say this does not give a great experience to the end users.  A better experience would be to hide these buttons.  But hey, if they are hidden then how do users navigate to the home screen or different apps?

Ideal experience would be to hide System navigation buttons at all times, but have some gesture to bring them back for a short duration when user needs them.

Android 4.4 (API Level 19) natively supports this functionality using the flag "SYSTEM_UI_FLAG_IMMERSIVE_STICKY".  This mode is called the immersive full screen mode.  When immersive full-screen mode is enabled, game continues to receive all touch events.  The user can reveal the system bars with an inward swipe along the region where the system bars normally appear.  System bars will automatically hide again after a few moments.  Perfect isn't it!

Usually setting this flag is enough to achieve the desired functionality, however in certain edges cases we need to do some additional work.  For example if you have a text field which accepts user input, once the on screen keyboard is dismissed the system navigation bars seem to stick around and do not hide until you kill the app and open it again.

In this post we are going to see how exactly to handle all situations so that the immersive full screen mode will always stick around for the app.

How Do They Do It!

What we need to do is basically setup SystemUiVisibilityChangeListener and FocusChangeListener and hide the system status bars in the callbacks.

Here is the sample code on how to do it.
That's it.  Once you run this Activity you should see that the game launches into immersive full-screen mode and remains in that mode!

Tuesday, May 31, 2016

How to write to Google Sheet from an iOS app - Part 3

In the previous post we saw how we could extract various identifiers from the Google Form.  We will use these identifiers from the iOS app to do HTTP POST and submit information to the Google Form.

How to do HTTP POST to Google Form from iOS App

This is by far the simplest step of all.  We will be using the open source iOS library AFNetworking for doing the actual POST.
  • We first need to build a dictionary of all the POST parameters we want to submit to Google Forms using the identifiers extracted in the previous post
  • Then we need to set proper request and response serializers
  • We need to set the content type as "text/html".  Thats because Google Form will return HTML response
  • And finally we need to make the actual POST call.  AFNetwork accepts success and failure callbacks will will be called depending on whether the call succeeded or failed.
Once this is setup, test it out, on successful POST the data should be getting written to the backing Google Sheet.

Thats all folks.  We have concluded our three part series of how to write to Google Sheet from an iOS App!

Friday, April 29, 2016

How to write to Google Sheet from an iOS app - Part 2

In the previous post we saw how we could setup the Google Form to write to Google Sheet.

We will need 2 additional steps to submit information to Google Form from iOS app.

  • Extract the various identifiers (like URL, field id etc) of Google Form
  • Use the identifiers in the iOS app to do an HTTP POST to Google Form
In this post we will focus on the first step only.

Extract Identifiers From Google Form

  • All we need to do is click on the "Preview" button on our google form page.

  • It should open up our form as below

  • Right click on the form and say "Inspect".

  • If you are using Chrome brows, it should open up a panel below the page which looks something like this

  • Find a tag called "<form>" in the panel, there you should look for "action" attribute.  This attribute has a big URL as its value.  Save this URL we will to POST to this URL from our iOS app.

  • Next, Right click on the input field in your form and click "Inspect".  It should show "input" tag highlighted in the panel below.

  • We are not really interested in the input tag that the panel is showing, 
  • We need to find another input tag which is of 'type="hidden"'.  This input tag would be 8-9 lines below the input tag currently highlighted

  • Note down the value of "name" attribute on the input.  Do the same thing for other fields in the Google Form.  These keys will be used when we submit information from our iOS app to this form.

Once we have these identifiers noted we are left with one last step i.e. to do the HTTP POST from iOS app to Google Forms.  We will see how to do that in the next post.

Thursday, March 31, 2016

How to write to Google Sheet from an iOS app - Part 1

Recently we wanted to write some information to Google Sheet from our iOS app Monster Math.

There does exist an Objective C library that could directly write to the Google Sheet, but the API it exposes did look cumbersome.  What we did instead was a very simple hack.

  • We setup a Google Form with all the information we wanted to write to the Google Sheet.  
  • We then configured Google Form to write the responses to a Google Sheet.
  • This enabled us to directly submit information to Google Form using HTTP POST and responses will get written to Google Sheet automatically!
In this series I will explain how we could do the above steps.

Creating the Google Form

This is gonna be the super easy part.  
  • Login with you google account here
  • Click the big Plus icon to add a new form
  • Set the title as "My Survey".  If you want you can also add optional form description.

  • Next its time to setup questions which will act as columns in your Google Sheet
  • Lets setup two questions "Name" and "Age".
  • Enter "Name" in the text field that reads "Question"
  • Change the type of the Question from "Multiple Choice" to "Short Answer"

  • Similarly add one more question with title "Age" and of type "Short Answer".
  • After the setup your from should look like the image below.

Our Google Form is ready for use.  Now we just need to link it with a Google Sheet so that our responses get written there.

Link Google Form with a backing Google Sheet
  • Click on the "Responses" tab.
  • There you should see a green Google Sheet icon, click that.

  • It should prompt you to create a new Google Sheet with name "My Survey (Responses)", create it.

  • This should open up a Google Sheet which looks something like the image below.


Thats about it, you have successfully setup Google Forms to write its responses to Google Sheet.  You can verify the setup by clicking the preview icon on the Google Form.

It should open up the form which should look like the image below

Go ahead and submit some dummy information to test the setup.  This information should be written to the Google Sheet automatically.

Congratulation on reaching this far, the configuration part is over.  All we need to do is hook up this form from iOS app, we will cover that in the next post. 

Monday, February 29, 2016

North Karnataka - The Rome of India - Part 4

In my previous post, I narrated what fun it was to see the beautiful caves of Badami, Pattadakal and Aihole.  In this post we will experience, how mesmerising it was to visit the crown jewel of all these places -- Hampi!

Day - 4 - Hampi

As usual, we started early and we decided start our day by visiting the Stone Chariot at Vittala Temple Campus.  Boy, was it amazing to see this temple!  We took the services of a professional guide and struck a deal with him to show us all major monuments at Hampi during the day (highly recommended).

The architecture and history behind the Vittala Temple is magnificent.  Even after so many years, so many part of the temple are intact!

Stone Chariot @ Hampi
We also saw the musical pillars in the complex and the guide actually played music using only the stone pillars!

Musical Pillars @ Hampi
Next we went to Virupaksha Temple

Virupaksha Temple @ Hampi
Some of the sculptures still had their natural colors intact!

Natural Colors on sculptures @ Hampi
Close by is the Statue of Ugra Narsimha.

Ugra Narsimha @ Hampi
Next, we saw the beautiful Lotus Palace

Lotus Palace @ Hampi
and Elephant Stable

Elephant Stable @ Hampi
We saw many other places, what I have presented here are not even the highlights.  The history and monuments of Hampi have a lot to offer for everyone.

The rich history of Hampi and the sheer fact that there are so many ancient monuments (in great shape) at Hampi, makes it the Rome of India!  This whole trip filled our hearts with happiness and unforgettable memories of these fantastic places.  Next day, although very reluctantly, we had to go back to Bangalore and continue with our boring lives!

I hope you have enjoyed seeing the glimpse of these places as much as I have enjoyed visiting them! Here are the links (Part 1, Part 2, Part 3) to my previous posts that cover the entire series of North Karnataka - The Rome of India.

Friday, January 29, 2016

North Karnataka - The Rome of India - Part 3

In my previous post, I described what we saw at the historic city of Bijapur.

In this post, I will narrate what fun it was to see the beautiful caves of Badami Pattadakal and Aihole.

Day - 3 - Badami

We woke up early and decided to visit the famous cave temples of Badami since, it would be much easier to climb up during the early hours of the day.  There are 4 cave temples at Badami.

The idols and carvings are superb, it takes you back in the time when they were actually made.  So much effort would have been put to carve these beautiful sculptures out of rocky mountains.
Beautiful idols at Badami Cave Temples
Beautiful idols at Badami Cave Temples
Beautiful idols at Badami Cave Temples
 On the other side of the cave temples there is a beautiful lake.  On one edge of the lake you can see beautiful Shiva temple standing in all its glory.
Superb lake on the other side of Badami Cave Temples

Shiva Temple at the edge of the lake
Visiting the cave temples was an enchanting experience.  We then headed towards Pattadakal Temples.

Pattadakal & Aihole

You got to see this to believe it, this temple complex has many ancient temples which are very well kept.  Services of a guide are highly recommended here.
Temple Complex at Pattadakal
There are many stories carved out into these temples.  Entire Ramayana and Mahabharata have been carved on some stones.
Ramayana carved on stone
After Pattadakal, we marched on and reached Aihole to see the famous horseshoe shaped Durga temple.
Horseshoe shaped Durga temple at Aihole
The places we covered today were simply mind blowing, each one had rich history behind them.  The fact that they are all in this great shape after so many centuries, is just amazing.

Finally at about 1930 hrs we reached our hotel near Hampi.  After yet another amazing day, we were all very excited to see what Hampi has to offer us the next day!

Have some Fun!