pablo.gg
🎮
coding

Creating a loading screen and adding translation on Phaser JS - Skate Platformer Game Devlog #13

Written in November 29, 2020 - 🕒 1 min. read

Hey guys, in today’s game devlog I’ll add a loading screen showing the assets being loaded and also add the option to use translations in the game’s texts.

To create the loading screen, I followed the tutorial made by the Zenva folks, which basically comes down to using 3 events that are dispatched by Phaser during the load process of assets in the preload function.

this.load.on('progress', (value) => {
    console.log(value);
});

this.load.on('fileprogress', (file) => {
    console.log(file.key);
});

this.load.on('complete', () => {
    console.log('complete');
});

And the end result will look something like the following code block. Please follow up Zenva’s blog post for a more detailed tutorial.

const progressBox = this.add.graphics();
const progressBar = this.add.graphics();
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(240, 270, 320, 50);

this.load.on('progress', (value) => {
    progressBar.clear();
    progressBar.fillStyle(0xffffff, 1);
    progressBar.fillRect(250, 280, 300 * value, 30);
});

For the translation, I need to initialize the i18next plugin with the languages that I want my game to support. This needs to be initialized in your game entry point, probably index.js or main.js.

import i18next from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18next.use(LanguageDetector)
  .init({
    resources: {
      en: {
        translation: {
          "loading_ellipsis": "Loading...",
          "loading_asset_colon": "Loading asset:",
          "select_your_stage": "Select Your Stage"
        },
      },
      'pt-BR': {
        translation: {
          "loading_ellipsis": "Carregando...",
          "loading_asset_colon": "Carregando arquivo: ",
          "select_your_stage": "Selecione sua fase"
        },
      }
    },
  });

After that, you can use i18next.t('translation_key') anywhere in your game to get that key translation for the current language. You can also change languages manually by calling i18next.changeLanguage('language_key').

That’s it for today, I’m still playing the new Hyrule Warriors but at least I managed to make some progress in the game and the devlog. See you next week!

Tags:

Post a comment
Comments

No comments yet.