Flashcard Clash Development Update 6

This week has mostly been spent playing around with code on Android so there isn't a lot of pretty stuff to show.

Most of the time as been playing with integrating AdMob so I can integrate some ads and start stacking that mad app money. Which is a bit of a pain in general, as the AdMob API isn't as friendly to programmers as it should be, and also because the game is written in C and the Android stuff is written in Java, a lot of time is spent trying to communicate between the two.

Before getting into that, I should first explain how our games are written and how that relates ot Android. Flashcard Clash is written in C but could just as easily have been written in C++, these languages are pretty low level and are compiled down to instructions the CPU runs directly this makes them fast. These languages are also widely supported so they can be compiled to run on everything.

Android runs Java, it's an interpreted language, meaning that it does not run directly on the CPU, there is a program in between that takes the Java code and outputs commands to the CPU instead. This means that Java is slower than C, but it's also safer as the in between program can catch problems like memory leaks.

Now those two languages are in conflict since they are running in completely different ways, but luckily the people who made Java foresaw this and created the Java Native Interface, or JNI. The JNI, with a bit of manual effort, allows C code to call Java functions and Java code to call C functions. This allows us to create a bridge between the game code and Android specific things, like input and AdMob.

Calling between languages can be a bit painful with a bit of repetitive code and issues with calling things on the correct thread. So once I was able to get AdMob working somewhat in Java, I spent a bit of time creating a wrapper to make it more straightforward to call between the languages.

So after all that effort I have something no player is excited to see, Ads. But don't worry, I won't be a jerk about it, and I'm also looking forward to adding stuff like getting game rewards for watching ads.

GAME ART TWEAKS & ADDITIONS

This week involved making a few simple tweaks and additions to niggly design elements. Here are the changes made:

1/ Edited the title screen background
During the development of a game, it's not uncommon to create quick placeholder art to fill in the gaps until a better piece is made. The sky background featured on the title screen was one of them, and oh, have I been eager to fix this one up!

In this case, it was the sun rays. They were a quick effect made in Illustrator to indicate a radiant sun, but they really lacked the 'oomph' we needed.

Here's the Before:

See: sad, weak, little sun rays.
So I beefed them up, thickening the rays and increasing the vibrancy of the sky.

Here's the After:

Much happier!

2/ Made an “About” (credits) button for the main menu.
Turns out we didn't have an About button on the main menu to access details about the Numbat Logic team behind the game. So I set off to correct this.

It was decided that we'd use the Numbat Logic logo. Here are a few different options I tested:

And here's the final design we went with, sitting with its other button buddies on the menu screen.

3/ Created tool tips for the flashcards
An issue we'd run into during user testing was gamers not knowing when they were required to type in an answer to the flashcard as opposed to selecting a multiple choice button. This was fine on phones as the keyboard would pop up, but on desktop versions that visual aid did not appear, leading gamers to believe the game had crashed.

To resolve this problem, we decided to implement tool tips; prompts that would pop up after a few moments of inactivity. These tool tips would be handy for another potentially confusing problem – gamers entering a valid answer to a flashcard, but not the answer we're looking for (some Japanese characters can have different meanings depending on the context).

For this, two tool tips have been made. A general tool tip (grey) version and a 'Try Again' (green) version.

You can see the tool tips on the screen mockups below:

And lastly,
4/ Created a “Card Explanation” set of buttons
Since Flashcard Clash is a game for memorising the characters of the Japanese language, it made sense to implement a way for gamers to find out more about a new flashcard when it pops up, plus give them the ability to check back over that card after they've answered (and before the next card comes into play).

For this function, I created a set of two buttons. One to appear on the flashcard itself and a second for the top right of the screen (once the flashcard is closed). Below is a mockup of these button options.

We've opted for the teal coloured circle with a question mark button on the flashcard (seen in the left screen mockup) and the mini flashcard with the question mark button (seen in the right screen mockup). The mini flashcard will likely feature the character of the card that was just viewed, and the circle backdrop coloured teal.

And that's all for this week. Until next time!

Previous: Flashcard Clash Development Update 5
Next: Flashcard Clash Development Update 7