Назад Вперед

Создание Индикатора выполнения (Progress bar) и добавление кнопок в игру.

Первая задача — создание прогресс-бара в самом начале запуска проекта. Загружаемых ресурсов не так много, конечно, в проекте, но все равно их загрузка занимает время. И чтобы показать, что игра работает, и просто идет процесс загрузки, создают специальные визуальные Индикаторы. Такой я и добавлю в свой проект.

Индикатор выполнения у меня будет простой и создан с помощью графики, которая используется даже в чистом JavaScript. Это будет прямоугольник, который по мере загрузке заполняет экран. Как только загрузка всех ресурсов закончена, происходит переключение на стартовую сцену.

Открываю файл preloader.js. Весь код будет выполняться в нем. В самом начале игровой функции preload() создаю переменную, которая будет хранить в себе созданную графику.

Файл preloader.js:


    ...
    let progress = this.add.graphics(); 
    ...
 

Следом создаю событие, которое будет отрисовывать этот прямоугольник при загрузке.

Файл preloader.js:


    ...
    this.load.on('progress', function (value) {

    }); 
    ...
 

Внутри функции записываю три метода для переменной progress. Очистка графики, стиль отрисовки и рисование прямоугольника в указанных координатах с указанной шириной и высотой.

Файл preloader.js:


    ...
    this.load.on('progress', function (value) {
        progress.clear();
        progress.fillStyle(0xffffff, 1);        
        progress.fillRect(0, 180, 600 * value, 40);
    }); 
    ...
 

Еще можно добавить в функцию, где идет переключение на следующую сцену уничтожение этого бара. Делать это не обязательно, так как все остальное действие будет происходить уже в другой сцене.

Файл preloader.js:


    ...
    this.load.on('complete', () => {
        progress.destroy();
        this.scene.start('StartScene');
    }); 
    ...
 

Индикатор выполнения

Сохраняю и проверяю на локальном сервере. Загрузка работает. Ресурсов загружаемых у меня немного, поэтому она быстро заполняется и переходит на следующую сцену.

Проверка в браузере

Перехожу ко второй задаче. Суть заключается в создании из текста START и RESTART кнопок. Т.е. сейчас в проекте нажатие кнопки мыши в стартовой сцене запускает игровую по любому месту в пределах игрового экрана. Тоже самое в игровой сцене. Перезагрузка происходит при нажатии кнопки мыши при самом процессе игры и когда игра закончена. Нужно сделать так, чтобы игра запускалась, когда кнопка мыши нажимается на текст START, а перезагружается, когда игра заканчивается, появляется контейнер и по нажатию на текст RESTART.

Для решения задачи буду использоваться метод setInteractive();. Перехожу в файл start.js. Первым делом создаю переменную для хранения текста START. просто добавляю ее перед кодом, где размещаю этот текст на сцене.

Файл start.js:


    ...
    let btnStart = this.add.text(widthGame/2, heightGame/2, 'START', {
        fontSize: 40
    }).setOrigin(0.5)
    ...
 

Затем добавляю к этой переменной метод, который позволяет взаимодействовать с объектом.

Файл start.js:


    ...
    let btnStart = this.add.text(widthGame/2, heightGame/2, 'START', {
        fontSize: 40
    }).setOrigin(0.5)
    btnStart.setInteractive();
    ...
 

Осталось только отредактировать прописанное событие для нажатия кнопки мыши. Заменяю часть this.input на созданную переменную btnStart.

Файл start.js:


    ...
    btnStart.on('pointerdown', () => {
        this.scene.start('GameScene');
    });
    ...
 

Кнопка старта игры

Сохраняю и проверяю. Теперь, когда загружена стартовая сцена, кликая по любому месту игрового экрана ничего не происходит (до этого игра начиналась при клике). Только когда нажимаю на текст START запускается игровая сцена.

Все тоже самое нужно проделать для текста RESTART, который появляется при окончании игры. Перехожу в файл game.js и для переменной this.textWin записываю метод setInteractive();.

Файл game.js:


    ...
    this.textWin.setInteractive();
    ...
 

И чуть ниже в обработчике события заменяю this.input на переменную текста this.textWin.

Файл game.js:


    ...
    this.textWin.on('pointerdown', () => {
        this.scene.start('GameScene');
        this.fonAudio.stop();
    });
    ...
 

Кнопка перезагрузки игры

Открыв проект в браузере теперь проверяю, что игра не перезагружается во время самого процесса игры. Только когда появляется контейнер при победе одного из игроков и при нажатии на сам текст RESTART игра начинается заново.

Такая замена была необходима для адаптации игры под мобильные браузеры. Именно этим буду заниматься в последующих материалах этого проекта.

Спасибо за внимание!

Назад Вперед