Шаблон игрового проекта
для фреймворка Phaser на HTML5

Последнее обновление: 28.07.2016 г.
Публикация: 21.07.2016 г.
Информация

Это краткое руководство по использованию шаблона игрового проекта для бесплатного JS фреймворка Phaser от Zeke Chan. Во многих его уроках используется эта заготовка. В данном руководстве используется фреймворк Phaser версии 2.4.6.


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

  • index.html — HTML-страница с элементом Canvas (холст), в котором будет отображаться игра,
  • /js/phaser.min.js — фреймворк Phaser,
  • /js/game.js — исходники игры.

Во-первых, посмотри на файл index.html. Он будет содержать, и отображать игру на HTML5 в браузере. Вот его код:

<!DOCTYPE html>
<html>
    <head>
        <title>Game Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/phaser.min.js"></script>
        <script src="js/game.js"></script>        
    </head>
    <body>
        <div id="wrapper"></div>
    </body>
</html>

Строка 7 загружает игровой фреймворк Phaser.

        <script src="js/phaser.min.js"></script>

Ссылка на файл может меняться в зависимости от версии используемого фреймворка Phaser. Если ты используешь полную версию, то имя файла будет phaser.js вместо phaser.min.js.

Строка 8 загружает код игры:

        <script src="js/game.js"></script>

Строка 11 содержит элемент разметки, в котором будет отображаться игра:

        <div id="wrapper"></div>

Тег <div> определяет элемент в HTML-документе, как отдельный фрагмент с атрибутом id и его значением wrapper. Далее в него происходит вставка элемента Canvas средствами фреймворка Phaser.

Теперь открой файл game.js — это и есть шаблон игрового Phaser проекта. В нём будет следующий код:

var gameProperties = {
    screenWidth: 640,
    screenHeight: 480
};

var states = {
    game: 'game'
};

var gameState = function(game) {
    
};

gameState.prototype = {
    
    preload: function() {
        
    },
    
    create: function() {
        
    },

    update: function() {
        
    }
};

var game = new Phaser.Game
(
    gameProperties.screenWidth,
    gameProperties.screenHeight,
    Phaser.AUTO,
    'wrapper'
);
game.state.add(states.game, gameState);
game.state.start(states.game);

В 1-ой строке объявлен объект gameProperties, который содержит две переменные: ширину и высоту элемента Canvas в пикселях. Объявление этих свойств данным образом облегчает правки размеров холста в будущем, не затрагивая остальную часть кода.

var gameProperties = {
    screenWidth: 640,
    screenHeight: 480
};

В строке 6 объявлен объект states, который будет содержать все игровые состояния (сцены). В настоящее время существует только одно состояние, которое называется game.

var states = {
    game: 'game'
};

В 10-ой строке объявлен объект gameState, который будет содержать весь код и логику будущей игры.

var gameState = function(game) {
    
};

gameState.prototype = {
    
    preload: function() {
        
    },
    
    create: function() {
        
    },

    update: function() {
        
    }
};

Ключевое слово prototype в строке 14 используется для расширения существующего объекта. Обрати внимание, в объекте gameState указаны три зарезервированные функции: preload, create и update.

Заметка

Для каждого игрового состояния (сцены) существует предопределённый набор зарезервированных функций, которые выполняются в строго определённом порядке.

  • Preload — функция предварительной загрузки (строка 16), в данном случае, вызывается самой первой и только один раз. Используется для загрузки всех ресурсов игры: изображения, звук, данные об уровне и так далее.
  • Create — функция создания (строка 20) вызывается один раз сразу после завершения работы функции preload. Обычно используется для создания всех необходимых объектов текущего игрового состояния (сцены).
  • Update — функция обновления (строка 24) или игровой цикл. Вызывается обычно 60 раз в секунду, то есть любой код внутри этой функции вызывается многократно, здесь и сосредоточена вся механика игры.

В строке 29 создаётся новый объект Phaser.Game, который присваивается переменной game.

var game = new Phaser.Game
(
    gameProperties.screenWidth,
    gameProperties.screenHeight,
    Phaser.AUTO,
    'wrapper'
);

Обрати внимание, для создания объекта Phaser.Game требуется четыре аргумента:

  • Первые два аргумента — это ширина и высота элемента Canvas. В данном случае 640x480 пикселей. Можно изменить эти размеры выше в объекте gameProperties.
  • Третий аргумент — рендерер, который будет использоваться. Здесь используется значение Phaser.AUTO для автоматического определения возможного способа визуализации: WebGL или Canvas.
  • Четвёртый аргумент — идентификатор DOM элемента, в этом случае wrapper, указанный ранее в файле index.html использующийся для вставки элемента Canvas. Если этот аргумент не указан, то для вставки по умолчанию используется DOM элемент <body>.

После того, как новый объект Phaser.Game создан, ему нужно назначить игровое состояние (строка 36).

game.state.add(states.game, gameState);
Заметка

Для управления игровыми состояниями в фреймворке Phaser существует объект StateManager, к которому ты можешь получить доступ через game.state.

Для добавления состояния к объекту игры требуется два аргумента:

  • Первый аргумент — имя состояния, здесь это game, которое используется для переключения между ними.
  • Второй аргумент — основной, ранее объявленный, объект игры gameState.

Последний шаг — запуск объекта gameState в строке 37.

game.state.start(states.game);

Здесь требуется только один аргумент — это имя игрового состояния. В данном случае для загрузки нового состояния используется имя game в качестве аргумента.

Контрольные вопросы