Назад Вперед

Часть 11. Анимация с помощью инструмента Tweens.

В проект осталось добавить совсем немного, чтобы он уже был более-менее законченным и полностью играбельным. Например, при окончании игры (когда счет одного из игроков достигает 10 очков), игра просто останавливается и чтобы начать игру заново, нужно перезагружать браузер. Поэтому я добавлю реакцию на нажатие кнопки мыши, чтобы игра при этом снова начиналась сначала. Метод для этого используется уже тот, что был описан ранее, когда делал загрузку игровой сцены и переход со стартовой.

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

Файл game.js:


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

Перезагрузка сцены

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

С помощью графического редактора GIMP2 сделаю такое изображение. Создам новый проект и в параметрах укажу Белый фон. Сразу же его можно экспортировать в нужный формат в нужное место. Никаких больше изменений делать не нужно.

Изображение для контейнера Изображение для контейнера

Теперь необходимо загрузить изображение в файле preloader.js вместе с остальными изображениями проекта. Открываю и прописываю метод.

Файл preloader.js:


    ...
    this.load.image('contWin', './assets/image/container.png');
    ...
 

Загрузка изображения

Следующий шаг — размещение изображения и текста на нем в файле game.js в функции create(). Первым делом добавлю изображение и добавлю в отдельную переменную. Следующий метод — добавление текста с надписью RESTART и соответствующей переменной.

Файл game.js:


    ...
    this.imgWin = this.add.sprite(this.gameWidth/2, this.gameHeight/2, 'contWin');
    this.textWin = this.add.text(this.gameWidth/2, this.gameHeight/2, 'RESTART', {
        color: '#000',
        fontSize: 30
    }).setOrigin(0.5, 0.5);
    ...
 

Размещение изображения и текста

Для изображения указаны координаты в центре игровой сцены. Для текста тоже, но так как это именно текст, нужно добавить еще метод setOrigin(), чтобы точка отсчета была в центре этого текста.

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

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

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

Файл game.js:


    ...
    this.contWin = this.add.container(0, -300);
    this.contWin.add([this.imgWin, this.textWin]);
    ...
 

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

Создание контейнера

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

Следующий шаг — создание анимации появления контейнера, когда один из игроков достигает значение счета в 10 очков. При этом будет «выезжать» созданный контейнер. Код буду писать в функции update() в месте проверки счета и остановки игры.

Для создания такой простой анимации, как появление контейнера, есть удобный и простой в использовании инструмент Tweens. Записываю метод добавления анимации this.tweens.add() сразу же после метода с остановкой музыки. Кроме того, нужно указать некоторые параметры для этого метода: для какого объекта используется анимация (созданная в create() переменная this.contWin), к каким координатам нужно двигаться, с какой скоростью прорисовка будет происходить и даже можно указать определенный эффект движения.

Файл game.js:


    ...
    this.tweens.add({
        targets: this.contWin,       
        y: 20,        
        duration: 600,       
        ease: 'Power1'       
    });
    ...
 

Появление контейнера

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

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

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

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

Назад Вперед