Назад Вперед

Часть 2. Три «классные» сцены: Preloader, Start, Game.

Основа для создания проекта готова, а точнее его структура. Главные файлы созданы и распределены по своим папкам. И сама игровая сцена размещена по центру окна в браузере. Уже в прошлый раз прописал некоторые игровые настройки: тип рендеринга (авто), указание родительского элемента (id тега section), ширины и высоту игрового экрана (600x400px). Создан новый экземпляр игрового класса с настройками config (сохранять в переменную game не обязательно).

Страница проекта

Следующим моим шагом будет создание основных сцен. Как и прописывал в первой статье, их у меня будет 3: для загрузки ресурсов (PreloaderScene), стартовая (StartScene) и игровая (GameScene) сцены. Описанный способ создания сцены в материале, где знакомился с фреймворкам, я не буду использовать. Все три сцены вынесу в отдельные классы в отдельные файлы. Особенно это актуально для больших проектов, но и в такой мини-игре все равно тяжело ориентироваться в одном большом файле.

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

В файле main.js пока запишу следующее:

Файл main.js:


    const config = {
        type: Phaser.AUTO,
        parent: 'container',   
        width: 600,        
        height: 400,        
        scene: [        
            PreloaderScene,         
            StartScene,         
            GameScene        
        ]       
    };
        
    new Phaser.Game(config);
 

Следующим шагом будет соответственно создание трех файлов для классов сцен в папке scene (preloader.js, start.js, game.js).

Файлы главных сцен

Открываю первый файл preloader.js и создаю класс сцены PreloaderScene, который наследуюется (extends) от класса Phaser.Scene. Запись выглядит следующим образом:

Файл preloader.js:


    class PreloaderScene extends Phaser.Scene {

    }
 

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

Файл preloader.js:


    class PreloaderScene extends Phaser.Scene {
        constructor () {
            super("PreloaderScene");
        }
    }
 

Дальше идут те самые игровые функции, описанные при знакомстве с фреймворкам. Только теперь эти функции являются функциями класса и объявляются без ключевого слова function. Для первой сцены мне нужно указать только одну — preload(). Так как буду использовать ее только для загрузки ресурсов для игры.

Файл preloader.js:


    class PreloaderScene extends Phaser.Scene {
        constructor () {
            super("PreloaderScene");
        }

        preload () {

        }
    }
 

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

Файл preloader.js:


    class PreloaderScene extends Phaser.Scene {
        constructor () {
            super("PreloaderScene");
        }

        preload () {

        }
    }

    export default PreloaderScene;
 

Класс первой сцены

Первый класс готов, по аналогии буду делать следующие. Открываю файл start.js и прописываю класс сцены StartScene с конструктором и экспортом. Только вместо функции preload(), записываю функцию create(). Все ресурсы будут загружены в предыдущей сцене, а в этой будут размещены только имя игры, автора и кнопка старта.

Файл start.js:


    class StartScene extends Phaser.Scene {
        constructor () {
            super("StartScene");
        }
        
        create () {
        
        }
    }
        
    export default StartScene;
 

Осталось создать класс последней сцены в файле game.js. Скопирую код из предыдущего класса и заменю везде StartScene на GameScene. Добавлю еще одну функцию update(). Она в главной игровой сцене пригодиться для отслеживания нажатия клавиш, движения шара и записи счета.

Файл game.js:


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

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

Файл main.js:


    import PreloaderScene from "./scene/preloader.js";
    import GameScene from "./scene/game.js";
    import StartScene from "./scene/start.js";
    ...
 

Импорт классов сцен

На этот раз все готово. И чтобы мне убедиться в первой сцене PreloaderScene в функции preload() пропишу метод вывода текста в консоль console.log('текст');.

Файл preloader.js:


    …
    preload () {
        console.log('Сцена PreloaderScene');
    }
    …
 

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

Проверка работы первой сцены

Чтобы сразу после сцены PreloaderScene загрузилась сцена StartScene в функции preload() необходимо прописать следующий метод, который отслеживает загрузку всех ресурсов, после чего запускает стрелочную функцию, в которой прописан метод старта другой сцены по ее ключевому имени. А следом загрузить хотя бы одно изображение, чтобы эта функция сработала. Пока я закину логотип проекта для наглядности, а в следующих материалах уже заменю на нужную графику.

Файл preloader.js:


    …
    preload () {
        console.log('Сцена PreloaderScene');
        
        this.load.on('complete', () => {
            this.scene.start('StartScene');
        });
            
        this.load.image('logo', ./assets/image/logo.png);
    }
    …
 

Переход ко второй сцене

В файле start.js добавлю в функции create() также метод вывода текста в консоль.

Файл start.js:


    …
    create () {
        console.log('Сцена StartScene');
    }
    …
 

И теперь если сохранить код и открыть браузер, то в консоли видно, что сначала появился текст Сцена PreloaderScene, а затем Сцена StartScene. Это означает, что переход выполнен успешно и сейчас отображается уже стартовая сцена.

Переход ко второй сцене в браузере

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

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

Назад Вперед