Famicom/Pixel Art

Разрешение: 256х240

Палитра:

Графическая система тайловая, т.е. данные изображения хранятся в виде плиток 8х8. Для окрашивания тайлов имеется 4 набора по 4 цвета на фон (один из них общий) + 4 наборов по 3 цвета (не считая прозрачного) на спрайты. Цветовые наборы применяются к атрибутной зоне 16х16. Таким образом, на экране может быть максимум 25 цветов.

Платформа имеет аппаратные спрайты: 64 штуки размером 8х8 или 8х16, не более 8 спрайтов на строке. Спрайты могут быть отражены по вертикали или горизонтали. Спрайты могут браться из своего набора тайлов или из фонового набора.

Famicom способен одновременно отображать 256 уникальных тайлов фона.

Пути обхода

• Накладывание спрайтов для обхода цветовых ограничений
• Интерлейсинг - переключение банка тайлов на другой в нужный момент. Требуется точный тайминг, что требует подгонки изображения для PAL и NTSC регионов отдельно, а также исключает возможность использования семплов в музыке
• Использование маппера MMC5 для уменьшения атрибутной зоны до 8х8 и использования максимально возможного количества уникальных тайлов
• Гигаскрин - быстрое переключение между двух изображений для иллюзии расширения палитры. Возможно переключать и спрайты
• При помощи внешней аппаратуры в теории возможно уменьшение атрибутной зоны до 8х1. Без внешнего железа при штатном количестве памяти атрибутная зона может иметь размер 16х8, с расширенной памятью высоту возможно уменьшить до 1.
• Изменение палитр сопряжено с трудностями, вызывает появление артефактов. Обычно области с разными палитрами разделяли 1-2 пустыми строками.

Примеры работ

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

  Пример гигаскрина

• 

  Пример гигаскрина

• 

  Пример гигаскрина

• 

  Пример гигаскрина

Инструменты

• NES Screen Tool
• YY-CHR

Инструкции и исходники

Простая картинка

Нарисовать простую картинку с ограничением в 256 тайлов и без спрайтов можно, используя всего один NESST. На выходе у вас получится три файла с расширениями chr (банк тайлов), nam (таблица размещения и окраски тайлов), pal (набор палитр), которые можно использовать для компиляции образа картриджа.

Для ускорения перевода картинки в эти форматы можно нарисовать свой арт в любом удобном редакторе, затем в NESST набрать наборы палитр, экспортировать nametable в bmp (Export > Nametable as BMP file), открыть bmp-файл и скопировать в него свою работу. Далее нужно импортировать получившийся файл обратно в NESST (Import > BMP file as nametable). Всё. У нас будут набиты и расставлены все тайлы, и остаётся только проверить, правильно ли они раскрашены в nametable.

Для компиляции nes-файла воспользуйтесь этими исходниками.

• 

  сурсы

• 

  сурсы

• 

  сурсы

Простая картинка со спрайтами

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

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

Для начала скачайте этот архив. Откройте в notepad++ (ни в коем случае не используйте блокнот!) файл 1.asm и на строчках 111 и 112 вы увидите следующее:

  LDA #%10010000 ; Спрайты из первого набора, фон - из второго.
; LDA #%10000000 ; спрайты и фон из одного набора

Первый набор - это "CHR bank A" в NESST, а второй - "CHR bank B". Чтобы использовать эти банки оба, вам нужно:

1. Оставить эти строчки как есть
2. Сохранять графику в CHR 8K bank.

Дальше, на 150 строчке мы увидим следующее:

sprites:
; vert tile attr horiz
; ПРИВЕТ 1
.db $47, $01, $00, $88
.db $47, $02, $00, $90

и т.д.

vert - координата тайла по вертикали
tile - номер тайла
attr - атрибут тайла
horiz - координата тайла по горизонтали

Номер тайла можно узнать так:

Координаты спрайтов... Если ваш редактор не позволяет их узнать, воспользуйтесь, например, GraphicsGale, а потом переведите их в 16-ричный формат при помощи кое-какого режима "Программист" в обычном калькуляторе из Windows.

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

Хотя если вы планируете расставлять спрайты по сетке 8х8, то эта табличка тоже поможет.

Теперь attr.
Первая цифра определяет положение спрайта по "глубине", т.е. за или перед фоном и другими спрайтами, а также отражает спрайт:

• 4-7 отражение по горизонтали
• 8-B - отражение по вертикали
• C-F – отражение по горизонтали и вертикали.
• 0,1,4,5,8,9,C,D – показывают спрайт поверх фоновых плиток. Остальные — под ними.

Вторая цифра параметра определяет палитру:

• Палитра 0 — 0,4,8,C
• Палитра 1 — 1,5,9,D
• Палитра 2 — 2,6,A,E
• Палитра 3 — 3,7,B,F

Наборы цветов спрайтов отличны от фона, а потому сохранять их нужно в виде отдельного файла pal-sprites.pal.

Нарисуйте в NESST фон, сделайте спрайтовый набор. Задайте координаты спрайтам. Скомпилируйте ром и посмотрите его в эмуляторе.

• 

  сурсы

• 

  сурсы

• 

  сурсы

Гигаскрин. Простой вариант

Исходники для nes-гиги тут. Позволяют использовать два изображения для получения некоего результирующего результата. Каждое изображение имеет свой набор тайлов, свою таблицу их расположения и окраски, свои палитры. Теоретически на экране может быть до 145 оттенков.

• 

  сурсы

Гигаскрин. Простой вариант со спрайтами

Расширенный вариант со спрайтами. Спрайты свои для каждой из картинок, занимают ту же память, что и фоновые тайлы.

Исходники тут.

Задание характеристик спрайтам производится путём редактирования файлов расширения oam в hex-редакторе.

Первые четыре значения - это первый спрайт, вторые четыре значения - второй спрайт и т.д.

Первая цифра - координата тайла по вертикали, вторая - номер тайла, третья - атрибут тайла (раскраска, отражение, глубина), четвертая - координата тайла по горизонтали.

В атрибуте тайла первая цифра определяет положение спрайта по "глубине", т.е. за или перед фоном и другими спрайтами, а также отражает спрайт:

• 4-7 отражение по горизонтали
• 8-B - отражение по вертикали
• C-F – отражение по горизонтали и вертикали.
• 0,1,4,5,8,9,C,D – показывают спрайт поверх фоновых плиток. Остальные — под ними.

Вторая цифра атрибута тайла определяет палитру:

• Палитра 0 — 0,4,8,C
• Палитра 1 — 1,5,9,D
• Палитра 2 — 2,6,A,E
• Палитра 3 — 3,7,B,F

• 

  сурсы

Интерлейсинг + гигаскрин

Большой проблемой на Famicom для художника является ограничение в 256 тайлов на фон. Путём задействования спрайтов можно добавить максимум ещё 128 тайлов, но при площади экрана 960 тайлов этого всё равно мало. Какой есть выход? В нужный момент построения изображения на экране можно переключать банки с графикой, что позволит рисовать картину без оглядки на ограничение ресурсов. Правда, это решение требует точного расчёта тайминга, разного для PAL и NTSC регионов. Можно совместить с гигаскрином.

Инструкция, описанная ниже, основана на работе с иходниками Chris'а Covell'а, взятыми с wiki.nesdev.com. Исходники позволяют нарисовать гигаскрин-изображение с палитрой до 37 цветов и 10 цветами в атрибуте 16х16, каждый тайл является уникальным. Но есть и недостатки: во-первых, первые два тайла должны быть обязательно заполнены, а во-вторых, на границе второго и третьего банков наблюдается несостыковка.

Далее: описанные в инструкции действия почти наверняка можно упростить, но пока этого не сделано.

---

Этап 1. Создание черновика

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

Наша анимация должна иметь частоту 1/60 FPS, и результат в превью будет аналогичен тому, как будет показана картинка в эмуляторе или на реальной приставке.

Можете для пробы нарисовать в первом кадре такое:

На втором кадре нарисуйте в том же самом месте это:

И на превью у вас должен быть такой результат:

Два кадра используют общие атрибуты, т.е. в одном и том же секторе двух кадров используется одна и та же палитра.

Этап 2: подготовка набора тайлов и схемы раскраски

Теперь давайте перенесём нашу картинку в формат Famicom.

Скачайте 00.nam и откройте его в NES Screen Tool.

Наберите свои палитры и сохраните их.

Отключите Apply tiles и включите Grid 2x (область 16х16).

В Tileset двойным щелчком мыши вызываем CHR Editor и начинаем переносить первый кадр черновика.

В итоге у вас должно получиться что-то такое:

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

Сохраняем nametable, сохраняем CHR (Patterns>Save CHR>CHR 8k bank) и переключаем CHR bank на B.

Теперь нам нужно проделать то же самое, но теперь внимание в Nametable обращаем на вторую из повторяющихся частей.

Перекрашиваем Nametable, как надо, сохраняем nametable, CHR. Всё. Мы нарисовали половину первого экрана.

Повторяем действия для оставшихся частей первого кадра, обязательно сохраняем nametable. CHR сохраняется вторым файлом.

Так составлен первый кадр картинки "Много идей":

Повторяем ровно те же действия для второго кадра, только перекрашивать nametable уже надо. В итоге должно получится 4 CHR-файла.

Этап 3: подготовка к компиляции

Теперь загрузите в NESST файлы 00.chr и 00.pal.

Включите Grid 4x, и на экране должно быть что-то такое:

Теперь скачайте FDSPicATT.odt и сурсы.

Найдите в сурсах файл FDSPic.ATT и откройте его в Notepad++.

Cравниваем одно с другим и по образцу переносим в FDSPic.ATT, затем сохраняем этот файл.

Загружаем в NES Screen Tool палитру своего изображения, в пункте меню Palettes выбираем Put ASM data to clipboard. Так мы скопировали свою палитру в формате ассемблера:

.db $0f,$2a,$30,$21,$0f,$27,$15,$30,$0f,$30,$11,$21,$0f,$30,$15,$21

Теперь открываем в Notepad++ файл FDSPic.asm из всё той же папки source-mnogoidei и на 206-й строчке находим такое:

.Palette dc.b #$0f,#$2a,#$30,#$21,#$0f,#$27,#$15,#$30,#$0f,#$30,#$11,#$21,#$0f,#$30,#$15,#$21

Производим замену значений и сохраняем файл.

Теперь открываем две копии программы YY-CHR. В первой мы открываем FDSPic.CHR из папки source, а во второй — наши CHR-файлы.

В этой инструкции слева открыт FDSPic.CHR, справа - программа с нашими CHR-файлами.

Выбираем правую копию программы. Нажимает ctrl+c. Выбираем левую копию программы. Нажимаем ctrl+v. Получаем такой результат:

Теперь в в левой программе двигаем ползунок вниз до тех пор, пока скопированная часть не скроется, а в правой — до самого низа. Аналогично производим другое копирование.

Теперь в правой программе открываем второй chr-файл и повторяем.

Точно также переносим в левую программу третий и четвёртый CHR-файл.

Потом сохраняем файл FDSPic.CHR и закрываем все YY-CHR.

Осталось только нажать на Make_FDSPic.bat, а получившийся ром проверить в эмуляторе.

Чтобы сделать PNG для превью, можно наложить в любом редакторе один кадр на другой в виде двух слоёв, при этом верхний слой с прозрачностью 50-60%. Будут не совсем те же цвета, но для превью сойдёт.

• 

  сурсы

• 

  сурсы

Ссылки

• http://hype.retroscene.org/blog/graphics/283.html
• http://nesdev.com/