Как оживить персонажей в браузере без боли и тяжелых движков

22 июн 2026
1,363
105
32
1 месяц

Представьте, что вы делаете небольшую браузерную игру или интерактивную визуализацию. У вас уже есть отрисовка — скажем, на Three.js или Babylon.js. Но как только дело доходит до поведения персонажей, начинается головная боль. Нужно заставить бота обходить препятствия, принимать решения в зависимости от ситуации или хотя бы просто плавно двигаться в толпе. Писать всё это с нуля на чистом JavaScript — сомнительное удовольствие, а тащить огромный игровой движок ради пары умных NPC часто не хочется.

Недавно я наткнулся на Yuka. Это небольшая библиотека, которая берет на себя всю «черную работу» по созданию игрового искусственного интеллекта. Самое приятное, что она не привязана к конкретному графическому движку. Ей всё равно, рисуете вы в 2D на Canvas или строите сложные 3D-сцены.

Что умеет Yuka

Автор проекта, Mugen87 (один из активных контрибьюторов Three.js), собрал в библиотеке классические алгоритмы игрового ИИ, которые обычно описывают в учебниках, но редко упаковывают в удобный JS-пакет.

Автономные агенты и рулевое управление

В основе Yuka лежит концепция агентов. Это объекты, которые обладают собственной логикой движения. Вместо того чтобы просто менять координаты x и y, вы задаете агенту поведение. Например, «преследуй эту цель», «избегай столкновений» или «блуждай в заданном радиусе».

Библиотека реализует так называемое Steering Behaviors. Это позволяет персонажам двигаться плавно и естественно. Они не просто поворачивают под прямым углом, а замедляются перед поворотами и огибают препятствия по дуге. Если вам нужно создать стаю рыб или толпу прохожих, которые не проходят сквозь друг друга, эти инструменты сэкономят неделю работы.

Реклама

Обычно поиск пути в JS-проектах заканчивается на алгоритме A*. Yuka идет дальше. Здесь есть полноценная поддержка навигационных мешей (NavMesh). Это специальные полигональные сетки, которые описывают доступные для ходьбы зоны.

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

Зрение и память

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

Это позволяет реализовать классические стелс-механики:

  • Бот видит игрока, только если тот попал в конус зрения.
  • Если игрок спрятался за стену, бот еще пару секунд помнит его последнее местоположение и идет проверять.

Нечеткая логика

Вместо жестких условий if (health < 20) run(), Yuka предлагает использовать Fuzzy Logic. Это позволяет создавать более гибкое и непредсказуемое поведение. Персонаж может «немного испугаться» или «почувствовать уверенность», что делает его действия менее механическими.

Как это выглядит в коде

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

const entityManager = new YUKA.EntityManager();
const time = new YUKA.Time();

function animate() {
    requestAnimationFrame(animate);
    const delta = time.update().getDelta();
    entityManager.update(delta);
    
    // Здесь ваш код отрисовки, например, Three.js
    render();
}

Для самого агента мы просто создаем экземпляр Vehicle и добавляем ему нужное поведение:

const player = new YUKA.GameEntity(); // Наша цель
const enemy = new YUKA.Vehicle();

const pursuitBehavior = new YUKA.PursuitBehavior(player);
enemy.steering.add(pursuitBehavior);

entityManager.add(enemy);

Теперь enemy будет автоматически вычислять вектор движения, чтобы перехватить player. Вам остается только синхронизировать позицию объекта Yuka с вашим графическим мешем.

Почему стоит попробовать

Главный плюс Yuka — её автономность. Библиотека весит немного и не заставляет вас переписывать весь проект под свой лад. Если вы используете Three.js, то в репозитории есть куча примеров именно под этот стек.

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

Из минусов я бы отметил, что документация местами суховата. Она больше похожа на справочник API, поэтому новичкам в GameDev может быть сложно понять, как связать все компоненты вместе. В этом случае лучше сразу лезть в код примеров или почитать книги, которые рекомендует автор (например, «Programming Game AI by Example» Мата Бакленда).

Кому пригодится

Yuka идеально подходит для:

  1. Разработчиков браузерных игр, которым нужно что-то мощнее, чем простое перемещение по координатам.
  2. Создателей интерактивных инсталляций и симуляций.
  3. Тех, кто хочет изучить основы игрового ИИ на практике, не погружаясь в дебри C++ и тяжелых движков вроде Unity или Unreal.

Это добротный, проверенный временем инструмент (проекту уже больше 7 лет), который закрывает конкретную нишу в экосистеме JavaScript. Если вам нужно добавить капельку интеллекта вашим объектам на сцене, Yuka — это первое, на что стоит взглянуть.

🍪 Мы используем файлы cookie и сервис аналитики Яндекс.Метрика, чтобы сайт работал лучше. Продолжая пользоваться devtrends.ru, вы соглашаетесь с обработкой данных согласно Политике конфиденциальности.