Тестирование моего движка WebGL при создании игры с нуля за 48 часов

В минувшие выходные прошла 53-я итерация игрового джема Ludum Dare, где у вас есть 48 часов, чтобы создать игру полностью с нуля. На этот раз темой была Доставка.

В преддверии мероприятия я не был уверен, хочу ли я участвовать или нет. Я был очень занят в последнее время, и я мог бы использовать выходные. Однако я рад, что присоединился и сделал свою 14-ю игру Ludum Dare.

Тестирование Sparrow WebGL

Основная причина, по которой я присоединился к мероприятию, заключалась в том, что я хотел протестировать Sparrow, движок WebGL, над которым я работал последние несколько недель. Он все еще находится на очень ранней стадии разработки, и в нем не так много функций, которые были бы полезны для геймджема. Тем не менее, я всегда говорил, что для небольших игр вам действительно нужно иметь возможность отображать только 2D-изображение и текст, что мой движок уже может делать. Поэтому я решил начать работу над игрой и посмотреть, как далеко я смогу зайти.

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

Тема и идея

Как уже упоминалось, темой этого Ludum Dare была Доставка. Я не был большим поклонником этой темы, но она предоставила еще одну хорошую возможность. Недавно я играл и смотрел кое-какой контент Trackmania и понял, что никогда не делал гоночных игр. Доставка, как правило, осуществляется с помощью какого-либо транспортного средства, поэтому я только начал работать над механикой вождения, не имея никаких идей для остальной части игры.

Только к концу первого дня, когда механика вождения почувствовала себя хорошо, я запланировал еще некоторые фичи. Я хотел иметь большую открытую территорию, по которой можно было бы ездить, а это означало, что о доставке посылок в городе не могло быть и речи. Вместо этого я выбрал космический/научно-фантастический маршрут и использовал вездеход, который доставляет энергетические кристаллы обратно на свою базу. Кристаллы можно потратить на покупку улучшений для увеличения максимальной скорости, ускорения, дальности захвата и грузоподъемности. Однако, несмотря на то, что мне нравятся игры с открытым концом, заявки на участие в геймджеме выигрывают от условий победы и поражения. У меня не было хороших идей, поэтому я просто добавил таймер до тех пор, пока астероид не упадет на планету, и вы должны уйти, прежде чем истечет время, чтобы выиграть.

Программирование

Моей основной задачей было внедрение механики вождения. Базовое вождение я сделал довольно быстро, но мне очень хотелось добавить еще и дрифт, который оказался более сложным и занял у меня несколько попыток. Физика вождения — очень сложная тема и там много что можно было бы улучшить, но для простого вождения сверху вниз во время геймджема я очень доволен результатом. Как только автомобиль достигает минимальной скорости заноса, он начинает скользить, и чем быстрее он едет, тем больше его заносит.

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

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

Искусство

Я не тратил много времени на арты для этой игры. В Krita я нарисовал только несколько довольно общих пиксельных ассетов. Тем не менее, я думаю, что марсоход, база и ракета выглядят довольно хорошо, а кристаллы и фон могли бы быть намного лучше.

UI

Одним из самых больших преимуществ использования моего движка WebGL по сравнению с HTML5 является доступ к элементам пользовательского интерфейса. Практически для каждого предыдущего события Ludum Dare мне приходилось создавать простой класс кнопок, потому что каждая игра нуждается в кнопках. Однако с Sparrow я уже работал над функциями пользовательского интерфейса во втором журнале разработчиков, поэтому я мог использовать их для игры. Мне пришлось добавить и исправить некоторые функции, но это все еще был очень хороший способ реализовать и спроектировать пользовательский интерфейс для игры.

Звуковые эффекты

Обычно этот раздел называется «Музыка и звуковые эффекты», но я не добавлял музыку в свою игру. Я всегда борюсь с созданием музыки, так что это было отличное решение. Я думаю, что мне это сойдет с рук в этой игре, потому что большую часть времени вы можете слышать звук двигателя вездехода. Говоря о звуке двигателя, я думаю, что он получился довольно хорошим. Я сгенерировал коричневый шум в Audacity, а затем сильно настроил его, пока он не стал звучать как ровер. Но моя любимая часть — это очень простая строка кода: громкость звука двигателя зависит от скорости марсохода, что делает его намного более реалистичным. Я также добавил звуковой эффект звукового сигнала при движении назад, как грузовики, когда они едут назад.

Мне очень понравился звуковой эффект завершения игры. Это не здорово, но очень забавно: голос, произносящий «Приготовьтесь к удару», затем женский крик и взрыв. И да, это я пытаюсь издать высокий крик с некоторыми эффектами Audacity.

Полировка

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

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

Балансировка

По традиции я в очередной раз заморочился с балансировкой игры. Чрезвычайно сложно сделать что-то сложное, но выполнимое, особенно менее чем за час, близко к сроку. Существует также пробел в навыках игроков. Отзывы, которые я уже получил, разделились: некоторые люди считают игру слишком простой, а другие борются с ней. К сожалению, похоже, что есть и сырная стратегия, и игру можно пройти без покупки каких-либо обновлений. В игре есть небольшая доля случайности, потому что кристаллы случайным образом распределяются по карте, но с ~ 100 начальными кристаллами и новым каждые 2 секунды удача должна более или менее уравняться.

Мой движок Sparrow WebGL

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

Самая большая проблема появилась только после того, как я закончил и загрузил свою игру: я тестировал ее в разных браузерах, и она вообще не работала в Firefox. Оказывается, Firefox не поддерживает поля fontBoundingBoxAscent и fontBoundingBoxDescent объекта TextMetrics, которые я использовал для позиционирования текста в элементах пользовательского интерфейса. Это все еще кажется мне странным, потому что я почти уверен, что использовал эти поля в прошлом с HTML5 для позиционирования текста, и это всегда работало в Firefox.

Еще одна проблема, которую я обнаружил, когда работал над следами шин, заключалась в том, что WebGL не поддерживает glLineWidth. Изменение ширины линии — настолько фундаментальная функция, что я даже не подумал, что WebGL может ее не поддерживать. Я хотел, чтобы шины оставляли более широкие колеи, но это все равно работает и с тонкими линиями. Возможно, в будущем мне придется искать другие решения для рисования более широких линий в WebGL.

Я использовал другой подход к этому Ludum Dare, и я должен сказать, что это было довольно освежающе. Моя главная цель состояла в том, чтобы попробовать мой движок WebGL и реализовать достойную 2D-механику вождения. Делать игру было необязательно, если бы у меня в итоге был только 2D-симулятор вождения, я был бы счастлив. Когда позже я добавил некоторые игровые механики, они оказались не очень сложными, а это означало, что у меня было некоторое время для полировки и работы над анимацией запуска ракеты, а звуковой эффект окончания игры был очень веселым. Я думаю, что я слишком старался сделать хорошие игры в некоторых из предыдущих Ludum Dares, и делать это с гораздо более расслабленным настроем гораздо веселее. Надеюсь, к следующему событию мой движок WebGL будет намного более совершенным, и я смогу использовать его в полной мере для создания лучшей игры с меньшими усилиями.

Играй в мою игру: https://pingpoli.de/ld53/

Страница игры Ludum Dare: https://ldjam.com/events/ludum-dare/53/crystal-courier

Первоначально опубликовано на https://pingpoli.de.