Введение

Добро пожаловать в первый урок по созданию игры с помощью движка Phaser 3. Здесь мы узнаем, как создать небольшую игру, в которой игрок бегает и прыгает по платформам, собирает звезды и избегает злодеев. При создании игры мы расскажем о некоторых особенностях данного фреймворка.

Что такое Phaser?

Phaser - это среда разработки игр HTML5, которая помогает разработчикам действительно быстро создавать качественные игры HTML5, которые работают в разных браузерах. Он был создан специально для использования преимуществ современных браузеров, как настольных, так и мобильных. Единственное требование браузера - это поддержка тега canvas.

Начало работы

Загрузите этот архив, который содержит каждый шаг этого учебника, а также ресурсы, которые прилагаются к нему.

Вы должны иметь базовые знания JavaScript.

Также обязательно ознакомьтесь с Руководством по началу работы , оно покажет вам, как загрузить инфраструктуру, настроить локальную среду разработки, и даст представление о структуре проекта Phaser и его основных функциях.

Если вы ознакомились с руководством по началу работы, вы скачали Phaser и получили все, что нужно для настройки, то загрузите ресурсы для этого урока и разархивируйте их в свой веб-корень.

Откройте страницу part1.html в выбранном вами редакторе и давайте подробнее рассмотрим код. После небольшого шаблонного HTML, который включает Phaser, структура кода выглядит следующим образом:

<html lang="ru"> 
<head> 
    <meta charset="UTF-8" />
    <title>Создание вашей первой игры в Phaser 3 - Часть 1.</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
    }

    function create ()
    {
    }

    function update ()
    {
    }

</script>

</body>
</html>

Объект config - это настройки вашей игры в Phaser. Есть много параметров, которые могут быть размещены в этом объекте, и когда вы расширите свои знания Phaser, вы столкнетесь с большим количеством из них. Но в этом уроке мы просто установим рендер, размеры и сцену по умолчанию.

Мы используем объект config, чтобы создать экземпляр объекта Phaser.Game и сохранить его в локальной переменной game . Это запустит движок Phaser.

В Phaser 2 объект game действовал как шлюз почти для всех внутренних систем и к нему часто обращались из глобальной переменной. В Phaser 3 это больше не так, и нет смысла хранить его в глобальной переменной.

Свойство type может иметь значение Phaser.CANVAS , Phaser.WEBGL , либо Phaser.AUTO. Это контекст рендеринга, который вы хотите использовать в своей игре. Рекомендуемое значение - Phaser.AUTO, который автоматически пытается использовать WebGL, но если браузер или устройство не поддерживает его, он вернется к Canvas. Элемент canvas, который создает Phaser, будет просто добавлен в документ в тот момент, когда был вызван скрипт, но вы можете указать родительский контейнер в config, если хотите.

Свойства width и height задают размер элемента canvas, который будет создан Phaser. В этом случае 800 х 600 пикселей. Ваш игровой мир может быть любого размера, который вам нравится, но это разрешение, в котором будет отображаться игра.

Свойство scene объекта config будет более подробно описано далее в этом руководстве.

Далее