Станция НЛО. Специальный выпуск #1

Тема: Воспоминания о Китае
Гость: Василий Кузенков, персональный канал @webcorner

Содержание

00:00:26 Знакомство с гостем
00:13:45 Вход в китайский язык
00:17:58 Языковые особенности, слэнг
00:22:34 Китайский интернет
00:30:48 Компьютерные клубы
00:33:10 Строгий/анонимный доступ в интернет
00:36:54 Интернет-сервисы (аналоги gmail, youtube, steam)
00:44:02 Разработчики в Китае
00:46:44 Как появляются разрабы
00:53:07 Китайский IT рынок
00:58:24 Известные китайские продукты
01:00:55 Рынок стартапов в Китае
01:03:27 Желание уехать из Китая
01:07:53 Можно ли выйти из IT
01:09:14 Участие государства в жизни частных компаний
01:12:31 Слежка за постами в сети
01:14:08 Work life balance, работа 6 дней в неделю и выгорания
01:19:53 Уровень линейного разработчика
01:21:54 Если захотелось в Китай

Материалы к выпуску

— Маг на полную ставку, новелла с участием в переводе Василия
— Путешествие на Запад, один из классических романов
— Искусство войны, Сунь-цзы, древнейший трактат
— Троецарствие, исторический роман XIV века
— Tencent, известная компания

@xufostation, канал про разработку и информационные технологии

За эти новогодние каникулы поднял количество решенных задач на leetcode с ~170 до ~240. Согласен, для опытных алгоритмистов конечная цифра небольшая, но для себя, можно сказать, устроил марафон. Вместе с этим приобрел дополнительную литературу, чтобы закрыть основные пробелы. Хотелось бы и дальше практиковаться в решении алгоритмических задач. Зачем? Алгоритмы в большинстве крупных компаний это один из этапов технического собеседования. Алгоритмы помогут реализовывать что-то интересное, например, летом я делал шутер от первого лица. Это те знания, которые не устареют в ближайшие десятилетия точно, считайте база. Так о чем это я?

На фоне всего этого хотел бы поинтересоваться у читающих канал:

Frontend CTF 2025

Запуск сегодня в 19:03 (по мск), это уже совсем скоро

Чат участников - @yalovefrontend_ctf

На днях осилил книгу от Кена Уильямса «Sierra: Сказка с несчастливым концом». Книга понравилась. А чтобы не мучать вас своим обзором хочу поделиться обзором ниже:

Отрезок из обзора Old-Hard SX - книги "Sierra: Сказка с несчастливым концом" и "История российских компьютерных игр"

Рендеринг как в Id software из начала 90ых или несколько слов о моем текущем хобби

В очередной раз я делал поползновения в сторону развития своего шутера в браузере. Мне хотелось повторить идеи из всемирно известной игры Doom, в частности то, как была реализована отрисовка (рендеринг). Изначально я воспользовался туториалом по отрисовке через Raycasting, дополнил знаниями про entity-component-system паттерн и получил то, что возможно вы уже видели — аналог игры Wolfenstein 3D. Чтобы приблизиться к DOOM необходимо реализовать алгоритм BSP — Binary Space Partitioning, к чему в последние выходные и стремлюсь.

То, каким образом движок DOOM устроен изнутри, можно почитать в книге Game Engine Black Book DOOM, в которой, к слову, и описано использование алгоритма упомянутого выше. А именно в одной из глав книги описывается то, как разработчик 3d движка Джон Кармак реализовывал рендеринг на основе статьи Constructing Good Partitioning Trees. Другими словами спросить AI-помощник, найти туториал или посмотреть в чужой открытый код тогда было нельзя. Можно сказать, что id software была первопроходцем в этом вопросе для геймдева.

Про BSP деревья также нашел в сети замечательный цикл статей — Введение в BSP деревья или BSP для самых «маленьких», а на youtube реализацию DOOM на Python с открытым исходным кодом (ссылки под видео) и объяснением идей алгоритмов, в том числе и BSP (игра написана не совсем с нуля, под капотом используется библиотека raylib).

Надеюсь, что на каких-нибудь очередных выходных мне все-таки удастся добраться и победить реализацию этого алгоритма, чтобы переписать свой First Person Shooter.

PS. Если вы хотите пропитаться духом и историей компании Id software, тем, как появился на свет DOOM, какие отношения были между основателями компании, то строго рекомендую почитать/послушать книгу:
Повелители DOOM. Как два парня создали культовый шутер и раскачали индустрию видеоигр. В книге, кстати, присутствует момент встречи с Кеном Уильямсом, в прошлом владельцем компании Sierra Online, книгу которого также рекомендовал выше.

Станция НЛО. Специальный выпуск #2

Тема: Миша пишет игровой движок
Гость: Михаил Ремелле, персональный канал @misha_pishet_dvizhok

Содержание

00:00:39 Знакомство с гостем
00:02:02 Почему не сиделось во фронтенде
00:05:02 Почему бы не взять существующие решения
00:09:24 Tauri
00:11:24 itch.io
00:17:34 Game Jam
00:21:32 ИИ при разработке игр
00:25:06 Как устроен твой игровой движок
00:34:16 Как перейти от 2D к 3D играм
00:41:22 Порог входа в 3D
00:45:56 Так ли важно понимать как устроены движки
00:50:02 Как стать популярным в геймдеве?
00:57:24 Переработки норма индустрии?
01:02:56 Сложность быть замеченным
01:07:55 Не выпустить игру, но заработать на ней
01:12:10 Игры, которые рекомендуем

Материалы к выпуску

— Dacha, игровой движок для веб-браузеров, управляемый данными
— Bevy engine, игровой движок, управляемый данными, созданный на Rust
— Tauri, фреймворк для создания небольших, быстрых приложений для всех основных платформ
— Всё что нужно знать про ECS
— webglfundamentals.org, база, чтобы разбираться в WebGL и шейдерах
— www.realtimerendering.com, ресурс с материалами про рендеринг

Книги:
— Игровой движок. Программирование и внутреннее устройство
— Кровь, пот и пиксели. Обратная сторона индустрии видеоигр
— Нажми Reset. Как игровая индустрия рушит карьеры и дает второй шанс

Игры:
— Dungeon Keeper
— Игры от Naughty_Dog
— Baldur's Gate

@xufostation, авторский канал про разработку и информационные технологии

Сгенерировал случайное число, чтобы затем столько же раз случайно сгенерировать случайное число и выбрать номер неслучайного комментария

Поздравляю с победой @daria_seal

В субботу 3 мая с 10:00 до 12:00 стрим выходного дня. Будем пытаться писать DOOM, в частности разбираться с чужой реализацией и переписывать ее с C++ на TypeScript. Попробуем сделать чтение карты из WAD файла и ее отображение.

Все пройдет на платформе YouTube
https://youtube.com/@ufocoder

Browser DOOM. Stage 1

На выходных реализовал свой первый намеченный шаг, чтение из WAD файла и отображение карты. Как и многие, кто хотел сделать свой DOOM, я взял за основу проект DIYDoom. Приходилось читать и перепеписывать код с C++ на TypeScript и иногда смотреть в похожие проекты.

О WAD файле

По утверждению id Software происходит от Where's All the Data. Специальный формат данных разработанный также внутри компании и использовался для ранних версий DOOM, Heretic и Hexen. WAD файл хранит описание уровня, текстуры, музыку. WAD состоит из заголовка, наборов сущностей (lumps) и директорий, с которыми необходимо работать, считывая определенные диапазоны байт.

После получения WAD файл через Fetch API, первое, что мне пришло в голову использовать Response.prototype.bytes, который возвращал UInt8Array. Однако это оказалось опрометчивым. Cогласно описанию формата вам придется работать как со знаковыми и беззнаковыми числами, к тому же "различной длины". Здесь приходится Response.prototype.arrayBuffer и работа с DataView и его методами типа getInt16, getUint16, getInt32, getUint32. В результате получилась вот такая читалка, код: WADLoader и WADReader.

Браузерный Game Loop

Игровой цикл — это механизм, который работает непрерывно на протяжении всей игры и занимается обработкой пользовательского ввода, следит за обновлением состояния, занимается отрисовкой и выполняет прочие действия.

Помимо этого игровой цикл позволяет устранить зависимость игрового времени от пользовательского ввода и скорости процессора. Все это может выглядеть так:

double lastTime = getCurrentTime();
while (true)
{
  double current = getCurrentTime();
  double elapsed = current - lastTime;
  processInput();
  update(elapsed);
  render();
  lastTime = current;
}

Проблема браузера здесь в том, что мы не можем сделать бесконечный цикл в JavaScript. На каждый тик внутри браузерного Event Loop выполняется задача, микрозадачи и происходит отрисовка. Бесконечный цикл напросто "положит" вкладку браузер. Чтобы этого избежать и чтобы как можно раньше выполнить тик, но уже внутри Game Loop, нам необходимо использовать requestAnimationFrame, в рамках которого мы будем заниматься всем вышеперечисленным. Код: реализация game loop и использование в проекте.

Отрисовка

В проектах написанных на C++ или Python в качестве инструмента для отрисовки используется кросс-платформенная библиотека Simple DirectMedia. Мы же ограничимся CanvasRenderingContext2D и я очень надеюсь, что нам этого хватит более чем. Как-никак в оригинальной игре Doom не использовались ни OpenGL, ни Direct3D.

Что дальше

Следующий большой шаг — отрисовка уровня в (псевдо?) 3D. В прошлом месяце, мне не удалось на основе пары прочитанных статей снаскока ее реализовать. Жду, когда у меня появится очередной большой перерыв, чтобы поработать с деревьями и "школьной" геометрией.

Следить за развитием проекта:
— repo: https://github.com/ufocoder/browser-doom
— demo: https://ufocoder.github.io/browser-doom

Завтра, 10 мая, с 10:05 до 12:00 продолжим разрабатывать браузерный DOOM на TypeScript.

Задачей стрима будет перейти к отрисовке стен в 3D.

Ссылка на трансляцию:
https://www.youtube.com/watch?v=7-9gEb1ImTs

Хочу порекомендовать канал про TypeScript, в котором автор рассказывает об особенностях использования типизации в языке

Тара с типами — @typescript_bowl

К первым числам июня готовлю доклад для внутреннего митапа, где расскажу как делал браузерную wolfnstein-like игру, поэтому временно взял паузу в разработке doom-like игры и надеюсь, что успею выдать что-то стоящее. В разработке doom-like игры, кстати, продвинулся, но еще наблюдаются проблемы с геометрией. Как рендеринг будет доведен до стабильного состояния — зафиксирую об этом заметку в канале.

Raycasting Demo

Основной техникой рендринга в wolfnstein-like игре выступает Raycasting, в которой происходит «бросание лучей» из позиции наблюдателя. Когда лучи сталкиваются с объектами можно вычислить расстояния до них и отрисовывать нужной высоты и цвета вертикальные полоски пикселей.

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

Исходники: https://github.com/ufocoder/raycasting-demo
Демонстрация: https://ufocoder.github.io/raycasting-demo