Добро пожаловать в первый урок по созданию игры с помощью движка Phaser 3. Здесь мы узнаем, как создать небольшую игру, в которой игрок бегает и прыгает по платформам, собирает звезды и избегает злодеев. При создании игры мы расскажем о некоторых особенностях данного фреймворка.
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
будет более подробно описано далее в этом руководстве.