Разработка HTML5 игр на Phaser 3: Подробное руководство
4.5 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
31 students enrolled

Разработка HTML5 игр на Phaser 3: Подробное руководство

Создайте 3 браузерные игры на Phaser 3 и JavaScript шаг за шагом
Hot & New
4.5 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
31 students enrolled
Last updated 4/2020
Russian
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 16.5 hours on-demand video
  • 3 articles
  • 57 downloadable resources
  • 1 Practice Test
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Вы станете автором трех полноценных игр, которые создадите с нуля во время обучения.
  • Получите опыт работы с двумя физическими движками: базовым аркадным и продвинутым MatterJS.
  • Будете уверенно использовать широкий инструментарий Phaser: работа со спрайтами и отрисовка графики, создание сцен и архитектуры проекта, запуск анимаций, подключение кастомных шрифтов, воспроизведение звуков и музыки.
  • Улучшите свои знания и навыки в разработке программ и игр, освоив современные техники и паттерны проектирования.
  • Научитесь генерировать спрайтлисты в программе TexturePacker и создавать из них покадровую анимацию в Phaser.
  • Освоите программу Tiled и сможете создавать собственные карты уровней из набора тайлов.
  • Поймете принципы работы клиент-серверных игр и научитесь их разрабатывать.
  • Сможете использовать SocketIO для реализации PVP мультиплеера в реальном времени.
  • Подготовите солидное портфолио, которое позволит вам выйти на рынок игровой индустрии в роли уверенного специалиста.
  • Подготовите сборку проекта для релиза при помощи webpack
Course content
Expand all 69 lectures 16:28:10
+ Модуль 1 - Игра Memory
21 lectures 03:18:23
  • Рассматриваем преимущества Phaser и его ключевые особенности

Preview 05:42
  • Разбираем функционал, который предстоит разработать в ходе модуля

Preview 03:58
  • Устанавливаем локальный сервер в редакторе VSCode для запуска разрабатываемой игры

Preview 08:25
  • Знакомимся со структурой проекта

  • Создаем программный каркас приложения

Preview 14:24
  • Загружаем и рисуем на экране фоновое изображение

5. Вывод изображений
17:47
  • Загружаем и выводим на экран спрайты карт

6. Спрайты карт
11:33
  • Выносим функционал сцены в отдельный ES6 класс

7. Создание сцены
06:21
  • Создаем ES6 класс карты префаба спрайта

8. Префабы спрайтов
08:26
  • Устанавливаем каждой карте свое изображение

9. Отрисовка карт
09:24
  • Переворачиваем карту по событию клика

10. Обработка событий ввода
10:11
  • Разработка основой игровой логики

11. Игровая механика
07:32
  • Перезапускаем игру при открытии последней карты

12. Победа на уровне
08:10
  • Скейлинг спрайтов

  • Используем Phaser.Tween для запуска анимации переворота карт

13. Tween анимации
18:11
  • Загружаем и подключаем кастомный шрифт

  • Выводим на экран текст

14. Рендеринг текста
09:47
  • Реализуем функционал обратного отсчета с помощью Phaser.Time.TimerEvent

15. Таймер
14:02
  • Проигрываем звуковые эффекты и музыкальный трек с помощью Phaser.Sound.WebAudioSoundManager

16. Звуки и музыка
10:20
  • Используем Phaser.Tween для создания анимации вылета карт

17. Анимация полета карт
14:19
  • Завершаем работу над игрой добавлением анимации улета карт

18. Завершение разработки
15:38

Вы можете свободно пользоваться официальной документацией, примерами или любыми доступными ресурсами, чтобы найти ответы правильный на вопрос или вспомнить названия классов, методов и свойств.

Официальная документация: https://photonstorm.github.io/phaser3-docs/index.html

Официальные примеры: http://labs.phaser.io/index.html

Руководства с примерами: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html


Тест по 1 модулю
10 questions
Задания для самостоятельной работы по 1 модулю
00:38
+ Модуль 2: Игра: Side Scrolling Shooter
23 lectures 05:56:35

Цель: Нарисовать бэкграунд


  • Знакомимся с игрой модуля

  • Разбираем структуру проекта

  • Создаем стартовую сцену

  • Загружаем и выводим на экран бэкграунд

Preview 10:02

Цель: Загрузочный экран и организация предзагрузки ресурсов


  • Создаем загрузочную сцену и сцену предзагрузки ресурсов

  • Реализуем переход между сценами

2. Загрузочный экран
13:13

Цель: Переход со стартовой сцены на игровой уровень


  • Добавляем сцену игрового уровня

  • Выводим текст Tap to start на стартовой сцене

  • Реализуем переход со стартовой сцены на сцену уровня по событию тапа используя Phaser.Input.InputPlugin

3. Сцена уровня
10:11

Цель: Вывести на экран спрайт дракона


  • Склеиваем изображения дракона в один спрайтлист при помощи TexturePacker

  • Загружаем полученный атлас в прелоадере

  • Выводим первый фрейм атласа на сцене уровня

4. Вывод спрайта игрока
11:59

Цель: Реализовать движение дракона на экране по нажатию на клавиши клавиатуры


  • Создаем класс игрока префабом GameObjects.Sprite

  • Подключаем физический движок Phaser.Physics.Arcade

  • Реализуем логику движения в зависимости от нажатой клавиши используя Phaser.Input.Keyboard.KeyboardPlugin

  • Выполняем обновление позиции игрока на сцене уровня

5. Движение игрока
25:58

Цель: Сделать скроллинг фона


  • Загружаем бэкграунд как Phaser.GameObjects.TileSprite

  • Запускаем движение бэкграунда для ощущения эффекта полета

6. Движущийся бэкграунд
07:00

Цель: Вывести на экран вертолет противника


  • Создаем и загружаем атлас из изображений вертолетов противника

  • Реализуем префаб противника

  • Добавляем противника на правый край экрана

7. Вывод противников
13:53

Цель: Создавать противников используя префаб группы


  • Создаем префаб группы Phaser.Physics.Arcade.Group и добавляем в нее противников

8. Префаб группы врагов
20:01

Цель: Создание противников по таймеру


9. Генерация противников
08:31

Цель: Использовать для создания новых врагов уничтоженные вертолеты


  • Обновление спрайта при обновлении сцены

  • Активация и деактивация спрайтов

  • Деактивируем объекты вышедшие за левый край экрана

  • При создании новых противников используем деактивированные ранее объекты

10. Переиспользование спрайтов
24:44

Цель: Огоньки пламени выпускаемые драконом


  • Загружаем спрайт пламени

  • Реализуем префаб пламени и префаб группы

  • Запускаем выстрелы по таймеру

11. Стрельба игрока
21:01

Цель: Реализовать пересоздание пуль


  • Определяем момент уничтожения пули и деактивируем спрайт

  • Используем деактивированные спрайты при создании новых объектов

12. Пересоздание объектов в группе
10:30

Цель: Вынести общий код движущихся объектов в базовый класс

  • Определяем общий функционал

  • Переносим общий код в базовый класс

13. Рефакторинг
21:54

Цель: Реализовать стрельбу вертолетами противника

  • Загрузить спрайт пули вертолета

  • Разрабатываем функционал выстрелов врагов

14. Стрельба противников
19:12

Цель: Обрабатывать столкновения всех движущихся объектов

  • Определяем правила столкновений объектов

  • Выполняем обработку при возникновении событий столкновений

15. Обработка столкновений
28:03

Цель: Обработка событий завершения игры

  • Определяем события завершения

  • Используем Phaser.Events.EventEmitter для установки и отслеживания события

  • Запускаем собственные события из сцены

16. Завершение игры
20:43

Цель: Вывести статистику уровня на стартовой сцене

  • Выводим на экран набранные очки за уничтожение врагов

  • Передаем в стартовую сцену число набранных очков и статус завершения уровня

  • Выводим полученные данные в стартовой сцене

Рисуем окно статистики с помощью Phaser.GameObjects.Graphics

17. Статистика на стартовой сцене
27:03

Цель: Запустить анимацию маха крыльев

  • Создаем покадровую анимацию при помощи Phaser.Animations.AnimationManager

18. Покадровая анимация игрока
13:45

Цель: Запустить анимацию взрыва при уничтожении вертолета


  • Создаем и загружаем атлас взрыва

  • Запускаем анимация взрыва в отдельном префабе

19. Покадровая анимация взрыва
17:27

Цель: Проигрывать музыкальную тему и звук взрыва

  • Загружаем звуковые файлы в прелоадере

  • Добавляем звуки на уровень

  • Запускам тему при старте уровня

  • Воспроизводим эффекты при столкновении

20. Звуки и музыка
10:37

Цель: Реализовать Loading Bar

  • Используем Phaser.GameObjects.Graphics для отрисовки прогресс бара

21. Прогресс бар
19:13

Вы можете свободно пользоваться официальной документацией, примерами или любыми доступными ресурсами, чтобы найти ответы правильный на вопрос или вспомнить названия классов, методов и свойств.

Официальная документация: https://photonstorm.github.io/phaser3-docs/index.html

Официальные примеры: http://labs.phaser.io/index.html

Руководства с примерами: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html


Тест по 2 модулю
10 questions
Задания для самостоятельной работы по 2 модулю
00:38
+ Модуль 3 - Гоночки с мультиплеером
25 lectures 07:13:11

Цель: Создать карту уровня в Tiled

  • Загружаем набор игровых ассетов

  • Создаем новую карту в программе Tiled

  • Добавляем слои травы, дороги, песка и земли

  • Заполняем созданные слои из заданного набора тайлов

1. Изучаем программу Tiled
21:30

Цель: Добавить игровые объекты и экспортировать финальный json файл карты

  • загружаем набор изображений объектов

  • подготавливаем нужные слои и расставляем объекты

  • экспортируем готовый json карты

2. Завершаем работу в Tiled
26:23

Цель: Установить шаблон проекта phaser

  • Скачиваем репозиторий шаблона

  • Устанавливаем git и node

  • Устанавливаем зависимости проекта

  • Знакомимся со структурой игры

  • Выполняем команды сборки и запуска

3. Шаблон проекта phaser
22:40

Цель: Создать структуру сцен

  • Создаем сцены инициализации, загрузки ресурсов и игрового уровня

  • Реализуем масштабирование при изменении размеров экрана

  • Знакомимся с возможностью экспорта и импорта классов в ES6

4. Базовая архитектура
18:35

Цель: Подключить tilemap и отрисовать слои

  • Получаем итоговый json файл карты

  • Загружаем игровые ассеты в сцене прелоада ресурсов

  • Знакомимся с возможностями Phaser.Tilemaps.Tilemap и реализуем отрисовку слоев карты

5. Слои Tilemap
21:17

Цель: Добавить на карту объекты столкновений

  • Подготавливаем спрайтлист объектов в TexturePacker

  • Загрузить ассеты в сцене предзагрузки ресурсов

  • Подключаем физический движок MatterJS

  • Реализуем добавление объектов со слоя объектов

6. Объекты Tilemap
21:48

Цель: Вывести на экран машину игрока

  • Получаем позицию из заданной в Tiled точки на карте

  • Создаем класс игрока для отрисовки машины в нужном месте

  • Позиционируем игровую камеру относительно машины игрока

7. Машина игрока
17:16

Цель: Реализовать газ и задний ход

  • Получаем направление движения по нажатию клавиш вверх и вниз

  • Используем Phaser.Math.Vector2 для определения скорости с учетом угла поворота

  • Устанавливаем скорость машины на основе направления движения и угла поворота спрайта

8. Движение машины
19:20

Цель: Реализовать повороты налево и направо

  • Получаем направление поворота по нажатию клавиш влево и вправо

  • Определяем новое значение угла разворота

  • Устанавливаем новый угол поворота спрайту машины

9. Управление движением
14:22

Цель: Реализовать ускорение и торможение

  • Плавно увеличиваем скорость при разгоне и плавно снижаем при торможении

10. Ускорение и торможение
12:15
11. Обработка трения
20:40
12. Прохождение чекпоинтов и кругов
26:50
13. Скольжение по лужам
13:29
14. Статистика гонки
17:20
15. Вывод статистики
15:28
16. Окно завершения уровня
17:16
17. Стартовая сцена
13:02
18. Создание сервера
26:52
19. Настройка Socket.IO
25:11
20. Поиск противника
20:36
21. Установка параметров старта игрокам
19:15
22. Синхронизация движения игроков
19:52

Вы можете свободно пользоваться официальной документацией, примерами или любыми доступными ресурсами, чтобы найти ответы правильный на вопрос или вспомнить названия классов, методов и свойств.

Официальная документация: https://photonstorm.github.io/phaser3-docs/index.html

Официальные примеры: http://labs.phaser.io/index.html

Руководства с примерами: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html


Тест по 3 модулю
10 questions
Задания для самостоятельной работы по 3 модулю
00:21

Вы можете свободно пользоваться официальной документацией, примерами или любыми доступными ресурсами, чтобы найти ответы правильный на вопрос или вспомнить названия классов, методов и свойств.

Официальная документация: https://photonstorm.github.io/phaser3-docs/index.html

Официальные примеры: http://labs.phaser.io/index.html

Руководства с примерами: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html

Время прохождения теста: 90 минут.

Для прохождения достаточно набрать 50% правильных ответов.

Итоговый тест по всему курсу
10 questions
Заключение
00:25
Requirements
  • Знание базовых возможностей ES6 в JavaScript
  • Понимание объектно-ориентированного программирования
Description

Вы хотите попасть в геймдев?

Изучаете программирование и хотите прокачать свои скиллы в разработке программ? Есть идея игры, но не знаете, как подступиться к технической реализации?

Этот курс для вас!

В ходе обучения мы изучим популярный игровой фреймворк Phaser 3, используемый для создания отличных HTML5 игр.

Почему именно Phaser?

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

Зачем создавать HTML5 игры?

Рынок HTML5 игр сегодня на пике развития. Социальные сети активно развивают свои игровые платформы для поддержки HTML5 игр и ищут новых разработчиков. Одноклассники постоянно проводят конкурсы в HTML5 направлении с розыгрышем щедрых призов. Facebook открыл платформу Instant Games, а Вконтакте активно работает над HTML5 платформой Direct Games. Instant игры можно запустить даже в Telegram!


Who this course is for:
  • Профессиональные разработчики разных отраслей, интересующиеся игровой индустрией
  • Инди-разработчики и программисты игр
  • Студенты IT специальностей
  • Геймдизайнеры и художники, владеющие языком JavaScript