HOMEBLOGFLASHCARD CLASH

Flashcard Clash
Drill your flashcards anywhere while battling monsters in RPG battles.
iPhone / Android / Windows / Mac / Web
Coming super soon!
Flashcard Clash Development Update 9
Adam C. Clifton
7 Apr 2017

This week I've been dealing with a lot of the boring busy work that comes with releasing an app. Things like making sure the app stores are correctly setup with all the game details and assets like icons at all the different supported resolutions. And I also got iOs builds working again.

This process took a bit longer than it should as I'm also developing a program that creates the iOs and Android project files at the same time.

Project files are define what source code gets compiled and what game assets go into the game. For Android Studio has one project format, while for iOs, Xcode has another. So when modifying the game, I'd need to manually edit both project files to keep them in sync.

Also with things like app icons, they need to be created at multiple sizes, this is a real pain to do manually, so our tool can also generate those from SVGs.

While Flashcard Clash is a gigantic game that will be ongoing for a while, I plan to release a lot of little games in the future. And with my custom engine and automagic project generation, that should streamline the process and make it easier to ship.

Meanwhile, Kristy and Ariane have been finishing up their work on the animations for the Pyromancer.

Concept page for the Firewall FX.

The test animation that we received from our animator.

The frames, ready for vectoring.

And the final Firewall animation.

That's all for this week. Until next time!


Read More
Flashcard Clash Development Update 8
Adam C. Clifton
31 Mar 2017

This week I finally set up the Adventurers skills so they actually work! Cheer now boosts everyones speed, and salve recovers health. I've also added skill cooldowns, so you can't spam the same move constantly, you now have to wait a few turns.

I also fixed a bug with player stats, previously they were stored as an 8bit unsigned integer, to reduce the download size, but that means the maximum number they can store is 255. So when i leveled my Adventurer too high, his strength went over 255 and wrapped back around to 1, so he was suddenly super weak! I'm now storing the stats in a 32bit unsigned, which gives a max of 4 billion. I don't think anyone will be power leveling that high anytime soon.

Kristy and Ariane continued their work from last week on the animations for the Pyromancer.

Concept page for the Fireball FX.

The test animation that we received from our animator.

The frames, ready for vectoring.

And the final Fireball animation.

That's all for this week. Until next time!


Read More
Flashcard Clash Development Update 7
Adam C. Clifton
24 Mar 2017

SOUND UPDATES

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.


ANIMATION FX

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:

  1. A description of the effect is provided to the animator (written, or detailed with visuals).
  2. The animator draws up the necessary frames to achieve the desired effect.
  3. These frames are converted into vectors (using Image Trace and the Brush tool in Illustrator) and exported into SVGs.
  4. The SVGs are imported into Spine to compose the final animation.

Let's have a closer look at these steps with the creation of the effects for Flash, Fireball and Firewall.


FLASH FX

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!


Read More
Flashcard Clash Development Update 6
Adam C. Clifton
17 Mar 2017

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!


Read More
Flashcard Clash Development Update 5
Adam C. Clifton
10 Mar 2017

This week I've been polishing things whilst Kristy wrapped up the App Icon for Flashcard Clash. But the big news is that Ariane finalized the animations for the Adventurer!

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.

"Invalid" Answers

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.

Hint Overload

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:

Skill Buttons

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.

App Icon

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!


Read More

Older Posts
© Numbat Logic Pty Ltd 2014 - 2017
Privacy Policy