WORK PROJECTS (RADIUS INTERACTIVE)
iSPY GAME (Kids, Edutainment)
I was the lead developer. Implemented the whole android application and communicated directly with the client for approvals, designing new features and proposing improvements.Â
This was one of the most challenging projects I did. AÂ great deal of customizations went into implementing the UI. I didn't use any UI controls library or game engine. Everything you see is built on top of Android's vanilla UI framework. Here I am presenting some of the challenging bits I implemented
CUSTOM TILES FOR MATCHING PAIRS GAME
This was a mini game within the game, where kids could play a game of matching pairs.
Custom Rotating Tiles
Game board was a grid of tiles. I implemented custom view that could be rotated with one side transparent and tinted and the other showing an image. Challenge was to display a tile that appeared transparent on one side and an image on the other. If I put an image it showed on both sides. StateListDrawable to the rescue as it allowed me to conditionally display 2 states of a drawable. I switched drawables when tile was exactly at 90 degrees so that user would not notice. To match a pair, user has to tap two tiles that revealed same image. Rotation animation was implemented along the y-axis.
State-Machine
The whole game was implemented using a state-machine, otherwise there were too many steps involved that a normal if-else style logic would have become too complex to manage. using a state machine enabled me to handle all the steps in a clean manner and as a side effect, it provided additional robustness against simultaneous taps on multiple taps on different tiles. State machine only absorbed first two taps and discarded the rest. I did not have to code this constraint explicitly.
STAR ANIMATION USING BEZIER CURVE
Users could collect stars when they found a landmark in the game. Client wanted to show a star animating from the action button to the top of screen. Since there could be different heights of screens a player might be using I needed an animation effect that could automatically scale to different heights and still look equally pleasing and consistent.
Bezier Curves
I used bezier curves to animate the position of the stars. Based on screen height I choose two control points, one on left and one on right of screen then drew a bezier curve from start position to target position.
Trailing Effect
The trailing effect was achieved by simply creating a new object at next position and scale its size to zero over the period. This way you could see a trail of stars that appeared to become narrower and pointy towards the end. To keep the memory usage at minimum I did not spawn a new star every time, instead I reserved a pool of 22 stars that I could reuse. As soon as a star's size become zero (not visible anymore) I added it back to the pool and available for reuse.
CUSTOM MAP CONTROL
To select content packs for different regions in the country, client wanted to present a map control to users. The challenge was that all the regions in the map had non-regular shapes like you see in a real map. Client wanted each region to be clickable and if a region didn't have content packs then it should be greyed out.
To create the map control I used a bitmap image of the map with each region filled with a unique color and a json file that encoded center point of each region as an offset from top-left of the bitmap to display the region name. I did a bit of image processing to detect taps in a region based on the unique color of the region, if color of the pixels in the tap area belonged to a region I highlighted it to show a click effect. Similarly to grey out regions without any content I used the unique color property of the region and replaced the pixels with a grey shade. This approach allowed me to turn any normal bitmap map image to an interactive clickable map control. The key factor was using a unique color for every region. This simple constraint enabled me to create the required solution.