• Register

Learn Hiragana and Katakana by fighting monsters in RPG battles.

Post news Report RSS Flashcard Clash Development Update 4

Here's what we got done this week on Flashcard Clash, a game that combines RPG battles with Japanese flashcards.

Posted by on

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.

20170303 01 App Icon Design Numb


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.

20170303 02 App Icon Design Sket


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.

20170303 03 App Icon Design Colo


20170303 04 App Icon Design Colo


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.

20170303 05 App Icon Design Scal


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.

20170303 06 Pyromancer FireballP


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.

20170303 07 Pyromancer FireballP

And that's all for this week!

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: