Archives for posts with tag: Katakana

Hi all, welcome to the Kana Quest Devblog. This week I’ve been working on making Kana Quest a new logo. Now I’m not going to show the new logo here until it’s 100% done and its been submitted for its trademark application. But I am going to talk about some of the issues I’ve had with the original logo, why pixel art logos are so hard to make, and some of the visual language I’ve learned this week.

Original Logo Issues:

So, lets have a quick look at the original Kana Quest logo. And go over why I’ve concluded this isn’t a very effective logo.

KanaQuestTitleScreenImg

  1. It doesn’t have a clear and readable silhouette. English speakers are strange as most of our ability to quickly identify words come from a word’s silhouette. Because this does not have a clearly visible shape, it is really hard to read at a distance. Give it a try now, stand back from your computer or phone and try read this logo. You probably can’t it all just appears as a blob of different colors.
  2. It is massive in terms of pixel usage. This logo is not small. and it is not scale-able to smaller sizes. The problem with this is that many store fronts have strict specifications of how big your logo can be. And quite simply, the old logo will not fit those specifications. Not matter how hard I try I will never get this logo to fit into a 231×87 pixel image (the smallest image size used in Steam). Also the fact that the logo is less readable than the “press any key” sign under it is all the more damning seeing as how many more pixels it was given to work with.
  3. You need to speak Japanese to read the full title. Seriously, you would think I would have picked up on that problem when I made this but hey.
  4. Contains very little Japanese visual language elements. I’m not talking about the letters here, I’m talking about the visual features and bits of visual language that are often utilized in Japanese logo making. If I had used these elements then they would infer to the viewer that this game has something to do with Japan even before they see the Japanese written.
  5. Very little contrast to guide the viewers eye. So generally speaking we will focus on the part of an image that has the most contrast in value. If you don’t know “value” is how light or dark a color is.  Look at the greyscale version of the image, there is more contrast in the background that there is on the actual logo. So you spend most of your time looking at the wrong thing.logogreyscale

Things to Do/Not Do When Making Pixel Art Logos:

So, the original logo is bad. Really bad. But if you were thinking making your own Pixel Art Logo what are some things should you do and look out for?

  • This is an obvious one, but I genuinely didn’t do it when I made the first logo; Look at lots of other logos. Find logos with the same the feeling that you want to evoke in your viewer. What are the common elements between those logos? What’s different? How do those differences affect the feeling you get from the logo? Once you’ve done that borrow those common elements and use them in your own work.
  • Draw a bunch of logo’s on paper before you start. I made the first Kana Quest logo going straight into pixel art. This was a mistake. Its really hard to effectively try out ideas when you are drawing within the a constraints of pixel art. Below is a logo I made sketching straight into pixel art within Photoshop. While it is better than the original logo, its honestly half as good as some of the warm up sketches I did in paper this last week. If you find it easier to sketch digitally than physically then do that instead, but do some non-pixel art sketches first.

AnimatedLogo1Gif

  • Beware of overlapping shapes (for example overlapping letters). This is less dire if you have more pixels to work with, but overlapping shapes require a lot of defining so the viewer can easily process what’s on top and what’s underneath. And if you are using pixel art, you might not have the pixels to do this. This isn’t a “avoid at all costs” rule, but it is something to be careful of while you are sketching (Also you might notice that I have overlapping letters in the original logo, and it just makes things harder to read).
  • Check that your logo looks good on many different backgrounds. Its fine to have a background color that makes your logo “pop” the most, but if it looks bad on flat black, white or grey there is a good chance you’ve made a mistake.
  • Don’t go with your first design. Seriously, don’t I don’t know why I decided I thought it was a good idea to do so for the first Kana Quest logo, but it was a terrible idea. Don’t fall into that trap.

 

Japanese Logo Visual Language:

So while I was doing research for my logo this week I wanted to figure out what were  the most commonly used pieces of visual language used in Japanese game logos. And I ended up identifying three common elements (all of which I’ve utilized in my new logo). And of course, not all Japanese game logos use these elements, but a very large amount do. And they use these elements more often than western games.

To this end, look at the Japanese logos for Pokemon Sun and Moon. These logos are great for demonstrating three aspects of design that are common across a large amount of Japanese game logos.

JapaneseGameLogos.jpg

So the common elements are as follows.

  1. Letter Stroke Border:  So most logo’s will have some form of border around the title text of the game. These borders have a large amount of variation depending on the type of game. The width, the roundness/sharpness, the color and shading of the border are all important of communicating the game’s identity. The reason I bring this up as a feature of Japanese visual design is that it is far more common for there to be no border around the letters in a western game’s logo. For example the logo of Skyrim has just the plain text and no border. Or you could look at Dark Souls: A Japanese game that has a deliberately western looking logo by omitting the letter border.
  2. Subheading: While not as commonly used as the letter border, this is a far more commonly used aspect of design than in western games. The most common use of the subheading is to write the name of the game again in a more easily readable text. Often games with a name written in Kanji or English will have the name written out in subheading in Katakana or Hiragana for this very purpose. Another common use is a brief description of the game or as a visual ” : “. The main variations between subheadings are the placement, and font differentiation. Also subheadings are way more likely to forgo a Letter Border than the main logo.
  3. Visual Flourishes:  These are the least distinctive to Japanese logo design when compared to the first two, but they are an important part of the design. These flourishes are often incorporated into the Title’s letters and often use something emblematic of the game (see the pokeball and the Lunala/Solgleo symbol in the Pokemon Sun/Moon logo).

 

Anyway, that’s all there is for this week. I look forward to being able to show you the new logo when its safe for me to do so, but until then have a great week!

 

Advertisements

Hey, so you’ve stumbled onto my blog somehow. And probably you landed on a page about my game project Kana Quest. This is because for as long as I’m making Kana Quest I will be uploading a devblog of my process. However most of the devblogs are not great for anyone who doesn’t know what Kana Quest is…. which is you know…. most people.

SO! This is a quick primer on what Kana Quest is, and how it works.

KanaQuestTitleScreen.gif

So what is Kana Quest? Kana Quest is a puzzle game that’s a cross between dominoes and a match-3 game that teaches the Japanese Alphabet (Both Hiragana and Katakana). It will be released on Mac, PC, Linux, Android and iOS.

It is an educational game, but it is being designed to be a fun puzzle game first. This way, people who already know Japanese can still play and enjoy the game. Another key feature of Kana Quest is that there are no pop quizzes. A lot of educational games lean heavily on game-ified versions of school tests in the hopes that no one will notice.
KatakanaDemoThe main gameplay of Kana Quest revolves around Kana. The word Kana comes from the names of the two Japanese Alphabet; Hiragana and Katakana and basically means letter. In Kana Quest, the Kana have been brought to life and want to make friends. Its the player’s job to help them find their friends. Two kana that are next to each other will be friends if their names/pronunciation share a sound. So for example か (Ka) and な (Na) will be friends because they both have an “a” sound. The same is true for か (Ka) and く(Ku) because of the “k” sound. Once you know which Kana can be friends, you need to make a friendship group that includes all Kana in the level.
LevelDemo2For example. This level starts off with every Kana having at least one friend. But because these friendships don’t connect all the Kana into one group the level is not complete.

This gif also shows a couple of other important details. The flashing lines between Kana show that they are friends, and a sound matches between them.

 

Finally a quick description of the different mechanics currently in the game.

Blank Tiles: These can be seen in the above gif. These cannot match, but can be moved freely.

Stone Kana: Stone kana will match with other kana and must be included in the final friendship group but can not be moved. They have been turned to stone, you see.

MysteryTileDemo2Mystery Kana: These enigmatic Kana are hiding their true face. But their true identity is given away by who they become friends with. Unfortunately Kana who are hiding their true identity are not truly happy and must be unmasked before the level can be complete.

Slime Kana: Slime Kana do not have any consonants in their names. Slime tiles cannot move.But they can merge with other Kana. When they merge they change the vowel of any Kana they merge with. Slime Kana cannot match, but they are happy to help other Kana find their friends.SlimeTiles

And that about covers it. This primer will likely but updated over time as new content is added. If you have any questions please feel free to comment, and I’ll get back to you asap!

 

So this week had one task. One job that had to be done. It was long, it was boring, it was tedious. It was implementing Katakana into Kana Quest.

Why is implementing Katakana such a chore I hear some of you wonder. Well simply because implementing each Katakana has a bunch of steps that are not at all interesting and when you times those steps by 46 (the number of kana) things get very boring very quickly.

So the pipeline is as follows.

  1. Create the sprites. (We talked about this last week as I was most of the way through making the Katakana Sprites at that point.)
  2. Set the image setting for each sprite.
    1. This isn’t too bad what I have to do is tell unity how it should process each sprite. How big the image is (pixels per unit), its filter type (point filter as bi-linear and tri-linear make pixel art look awful) and if its a single or multiple sprite image. Now all of the above I can do all in one go by selecting all the files at once, but below I have to do one by one, because Unity wont allow me to do this in batch. Finally I have to set the sprite size for multiple sprite Kana. So for each Katakana I had to go into the sprite editor and tell it to divide my sprite sheet how I wanted it divided.
  3. For each kana make an animation using the unity animation system.
    1. For the stone tiles this is easy. They are just one frame so its just a matter of dragging and dropping the image into a new animation. For the normal tiles this takes a while longer because I have to copy the animations seen on the Hiragana Tiles. But the big annoying part of this step is that I have a LOT of animations on the one object now. So much so that they don’t all fit on screen so adding a new animation took about three seconds of scrolling down the animation list before I could get to the “make new animation” button.
  4. Add those animations to the animator of the tile object, and then set up the logic of when to play those animations.
    1. So putting the animations into the animator is easy. Select all the files you want and drag them onto the animation screen. Setting up the logic has to be done one by one and is really tedious. Right click from where you want the tile to transition from and to (from all to each individual animation in this case). Then click the arrow that comes up and create the parameters controlling the animation. In this case, what is the tile’s hiragana number? Is Katakana enabled? And is this a stone tile or a normal tile. Rinse and repeat 92 times.
  5. The last step is to add a control for turning Katakana off and on. This was the last and easiest step. Now if the player presses ctrl+shift+k in game katakana will be toggled on and off.

And that’s the process. Since you got through all the technical stuff your reward is some gifs! Enjoy!KatakanaDemo

SoneKatakana

Another week another update. This week has been kinda slow. This is partly because I’m still slightly recovering from AVCon. The other reason is this week I’m working from home and I always find a way to goof off when I’m at home. (This would be why people have work studios).

That said I do have some fun stuff to show off. The first thing which I am personally most excited for is the background art of the second world!ParralaxTest2GIF.gif

So I am super happy with how this turned out. The biggest thing that is different between this art and the tutorial background is that this has been designed to not be a static image. I drew each part of this background on nine separate layers that will repeat. The reason I have done this is because for each world I want to be able to add as many levels as I want without needing to redraw the art. This was a problem I noticed vary quickly from the first background: that it was drawn for a specific number of levels. If I need to change that number later on, making my backgrounds this way will allow me to do so. So now onto some of the artistic decisions with the piece. So this piece is set in summer following on from the last background that was set in spring. The rice in the foreground is a dead giveaway for this. A couple of other fun things about this piece is that it was inspired by the town I used to live in (Asago in Hyogo Prefecture). Lots of stunning mountains, rice fields everywhere, and ever so slightly worn down buildings. A couple of small details on the buildings is on the announcement board I wrote “テオドの” which basically means “This is Theodor’s”. Yes I am capable of being that vain.

Next up is Katakana. Katakana is one of the three writing systems in Japanese. All the gifs and images shown previously have been of Hiragana. Hiragana and Katakana (mostly) produce the same sounds, but Hiragana is used for native worlds whereas Katakana is used for foreign words. I have planned to have Katakana in the game for a while. The reason is that mechanically they will operate the same as Hiragana and A LOT of people forget their Katakana. So usually what happens is folk spend a lot of time learning Hiragana, then they get to Katakana and are just sick of rote learning letters. So it was simply a matter of when I found the time to implement it. Its not particularly hard to put in, just time consuming. But the first step is getting the Katakana sprites done.

 

Well as of this week I have all the Katakana versions of the normal and slime tiles ready to go. Not gonna put them all up in the blog post because that just takes up space for no real reason. Haven’t got them working in game yet, but the sprites are done so that is one big step to implementing it.

The way it will work in game once implemented is the player will choose Hiragana or Katakana from the options menu. Then all puzzles will appear as they normally would with the selected letters. This way the player can practice the one they want freely.

Ok. That’s me for the week. I’ll see you all next week. Take care.