🎨 ZX GRAPHICS EDITOR: РИСУЕМ СПРАЙТЫ И ШРИФТЫ, НЕ ВЫХОДЯ ИЗ VS CODE

​

ВСТУПЛЕНИЕ: ПРОБЛЕМА ГРАФИКИ В РЕТРО-РАЗРАБОТКЕ​

1. Рисовать на бумаге в клеточку, потом вручную переводить в HEX — работает, но медленно и чревато ошибками. Так делали в 80-е.
2. Использовать отдельный графический редактор (SevenUP, Multipaint, ZX-Paintbrush) — хороший вариант, но нужно переключаться между программами, экспортировать, конвертировать .
3. Рисовать прямо в среде разработки, не отвлекаясь от кода — и вот тут на сцену выходит ZX Graphics Editor от испанской команды DuefectuCorp .

ЧТО ТАКОЕ ZX GRAPHICS EDITOR И ЗАЧЕМ ОН НУЖЕН?​

ПОДДЕРЖИВАЕМЫЕ ТИПЫ ФАЙЛОВ​

КЛЮЧЕВЫЕ ВОЗМОЖНОСТИ (ЧТО ОН ДАЁТ ПРОГРАММИСТУ)​

1. Визуальное редактирование — рисуете мышкой прямо в окне VS Code, как в любом растровом редакторе .
2. Масштабирование — можно выбрать уровень зума от 1 до 64, чтобы проработать мельчайшие детали .
3. Операции с графикой — зеркальное отражение (по горизонтали/вертикали), повороты, сдвиги .
4. Инвертирование — полезно для создания масок или негативов (спасибо dinodork) .
5. Создание масок — экспериментальная функция для генерации масок спрайтов .
6. Экспорт в TAP — можно сохранить графику в виде .tap файла, готового для загрузки в эмуляторе (рутина от Hash6iron) .
7. Экспорт в Boriel Basic — два формата: Boriel ASM (для вставки в ассемблерный код) и Boriel DIM (для объявления массивов данных в Boriel Basic) .
8. Отображение номеров символов — в окне редактирования видно, какой именно символ (или GDU) вы сейчас правите .

ИСТОРИЧЕСКИЙ КОНТЕКСТ: ЭВОЛЮЦИЯ ГРАФИЧЕСКИХ ИНСТРУМЕНТОВ​

УСТАНОВКА И НАСТРОЙКА: ТРИ ПРОСТЫХ ШАГА​

Шаг 1: Установка расширения​

1. Запустите Visual Studio Code.
2. Нажмите Ctrl+Shift+X (или иконку квадратиков слева), чтобы открыть вкладку Extensions.
3. В поиске введите "ZX Graphics Editor".
4. Найдите расширение от автора DuefectuCorp (иконка с пиксельным изображением) и нажмите Install .

Шаг 2: Создание файла графики​

• my_sprites.udg — для пользовательских символов (21 символ)
• my_font.fnt — для шрифта (96 символов)

Шаг 3: Открытие и начало работы​

1. Откройте созданный файл в VS Code.
2. Расширение автоматически активируется и покажет интерфейс редактора.
3. При первом открытии пустого файла вам будет предложено загрузить данные по умолчанию — можно согласиться, чтобы сразу увидеть пример .
4. Выберите тип данных: GDU/UDG или Font .
5. Начинайте рисовать!

ИНТЕРФЕЙС И РАБОЧИЙ ПРОЦЕСС​

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

• Слева — ваш код (если вы открыли файл с графикой отдельно, то это просто пустой редактор, но можно открыть рядом и .bas файл).
• Справа — панель графического редактора с сеткой 8×8 для каждого символа.

Шаг 1: Рисуем​

• Кликайте левой кнопкой мыши по клеткам, чтобы закрашивать их.
• Кликайте правой кнопкой, чтобы стирать.
• Используйте зум (выпадающий список) для более точной прорисовки — доступны значения 1, 2, 4, 8, 16, 24, 32, 48 и 64 .

Шаг 2: Трансформируем​

Кнопка	Действие	Горячая клавиша (если есть)
	Отразить по горизонтали (зеркально)	—
	Отразить по вертикали	—
	Повернуть на 90 градусов	—
	Сдвинуть влево/вправо	—
	Сдвинуть вверх/вниз	—
	Инвертировать (чёрное ↔ белое)	—
	Создать маску (экспериментально)	—

Шаг 3: Экспортируем​

1. Откройте палитру команд (Ctrl+Shift+P).
2. Введите "ZX Graphics" и вы увидите доступные команды экспорта.
3. Выберите нужный формат:

; Пример экспортированного кода
UDG0:
    DEFB %00011000
    DEFB %00111100
    DEFB %01111110
    DEFB %11011011
    DEFB %11111111
    DEFB %01011010
    DEFB %00000000
    DEFB %00000000

DIM UDG(21,7) AS UByte => { _
    {%00011000,%00111100,%01111110,%11011011,%11111111,%01011010,%00000000,%00000000}, _
    {%... следующий символ ...} }

ПРОДВИНУТЫЕ ВОЗМОЖНОСТИ​

Номера символов​

Экспериментальные маски​

​

СРАВНЕНИЕ: ZX GRAPHICS EDITOR VS АЛЬТЕРНАТИВЫ​

ПЛЮСЫ И МИНУСЫ​

Плюсы (Почему это удобно)​

• Интеграция с VS Code: не нужно переключаться между окнами — код и графика рядом .
• Простота: интерфейс минималистичный, всё интуитивно понятно.
• Специализация: инструмент заточен именно под UDG и шрифты для Spectrum, ничего лишнего.
• Экспорт под Boriel Basic: два готовых формата для самого популярного компилятора Бейсика .
• TAP-экспорт: можно сразу загрузить графику в эмулятор и проверить .
• Активная разработка: версии 0.0.1 → 0.0.8, добавляются новые функции .
• Открытый исходный код: лицензия MIT позволяет использовать и модифицировать .
• Поддержка сообщества: есть Twitter, email, GitHub для обратной связи .

Минусы (О чём нужно знать)​

• Ограниченный функционал: только UDG и шрифты, нельзя рисовать полноэкранные картинки (SCR).
• Мало звёзд на GitHub: всего 5 звёзд на момент написания — инструмент пока малоизвестен.
• Экспорт только под Boriel: для ассемблера придётся использовать ASM-стиль или конвертировать вручную.
• Нет предпросмотра на экране: нельзя увидеть, как спрайты будут выглядеть вместе на чёрном фоне.
• Экспериментальные функции: маски работают "не идеально", как признаёт сам автор .
• Документация на английском/испанском: для русскоязычных может быть барьер.

СОВЕТЫ БЫВАЛОГО (КАК ВЫЖАТЬ МАКСИМУМ)​

1. Используйте шаблоны. При создании нового пустого файла разрешите загрузить данные по умолчанию — это даст готовые примеры для изучения .
2. Для шрифтов не забывайте про 96 символов. В .fnt файле содержится полный набор ASCII (32-127). Убедитесь, что все символы, которые вы используете, отредактированы.
3. Экспортируйте в TAP для быстрого тестирования. Если вы пишете на ассемблере, можно загрузить TAP в эмуляторе и посмотреть, как выглядят спрайты.
4. Для Boriel Basic выбирайте правильный стиль:
   
   • Boriel ASM — если будете вставлять данные в блок .asm внутри .bas файла.
   • Boriel DIM — если хотите объявить массив и обращаться к нему как к данным .
5. Используйте инверсию для создания масок. Иногда проще нарисовать спрайт, потом инвертировать и немного подправить, чем рисовать маску с нуля.
6. Комбинируйте с другими редакторами. Если нужна полноэкранная картинка — используйте SevenUP или ZX-Paintbrush . А для спрайтов возвращайтесь в ZX Graphics Editor.

РЕСУРСЫ И ССЫЛКИ​

• GitHub репозиторий: github.com/Duefectu/ZXGraphics
• Visual Studio Marketplace: ZX Graphics Editor
• Сайт DuefectuCorp: zx.duefectucorp.com — проекты для ZX Spectrum
• Документация Boriel Basic: zxbasic.readthedocs.io — для понимания форматов экспорта
• CuadragonNext: игра от DuefectuCorp для ZX Spectrum Next, где используется этот редактор

ЗАКЛЮЧЕНИЕ: МАЛЕНЬКИЙ ИНСТРУМЕНТ С БОЛЬШИМ ПОТЕНЦИАЛОМ​