I take a lot of things for granted when crafting HTML5 games and often neglect sharing the little things that can make life seem a lot nicer as a developer.

One such thing is adding web fonts to a game without going across domains to get the resources.

Here’s the challenge I faced: to use a fancy comic-like font for a game without going to Google’s web font API. In some circumstances this has been problematic for me. So I wanted to include all the font’s resources and necessary CSS within the game package.

I looked over the web for an explanation and found something pretty spot on on Stack Overflow so I’d encourage you to go read it here: Is it possible to load webfonts through the offline storage cache manifest?

Of course the beauty of doing it this way is that you can localise your text data simply.

I recently converted a bunch of games to Japanese for a client with great ease. I store all text in an array in a single file called textdata.js. All I had to ensure was that the textdata.js file was saved in UTF-8 format.

Tags:

3 Responses

    • Oh it’s really not as complicated as all that :)
      I simply create an array of text data in English and store it in a single file called textdata.js.
      The file is saved in UTF-8 to handle specifics such as “é” etc
      The file itself looks something like this:

      [code language=””]
      var textdata = [];

      textdata[0] = "(C) SPACE MONSTER GAMES"; /* Copyright notice */
      textdata[1] = "PLAY GAME"; /* Initialise game */
      textdata[2] = "HOW TO PLAY"; /* Attract mode banner */
      textdata[3] = "GAME OVER"; /* End of game */
      textdata[4] = "GET READY"; /* Pre-game banner */
      textdata[5] = "LEVEL COMPLETE"; /* End of level */
      textdata[6] = "PAUSED"; /* Pause mode invoked */
      textdata[7] = "LOADING"; /* Loadng screen pre-game init */
      textdata[8] = "HIGH SCORE";
      textdata[9] = "1UP";
      textdata[10] = "EXTRA LIFE";
      textdata[11] = "BONUS";
      textdata[12] = "OFF";
      textdata[13] = "ON";
      textdata[14] = "CONFIG";
      textdata[15] = "YES";
      textdata[16] = "NO";
      textdata[17] = "HIGH SCORES";
      textdata[18] = "CHALLENGE STAGE";
      textdata[19] = "CHALLENGE FAILED";
      textdata[20] = "CONGRATULATIONS";
      textdata[21] = "WAVE";

      [/code]
      I then hand this file over to the client to be translated.
      When they send it back I have nothing to do except drop it in to the game :)

      An alternative might be to sniff for the browser language setting…
      [code language=”javascript”]
      navigator.language || navigator.systemLanguage
      [/code]
      …and then present multiple language versions in a switch() statement or something.

Leave a reply

Photo of Atari VCS console and pre-order information
Playstar graphic
Minecraft Global CD Key
%d bloggers like this: