Инициализация фреймворка
Это первый из 16 уроков о том, как пользоваться Gamedev Phaser. После прочтения вы можете найти исходный код для этого урока на Gamedev-Phaser-Content-Kit/demos/lesson01.html.
Перед тем, как мы начнём разрабатывать функциональность игры, нам нужно создать базовую структуру, чтобы рендерить её. Это может быть сделано с помощью HTML: фреймворк Phaser создаст обязательный элемент <canvas>.
HTML-код игры
Структура HTML-документа достаточно простая. Игра будет отображаться в элементе <canvas>, который будет сгенерирован фреймворком. Используя свой любимый редактор, создайте новый HTML-документ, сохраните его как index.html и добавьте в него следующий код:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
<script src="js/phaser.min.js"></script>
</head>
<body>
<script>
var game = new Phaser.Game(480, 320, Phaser.CANVAS, null, {
preload: preload,
create: create,
update: update,
});
function preload() {}
function create() {}
function update() {}
</script>
</body>
</html>
Загрузка Phaser
Дальше мы должны скачать исходный код фреймворка Phaser и использовать его в нашем HTML-документе. Это руководство использует Phaser V2, который не будет работать с текущей версией Phaser V3. Ссылка на скачивание Phaser V2 доступна в разделе Archive.
- Перейдите на страницу загрузки Phaser.
- Выберите наиболее удобный для вас вариант загрузки. Я рекомендую min.js скачивание, потому что исходный код будет меньше, да и вам не придётся разбираться в нём.
- Сохраните Phaser внутри
/jsдиректории, находящейся в том же месте, что иindex.html - Обновите атрибут
srcв первом элементе<script>, как это показано выше.
Что мы имеем
На данный момент у нас есть обозначенный charset, <title> и немного CSS, что убрать значения свойств margin и padding по умолчанию. Также мы добавили элемент <script>, который позволяет использовать Phaser на странице. Во втором <script> мы написали код, который позволит отображать игру и управлять ею.
Фреймворк автоматически создаёт элемент <canvas>. Мы инициализировали его, создав новый Phaser.Game объект и присвоив его переменной. Также мы добавили параметры:
widthиheightустанавливают ширину и высоту<canvas>соответственно.- Метод рендеринга. Здесь есть три опции
AUTO,CANVASиWEBGL. Мы можем установить одно из двух последних значений илиAUTO, чтобы Phaser сам определил, что использовать. Обычно используется WebGL, но если браузер его не поддерживает, то Canvas 2D. idэлемента<canvas>используется для рендеринга, если один<canvas>уже есть (мы установили значениеnull, чтобы Phaser создал свой собственный).- Дальше идут названия трёх ключевых функций Phaser: загрузки (load), старта (start) и обновления (update) игры на каждом кадре; мы выбрали такие же названия, чтобы сохранять чистоту кода.
preloadзаботится о предзагрузке ресурсов игрыcreateвызывается только один раз, когда всё загружено и готовоupdateвызывается на каждом кадре
Предупреждение:
До конца прохождения всех уроков вы должны использовать CANVAS, как метод рендеринга, а не AUTO, как это было в нашем коде. Всё это нужно, потому что метод AUTO больше не поддерживается в последних версиях браузера.
Сравните свой код
Это весь исходный код, который мы написали на этом уроке:
Следующее
Мы создали базовую HTML структуру и узнали немного об инициализации Phaser. Давайте продолжим и узнаем про масштабирование.