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.
3 Responses
Thanks for the tip. Could you give an example of the js file format?
like:
hello = Hello, Bonjours, etc?
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.
[…] and often neglect sharing the little things that can make life seem a lot nicer as a developer.www.spacemonsters.co.uk/…/adding-web-fonts-to-an-html5-g… HTML5 Games […]