Gengo Girls #117: Avalon

Gengo Girls #117: Avalon

Obviously a lot of kanji are based on oriental cultural ideas. Chinese architecture, eastern mythology, rice fields and bamboo, etc…

While this undoubtedly helped the original inventors of the kanji remember what each symbol meant it isn’t nearly as helpful to those of us who grew up in the modern West.

Which is why sometimes it’s best to ignore the real history of a kanji and come up with your own interpretation of what it looks like instead. After all, as long as you accurately remember WHAT the kanji means it doesn’t really matter HOW you remember it.

Transcript

言語ガールズ #117

Avalon

Blue: Some kanji represent abstract ideas instead of physical objects.

Blue: Working with these requires a little more imagination.

Blue: One popular way to remember the kanji for “early” is to think of it as a flower that blooms early in the day to soak up the sun.

Blue: And for this “old” kanji I like to think of an old fashioned church with a giant cross on the roof.

Yellow: Looks more like a sword in a stone to me.

Blue: As long as you remember “old” it doesn’t matter if you imagine an old church or an old sword or something else entirely.

Yellow: EXCALIBUR COME FORTH!

Let’s Program A Javascript 19: Cross Browser Chaos

Forgive me readers for I have sinned.

I wrote this entire series of articles using nothing but Firefox on Linux to test my code. Only now that we’ve reached the end of the project do I notice that when you try to open it with anything else it crashes.

I should have prevented this by testing every code update on multiple browsers like a good software developer, but late is better than never so let’s get this working in all browsers.

fastSeek Was A Bad Idea

You hopefully remember that we use the Audio class function fastSeek to rewind our background music and sound effects. Game over? Reset the music with fastSeek(0). Did the player stop grazing enemies? Reset the grazing sound effect with fastSeek(0).

But it turns out Firefox is the only browser that actually supports fastSeek. Every other browser will throw an error if you try to use it. So if you open Defrag Cycle in Chrome the whole game will freeze up the first time a sound effect has to reset itself because you either died or stopped grazing.

What other browsers prefer is for you to directly manipulate the currentTime variable inside of each audio object.

So instead of :

bgMusic.fastSeek(0);

We need to do:

bgMusic.currentTime=0;

This also works in Firefox, so just replace all the fastSeek instances in your code with currentTime and you are now cross browser ready.

Sound Format Headaches

Try to open this Defrag Cycle in Internet Explorer and the game won’t even load.

This is because IE doesn’t support the Ogg audio standard and throws an error when you try to ask it to load a .ogg file.

After a bit more research it looks like the only file format that actually has universal browser support is mp3.

So easy fix, right? Just convert our two sound files to MP3.

WRONG!

It turns out there’s a whole bunch of really weird legal issues relating to using MP3. Basically if you make a game with MP3s that more than 5,000 people access you now technically owe $2,500 to the company that owns the patent on MP3 technology. You can read more about that here.

Now as hobby developers we probably don’t want to mess with the legal issues and cost of MP3.

Instead we’re going to stick with Ogg and modify our code to only try to load and play sound files when the user’s browser supports them.

Different Code For Different Browsers

This sound file problem, while frustrating, actually gives us a good opportunity to play with an important JavaScript feature: detecting the what the user’s browser can and can’t do and then running browser specific code.

This is an important technique in non-game related web development too. Not only do different browsers support different audio formats, they support different JavaScript functions and sometimes have conflicting support for things like CSS styling rules. So a lot of professional code starts by figuring out what browser the user has and then making slight changes to the page to make sure everything stays compatible.

For our needs we can rely on the canPlayType function of the Audio class. Give the function the name of an audio standard and it will return whether or not the browser can actually play it.

We can use this to improve our code to only load and play our .ogg files in browsers than support them, like so:

function loadGrazeSFX(){
   grazeSFX = new Audio();
   if(grazeSFX.canPlayType('audio/ogg')){
      grazeSFX.oncanplaythrough = function(){ grazeSFX.oncanplaythrough=0; loadBackgroundMusic();};
      grazeSFX.src = 'wubwub.ogg';
      grazeSFX.loop=true;
   }
   else{
      loadBackgroundMusic();
   }
}
function loadBackgroundMusic(){
   bgMusic = new Audio();
   if(bgMusic.canPlayType('audio/ogg')){
      bgMusic.oncanplaythrough = function(){bgMusic.oncanplaythrough=0;gameLoop();};
      bgMusic.src = 'Ouroboros.ogg';
      bgMusic.loop=true;
   }
   else{
      gameLoop();
   }
}

Pretty simple, right? If the browser supprots Ogg audio we set up the code to load like usual. If it doesn’t we just skip straight to the next function in our loading chain.

We also need similar logic when we try to actually play our music so we don’t accidentally try to reset an audio file that was never actually loaded. So anywhere the code looks like this:

bgMusic.pause();
bgMusic.currentTime=0;
grazeSFX.pause();
grazeSFX.currentTime=0;

We need to expand it to look like this:

if(bgMusic.canPlayType('audio/ogg')){
   bgMusic.pause();
   bgMusic.currentTime=0;
}
if(grazeSFX.canPlayType('audio/ogg')){
   grazeSFX.pause();
   grazeSFX.currentTime=0;
}

Now we only play and load music on browsers that can play and load music. We’re cross browser compatible again!

We Could Have Done That Better

I will be the first to admit that this isn’t particularly elegant code. Nor is it particularly good behavior to just completely drop our music and sound effects on a major browser like IE.

Now this is just a demo project so I’m not too torn up about the code being less than perfect. But if this was a serious project for a paying customer we’d want to be a little bit smarter.

So what could we have done instead?

Well, probably the smartest thing to do (that doesn’t involve buying a MP3 license) is to include multiple versions of each audio file on your server. For instance, IE may not play Ogg but it apparently will play MP4 and WAV.

Then when loading music you use canPlay to decide which file version to load. Ogg for Firefox and Chrome. WAV for IE. Things like that.

This also cleans up the code that plays the audio. Since you know the audio objects will get a file one way or the other you don’t have to worry about wrapping them up in tons of ugly if statements.

Now We’re Really Done… Please?

Looks like Defrag Cycle is running in all my browsers, so time to get back on track and wrap up this Let’s Program with a final post about where we can go from here.

Gengo Girls #116: Everyone’s A Critic

Gengo Girls #116: Everyone's A Critic

If you look at the history of the kanji most of them started out looking a lot like drawings of real world things. But then over time details were removed and curves were replaced with straight lines until we finally wound up with the angular kanji we have today. For instance, the “sun” kanji used to be an actual circle instead of the rectangular 日 we have today.

Overall this was probably a good thing. Jotting down a handful of predictable straight lines is a lot faster and easier than having to actually draw a little picture. Especially for those of us that can’t even manage to draw a half-decent circle…

Transcript

言語ガールズ #116

Everyone’s A Critic

Blue: With practice you can recognize kanji as quickly and easily as you do English words.

Blue: But until then there are a few tricks to help you remember them.

Blue: Many kanji were designed to look like the word they represent.

Blue: And it’s easy to see the tree kanji as a trunk with branches.

Yellow: That tree kanji kind of just looks like a bad stick figure.

Blue: The kanji represent thousands of years of culture and are beautiful in their simple minimalism.

Yellow: If I had a thousand years I bet I could draw a better tree than that.

Gengo Girls #115: We’re Number One

Gengo Girls #115: We're Number One

Sometimes it makes a lot of sense when a word has double meaning. “Hayai” as both early and fast is easy to remember since they are related concepts.

On the other hand some aren’t so obvious. Why is “takai” both tall and expensive? No clue. But hopefully the thought of an expensive and tall mountain will help you remember.

Vocabulary

一番 = いちばん = first

二番 = にばん = second

三番 = さんばん = third

高い = たかい = tall, high

= やま = mountain

Transcript

言語ガールズ #115

We’re Number One

Blue: Adding (ばん) to the end of a number let’s you create words like “first”, “second”, “third” and so on.

Yellow: 一番, 二番, 三番

Blue: 一番 can also mean “the best” or “the most”.

Blue: You could say that Mt. Everest is the 一番高い山

Yellow: I thought 高い meant expensive?

Blue: It can also mean tall.

Yellow: I wonder what the 一番 expensive mountain is?

Blue: You mean the most expensive to visit?

Yellow: I mean the most expensive to buy and use as a doom fortress.

 

Gengo Girls #114: Incredibly Incredible

Gengo Girls #114: Incredibly Incredible

“Sugoi” has a kanji form but it doesn’t seem to get used nearly as often as just writing the word out in hiragana.

Vocabulary

すごい = amazing

静か = しずか = quiet

= もの = thing

Transcript

言語ガールズ #114

Incredibly Incredible

Blue: Adverbs can also be used to describe adjectives and other adverbs.

Yellow: The incredibly quick fox.

Blue: A useful adverb for describing adjectives is “すごく”. It means “very”, “extremely” or “incredibly”.

Blue: But try not to overuse it in business situations.

Blue: Here’s an example: 図書館はすごく静かです

Yellow: The library is very quiet?

Blue: That’s right. Now it’s your turn.

Yellow: すごく すごい物 は すごいです.

Blue: You could try adding a little variety to your sentence.

Yellow: We’re studying grammar, not vocab.

Gengo Girls #113: The Red One’s Are Even Quicker

Gengo Girls #113: The Red One's Are Even Quicker

You might have noticed that the word for “fast” sounds the same as the word for “early” even though they use different kanji (both are pronounced hayai). This is easy to remember because “If you’re always going fast you’ll get everywhere early”.

Vocabulary

速い = はやい = fast

帰る = かえる = to return / to go home

Transcript

言語ガールズ #113

The Red One’s Are Even Quicker

Blue: You use adjectives to describe nouns.

Yellow: The quick fox.

Blue: And you use adverbs to describe verbs.

Yellow: The fox runs quickly.

Blue: In English many adverbs are just modified adjectives.

Yellow: Quickly is just the adverb form of the adjective “quick”.

Blue: In 日本語 you can change an adjective into an adverb by changing the to .

Blue: If it’s a adjective replace the with a .

Blue: So 速い would become 速く.

Yellow: As in 速く 帰りましょう because there’s a new episode of my favorite TV show coming on in fifteen minutes.

Gengo Girls #112: Social Escape Route

Gengo Girls #112: Social Escape Route

As usual we’ve just hit the basics here. There are actually a lot of other subtle differences between “sumimasen” and “gomennasai” that you’ll start to notice the more you study. You will also probably run into their super casual forms: “suman” and “gomen”.

And run into them you will! Thanks to Japanese politeness today’s vocabulary should be pretty easy to find in your favorite Japanese media.

Vocabulary

すみません = excuse me / I’m sorry

ごめんあさい = I’m sorry

Transcript

言語ガールズ #112

Social Escape Routes

Blue: すみません means “excuse me”.

Blue: It’s useful for getting the attention of a stranger or when you bump into someone in a crowd.

Blue: すみません can also be used to mean “I’m sorry”.

Blue: If you want an extra polite “I’m Sorry” you can use すみませんでした.

Blue: ごめんなさい also means “I’m sorry” and is usually used to apologize for doing something wrong.

Blue: You could use すみません when asking to borrow someone’s phone, but if you lost their phone you would use ごめんなさい.

Blue: Memorizing these phrases is very important.

Yellow: Because we foreigners make lots of mistakes?

Blue: Well… yes. But also because you’re just you.

Gengo Girls #111: Good Bad Luck

Gengo Girls #111: Good Bad Luck

This comic uses “te” in both it’s ongoing verb form and its make a request form. If you can’t tell which is which you should probably reread the last half-dozen strips. After all, repetition is how we learn.

Vocabulary

= あめ = rain

降る = ふる = to precipitate/fall

= かさ = umbrella

返す かえす = to loan

断る = ことわる = to refuse

Transcript

言語ガールズ #111

Good Bad Luck

Yellow: 雨が降っています

Blue: そうですね

Yellow: 私に傘を返して下さい

Blue: 断ります

Yellow: What!? Why?!

Blue: The last umbrellas I lent you all mysteriously disappeared.

Yellow: Lose one more to me and it’ll be Lucky Sevens!

Blue: I don’t think a lucky amount of bad luck is worth much.

Gengo Girls #110: Shall We?

Gengo Girls #110: Shall We?

“mashou” is useful because it let’s you create very mild commands and suggestions.

Instead of coming right out and saying “I want to go to McDonalds” you can politely suggest “Let’s go to McDonald’s” or even more mildly “Shall we go to McDonald’s?”

So listen carefully the next time a movie or show has a scene where characters are debating what to do next. Odds are good you’ll hear a polite character making suggestions with “mashou”.

Vocabulary

東京 = とうきょう = Tokyo

Transcript

言語ガールズ #110

Shall We?

Blue: You can turn a polite verb into a suggestion or invitation by replacing ます with ましょう

Yellow: “Let’s play a game” would be ゲームを遊びましょう

Blue: I could suggest a group trip with 東京へ行きましょう

Yellow: “Let’s play a game” would be ゲームを遊びましょう

Blue: And of course you can add to make it a polite question.

Blue: “Shall we go to Tokyo?” with 行きましょうか

Yellow: “Let’s play a game” would be ゲームを遊びましょう

Blue: You’ve got a one-track mind today.

Yellow: I brought cards!

Gengo Girls #109: The Weather Outside Is Frightful

Gengo Girls #109: The Weather Outside Is Frightful

Winter this year has been crazy. That’s all I have to say.

Vocabulary

また = again

= ゆき = snow

そうですね = that’s right / is that right?

冷たい = つめたい = cold (to the touch)

Transcript

言語ガールズ #109

The Weather Outside Is Frightful

Yellow: また雪ですか

Blue: そうですね

Yellow: 雪は寒いです

Blue: 違います。雪は冷たいです。

Yellow: Huh? I thought 寒い meant cold?

Blue: 寒い only refers to things like cold weather and cold air.

Blue: You use 冷たい for things that are cold to the touch like snow and ice.

Yellow: So I use 寒い to complain about the weather and 冷たい to complain about everything else?

Blue: They can be used in a positive way too.

Yellow: Maybe when it’s