Как добавить таймер обратного отсчета в игру Phaser - PullRequest
Новая
       10

Как добавить таймер обратного отсчета в игру Phaser

0 голосов
/ 28 августа 2018

Я пытаюсь добавить простой таймер обратного отсчета в игру Phaser. Когда таймер заканчивается, я хочу перезапустить игру. После добавления соответствующего кода в консоли нет ошибок, но я не могу отобразить таймер на экране. Я новичок в Phaser и все еще изучаю Javascript. Куда я иду не так, пожалуйста? Я разместил только соответствующий код ниже и код, используемый для уже существующего текста в игре, который работает нормально (текст для подсчета собранных монет). 

PlayState = {};

PlayState.init = function () {
//....
};

PlayState.preload = function () {

this.game.load.image('font:numbers', 'images/numbers.png'); //for the 
//HUD coin count - not the timer

};

PlayState.create = function () {

//TIMER CODE:
this.timeInSeconds = 120;
this.timeText = this.game.add.text(this.game.world.centerX, 
this.game.world.centerY, "0:00",{font: '15px Arial', fill: '#FFFFFF', align: 
'center'});
this.timeText.anchor.set(0.5, 0.5);
this.timer = this.game.time.events.loop(Phaser.Timer.SECOND, 
this.updateTimer, this);

};

PlayState.update = function () {

this.coinFont.text = `x${this.coinPickupCount}`; //for HUD coin count not 
//the timer

};

//TIMER CODE:
PlayState.updateTimer = function() {
    this.timeInSeconds--;
    var minutes = Math.floor(this.timeInSeconds / 60);
    var seconds = this.timeInSeconds - (minutes * 60);
    var timeString = this.addZeros(minutes) + ":" + this.addZeros(seconds);
    this.timeText.text = timeString;

    if (this.timeInSeconds == 0) {
        this.game.state.restart();
    }
};

 //add leading zeros to any number less than 10
 //for example turn 1 to 01

PlayState.addZeros = function(num) {
    if (num < 10) {
        num = "0" + num;
    }
    return num;
};

//BELOW IS CODE FOR THE COIN COUNT NOT THE TIMER
 PlayState._createHud = function () {

                this.keyIcon = this.game.make.image(0, 30, 'icon:key');
                this.keyIcon.anchor.set(0, 0.5);
                 const NUMBERS_STR = '0123456789X ';


                 this.coinFont = this.game.add.retroFont('font:numbers', 20, 
                 26,NUMBERS_STR, 6);

                let coinIcon = this.game.make.image(this.keyIcon.width + 7, 
                 0, 'icon:coin');

                let coinScoreImg = this.game.make.image(coinIcon.x + 
                coinIcon.width, coinIcon.height / 2, this.coinFont);
                coinScoreImg.anchor.set(0, 0.5);

                this.hud = this.game.add.group();
                this.hud.add(coinIcon);
                this.hud.position.set(10, 10);

                this.hud.add(coinScoreImg);
                this.hud.add(this.keyIcon);


                this.hud.fixedToCamera = true;

            };


window.onload = function () {
  let game = new Phaser.Game(1280, 800, Phaser.CANVAS, 'game');
  game.state.add('play', PlayState);
  game.state.start('play');
};

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Я наконец-то решил проблему. Текст не показывался, потому что он отображался ПОСЛЕ фонового изображения при создании. Так оно и было, но было скрыто фоновым изображением Я просто переместил код таймера в конец создания, и теперь он работает. 

PlayState.create = function () {


  this.game.world.setBounds(0, 0, 2560, 800);

  background1 = this.game.add.sprite(0, 0, 'background');

  background2 = this.game.add.sprite(1280, 0, 'background2');

  this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  this.game.scale.setMinMax(480,320,1280,800);

  this.game.scale.windowConstraints.bottom = 'visual';

  this.game.add.image(0, 0, 'background');
  this._loadLevel(this.game.cache.getJSON('level:1'));

 this._createHud();

//TIMER CODE SHOULD GO HERE AND NOT AT THE BEGINNING OF CREATE

    this.timeInSeconds = 120;
    this.timeText = this.game.add.text(220, 30, "0:00",{font: '30px Arial', fill: 
    '#FFFFFF', align: 'center'});
    this.timeText.anchor.set(0.5, 0.5);
    this.timer = this.game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, 
    this);

};

0 голосов
/ 29 августа 2018

Вы установили исходный текст на «0:00», и даже это не отображается на экране? Первое, что я хотел бы сделать, это посмотреть на координаты, где находится текст, может быть, он не виден за кадром. Вместо this.game.world.centerX, this.game.world.centerY попробуйте что-то вроде 100,100, тогда оно появится? Также попробуйте задать очень длинный начальный текст, чтобы что-то вроде «бла-тест ABC 123» вместо «0:00» могло иметь какое-то значение.

Во-вторых, возможно, шрифт Arial по какой-то причине недоступен. Если вы пропустите часть {font: '15px..'center'}, она будет использовать шрифт по умолчанию, это что-нибудь изменит?

В-третьих, вы говорите, что не разместили здесь весь свой код, но, может быть, вы случайно перезаписали переменную this.timeText где-то в вашем коде? Поэтому убедитесь, что вы не устанавливаете эту переменную как нечто другое.

Наконец, я бы добавил console.log к функции updateTimer, просто чтобы посмотреть, вызывается ли она. так: 

PlayState.updateTimer = function() {
    console.log('updateTimer was called: ' + this.timeInSeconds);
    this.timeInSeconds--;
    // etc.
...