Gengo Girls #20: Priorities

Gengo Girls #20: Priorities

If your main goal is to speak and listen to Japanese the kanji probably aren’t a big deal. But if your goal is to read Japanese the sooner you learn how to use a kanji dictionary the better. Being able to look words up on demand is a lot easier than having to memorize 2,000 kanji before even thinking about reading your first Japanese comic or news article.


言語ガールズ #20


Blue: Alphabetic dictionaries are useful when you know how a word is spelled.

Blue: But what if you needed to look up a word based only on its kanji, or symbol?

Yellow: I would ask you.

Blue: What if I wasn’t here?

Yellow: I would wait until you showed up.

Blue: What if I was dead?

Yellow: I’d be too sad to care about a dumb kanji.

Blue: Well, if you did want to look up a kanji, you could use a kanji dictionary.

Yellow: Why would you be dead anyways?

Blue: Kanji dictionaries organize Japanese symbols by things like the number of brush strokes in each kanji. They’re really useful.

Yellow: Was it the lizard-clones? Did you know too much about their plans?

Gengo Girls #19: Be Prepared

Gengo Girls #19: Be Prepared

I won’t lie; Electronic dictionaries are incredibly useful. I personally use for 99% of my Japanese needs and only break out my physical dictionary on those rare days when I’m tired of staring at a computer screen and need to give my eyes a break.

Still, knowing how to alphabetize words is a useful skill. You never know when you’ll need to do something low-tech like find a book in an alphabetized shelf or look someone up in a company registry.


寒い = さむい= cold


言語ガールズ #19

Be Prepared

Blue: Why don’t you try your dictionary skills by looking up the word さむい?

Yellow: Let’s see… It starts with an “S” sound which comes after the vowel and “K” sounds, so that’s the third section of the dictionary.

Yellow: あいうえおorder means that is the first S sound, so I should focus on the beginning of the “S” section.

Yellow: Next is. “M” sounds are near the middle of the Japanese alphabet, so さむいshould be in the middle of the words.

Yellow: comes after and so… Here it is: さむい means “cold”.

Blue: That wasn’t so bad, was it?

Yellow: Typing SAMUI into an electronic dictionary would have been faster.

Blue: But… umm… what if you need to look up a word during a power outage? That coul happen, right?

Yellow: Good point! I might need to talk to with a samurai during the zombie apocalypse.

Gengo Girls #18: Method Acting

Gengo Girls #18: Method Acting

For anyone too lazy to look it up on their own, the order of the hiragana groups is: Vowels, K, S, T, N, H, M, Y, R, W. Congratulations, you can now alphabetize in Japanese.

A lot of Japanese-to-English dictionaries actually spell the Japanese words with the Latin alphabet and Latin alphabetization. So you would look up “neko = cat” under “N” instead of looking up “ねこ = cat” under .

As a beginner a Latin alphabet dictionary will probably seem easier to use, but I strongly suggest getting a hiragana based Japanese-to-English dictionary instead. Forcing yourself to use Japanese characters is tough at first but will help you master the hiragana. It will also prevent you from accidentally mixing up English and Japanese pronunciation rules. It’s just too easy to see a word like “are” and immediately think of how you would read it in English instead of how it should sound in Japanese. That’s also why this comic has been using hiragana since the very start. In the long run it really pays off.


言語ガールズ #18

Method Acting

Yellow: Now that I’m dressed properly learning 日本語 should be easy.

Blue: That’s why you’re wearing that?

Yellow: To speak like the Japanese you must dress like the Japanese.

Blue: If you say so…

Blue: Anyways, today I wanted to talk about dictionaries.

Yellow: What is there to talk about? They’re just big lists of alphabetized words and definition.

Blue: That’s true, but 日本語 has different alphabetization rules than English.

Blue: For example, their vowels are organized あいうえお instead of A E I O U.

Blue: In fact, each letter group follows the sameあいうえお pattern. So for the “K” sounds the order isかきく け こ.

Blue: So if you remember the あいうえお pattern and the order the letter groups go in you’re done.

Yellow: I guess I’d better go find a hiragana chart to study.

Let’s Program A JavaScript Game 6: When Worlds Collide

Mom! He’s Touching Me!


Now that I think about it, none of my childhood family vacations ever involved the classic game of “How much can you invade your sibling’s personal space before they try to get you in trouble with Mom”. I feel deprived.


Anyways, this week’s topic is collision detection: the art of figuring out when two virtual objects are touching each other or overlapping. This is a very important element of game programming and really comes in handing when you need to know things like:

  1. Is the player standing on solid ground?
  2. Did the player just run into an enemy?
  3. Did the player just touch a power up?
  4. Is the player trying to walk through a wall?
  5. Did the player jump high enough to hit the ceiling?
  6. Did the player’s bullets hit an enemy?


Without collision detection a videogame would just be an interactive piece of art where you float around a world without physics watching things happen more or less at random. Which actually sounds kind of cool now that I think about it but that’s not what we’re aiming for right now.


Simple Collision Detection


We can’t detect if two objects are touching each other without two objects to touch. And no object is easier to work with than a rectangle which can be represented as a single x and y coordinate (representing the upper-left corner of the rectangle) along with a width and height.


//Sample Rectangle Code: Don't Put In Your Game
var testRect = new Object();
testRect.x = 5;
testRect.y = 20;
testRect.width = 10;
testRect.height = 30;


Now if we build two objects like this we can test if they are touching or not with this neat little math function, which is logically equal to this function from Wikipedia.


//Test if two rectangles intersect
//Arguments are two objects which much have x, y, width and height variables
function intersectRect(r1, r2) {
   return !(r2.x > r1.x+r1.width ||
            r2.x+r2.width < r1.x ||
            r2.y > r1.y+r1.height ||
            r2.y+r2.height < r1.y);


This function runs four quick tests that can each prove that the two rectangles ARE NOT touching each other. The first line tests if the second rectangle is too far right to touch the first rectangle. The second line tests if the second rectangle is too far left to touch the first rectangle. The third line tests if the second rectangle is too low to be touching the first rectangle and finally the fouth line tests if the first rectangle is too high up to be touching the first rectangle.


If all the tests fail then the second rectangle must be touching the first rectangle and the function overall returns true. Come up with a few samples and run the logic by hand if you like. It’s not like this articles going anywhere.


How Many Hitboxes Does One Character Need?


With that function we have everything we need to tell when rectangles collide. Now all we have to do is wrap all of our game graphics inside of invisible rectangles and it’ll be easy to tell when the player is running into enemies or crashing into platforms.


These invisible rectangles are called “hitboxes” and they are a vital game 2D* programming trick.


But there are certain problems with having your entire character represented by just one big hitbox.


For example: Imagine You detect that your one-hitbox character has run into a one-hitbox floating block. What happens next should depend on what direction the character hit the block from.


If they collided with the block from above they should land on the block and treat it like ground.


If they collided with the block from below they should stop moving upwards and instead start falling down.


If they collided with the block from the side they should stop moving and then slide downwards.


But since the character has just one big hit-box it’s really hard to figure out what kind of collision just happened. All you know is that the character and the block are touching; you don’t know where they are touching or what part of the character hit the block first.


There is also the big issue that giving a character one big hitbox usually creates a hitbox that is larger than the character’s graphics. This can lead to frustrating scenarios where the player winds up dead because an attack hit the blank space near his character’s head. It looks like it shouldn’t count as a hit but it’s inside of the invisible hitbox so it counts.

A Diagram Of A Robot With One Hitbox

One Hitbox Per Character: Simple But Flawed

So one big hitbox makes it hard to tell exactly what is going on with your character and can lead to frustrating collisions for the player. This is a problem!


The simple solution is to give each character multiple hitboxes for different logic.


Some common hitbox types include:


Death box: A small, central hitbox for checking whether attacks hit the player or not. By making it smaller than the character graphics we give the player a little wiggle room and avoid the “phantom hits” we would get if the hitbox covered whitespace.


Bonus Box: A large hitbox that is used for detecting whether the player has touched bonus items or not. Slightly larger than the player so that they can grab coins and power ups just by getting really close without having to worry about exact pixels.


Feet Box: A short but wide hitbox used for detecting whether the player is touching the ground. We put it in the bottom center of the sprite.


Head Box: A short but wide hit box used for detecting whether the player has just bumped his head against the ceiling. We put it at the top center of the sprite.


Side Boxes: Two tall but thing hit boxes used for detecting whether the player has run into a solid obstacle. We put them on the left and right sides of the player.

A Diagram Of A Robot With Multiple Hitboxes

Multiple Hitboxes: Much More Elegant

Hitboxes For Defrag Cycle


So how many of those common hitbox types doe we need for our game? Let’s see…


We need to be able to jump from platform to platform, so we’re going to need some sort of “foot hitbox” running along the bottom of the motorcycle.


We need to keep track of when the player runs into a virus and loses, so we’re going to need a small “death hitbox” in the center of the motorcycle.


We want to give players bonus points for grazing viruses, so we’re going to need a large “bonus hitbox” that’s actually a little bit bigger than the motorcyle. When a virus is inside this box but outside the “death hitbox” is when we give graze points.


We want players to be able to jump through platforms from below to land on top, so we DON’T need any sort of “head hitbox”.


The game has no walls, so we don’t need any “side hitboxes”.


So our final hitbox model for debug cycle has three hitboxes and will look something like this:


Hitbox Diagram For A Motorcycle

I think this should work


From Theory To Practice


Not a lot of code today, but that’s OK because we’ve laid down the groundwork we need to actually do some collision detection next time. Maybe throw is some gravity and get the player’s motorcycle to actually jump between platforms if I have the time.



* 3D games have a similar collision technique based around wrapping things with invisible cubes, cylinders and spheres.

Gengo Girls #17: Scholastic Stereotype

Gengo Girls #17: Scholastic Stereotype

Remember that 何です is pronounced “nan des” instead of “nani desu”, probably due to a phenomenon I have dubbed “The Efficiency Slur”.

My guess is that most people hate using more syllables than they have to, especially for very common words and phrases. So they drop a few letters, slur a few sounds together and suddenly everyone is going around saying “It’s” instead of “It is” and “nan des” instead of “nani desu”.

So here’s a fun project for any really bored linguists out there: Calculate how many syllables the average person “saves” by using contracted words. I’m betting the savings from “It’s” alone will be enough to add an entire day to my lifespan that would have otherwise been wasted on two syllable “It is”.


制服 = せいふく = uniform, usually a school uniform


言語ガールズ #17

Scholastic Stereotype

Yellow: おはよう

Blue: それは何ですか

Yellow: これは制服です

Blue: I can see that it’s a 制服. But why are you wearing it?

Yellow: It IS a school uniform, isn’t it?

Blue: It’s a JAPANESE school uniform! This is an American school.

Blue: We don’t wear uniforms. I’m not even sure we have a dress code.

Yellow: Then there aren’t any rules saying I can’t wear a 制服 to school, are there?

Gengo Girls #16: Curiosity Killed The Cat

Gengo Girls #16: Curiosity Killed The Cat

Don’t you love it when a foreign language has easy grammar? Just add one syllable to the end of a sentence and it’s a question. No messy conjugations or word rearranging. Of course, not all Japanese grammar is this simple so enjoy it while you can.

Although to be honest I wouldn’t call any part of Japanese grammar genuinely “hard”. It’s mostly just “different”, which can make it seem harder than English related languages like Spanish or German.


= ねこ = cat


言語ガールズ #16

Curiosity Killed The Cat

Yellow: My grandpa always said “The only dumb question is the one you don’t ask”, but I don’t know how to ask questions in 日本語.

Blue: It’s easy! Just add to the end of a sentence and it turns into a question.

Blue: For example: それは猫です means “That is a cat.”

Blue: But それは猫ですか means “Is that a cat?”

Yellow: So the is like a spoken question mark?

Blue: That’s a good way to think of it.

Yellow: I wonder what a spoken question mark would sound like in 英語

Yellow: Maybe something like “?”

Blue: How did you even make that sound!?