dota2-grid-toolkit

# 🎨 Dota 2 Hero Grid Toolkit **Три офлайн-инструмента для создания сеток героев в Dota 2 — из картинки, из готового арта или с нуля.** [![Формат](https://img.shields.io/badge/JSON-Dota%20v3-c99c5b)](#-формат-json) [![Офлайн](https://img.shields.io/badge/офлайн-100%25-1f4a2a)](#-приватность) [![Лицензия](https://img.shields.io/badge/license-MIT-40596b)](LICENSE) [![Без зависимостей](https://img.shields.io/badge/зависимостей-0-4a3923)](#-приватность)

📖 О проекте

Набор из трёх браузерных инструментов, которые в связке позволяют собрать готовый hero_grid_config.json для Dota 2:

Все инструменты — один HTML-файл = один инструмент. Открываются двойным кликом в браузере, работают полностью офлайн, никуда не отправляют данные и не требуют установки.

Холст у всех — 1193 × 593 px (safe area клиента Dota 2). Всё, что нарисовано внутри, экспортируется в JSON с координатами 1:1.


🗂 Состав проекта

Файл Что делает
tools/lineart-converter.html Line-Art Converter v7.1 — превращает PNG/JPG в символы (Canny + заливка теней)
tools/pixel-ascii-editor.html Pixel ASCII Editor v7.4 — ручное рисование символами, конструктор рамок, импорт/экспорт JSON
tools/hero-grid-editor.html Hero Grid Editor — работа с категориями, героями, текстами, геометрией
presets/presets.json 30 готовых пресетов для Line-Art Converter
data/symbols.txt Библиотека используемых символов (справочно)

🌐 Онлайн-версия

Не хочешь скачивать? Открой инструменты прямо в браузере:

Инструмент Онлайн-ссылка
🎨 Line-Art Converter открыть
✏️ Pixel ASCII Editor открыть
🎴 Hero Grid Editor открыть

Всё работает полностью офлайн: после загрузки страницы никакие данные никуда не отправляются.


🚀 Быстрый старт

  1. Скачай репозиторий (Code → Download ZIP) или склонируй:
    git clone https://github.com/linsisss/dota2-grid-toolkit.git
    
  2. Открой любой из tools/*.html двойным кликом в браузере (Chrome / Firefox / Edge).
  3. Работай. Ничего устанавливать не нужно.

🖼 Line-Art Converter v7.1

tools/lineart-converter.html — автоматически превращает любую картинку в плотный набор символов.

Как это работает

  1. Картинка уменьшается до ~500 px по ширине.
  2. Canny edge detection — поиск контуров (Sobel → NMS → гистерезис).
  3. Zhang-Suen thinning — утоньшение линий до 1 px.
  4. Пространственный сэмплинг — прореживание по сетке gridStep.
  5. Автоориентация — каждому контуру подбирается символ по углу: -, |, /, \.
  6. Shading — тёмные области заливаются символами из отдельного набора.

Ключевые параметры

Параметр Смысл
Blur σ Сглаживание (больше → меньше шума, но теряются детали)
Threshold Порог силы контура
Скелетизация Утоньшение линий (включай почти всегда)
Заполнение холста % Какую долю 1193×593 займёт рисунок
Шаг сетки (px) Толщина/плотность: 2 = очень плотно, 4 = стандарт, 8+ = пунктир
Плотность % Множитель количества символов
Заливка теней Символы, плотность и порог тени

Библиотека символов

18 категорий: градиент, точки, стрелки, геометрия, звёзды, карты, типографские, линии (4 и 8 направлений), армянский, иврит, арабский, тайский, хирагана, катакана, хангыль, латиница, кириллица.

Пресеты

30 готовых пресетов лежат в presets/presets.json. Импорт: 📥 Импорт файла → выбрать файл. Дальше — клик по пресету для загрузки.

Свои пресеты сохраняются в localStorage. 📤 Экспорт всех выгрузит их обратно в JSON.

Экспорт


✏️ Pixel ASCII Editor v7.4

tools/pixel-ascii-editor.html — ручной редактор символов на холсте.

Возможности

Операции с выделением

Импорт / Экспорт Dota-JSON

Горячие клавиши

Клавиша Действие
P Dota Preview
S Выделение области
G Сетка
M / N Симметрия H / V
F Рамка
1–9 Выбор символа из активной категории
Ctrl+Z Отмена
Ctrl+C/V/D/A Копир. / Вставка / Дубль / Выделить всё
Q / E Поворот −90° / +90°
H / N Отразить H / V
+ / - Масштаб ×1.25 / ×0.8
0 Заполнить холст
Delete Удалить выделенное

🎴 Hero Grid Editor

tools/hero-grid-editor.html — работа с категориями готовой сетки.

Типы категорий

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

Массовые операции

Быстрое создание

Замена символов ASCII

Раздел «ASCII — символы» собирает все уникальные символы из ASCII-категорий. Каждому можно задать замену, потом нажать ЗАМЕНИТЬ СИМВОЛЫ или • ЗАМЕНИТЬ ВСЁ НА ТОЧКИ.

Шрифт Radiance

Для превью 1:1 можно загрузить radiance_regular.ttf из ...\dota 2 beta\game\dota\resource\.

Горячие клавиши

Клавиша Действие
Ctrl+Z Отмена
Ctrl+A Выделить всё
Esc Снять выделение / выйти из режима области
Delete Удалить выделенное
Q / E Поворот −90° / +90°
H / V Отразить H / V
+ / - Масштаб ×1.25 / ×0.8
0 Заполнить холст

📦 Формат JSON

Все инструменты пишут один и тот же формат:

{
  "version": 3,
  "configs": [
    {
      "config_name": "Custom",
      "categories": [
        {
          "category_name": ".",
          "x_position": 120.5,
          "y_position": 84.0,
          "width": 30.0,
          "height": 30.0,
          "hero_ids": []
        }
      ]
    }
  ]
}

Как поставить сетку в Dota 2

  1. Открой Dota 2.
  2. Настройки → Игра → Импорт сетки.
  3. Или в клиенте: Сетки → Импорт.
  4. Или положить JSON в ...\dota 2 beta\game\dota\resource\grid\.

🔄 Рабочие процессы

Вариант А: из картинки

  1. lineart-converter.html → загрузи PNG → подбери пресет.
  2. Донастрой Blur/Threshold/gridStep/shading.
  3. 💾 СКАЧАТЬ JSON.
  4. pixel-ascii-editor.html → перетащи JSON → появится на холсте.
  5. Правь вручную, дорисовывай.
  6. 💾 СКАЧАТЬ JSON → готовый файл в Dota.

Вариант Б: с нуля

  1. pixel-ascii-editor.html → включи Safe Area и сетку.
  2. Нарисуй рамку, расставь декор, оставь пустые зоны под героев.
  3. 💾 СКАЧАТЬ JSON.
  4. hero-grid-editor.html → загрузи JSON → добавь категории «Герои» с ID.
  5. Экспорт JSON → финальный файл.

Вариант В: правка чужой сетки

  1. hero-grid-editor.html → импортируй чужой JSON.
  2. Выдели область → отмасштабируй / поверни / сдвинь.
  3. Замени тексты.
  4. Экспорт.

💡 Полезные мелочи


🔒 Приватность


🤝 Вклад

Pull-request’ы приветствуются. Если нашёл баг, есть идея или хочешь добавить пресет — открывай issue.

Особенно полезно:


📄 Лицензия

MIT — делай что хочешь, используй, форкай, дорабатывай.


Сделано с интересом. Пользуйтесь, разбирайтесь, дорабатывайте.