Назад Вперед

Часть 3. Стартовая сцена проекта. Реакция на клики.

Сегодня поработаю со стартовой сценой (StartScene) и в завершении выполню переход на сцену игры (GameScene).

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

Итоговый вариант

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

Открываю папку проекта и файл start.js. Нахожу функцию create(). Метод добавления текста на сцену выглядит следующим образом: this.add.text();. В скобках прописываются соответствующие параметры, координаты размещения (если не использовать setOrigin();, то будут отсчитываться от верхнего левого угла самого текста), затем идет сам текст в кавычках, и в завершении указываются некоторые параметры стиля оформления текста (размер, цвет, шрифт и др.).

Для текста с названием мини-игры я укажу следующие параметры в методе: координата по оси Х — 300 (середина игрового экрана), по оси Y — 100 (ближе к верхней части игрового экрана), текст — 'PING-PONG', и размер шрифта — 100px. После чего допишу еще метод setOrigin(0.5), чтобы мои координаты совпали с серединой самого текста.

Файл start.js:


    ...
    create() {
        this.add.text(300, 100, 'PING-PONG', {
            fontSize: 100
        }).setOrigin(0.5);
    }
    ...
 

И сразу же проверю, все ли работает, открыв локальный сервер. Текст размещен правильно.

Размещение имени игры

Следующим элементом является текст с надписью START. Принцип создание такой же, только теперь его разместить нужно ниже по оси Y и размер шрифта 40px.

Файл start.js:


        ...
    create() {
        this.add.text(300, 100, 'PING-PONG', {
            fontSize: 100
        }).setOrigin(0.5);

        this.add.text(300, 200, 'START', {
            fontSize: 40
        }).setOrigin(0.5);
    }
    ...
 

Снова проверяю сохранив код и обновив браузер.

Кнопка старта на сцене

Осталось добавить только текст с ником. Отличаться код будет опять же только координатой по оси Y и размером шрифта (15px).

Файл start.js:


        ...
    create() {
        this.add.text(300, 100, 'PING-PONG', {
            fontSize: 100
        }).setOrigin(0.5);

        this.add.text(300, 200, 'START', {
            fontSize: 40
        }).setOrigin(0.5);

        this.add.text(300, 370, 'by Zhutiko', {
            fontSize: 15
        }).setOrigin(0.5);
    }
    ...
 

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

Подпись автора

Теперь хочу немного изменить часть кода. Все-таки использование цифр для записи координат размещения текста не очень выгодный вариант. Например, если я захочу изменить размеры игрового экрана, то мне придется в ручную менять все числа, которые я записывал в методах, что не совсем рационально.

Поэтому перед началом создания текста запишу пару переменных, которые будут хранить в себе размеры экрана.

Файл start.js:


        ...
    create() {
        let widthGame = this.sys.game.config.width;
        let heightGame = this.sys.game.config.height;

        this.add.text(300, 100, 'PING-PONG', {
            fontSize: 100
        }).setOrigin(0.5);

        this.add.text(300, 200, 'START', {
            fontSize: 40
        }).setOrigin(0.5);

        this.add.text(300, 370, 'by Zhutiko', {
            fontSize: 15
        }).setOrigin(0.5);
    }
    ...
 

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

Файл start.js:


        ...
    create() {
        let widthGame = this.sys.game.config.width;
        let heightGame = this.sys.game.config.height;

        this.add.text(widthGame/2, heightGame/4, 'PING-PONG', {
            fontSize: 100
        }).setOrigin(0.5);

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

        this.add.text(widthGame/2, heightGame-30, 'by Zhutiko', {
            fontSize: 15
        }).setOrigin(0.5);
    }
    ...
 

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

Как видно, игра по прежнему все отображает правильно.

Игра с заменой числе на переменные

Осталось только добавить переход на следующую сцену по нажатию кнопки мыши по игровому экрану. Способ будет немного похож на тот, что использовал в прошлом материале для открытия сцены после загрузки ресурсов. Только теперь событие будет не 'complete', а отслеживание нажатия кнопки мыши 'pointerdown', а вместо метода load — метод input (с ним еще встретимся при создании движения платформ).

Файл start.js:


        ...
    create() {
        let widthGame = this.sys.game.config.width;
        let heightGame = this.sys.game.config.height;

        this.add.text(widthGame/2, heightGame/4, 'PING-PONG', {
            fontSize: 100
        }).setOrigin(0.5);

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

        this.add.text(widthGame/2, heightGame-30, 'by Zhutiko', {
            fontSize: 15
        }).setOrigin(0.5);

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

В самом сцене GameScene в функции запишу метод для вывода в консоль, чтобы удостовериться, что переход выполнен и эта сцена загружена.

Файл game.js:


    class GameScene extends Phaser.Scene {
        constructor () {
            super("GameScene");
        }
        
        create () {
            console.log('GameScene');
        }
        
        update() {
        
        }
    }
        
    export default GameScene;
 

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

Переход на игровую сцену

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

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

Назад Вперед