Home » HTML5 » Создание игры в Phaser. Часть 1 — Введение
Создание игры в Phaser. Часть 1 - Введение

Создание игры в Phaser. Часть 1 — Введение

Приветствуем в в нашем первом руководстве по Созданию Игры в Phaser. Здесь мы научимся, как создать маленькую игру, позволяющую игроку бегать и прыгать по платформам, собирая звёзды. По ходу обучения мы объясним некоторые базовые особенности среды.

Что такое Phaser?

Это игровая среда на основе HTML5, назначение которой — помогать разработчикам создавать мощные кроссбраузерные HTML5 игры действительно быстро и, в отличии от прочих, была создана исключительно для работы с мобильными браузерами. Единственное требование к браузеру — поддержка тега Canvas. Она также многое переняла от Flixel.

Требования

Загрузите исходные файлы и ресурсы, идущие в комплекте с этим руководством. Если вы уже получили контейнер Phaser с обменника, то эти файлы у вас уже есть. Поищите в расположении resourses/tutorials.
Вам потребуется очень и очень элементарные знания о JavaScript.
Так же убедитесь, что освоили начальное руководство, оно поможет вам загрузить среду, разобраться в инструментарии и составить представление о структуре проекта в Phaser и его базовых свойствах.
Если вы ознакомились с начальным руководством, то вам нужно загрузить Phaser, установить его и приготовиться программировать. Загрузите ресурсы для данного руководства и распакуйте их в ваш сетевой root.
Откройте страницу part1.html в вашем редакторе и давайте рассмотрим код поближе. После шаблона HTML  структура кода, содержащего Phaser, выглядит так:

В первой строке вы пробуждаете Phaser к жизни, создавая расположение объекта Phaser.Game и привязке его к локальной переменной «game». Название «game» распространёно, но необязательно, именно его вы увидите в примерах.

Первые два параметра: ширина и высота элемента Canvas, который создаст Phaser. В данном случае 800 на 600 пикселей. Ваш игровой мир может быть любого размера, но отображаться он будет в этом разрешении. Третий параметр может быть Phaser.CANVAS, Phaser.WEBGL или Phaser.AUTO. Это контекст рендеринга, который хотите использовать. Рекомендуемым является Phaser.AUTO, который автоматически пытается использовать WebGL, но если браузер его не поддерживает, он автоматически откатится к Canvas.
Четвёртый параметр — пустая строка. Это идентификатор DOM элемента, в который вы хотите ввести элемент Canvas, создаваемый Phaser. Так как мы оставили его пустым, оно просто останется в теле кода. Последний параметр — это объект, содержащий четыре референсных значения главных функций Phaser. Их использование будет поэтапно объяснено далее. Заметим, что этот объект необязателен — Phaser поддерживает полностью штатную систему, позволяя вам делить код на более понятные отдельные объекты. Но для простого Начального руководства, вроде этого, мы воспользуемся им, так как он поможет работать быстрей.

Оригинал.