I’m trying to make the Comojogar1Scene scene appear as a floating window with instructions on what the player needs to do. However, the elements are loaded and nothing appears on the screen. What can it be?
export default class Elefante1Scene extends Phaser.Scene
{
constructor()
{
super(‘elefante1-scene’);
}
preload()
{
var progressBar = this.add.graphics();
var progressBox = this.add.graphics();
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(294, 231, 320, 50);
var width = this.cameras.main.width;
var height = this.cameras.main.height;
var loadingText = this.make.text({
x: width / 2,
y: height / 2 - 50,
text: 'Carregando jogo...',
style: {
font: '20px monospace',
fill: '#ffffff'
}
});
loadingText.setOrigin(0.5, 0.5);
var percentText = this.make.text({
x: width / 2,
y: height / 2,
text: '0%',
style: {
font: '18px monospace',
fill: '#ffffff'
}
});
percentText.setOrigin(0.5, 0.5);
this.load.on('progress', function (value) {
percentText.setText(parseInt(value * 100) + '%');
progressBar.clear();
progressBar.fillStyle(0xffffff, 1);
progressBar.fillRect(305, 241, 300 * value, 30);
});
this.load.on('fileprogress', function (file) {
});
this.load.on('complete', function () {
progressBar.destroy();
progressBox.destroy();
loadingText.destroy();
percentText.destroy();
});
this.timedEvent = undefined;
this.esgotouotempo = false;
this.total_rodadas = 2;
this.rodada_atual = 0;
this.cartas = undefined;
this.cartas_sorteadas = undefined;
this.bloqueado = false;
this.cor_sorteada = undefined;
this.mostrador = undefined;
this.rodada_text = undefined;
this.crono_text = undefined;
this.pontos_text = undefined;
this.load.spritesheet('elefante_carta', 'assets/spritesheet.png', { frameWidth: 145, frameHeight: 144 });
this.load.spritesheet('elefante_mostrador', 'assets/spritesheet_mostrador.png', { frameWidth: 67, frameHeight: 67 });
this.load.image('elefante_logopeq2', 'assets/logopeq2.png');
this.load.image('elefante_fundo_crono', 'assets/fundo_crono.png');
this.load.image('elefante_txt_mostrador', 'assets/txt_mostrador.png');
this.load.image('elefante_txt_desafio', 'assets/txt_desafio.png');
this.load.image('elefante_txt_pontos', 'assets/txt_pontos.png');
this.load.image('elefante_logo', 'assets/logo.png');
this.load.json('elefante_cartas', 'assets/cartas.json');
this.load.audio('sound_click2', ['assets/switch-14.wav']);
this.load.audio('sound_click', ['assets/switch-20.wav']);
this.load.audio('sucess', ['assets/sucess.mp3']);
this.load.audio('wrong', ['assets/wrong.wav']);
}
create ()
{
this.game();
}
update()
{
if (!this.esgotouotempo) {
var tempo = this.timedEvent.getProgress().toString().substr(0, 4);
var crono = 5000 * tempo;
this.crono_text.setText(Math.round(crono/1000));
}
}
game() {
console.log('Iniciou o jogo');
this._embaralharcartas();
this._sortearcor();
this.esgotouotempo = false;
this.bloqueado = false;
console.log('Elefante colorido! rodada: '+this.rodada_atual);
var bm_cartaimg = new Array();
console.log(this.cartas_sorteadas);
var fundo = this.add.image(455,255,'home_fundo');
var logo = this.add.image(180,65,'elefante_logopeq2');
var txtmostrador = this.add.image(423,216,'elefante_txt_mostrador');
this.mostrador = this.add.image(513,219,'elefante_mostrador');
var txt_desafio = this.add.image(776,216,'elefante_txt_desafio');
var fundocrono = this.add.image(574,216,'elefante_fundo_crono');
this.cont_cartas = this.add.container();
var rodada_atual = this.rodada_atual +1;
this.rodada_text = this.add.text(710, 206,"" , {
font: "20px Myriad Pro",
fill: "#000000",
align: "center"
});
this.rodada_text.setText("RODADA: "+rodada_atual+" / "+this.total_rodadas);
this.crono_text = this.add.text(568, 200,"" , {
font: "28px Myriad Pro",
fill: "#000000",
align: "center"
});
this.crono_text.setText("0");
for (var i=0;i< this.cartas_sorteadas.length;i++) {
bm_cartaimg[i] = this.add.sprite(142+ 150 * (i%6),382+ 144 * Math.floor(i/6),'elefante_carta');
bm_cartaimg[i].lado = this.cartas_sorteadas[i];
bm_cartaimg[i].setFrame(this.cartas_sorteadas[i]);
bm_cartaimg[i].on('pointerdown',function(){
var music = this.scene.sound.add('sound_click2');
music.play();
if (!this.scene.bloqueado){
this.scene.bloqueado = true;
this.setFrame(this.lado);
if (this.lado == this.scene.cor_sorteada) {
var music = this.scene.sound.add('sucess');
music.play();
var tween = this.scene.tweens.add({
targets: this,
alpha: 0,
ease: 'Sine.easeInOut',
duration: 1000,
yoyo: false,
loop: -1
});
var __pontos = sessionStorage.getItem('pontos');
__pontos = parseInt(__pontos) + 5;
sessionStorage.setItem('pontos',__pontos);
console.log('Pontos: '+sessionStorage.getItem('pontos'));
this.scene.pontos_text.setText(sessionStorage.getItem('pontos'));
} else {
var music = this.scene.sound.add('wrong');
music.play();
var cartas_vetor = this.scene.cont_cartas.getAll();
for(var i = 0; i<cartas_vetor.length;i++){
if (cartas_vetor[i].lado == this.scene.cor_sorteada) {
cartas_vetor[i].setFrame(this.scene.cor_sorteada);
var tween = this.scene.tweens.add({
targets: cartas_vetor[i],
alpha: 0,
ease: 'easing',
duration: 1000,
yoyo: false,
loop: -1
});
}
}
console.log('Errou');
}
this.scene.rodada_atual += 1;
this.timedEvent = this.scene.time.delayedCall(3000, function(){
if(this.rodada_atual < this.total_rodadas) {
this.game();
} else {
this.scene.start('telafinal1-scene');
}
}.bind(this.scene), [], this);
}
});
this.cont_cartas.add(bm_cartaimg[i]);
}
// Função que vai esconder as cartas depois de 5 segundos
this.timedEvent = this.time.delayedCall(5000, function(){
this._tempoesgotado();
}.bind(this), [], this);
var txt_pontos = this.add.image(431,46,'elefante_txt_pontos');
this.pontos_text = this.add.text(431, 72,"" , {
font: "40px Myriad Pro",
fill: "#cccccc",
align: "left"
}).setOrigin(0.5);
this.pontos_text.setText(sessionStorage.getItem('pontos'));
this.scene.pause();
this.scene.launch('comojogar1-scene');
}
_embaralharcartas()
{
// Pega todas as cartas da base
this.cartas = this.cache.json.get('elefante_cartas');
// Embaralha as cartas da base
this.cartas_sorteadas = this.cartas.sort(function(a, b){return 0.5 - Math.random()});
}
_sortearcor() {
this.cor_sorteada = Math.round(Math.random() * (this.cartas_sorteadas.length - 1) + 1);
}
_tempoesgotado() {
console.log('tempo esgotado');
this.esgotouotempo = true;
var cartas_vetor = this.cont_cartas.getAll();
for(var i = 0; i<cartas_vetor.length;i++){
cartas_vetor[i].setFrame(0);
cartas_vetor[i].setInteractive();
}
this.mostrador.setFrame(this.cor_sorteada);
}
}
export default class Comojogar1Scene extends Phaser.Scene
{
constructor()
{
super(‘comojogar1-scene’);
}
preload()
{
this.load.image('final_fundo_transparente','assets/fundo_transparente.png');
this.load.image('final_fundo_janela','assets/fundo_janela.png');
}
create ()
{
this.tela_comojogar();
}
tela_comojogar() {
console.log('Iniciou a tela de como jogar');
var fundo_transparente = this.add.image(455,255,'final_fundo_transparente');
var fundo_janela = this.add.image(455,255,'final_fundo_janela');
}
}