Criando uma loading screen e traduzindo o meu jogo no Phaser JS - Skate Platformer Game Devlog #13

Escrito em 29 de novembro de 2020 - 🕒 1 min. de leitura

Fala pessoal, no game devlog de hoje eu vou adicionar uma loading screen mostrando os assets que estão sendo carregados e também adicionar a opção de usar traduções nos textos do jogo.

Para fazer a loading screen, eu segui o tutorial feito pelo site Zenva, que basicamente se resume em utilizar 3 eventos que são disparados pelo Phaser durante o processo de load dos assets na função preload.

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

E o resultado final ficará tipo o código abaixo. Veja o post no blog do Zenva para um tutorial mais detalhado.

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);
});

Para a tradução, tenho que inicializar o plugin i18next com os idiomas que desejo que meu jogo suporte. Isso precisa ser inicializado no entry point do jogo, provavelmente o arquivo index.js ou 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"
        },
      }
    },
  });

Depois disso, você pode usar i18next.t('translation_key') em qualquer lugar do jogo para obter a tradução de uma key para o idioma atual. Você também pode alterar o idioma manualmente chamando i18next.changeLanguage('language_key').

E por hoje é isso, eu ainda estou jogando o novo Hyrule Warriors mas pelo menos consegui fazer um pouco de progresso no jogo e no devlog. Vejo vocês semana que vem, até!

pablo.gg

Posts relacionados

Publicar um comentário

Comentários