Инициализация фреймворка

Это первый из 16 уроков о том, как пользоваться Gamedev Phaser. После прочтения вы можете найти исходный код для этого урока на Gamedev-Phaser-Content-Kit/demos/lesson01.html.

Перед тем, как мы начнём разрабатывать функциональность игры, нам нужно создать базовую структуру, чтобы рендерить её. Это может быть сделано с помощью HTML: фреймворк Phaser создаст обязательный элемент <canvas>.

HTML-код игры

Структура HTML-документа достаточно простая. Игра будет отображаться в элементе <canvas>, который будет сгенерирован фреймворком. Используя свой любимый редактор, создайте новый HTML-документ, сохраните его как index.html и добавьте в него следующий код:

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.

  1. Перейдите на страницу загрузки Phaser.
  2. Выберите наиболее удобный для вас вариант загрузки. Я рекомендую min.js скачивание, потому что исходный код будет меньше, да и вам не придётся разбираться в нём.
  3. Сохраните Phaser внутри /js директории, находящейся в том же месте, что и index.html
  4. Обновите атрибут 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. Давайте продолжим и узнаем про масштабирование.