etroynov

etroynov

Пикабушник
поставил 84 плюса и 7 минусов
Награды:
5 лет на Пикабу
208 рейтинг 115 подписчиков 9 подписок 22 поста 2 в горячем

Вот какое Пикабу в польше

Вот какое Пикабу в польше Косметика, Польша
Показать полностью 1

Разработка игры на phaserjs - 13: Озвучка

Разработка игры на phaserjs - 13: Озвучка Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Добрый день, уважаемые читатели.

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

Идея такая: При старте уровня запускается фоновая музыка и играет на протяжении всего уровня. При соборе звезд так же будет проигрываться музыкальный файл. Таким образом наша игра станет более интерактивной и живой.

Таким образом нашей задачей будет набрать как можно больше очков и не умереть.

ПОДГОТОВКА К РАБОТЕ

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все необходимые файлы доступны по ссылке.

ЗАГРУЗКА ИГРОВЫХ ФАЙЛОВ

Для начала нам нужно загрузить звуковые файлы в игру, для этого добавим следующий код:

Разработка игры на phaserjs - 13: Озвучка Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

затем нам нужно загрузить файлы в phaser.js что бы он мог с ними взаимодействовать, для этого в в функцию preload нужно добавить следующий код:

Разработка игры на phaserjs - 13: Озвучка Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Как видно на изображении выше мы добавили два аудиофайла:

collect - проигрывается при сборе звездочек;

level - проигрывается в время уровня так называемая музыкальная "тема" уровня;

ПРОИГРЫВАНИЕ ЗВУКОВЫХ ФАЙЛОВ

После того как мы загрузили файлы в phaser.js, мы можем с ними взаимодействовать, для начала сделаем так что бы при старте уровня началась проигрываться музыка ( музыкальная тема/сопровождение ), для этого в функцию create нужно добавить следующий код:

Разработка игры на phaserjs - 13: Озвучка Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

на 2, 3 строке мы сохраняем ссылки на музыкальные объекты для упрощения работы с ними, на строках 5-7 мы добавляем проверку запускать проигрывание "темы" только если она остановлена, что бы избежать двойного запуска.

Также добавим озвучивание процесса сбора звездочек, для этого нам нужно добавить следующий код:

Разработка игры на phaserjs - 13: Озвучка Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

На сегодня это все в следующем уроке мы рассмотрим процесс разбиения игры на отдельные модули для структуризации кода и упрощения разработки.

Показать полностью 5

Разработка игры на phaserjs - 12: Бомбы

Разработка игры на phaserjs - 12: Бомбы Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Добрый день, уважаемые читатели.

Спустя долгое время и кучи перемен в жизни ( сменил несколько работ, переехал жить в другую страну ), я наконец то возвращаюсь к данной серии уроков с твердым намерением закончить его.

И так поехали!

В прошлом уроке мы добавили в игру счётчик очков, очки начисляются за каждую собранную звезду, таким образом наша игра приобрела некий смысл. В данном уроке мы добавим небольшую интригу, усложнив сбор звезд падающими с "неба" бомбами.

Идея: когда вы соберете все звезды в первый раз, будет скинута прыгающая бомба. Бомба будет просто случайным образом подпрыгивать по уровню, и если вы столкнетесь с ней, вы умрете. Все звезды возродятся, чтобы вы могли собрать их снова, после того как вы соберете и их, будет сброшена еще одна бомба.

Таким образом нашей задачей будет набрать как можно больше очков и не умереть.

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все необходимые файлы доступны по ссылке.

Добавляем бомбы

Первое что нам нужно, это группа объектов для бомб и несколько коллайдеров:

Разработка игры на phaserjs - 12: Бомбы Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

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

Разработка игры на phaserjs - 12: Бомбы Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Пока все хорошо, но нам нужно реализовать механизм сброса бомб. Для этого модифицируем функцию collectStar:

Разработка игры на phaserjs - 12: Бомбы Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Мы используем метод countActive, чтобы узнать, сколько звезд осталось в живых. Если живых звезд нет, значит, игрок собрал их все, и нам нужно, снова включить все звезды и сбросить их положение по оси Y на ноль. Это заставит все звезды снова упасть с верхней части экрана.

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

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

Разработка игры на phaserjs - 12: Бомбы Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост
Показать полностью 5

Что за монета такая?

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

Что за монета такая? Старинные монеты, Что за монета, Нумизматика, Нужен совет, Длиннопост
Что за монета такая? Старинные монеты, Что за монета, Нумизматика, Нужен совет, Длиннопост
Показать полностью 2

Разработка игры на phaserjs - 11: счётчик очков

Разработка игры на phaserjs - 11: счётчик очков Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Добрый день, уважаемые читатели.

В прошлом уроке мы добавили в игру звезды и возможность их сбора, таким образом наша игра приобрела некий смысл т.к до этого наш мир был пуст и безжизнен. Однако на данный момент процесс сбора звезд не имеет никакой обратной связи, кроме того что звезда исчезает после того как мы "набегаем" на неё нашим персонажем. Для того что бы сделать этот процесс более интерактивным мы добавим в игру счётчик очков.

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все необходимые файлы доступны по ссылке.

Реализация счётчика

Для этого мы будем использовать функционал работы с текстом встроенный в phaserjs. Для этого мы объявим две переменные, одна будет содержать текущий счёт, а вторая объект который позволяет работать с текстом:

Разработка игры на phaserjs - 11: счётчик очков Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Для переменной scoreText мы устанавливаем значение в функции create:

Разработка игры на phaserjs - 11: счётчик очков Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Где:

- 16x16 - это координаты на которых будет располагаться счётчик ( отсчёт идет от левого верхнего угла );

- 'score: 0 ' - начальное значение счётчика;

{ fontSize: '32px', fill: '000' } - объект который устанавливает размер и цвет счётчика, если не устанавливать эти параметры по умолчанию phaserjs будет использовать шрифт Courier;

Далее нам нужно изменить функцию collectStar, мы добавим в неё код который будет повышать значение счётчика каждый раз когда мы поднимаем звезду:

Разработка игры на phaserjs - 11: счётчик очков Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Таким образом каждая поднятая звезда будет прибавлять к нашему счётчику 10 очков:

Разработка игры на phaserjs - 11: счётчик очков Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост
Показать полностью 5

Разработка игры на phaserjs - 10: добавление звезд

Разработка игры на phaserjs - 10: добавление звезд Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Добрый день, уважаемые читатели.


Предыдущие уроки:

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

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

Давайте добавим несколько звезд на сцену и позволим игроку собирать их. Для этого мы создадим новую группу под названием «звезды» и заполним ее.

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все не обходимые файлы доступны по ссылке.

В нашей функции create мы добавляем следующий код:

Разработка игры на phaserjs - 10: добавление звезд Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

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

Группы можно настраивать используя объекты конфигурации. В этом случае объект группы состоит из 3 частей:

1. Мы создаем группу объектов и помещаем ее в переменную stars;


2. Устанавливаем ключ текстуры в качестве изображения звезды. Это означает, что все дочерние элементы, добавленные в эту группу будут по умолчанию получать текстуру звезды;


3. Устанавливаем итератор равным 11. Поскольку он автоматически создает 1 дочерний элемент, повторение 11 раз означает, что в общей сложности мы получим 12 дочерних элементов, и это как раз то, что нам нужно для нашей игры.

Последняя часть - setXY - используется для определения позиции 12 дочерних элементов, которые создает группа. Каждый дочерний элемент будет размещен начиная с x: 12, y: 0 и с шагом x70. Это означает, что первый дочерний элемент будет расположен в 12 x 0, второй - в 70 пикселях от 82 x 0, третий - 152 x 0 и т. д. Значения 'step' - это действительно удобный способ разметки дочерних групп во время создания. Значение 70 выбрано, потому что это означает, что все 12 звезд будут идеально расположены на экране.

Следующий фрагмент кода выполняет обход всех элементов в группе и дает им случайное значение отказов Y в диапазоне от 0,4 до 0,8. Диапазон отскока находится между 0, отскока вообще нет, и 1, полный отскок. Поскольку все звезды появляются в точке y, гравитация будет тянуть их вниз, пока они не столкнутся с платформами или землей. Значение отскока означает, что они будут случайным образом возвращаться обратно до тех пор, пока, наконец, не успокоятся.

Если бы мы запустили код так, как сейчас, звезды упали бы сквозь землю игры и скрылись из виду. Чтобы остановить это, нам нужно проверить их столкновение с платформами. Мы можем использовать другой объект Collider для этого:

Разработка игры на phaserjs - 10: добавление звезд Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Помимо этого, мы также проверим, соприкасается ли игрок со звездой или нет:

Разработка игры на phaserjs - 10: добавление звезд Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

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

Разработка игры на phaserjs - 10: добавление звезд Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Проще говоря, у звезды отключено физическое тело, а ее родительский игровой объект сделан неактивным и невидимым, что убирает его с экрана.

Итог

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

Разработка игры на phaserjs - 10: добавление звезд Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост
Показать полностью 6

Разработка игры на phaserjs - 9: управление персонажем с клавиатуры

Разработка игры на phaserjs - 9: управление персонажем с клавиатуры Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Предыдущие посты

1. Введение

2. Выбор редактора

3. Hello world

4. Загрузка ресурсов

5. Создание мира

6. Как работают платформы

7. Создание персонажа

8. Управление физическим телом в пространстве

В прошлом уроке мы добавили обработку столкновений с объектами которая работает хорошо. Однако на данный момент у нас нет возможности управлять нашим персонажем. Возможно вы подумали что сейчас нам нужно обратится к документации и поискать в ней как можно прослушивать события в Phaserjs, однако в этом нет необходимости т.к в Phaserjs есть удобный менеджер клавиатуры.

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все не обходимые файлы доступны по ссылке.

Добавляем управление с клавиатуры

Как я уже сказал ранее в Phaserjs есть встроенный менеджер клавиатуры который можно подключить, одной строчкой:

Разработка игры на phaserjs - 9: управление персонажем с клавиатуры Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Чаще всего для управления персонажем используются клавиши верх, низ, влево, вправо ( в консолях не на пк, на пк это WASD сочетание ) обработку нажатия этих клавиш мы добавим в метод loop:

Разработка игры на phaserjs - 9: управление персонажем с клавиатуры Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост

Хотя мы добавили много кода, все должно быть довольно читабельным.

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

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

Реализация прыжка

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

Если оба эти условия соблюдены, мы применяем вертикальную скорость 330 пикс / сек. Игрок автоматически упадет на землю из-за гравитации.

Попробуйте поменять значение 330 и посмотреть что при этом получится.

Разработка игры на phaserjs - 9: управление персонажем с клавиатуры Gamedev, Typescript, Javascript, HTML, Холст, Phaser, Длиннопост
Показать полностью 4

Разработка игры на phaserjs - 8: управление физическим телом в пространстве

Разработка игры на phaserjs - 8: управление физическим телом в пространстве Gamedev, Typescript, Javascript, HTML, Phaser, Холст, Длиннопост

Предыдущие посты ( по просьбе @Lionin ):


1. Введение

2. Выбор редактора

3. Hello world

4. Загрузка ресурсов

5. Создание мира

6. Как работают платформы

7. Создание персонажа

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

На момент написания статьи Phaser поставляется с Arcade Physics, Impact Physics и Matter.js Physics. Для этого урока мы будем использовать систему Arcade Physics для нашей игры, которая проста и легка, идеально подходит для браузерных игр.

Когд спрайт имеющий свойства физического объекта создан, ему присваивается свойство body, которое является ссылкой на его Аркадное Физическое Тело. Это представляет спрайт как физическое тело в движке Phasers Arcade Physics. У объекта body есть много свойств и методов, с которыми мы можем управлять.

Например, чтобы симулировать влияние гравитации на спрайт, достаточно написать:

Разработка игры на phaserjs - 8: управление физическим телом в пространстве Gamedev, Typescript, Javascript, HTML, Phaser, Холст, Длиннопост

Это произвольное значение, но логически, чем выше значение, тем тяжелее ощущается ваш объект и тем быстрее он падает. Если вы добавите это в свой код или запустите, вы увидите, что наш персонаж падает без остановки, полностью игнорируя созданную нами ранее площадку:

Разработка игры на phaserjs - 8: управление физическим телом в пространстве Gamedev, Typescript, Javascript, HTML, Phaser, Холст, Длиннопост

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

Мы уже сказали Phaser, что наша земля и платформы будут статичными телами. Если бы мы этого не сделали и вместо этого создали динамические, тогда, когда игрок столкнулся с ними, он на мгновение остановился бы, и после этого все бы рухнуло. Это объясняется тем, что, если не указано иное, наземный спрайт является движущимся физическим объектом, и когда игрок ударяет сталкивается с ним, сила полученная в результате столкновения ( два тела обмениваются своими скоростями ) начинает действовать на землю или платформы, поэтому и земля также начинает падать.

Для того чтобы игрок мог безопасно прыгать по платформам, мы создадим объект Collider. Этот объект контролирует два физических объекта (которые могут включать в себя группы) и проверяет наличие коллизий или совпадений между ними. Если это произойдет, он может при необходимости вызвать ваш собственный обработчик, но для простой обработки столкновений с платформами нам это не требуется:

Объект Collider берет на себя всю обработку по столкновению переданных нами объектов:

Разработка игры на phaserjs - 8: управление физическим телом в пространстве Gamedev, Typescript, Javascript, HTML, Phaser, Холст, Длиннопост
Показать полностью 4
Отличная работа, все прочитано!