По многочисленным просьбам начинаю этот пост, в котором буду публиковать вопросы и ответы по специфике создания графики для ZX Spectrum.

Ниже пойдет речь именно о специфике ZX Spectrum прежде всего потому, что нет смысла заново излагать всю теорию рисования и растровой графики. Любой tutorial, пример рисования или урок о рисовании на ZX Spectrum на 80% будет состоять из стандартной теории, в которой, честно говоря, мало кто из нас силен :). Поэтому более честно, да и более интересно поговорить именно об аспектах графики, которые являются для спектрума эксклюзивными, по крайней мере по отношению к обычной растровой графике без ограничений на палитру и количество цветов на знакоместо.

Первая серия вопросов была подготовлена пользователем Al-Rado . Предлагаю всем желающим добавлять как вопросы, так и ответы в комментариях. По мере возможности буду отвечать на вопросы и добавлять всю новую информацию в тело топика.

В подготовке FAQ также участвовали: Al-Rado , sq , prof4d , introspec , moroz1999 .


Все вопросы я разбил на 3 блока:
1. Основы графики ZX Spectrum
— Графические режимы
— Палитры цветов (Pulsar, Alone, Orthodox, Electroscale)
— Графические редакторы

2. Технические приемы рисования на ZX Spectrum
— Как бороться с клэшингом атрибутов? Цветовые переходы
—- каким образом сделать перетекание цвета из одного в другой?
—- сочетаемость цветов
—- классические переходы и основные ошибки при работе с цветом
—- использование черного цвета при переходах
— Использование яркости
— Экономия на пикселях — стоит ли применять технику заливки однородных областей paper-ом для экономии занимаемой памяти либо наоборот, стараться рисовать так, чтобы и без атрибутов скрин сохранял все детали?
— Подгонка картинки под знакоместа — как, в чем и когда это лучше делать?

3. Обработка и трансфер графики между различными форматами
— Конвертация изображений в формат ZX Spectrum
— Обратное преобразование изображений для ZX Spectrum из png/gif/bmp в scr
— Преобразование scr с использованием FLASH-атрибута в анимированный gif?

1. Основы графики ZX Spectrum

Графические режимы

Основные режимы, используемые в работах на графических конкурсах для ZX Spectrum:

1. Не мерцающие графические режимы:
— Standard (SCR = 6912 байт)
— Multicolor 8x4/8x2/8x1 (MC4/MC2/MC1)
— Standard + Border (BSC)
— Multicolor 8x4 + Border (BMC4)
— 53C
— Macroscreen (CHR$)
2. Графические режимы с мерцанием:
— Gigascreen (IMG=2xSCR)
— Multigigascreen 8x4/8x2/8x1 (MG4/MG2/MG1)
— Macrogigascreen (CHR$)
— ATTR Gigascren
— Tricolor (RGB)


Standard (SCR)
Стандартный графический экран для ZX Spectrum, 256х192 точек, палитра из 15 цветов. 2 цвета на знакоместо 8х8 пикселей. Представляет из себя монохромный экран (6144 байта) и область атрибутов 32x24 знакоместа (768 байт). Всего в сумме 6912 байт.


Multicolor (MCX)
То же самое, что и стандартный экран, но по ходу движения электронного луча по экранной области программным способом записываются различные значения атрибутов. В результате получаем возможность задать отдельные атрибуты для ячеек меньше, чем 1 знакоместо: 8x4 пикселей, 8x2 пикселей. Для ячеек 8x1 на стандартном ZX Spectrum задать произвольные атрибуты можно лишь для части экрана.


Border (BXX)
Примерно то же самое, что и мультиколор, но для области вокруг экрана – бордюра. Программно задавая цвет бордюра на стандартном ZX Spectrum можно использовать цветные полоски минимального размера 24x1 пиксель для рисования в области бордюра. Более подробно это будет освещено в отдельной статье.


53С
Видеорежим, в котором нет никаких палитровых ограничений для минимального элемента изображения. Минимальным элементом является 1 знакоместо 8x8 пикселей, экран залит шахматной текстурой через 1 пиксель, меняются только атрибуты INK, PAPER, BRIGHT, FLASH для каждого знакоместа. Соответственно хранится всего 768 байт атрибутов. Всего палитра в этом случае состоит из 53 усредненных цветов, отсюда и название формата.


Macroscreen (CHR$)
Формат, созданный для хранения изображений размером больше, чем 256x192. На сегодня есть примеры стандартной и гигаскрин графики размером более, чем 256x192. При этом на экране мы видим только часть картинки.


Gigascreen (IMG)
Режим графики, в котором с частотой 50 кадров в секунду показываются последовательно 2 различных стандартных экрана. Изображение при этом мерцает, но визуально мы получаем смешанные цвета. Всего палитра состоит из 102 усредненных результирующих цветов. Результат наложения 2 экранов без мерцания доступен в эмуляторе Unreal в режиме noflic.


Tricolor (RGB)
Видеорежим, в котором сменяются и визуально накладываются уже не 2 экрана, а целых 3. При этом для простоты конверсии графики выбран принцип суммирования 3 каналов: R, G и B. То есть все три экрана представляют из себя монохромные изображения красного, зеленого и синего цвета. Таким образом каждый пиксель независим от других и имеет 3 бита R, G и B. Общий результат смотрится достаточно бледно, т.к. даже самый яркий цвет – белый, состоит из последовательного показа 3 разноцветных пикселей. Всего 8 результирующих цветов.

Комбинации графических режимов
Как уже было сказано выше, возможны практически любые произвольные комбинации упомянутых видеорежимов в рамках программных ограничений. Например, GIGABORDER-GIGASCREEN или MACRO-MULTI-GIGASCREEN и т.п.

Кроме того, не исключено, что существуют и другие простые, а может быть и сложные, способы программного формирования элементов изображения на ZX Spectrum, позволяющие добиться более высокого цветового разрешения для меньших ячеек экрана, чем описано выше. Например, мультиколор 8x3 или 3color с произвольными, не-RGB атрибутами и т.п.

Палитры цветов (Pulsar, Alone, Orthodox, Electroscale):

— стоит ли на них ориентироваться, или выбрать понравившуюся и всегда рисовать в ней.
— откуда они взялись и зачем?



Исторически сложилось так, что оригинальный ZX Spectrum и разные его клоны согласно схемотехнике имеют разные соотношения уровня сигнала для неярких (BRIGHT 0) и ярких (BRIGHT 1) цветов. Каждый графический редактор, конвертор и эмулятор ZX Spectrum для другой платформы содержит в себе как минимум одну палитру в виде набора RGB-коэффициентов для каждого из 15 стандартных цветов. При этом очень трудно найти хотя бы пару программ с одинаковой палитрой. Именно поэтому были предприняты попытки разработать какие-то стандартные палитры.

— палитра alone возникла в начале 2000х, в эмуляторе Unreal. Её коэффициенты были подобраны таким образом, чтобы наиболее корректно отображалась картинка «Alone» с её странным переходом от яркого зеленого цвета к неяркому зеленому цвету через 50% (шахматную) текстуру.

— коэффициенты палитр pulsar и orthodox родились в ходе обсуждения на форуме zx.pk.ru (ссылка).

Достаточно широко в последнее время используется палитра pulsar. Она используется по умолчанию на портале ZX Art, в онлайн-конвертере SCR графики от nyuk, в системе Events. Тем не менее на конкурсы регулярно приходят работы, нарисованные, например, в дефолтной палитре ZX Paintbrush или какой-то другой. Для большинства работ выбор палитры не критичен, хотя иногда различия довольно заметны. Из 4 перечисленных палитр, палитра pulsar больше всего напоминает, то что видно на большинстве старых реальных машин.

Графические редакторы

а) Огромное количество нативных редакторов для ZX Spectrum, среди которых наиболее продвинутые:
Burial Graphics Editor (BGE)
Excess Deluxe Paint (EDP)
Art Studio (+различные модификации)

б) Редакторы для нативного формата под Windows:
— ZX Paintbrush
— ZXGFX
— SevenuP
— Редактор в RETRO-X
— Painter — редактор, встроенный в BMP2SCR
— SCREEN$ Paintbox — редактор, встроенный в BASin

в) Растровые редакторы под различные платформы:
— Graphics Gale (Free, Win)
— GRAFX2 (Free, Win/OS X/Linux)
— Cosmigo Pro Motion (Commercial, Win)
— Adobe Photoshop (Commercial, Win/OS X)
— EdgeTouch (Commercial, iOS)
— Pixly (Android)

2. Технические приемы рисования на ZX Spectrum

Как бороться с клэшингом атрибутов? Цветовые переходы:

— каким образом сделать перетекание цвета из одного в другой?
— сочетаемость цветов,
— классические переходы и основные ошибки при работе с цветом,
— использование черного цвета при переходах.

Как бороться с клэшингом:
— прежде всего подгоном самых критичных мест под границы атрибутов ДО начала раскрашивания.
Например: перед наложением цвета набросок был сдвинут таким образом, чтобы зрачок зеленого цвета и блик белого цвета как можно более точно попадали в границы знакомест:


— нанесением отвлекающих пикселей и линий, которые будут маскировать квадратность атрибутов (можно рассматривать как частный случай текстурирования) за счет повторения форм основного объекта:


— текстурированием, т.к. клэшинг на текстуре менее заметен. Например, переход между голубым цветом воды и зеленым цветом шкуры дельфина сделан через черную текстуру и практически не заметен:

Как раз в этом приеме возникает тема сочетаемости или взаимозаменяемости/близости цветов. Цвета с номерами 0-3 (черный, синий, красный, магента) — темные, цвета с номерами 4-7 (зеленый, голубой, желтый, белый) — светлые. Соответственно, почти все переходы от темного к темному цвету или от светлого к светлому цвету сделанные через контрастную текстуру (текстуру темного цвета для светлых цветов, как в данном примере — переход через черную текстуру; и текстуру светлого цвета для темных), выглядят плавно. Хотя есть и пары цветов, с которыми такие переходы выглядят чуть хуже: синий-магента или зеленый-белый.

«Цветовые переходы». Не самое удачное словосочетание. Его можно понять как:
а) Борьбу с клэшингом при необходимости резкого перехода к другому цвету. Соответствено сюда попадают 3 вышеперечисленных приема.
б) Реализацию плавных цветовых переходов. В этом случае переходы традиционно могут быть сделаны чаще всего через произвольную текстуру. Плавное перетекание из цвета в цвет возможно между любыми цветами одной яркости, но чем ближе цвета по светимости, тем более незаметным для глаза будет этот переход (например перетекание из красного цвета в магенту, из голубого в зеленый или из желтого в белый).

Резкие переходы цвета, без использования текстуры так же могут выглядеть естественно, если они соответствуют реальному освещению объекта и его форме. Например, переход между ярким и неярким желтыми цветами на черепе или раскраска шипов на картинке «Skull» by DAP:

Использование яркости

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

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

Например, легко выделить яркостью некоторые объекты, если переходы между цветами сделаны через контрастную (в данном случае сплошную черную текстуру):

То есть на картинке почти не используются плавные цветовые переходы. О таких картинках ещё иногда говорят, что они нарисованы одним только INK'ом, что недалеко от реальности, без атрибутов картинка выглядит вполне естественно:


В случае же наличия большого количества плавных цветопереходов не так-то просто один из цветов заменить на яркий. Ведь в этом случае все диагональные переходы с другим цветом мы так же покрасим повышенной яркостью и получим лесенку из ярких и неярких цветов:



Как с этим бороться? Методы аналогичны обычной борьбе с клэшингом атрибутов.

Экономия на пикселях — стоит ли применять технику заливки однородных областей paper-ом для экономии занимаемой памяти либо наоборот, стараться рисовать так, чтобы и без атрибутов скрин сохранял все детали?

Особой разницы нет. Хотя есть несколько случаев, когда это может играть небольшую роль:

1) Загрузка картинки в стандартном формате с магнитофона. Если картинка без атрибутов будет выглядеть максимально корректно, то загрузка будет смотреться красиво.

2) При подключении реального ZX Spectrum к телевизору встречался дефект изображения, когда между знакоместами отображались вертикальные серые полоски в случае если была выключена яркость и в знакоместах соседствовали PAPER и INK одного цвета. Для этих случаев были написаны оптимизаторы графики, которые специальным образом инвертировали знакоместа и атрибуты для устранения дефекта вертикальных полосок. Это Screen Optimizer v4.2, Screen Visual Optimizer от psndcj/tbk, функция Optim в Painter/BMP2SCR и другие. Кроме устранения дефекта они некоторым образом упорядочивают и атрибуты, что в целом улучшает сам экран без атрибутов.

3) При создании графики для игр, демо или других программ нередко необходимо точно знать, где на картинке INK, а где PAPER и совершенно четким образом их задавать. Поскольку вручную такие вещи не очень просто контролировать даже в процессе создания экрана с нуля, то для этих целей можно рекомендовать всё тот же Screen Optimizer v4.2, в котором есть ручной режим познакоместного инвертирования картинки с выключенными атрибутами.

Подгонка картинки под знакоместа — как, в чем и когда это лучше делать?

1) Если вы работаете с монохромным наброском, то достаточно включить сетку и подвинуть изображение попиксельно, выбирая наиболее подходящий для раскрашивания вариант. Это можно сделать как в нативном редакторе для ZX Spectrum, так и в любом пиксельном редакторе на других платформах.

2) Если речь о цветном наброске без учета ограничений ZX Spectrum, то двигать придется в BMP2SCR. Проблема BMP2SCR в отсутствии четкого попиксельного перемещения, управляемого с клавиатуры. Для цветного наброска 256x192 можно рекомендовать расширить его до 264x200 для того чтобы можно было в BMP2SCR попробовать все возможные сдвиги.

Альтернативой BMP2SCR может быть генерация 64 вариантов сдвига цветного наброска (пример BAT-скрипта, BAT-скрипт вместе с необходимыми программами), с сохранением в BMP, конвертирование их в AVI (например с помощью BMP2AVI) и пакетное конвертирование AVI-файла через BMP2SCR с сохранением в PNG и последующим выбором оптимального варианта смещения исходного цветного наброска.

Обработка и трансфер графики между различными форматами

Конвертация изображений в формат ZX Spectrum

Автоматическое конвертирование в формат ZX Spectrum можно выполнить с помощью:
Image Spectrumizer
BMP2SCR
CON18
RETRO-X
ZX Paintbrush

Обратное преобразование изображений для ZX Spectrum из png/gif/bmp в scr

По поводу обратной конверсии PNG>SCR — в случае картинки с использованием одновременно и ярких и неярких цветов вы можете воспользоваться следующими конверторами:
1) «PXL2SCR» by introspec (Windows) — распознает палитры и попутно оптимизирует SCR, обрабатывает ошибки в исходном файле (больше 2 цветов на знакоместо) и выделяет их с помощью FLASH в результирующем файле.
2) Just.SCR by Oleg Origin (Windows) — имеет графический интерфейс, позволяет выбрать цвет фона (PAPER) результирующей картинки, распознает картинки с бордером, FLASH.
3) «Speccy Viewer beta» от SimbolBit & Debris под iOS — умеет распознавать палитры и корректно обрабатывать яркость в большинстве случаев.
4) Для картинок одного уровня яркости достаточно конверсии в BMP2SCR с соответствующим параметром BRIGHT. Попытка конвертирования картинок с использованием разных градаций яркости через BMP2SCR в режиме «BRIGHT: intelligent» дает результат, схожий с оригиналом, но отличающийся в знакоместах с малым количеством пикселей, что было проверено не один раз. Если для случая переноса собственной графики в процессе её создания автор может посчитать это приемлемым, то для 100%-адекватной конверсии чужой графики из BMP/PNG в SCR этот режим не совсем подходит ввиду своей неточности.

Преобразование scr с использованием FLASH-атрибута в анимированный gif

Самый простой способ — онлайн конвертор от nyuk по адресу http://nyuk.retropc.ru/gfx_converter.
1) Загружаем SCR, выбираем формат GIF, остальные параметры по вкусу, кликаем на имя загруженного файла, смотрим результат в открывшемся окне. Если устраивает — нажимаем Download под картинкой.
либо
2) Загружаем SCR, выбираем картинку, выбираем output type: GIF, жмем кнопку «Convert & Download ZIP archive».

Другой способ: через сохранение картинки в формат GIF из редактора SCREEN$ Paintbox (встроен в BASin).