Jump to content

game.cache.getJSON(...) is undefined


Recommended Posts

Guys, I'm trying to localize my game using an external JSON file.


It looks like this (justa a sample):

// file lang.js{   "en":{"Play" : "Play", "About" : "About", "Help" : "Help"},   "es":{"Play" : "Jugar", "About" : "Acerca", "Help" : "Ayuda"}};

In preloader I have the following code:

game.load.json('lang', 'lang.json');

And tried to use it as follow:

var lang = game.cache.getJSON('lang').layers[0];

When I run the program I get the error

TypeError: game.cache.getJSON(...) is undefined

Does anyone knows what may I be doing wrong?

Link to comment
Share on other sites

I'm not sure why you're trying to retrieve a "layers" property from the return value of getJSON. You should be able to retrieve the translations directly by key:

var translations = game.cache.getJSON('lang');var english = translations['en'];var spanish = translations['es'];game.debug.text(english['Play'], someX, someY); // should display 'Play'game.debug.text(spanish['Play'], someOtherX, someOtherY); // should display 'Jugar'

You might also want to remove the trailing semicolon from your JSON file if it has one.

Link to comment
Share on other sites

  • 2 years later...

Kick this thread up because I'm also working on localisation. I just wanted to add that you could also just include the translation in your source code as a static variable, instead of loading a separate .json datafile. So something like this:

var langtexts = {
  "SupportedLanguages": {
    "en": "ENGLISH",
    "de": "DEUTSCH",
    "nl": "NEDERLANDS"

  "Start game": {
    "en": "Start game",
    "de": "Spiel starten",
    "nl": "Start spel"

  "ResetGameSure": {
    "en": "This will reset all solved puzzles. Are you sure?",
    "de": "Möchten Sie Ihren Fortschritt wirklich zurücksetzen?",
    "nl": "Hiermee wis je alle opgeloste puzzels. Zeker weten?"
  "Yes": {
    "en": "Yes",
    "de": "Ja",
    "nl": "Ja"
  "No": {
    "en": "No",
    "de": "Nein",
    "nl": "Nee"
  // ..etc.

And then use it like so:

//  get language, for example 'en-US', 'fr', 'it', 'zh' etc.
var selectedlanguage = navigator.language || navigator.userLanguage;

// Keep only first two characters, for example 'en-US' -> 'en'
selectedlanguage = selectedlanguage.substring(0, 2);

// check if this is a supported language
var checks = langtexts.SupportedLanguages[selectedlanguage];
// defaults to english when not supported
if (typeof checks === 'undefined') selectedlanguage = 'en';

// get some texts
var str = langtexts.ResetGameSure[selectedlanguage];
console.log('language test -> str=' + str);

As for the layout of the Phaser game using bitmapfonts, you can expand the bitmap fonts to easily center them in the screen, like so:

// expand the bitmap text object
Phaser.BitmapText.prototype.makeCentered = function(xCenter)
    this.x = Math.floor(xCenter - (this.textWidth*0.5));

// center text
var bmptext = this.game.add.bitmapText(100,200,"myfont",str,40);
bmptext.makeCentered(320); // center around 320px

Or expand the Phaser buttons to contain text, see here

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...