Инициализация фреймворка
Это первый из 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. Давайте продолжим и узнаем про масштабирование.