Движок для визуальных новел

@variussoft/vn-engine

Пост совершенно незапланированный, а стихийный. Так уж получилось, что я написал свой движок для создания визуальных новелл. Сделал я это по весьма простой причине: главенствует на этом поприще РенПай. Но как я смог понять, там всё печально. Использовать Юнити, Годот, Анреал для таких целей – выстрел из пушки по воробьям.

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

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

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

Для создания шаблона игры достаточно выполнить команду:

    npm create @variussoft/vn-game my-game

Обновить движок в уже существующем проекте можно командой:

    npm i @variussoft/vn-engine

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

Обратную связь пишите здесь в комментариях или на почту: nick@variussoft.ru

«Танчики» на html5

Пишем свой игровой движок

После прошлого поста я что-то так проникся происходящим, что решил воссоздать ещё одну любовь детства. Но как говорил Маркус Персон: «Если вы не можете написать свой движок, то гавно вы, а не разработчики». Там, скорее всего, было как-о иначе, но суть такая. И да, с этой мыслью я в корне не согласен, но написать свой движок – задача, как минимум, интересная. Я решил, что аркадная игра для этого подходит, как ничто другое. По сути, некий аналог движка уже был реализован в тетрисе, но здесь нужна будет и какая-никакая физическая модель, и интеллект врагов и рендер всего этого безобразия в несколько слоёв и с ФПС побольше, чем 2 :)

Так что, приступим. Что нам нужно:

• Просчёт физики
• Работа ИИ агентов
• Считывание действий игрока
• Отрисовка результата работы предыдущих пунктов.

Для одного поста такая задачка звучит жирновато, поэтому, видимо, будет серия.

Я решил разделить рисования окружения (статичных объектов), врагов и игроков (динамических объектов) и UI на три разных канваса, которые просто повещены один поверх другого. Там можно будет проще и меньше перерисовывать.

Начинается наш код с проверки, готова ли страница к явлению миру нашего движка.

    if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}

Если готова, то давай же скорее всё проинициализируем

Тут всё просто:

    function init() {
  console.log('Battle City Remake - Initializing...');

  // Инициализация рендерера
  initRenderer();

  // Очищаем все слои
  clearBackground();
  clearForeground();
  clearUI();

  // Рисуем границу игрового поля и отладочную сетку
  renderGameFieldBorder();
  renderDebugGrid();

  console.log('Initialization complete. Starting game loop...');

  // Запускаем game loop
  requestAnimationFrame(gameLoop);
}

Но понятное дело, что кода тут мало, потому что всё вынесено в отдельные методы.

Есть ли среди них хоть что-то интересное?

Ну, renderDebugGrid и renderGameFieldBorder одним названием уже говорят, что там происходит.

Логично, что самое интересное происходит где-то тут requestAnimationFrame(gameLoop);

Но давайте сначала заглянем в инициализацию рендера

    export function initRenderer() {
  // Получаем canvas элементы
  backgroundCanvas = document.getElementById('background-canvas');
  foregroundCanvas = document.getElementById('foreground-canvas');
  uiCanvas = document.getElementById('ui-canvas');

  // Получаем контексты
  backgroundCtx = backgroundCanvas.getContext('2d');
  foregroundCtx = foregroundCanvas.getContext('2d');
  uiCtx = uiCanvas.getContext('2d');

  // Определяем DPR для HiDPI экранов
  dpr = window.devicePixelRatio || 1;

  // Настраиваем все три canvas
  setupCanvas(backgroundCanvas, backgroundCtx);
  setupCanvas(foregroundCanvas, foregroundCtx);
  setupCanvas(uiCanvas, uiCtx);

  console.log(`Renderer initialized (DPR: ${dpr})`);
}

function setupCanvas(canvas, ctx) {
  // Физический размер canvas
  canvas.width = CANVAS_WIDTH * dpr;
  canvas.height = CANVAS_HEIGHT * dpr;

  // Масштабируем контекст для компенсации DPR
  ctx.scale(dpr, dpr);

  // Отключаем сглаживание для пиксельной графики
  ctx.imageSmoothingEnabled = false;

  console.log(`Canvas ${canvas.id} setup: ${canvas.width}×${canvas.height} (logical: ${CANVAS_WIDTH}×${CANVAS_HEIGHT})`);
}

CANVAS_WIDTH и CANVAS_HEIGHT — это константы, они у меня в отдельном файлике лежат, там просто 800 на 600.

В целом, страничка готова к тому, чтоб рисовать всякое

Дёргаем requestAnimationFrame и отдаём её наш gameLoop

    function gameLoop(currentTime) {
  // Вычисляем deltaTime
  const deltaTime = currentTime - lastTime;
  lastTime = currentTime;

  // Накапливаем время
  accumulator += deltaTime;

  // Fixed timestep - обновляем логику с фиксированным шагом
  while (accumulator >= FRAME_TIME) {
    update(FRAME_TIME);
    accumulator -= FRAME_TIME;
  }

  // Рендерим независимо от update
  render();

  // Продолжаем loop
  requestAnimationFrame(gameLoop);
}

Я решил фиксировать ФПС на 30

    export const FPS = 30;                    // Фиксированный FPS
export const FRAME_TIME = 1000 / FPS;     // ~33.33ms на кадр

Метод update содержит (ну, будет содержать) всю нашу игровую логику. Пока он только считает фпс и выводит его на экран для отладки.

    function update(dt) {
  // Пока пусто - здесь будет логика игры

  // Подсчёт FPS для отладки
  frameCount++;
  fpsTimer += dt;

  if (fpsTimer >= 1000) {
    fps = frameCount;
    frameCount = 0;
    fpsTimer = 0;

    // Обновляем FPS на странице
    const fpsElement = document.getElementById('fps');
    if (fpsElement) {
      fpsElement.textContent = fps;
    }
  }
}

Ну и когда всё закончено, отрисовываем

    function render() {
  // Background canvas - перерисовывается только при изменении карты
  // (пока только отладочная сетка, нарисованная в init)

  // Foreground canvas - очищаем и рисуем сущности каждый кадр
  clearForeground();
  // TODO: Здесь будет рендер танков, пуль, эффектов

  // UI canvas - очищаем и рисуем UI каждый кадр
  clearUI();
  renderUI();
}

То есть, по сути, ничего интересного, просто рисую полосочки и квадратики для UI

Результат выглядит вот так

Следующий пост будет посвящён второму этапу

И да, я упоролся и расписал себе полноценный план реализации на 13 этапов. Без ДизДока последнее время вообще не представляю как работать. А раз уж я в команде один, то сам себе и ТЗ пишу... Но лучше так, чем лепить полную отсебятину.

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

А пойду пилить обновление для Лиспублики)

---

Всем хороших игр!

Игровые новости #4

Game Pulse | Неделя четвёртая

Ни недели без срача 2

Даниэль Вавра (тот, который киндом кам натворил) решил вступиться за Свена Винке (Лариан) в сраче по поводу нейросетей. Он не просто сказал, что, мол, ай-ай-ай. Он подошёл к ещё даже не тлеющему костру, кинул в него бутылку с бензином и хохотал.

Основной посыл был в том, что: «Вы наезжаете на одну команду за то, что она делает тоже самое, что и ВСЕ вообще остальные».

Поможет ли это людям считающим, что можно линчевать кого угодно за использование инструмента, который им не нравится, понять, что они что-то делают не так? Время покажет.

---

Серия Fifa больше не про спортсим

Правами на издание игр по бренду Фифа теперь принадлежат Нетфликсу и они решили, что теперь это будет казуальная дрочильня с управлением с телефона. Как сказали сами Нетфликс: чтоб в футбол могли играть все, а не только задроты (ну там другой немного текст, но посыл такой).

---

Самой бюджетной СтимДек больше не будет на рынке

Валв не сильно так переживая просто молча сняла её с производства. Поигрались, и хватит.

---

Вышла новая LTS версия Unity

Из новшеств:

Улучшили производительность. Заявлено, что в новой версии скорость билда больших приложений возросла в два раза, а TypeTree-рантайм стал потреблять на 99% меньше памяти.

Platform Toolkit. Новый пакет даёт единый удобный API для написания базовой инфраструктуры игр на все основные платформы. Обещают, что станет удобнее добавлять достижения, делать сохранения и интеграцию с аккаунтами. Обещается поддержка: Windows (включая сервисы Steam), Xbox Series и One, PlayStation 5, Android, iOS и Нинтендо Свитч (и первая и вторая).

Новая версия OpenXR 1.1 для Android умеет динамически скейлить разрешение игры для сохранения производительности.

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

P.S. Новость не прошедшей недели, но я тормоз и сам только сейчас узнал.

---

У Titan Quest выходит новая глава

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

Новые локации, задания, умения и т.д. Всё вполне ожидаемо.

---

Беседка обновляет свой движок Creation Engine

Движку, на котором Bethesda делает свои игры, примерно миллиард с половиной лет. Одни и те же баги тянутся шлейфом ещё с Обливиона. И вот прошёл слушок, что Майкрософт активно помогает ребятам из беседки обновить этот движок, внедрив в него куски анреал энджина. Хорошо ли это? Тут только время покажет, но звучит интересно.

---

Большой апдейт для Архолоса

Вы не знаете что это? Забавно... Юридически – это мод на вторую Готику. Фактически – это буквально новая часть классической Готики, этакий фанатский вбоквел, официально одобренный издателем. В фанатской среде считается, что это лучшее, что происходило с серией с момента релиза Ночи Ворона.

Вот такой список обновлений обещают:

• Хардкорный режим;
• Новые сюжетные линии и квесты;
• Расширения возможностей кастомизации протагониста, включая не только внешность, но и способности;
• Свежие локации и предметы;
• Улучшение искусственного интеллекта противников;
• Новые случайные встречи;
• Новые мини-игры;
• Ребаланс;
• Расширение боевой арены;
• «Множество сюрпризов».

---

Ну на этом, пожалуй, и всё. Индустрия перед праздниками чуть затихла. Новые новости (а может и старости) уже после Нового года.

Всем хороших игр!