This week Juhani Junkala came back with some new sounds for menus and the Adventurer. When adding them in game, I was reminded about how delayed the sound is in the web version of Flashcard Clash.
Sound is generated by the game engine and pushed out to the operating system to play, but in the web version I'm using an external library that helps simplify converting code to the web. The problem with this library is that when it takes in the sound from the game, it gets put into another buffer before then being pushed out to the web browser to play later. These extra steps were delaying the sound output a small amount, maybe 1/5th of a second, but enough to sound wrong.
So to reduce the lag time, I cut out the helper library, and wrote replacement code to directly output sound to the browser. It's mostly working well, although there are some issues with sample rate that currently make sound effects sound a little sped up.
The next issue I’ll need to fix in the future is that when the game does too much processing all at once, it might not generate the sound in time to push out, and when that happens there's a noticeable gap. But I’ll need to improve a few things before that can be fixed.
There were also some minor fixes to the fire goo animation that was not looping correctly and some card fixes.
Over the week we've been completing the effects (FX) that accompany the attack animations of the Pyromancer, one of our hero characters. These three attacks are called Flash, Fireball and Firewall.
Our process of developing the FX for these attacks goes as follows:
Let's have a closer look at these steps with the creation of the effects for Flash, Fireball and Firewall.
Here we begin with the concept sheet. I created this page to visualise how I would like the FX to appear in association with the character movement.
From there, our animator Ariane Lapointe works up a test animation. This ensures we're on the same page before proceeding with the final animation.
Once approved, the frames are exported as PNGs, and are ready for vectoring in Illustrator. The frames are easily converted into vectors using the Image Trace function and then the Brush Tool for small edits. The frames are then exported as SVGs. We do this is to reduce overall game size, allowing the game to run faster.
Below is a folder view of all the Flash FX frames, ready for vectoring.
Once vectored and exported as SVGs, the files are sent back to the animator, where they'll be composed in Spine.
Here's the final Flash FX, in two parts:
1 - The start of the animation, where the ball of light lifts from the Pyromancer's hand.
And, 2 – The flash effect that appears over the enemy monster.
After reviewing the final animation, we decided to opt for three flashes over the enemy. Here's the final outcome.
That's all for this week. Until next time!
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:
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:
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!
Look at how excited he is to be in the game! Unfortunately we havent created sound effects for him yet, so he's a silent protagonist at the moment.
Now after all the time spent setting up data in the back end, I now actually have something helpful in the front end for players. Cards can now be setup to refer to specific readings or meanings of cards, rather than the whole range of available options for that vocabulary. This means that cards can be more helpful with manga vocab as you'll learn the specific meaning or slang reading that will be coming up, instead of learning the formal reading and then having no idea what the slang is when you read it in the manga.
In addition to this, the card will still know all possible readings and meanings, so if you answer with one of those, it will let you know it's not the right answer and let you try again without failing the card. Currently it's just a boring dialog box, but hopefully next week we can art it up nicely.
The first time you see a new card, the answer will be given to you in the form of a faded hint at the bottom of the card. There was an issue tho, with cards having so many possible meanings that they overflowed the card, as you can see here:
Or as you may not be able to see as the hint answers are also shrunk down so much that you can barely seem them.
Now we've split those hints up and the card will rotate through them:
I've updated the skill buttons to have user friendly text instead of having the internal skill code.
One day we will have cool skill icons. But text is good enough for now to ship the game :P.
Here's a process gif showing the development of our app icon. There's a rundown of the steps involved below.
Sketch – A very rough sketch of the concept is drawn. (You can see the other concept sketches on our previous post here
Refined Sketch – The paper sketch is transferred and cleaned up on the computer using Adobe Photoshop. The concept is clarified and improvements in pose and composition considered. In this case, the flashcards were moved from the top right of the frame to the bottom left, improving the focus of the design.
Rough Colour – Colour is applied in variations to find a harmonious colour palette. While we looked at purple and red backdrops, we settled on blue as it produced contrast with the Adventurer character and tied nicely with the RPG battle theme. (These colour variations can be viewed in our Previous Update. The sketch was further refined at this stage too.
Final Artwork – At this final stage, the artwork is moved to Adobe Illustrator to create the graphics in vector. Once the vectors are constructed and colours applied, tweaks are made to tighten the design and ensure it's consistent with in-game art. And voila ~ the app icon is complete!
Here's the final app icon at various scales (as it will appear on different devices).
And with that, we're one step closer to releasing Flashcard Clash.
Next week Kristy will make a start on applying some tweaks and finishing touches to the game art assets. Stay tuned!
Here's what we got done this week on Flashcard Clash, a game that combines RPG battles with Japanese flashcards.
I've continued working on the data editing tools I've talked about in previous updates. It's finally coming together and I've been able to start editing cards with it. There's still a bit more to go, particularly in game, with supporting the extra data I've added to vocabulary and cards.
Kristy's art updates are a lot more interesting:
This week I continued developing the Flashcard Clash app icon.
App Icon – Logo Badge
First I started exploring how to present the Numbat Logic logo on the Flashcard Clash app icon. We'd established that the logo badge would appear on the bottom right corner of the app icon (this position best suited the icon designs) so now it was a matter of creating the badge shape.
To simplify the design and avoid legibility issues at smaller app icon sizes, I opted for using the logo alone, without the “Numbat Logic” logotype. From there I started building shapes that would house the logo while not fighting for attention with the app icon design.
Since the bottom right corner of the app icon is automatically rounded to approx 180 radius when posted on the Apple iTunes store, it really came down to how the top left of the logo badge would interact with the remaining app icon area.
I looked at various curves from full circles, to squares with rounded edges. How the logo stamp flowed back into the app icon edge was also considered, using perpendicular lines or rounded, concave curves.
The various design options can be viewed in the image below. They're presented in both white on orange and orange on white – the Numbat Logic colour palette.
At the end of this design pass, I selected the soft sloping badge shape with the slight concave curve (3rd column, bottom) to use in the app icon design process. Overall, this shape felt harmonious with the app icon, whereas the sharp edged shapes felt obtrusive and dominant.
App Icon – Sketches, Rough Colours & Size Testing
Continuing from last week, the rough paper and pencil sketches were transferred to the computer where they were redrawn and refined in Photoshop.
Here are the four cleaned up sketches.
After reviewing the designs with Adam, we decided to proceed with design #2 and #4 (top right and bottom right). The next step was to explore these two design in colour.
Since we're keeping in style with the in-game graphics, the colours of the Adventurer were already established. For the background I wanted to find colours that contrasted with the Adventurer (and flash cards) and evoked a sense of excitement and the RPG world.
In both designs, blue and purple stood out the most. The blue being reminiscent of the sky and journeying through RPG worlds. Purple relating to magical elements and a colour that frequently appears in game.
The next step was to test our favourite colour schemes to see how they would appear at various icon sizes (48px, 72px, 96px, 144px, *192px, *1024px).
*192px & 1024px are not pictured below.
We couldn't pick a clear winner, so I'll be proceeding with the vector stage and see if one stands out then.
Characters – Setting Up the Pyromancer
An extra side project for the week was helping set up the Pyromancer character for animation and creating a couple of additional assets.
When creating the vector assets of a character, it can be difficult at times to tell how well the parts will convert into animation. This requires some trial and error, and collaboration between artist and animator.
In this instance, the Pyromancer's fireball attack didn't quite translate well, leading to a broken model in the second key pose. Thanks to our animator, Ariane, for supplying screenshots of the Pyromancer setup in Spine, I was able to provide draw-overs to adjust and (hopefully) fix the broken pose.
The draw-over helped me to discover the need for an additional hand to indicate 'letting go' of the fireball in the throwing pose. So I quickly vectored that up for Ariane to use.
Here's how the new hand will look in action, following on from the original hand that 'holds' the fireball.
And that's all for this week!
Here's the next development update for Flashcard Clash, a fun game to help study Japanese. This week I’ve been super busy with other stuff, but luckily Kristy and Arianne have been working away.
Currently the editor, which you can see in last week’s post, as a simple side menu and a main editor that lets you edit one thing at a time. This works well enough, but there’s a bit of jumping around when creating new things.
For example, to create a new monster, you need to first head to the skills section to create their skills, and then go to the monster editor to assign those to the monster. This was going to get even more complex with vocabulary cards, as we’d need to create the vocabulary, attach it to a card and then attach that card to a deck.
My solution to this is to change the editor into a ‘stack’ of windows, so that instead of having to travel to different sections of the editor to create different things, we can just push the window for doing that onto the top of the stack. And when you are finished, pop that window off and go back to what you were doing.
So for example with creating a new monster, instead of having to pre create the skill in a separate section, we can just push the window for that on top of the monster editor, then when we are done, just close that window and go straight back to editing the monster.
It's still a work in progress but hopefully I can finish that all up next week and ship out some new decks.
Today we'll also be introducing the art segment to our weekly Flashcard Clash Development Updates. The art segment will take a look into what we've achieved over the past week in the visual development and production of Flashcard Clash.
Kristy Kate, lead artist and art director of Flashcard Clash will take the reins from here:
Hi there! This past week (or two) have been focused on preparing the app icon for Flashcard Clash and assisting our animator Ariane wrap up the final animation for our first hero character, the Adventurer.
The Flashcard Clash app icon is the first artwork visitors will see when browsing for apps on the Apple iTunes and Google Play stores.
It's important for app icons to be clear and easy to identify, so when approaching this design, I knew there would be 3 points to convey:
Clearly, flash cards, Japan and the excitement of RPG battles had to take precedence when choosing what elements to portray in the app icon.
It was also decided that it'd be worth including a stamp of Numbat Logic's logo in the bottom right corner to establish consistency between future apps.
So, I set off brainstorming and sketching ideas for the app icon. As seen in the images below, I went for quite a direct visual approach, incorporating flash cards, a sword (RPG element) and the Japanese flag into the design concepts.
Some of these would be quite clear in establishing that Flashcard Clash is about learning Japanese with flash cards, however the feeling of excitement and adventure from RPG battles wasn't as strong as we would have liked.
The turning point came when I decided to explore the interaction between the sword and flash cards, changing the flash card to the Hiragana character あ (transliteration 'a'). Eventually this lead to pulling the main hero character, the Adventurer, into the mix. This gave the app icon a greater feeling of action and excitement and sent a clearer message of the connection between Japanese flash cards and RPG battle.
From here we marked out our favourites (indicated with blue dots) and I have now transferred the sketches to the computer to start the process of refining and clarifying the designs.
To be continued!
Adventurer Spirit FX
My other task for the week involved finalising a segment of fx animation to play alongside the “Defeat” animation when a character (in this case, the Adventurer) is knocked out.
This proved to be a great lesson in improving my art direction skills as I had an image in my mind of what would happen, but didn't quite explain it to Ariane, our animator, in the best manner.
When the character was knocked out, I thought it would be fun to use a popular visual trope found in anime and manga, where the spirit (or soul) of the character leaves their body and lingers around. TV Tropes calls this “Giving Up The Ghost” if you'd like to know more.
With that in mind, this is the art direction I provided:
And the description: Little spirit “smoke” effect rises up from head.
Not the clearest of descriptions (sorry Ariane!). Ariane got to work and sent me this nifty little rough animation of the spirit rising from the knocked out Adventurer.
Despite the awesome work, unfortunately it wasn't what I was looking for, which is where I learned that I had to get specific when I had a very specific image in mind (it's not like we're mind readers!)
So I created these sketches and sent them back along with a much clearer description and a few animated gifs from anime I found online.
I received the revised rough animation from Ariane and voila, perfect! The frames have now been vectored and they'll soon be compiled into the final animation.
That's it! That's what happened this week!