Шаблон игрового проекта
для фреймворка Phaser на HTML5
Это краткое руководство по использованию шаблона игрового проекта для бесплатного 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 в качестве аргумента.