Назад Вперед

Часть 10. Phaser3. Основные игровые функции.

Начало статьи.

В прошлом материале я проверил, что фреймворк Phaser3 подключен и работает. На экране отображается игровой экран черного цвета, где в будущем уже будет происходить какое-то действие. В файле test.js были прописаны три основные функции preload(), create(), update() для одной сцены. Сейчас подробнее опишу каждую из них, для чего используются и что в них можно писать. Кроме того рассмотрю основные способы добавления спрайтов, их расположения на сцене и изменение.

Страница из прошлого материала

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

Файл test.js:


    var config = {
        type: Phaser.AUTO,
        parent: 'container',
        width: 600,
        height: 400,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config); 

    function preload () {

    }
    
    function create () {
    
    }
    
    function update () {
    
    }
 

Для примера загружу логотип проекта LOVEtoPLAY. Создаю еще одну папку assets в проекте для хранения всех подгружаемых файлов и перекину логотип в нее.

Новая папка для ресурсов

Теперь в preload() запишу метод загрузки 2D изображения.

Файл test.js:


    ...
    function preload () {
        this.load.image('logo', './assets/logo.png');
    }
    ...
 

Одна строчка и изображение загружено, но оно еще не отображается на экране. Разберу подробнее этот метод. Первым идет ключевое слово this, которое в зависимости от места использования ссылается к конкретному контексту. В данном случае это сама сцена. Вообще это ключевое слово будет использоваться постоянно при работе с phaser.js. Дальше идет метод класса сцены для загрузки — load и после него указываю с помощью функции image(), что буду загружать. В скобках прописываю параметры этой функции. Их всего два: в первом придумываю имя изображения для дальнейшей работы с ним, а во втором путь, откуда изображение загружается. Двигаюсь дальше.

Запись кода в функции

Функция create() служит для размещения всех объектов игры на сцене. Например, загрузил я изображение с логотипом. Чтобы его разместить в самой игре, я указываю это в функции create() следующим образом:

Файл test.js:


    ...
    function create() {
        this.add.image(300, 200, 'logo');
    }
    ...
 

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

Логотип в игре

Метод опять же начинается с ключевого слова this, которое показывает, что работаю я с классом сцены. Дальше идет метод класса add (добавить) и что добавить, а именно изображение image(). Все очень логично и удобно. Но теперь параметры функции указываются другие, первыми идут координаты размещения изображения X и Y. Координаты отсчитываются от левого верхнего угла игрового экрана (в данном случае canvas'а). X увеличивается с движением направо, Y увеличивается с движением вниз. Т.е. если я в прошлой статье задавал ширину и высоту игры 600 и 400 соответственно, то координата (300, 200) будет являться серединой игрового пространства.

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

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

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

Файл test.js:


    ...
    function create() {
        this.logo = this.add.image(300, 200, 'logo');   
    }
    ...
 

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

Чтобы увеличить изображение используется метод setScale(x, y), где x и y — коэффициент увеличения по соответствующим координатам. Если эти числа одинаковые, то можно записывать только одно. Так выглядит увеличение логотипа в 2 раза:

Файл test.js:


    ...
    function create() {
        this.logo = this.add.image(300, 200, 'logo');
        this.logo.setScale(2);   
    }
    ...
 

Увеличение изображения

Перейду к функции update(), которая используется для отрисовки объектов с определенным интервалом (в каждом кадре). Как итог, можно использовать для движения, для отслеживания пользовательского ввода. Например, ту же картинку с логотипом можно «заставить» поворачиваться по кругу. В update указать изменение ее угла и на какое количество. И каждый кадр картинка будет перерисовываться уже с новым углом поворота. Если указать изменение поворота в create(), то это произойдет только один раз при создании, а в update() будет повторяться постоянно. Так выглядит код:

Файл test.js:


    function update() {
        this.logo.angle++;
    }
 

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

Поворот изображения

Файл test.js:


    var config = {
        type: Phaser.AUTO,
        parent: 'container',
        width: 600,
        height: 400,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config); 

    function preload () {
        this.add.image(300, 200, 'logo');
    }
    
    function create () {
        this.logo = this.add.image(300, 200, 'logo');
        this.logo.setScale(2);
    }
    
    function update () {
        this.logo.angle++;
    }
 

На этом базовое знакомство с фреймворком Phaser3 я заканчиваю. Все остальное будет разобрано при создании проекта PingPong и других мини-игр.

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

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

Назад Вперед