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

[plicatibu]

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?

[clark]

What happens when you do 
 

console.log(game.cache.getJSON("lang")) ?

I just do not understand the layers[0] bit. 

[plicatibu]

AFAIK layers[0] would return the object for English text ("en") and layers[1] would return the object for Spanish ("es").

[ultimatematchthree]

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.

[plicatibu]

@ultimatematchthree Your suggestion worked like a charm. Thank you so much.

 

I followed the sample code  I saw in Phaser's examples (WIP named ninja3). It uses the code exactly as follow

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

and so I did.

[BdR]

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.updateText();
    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