Материал из Chipwiki
Перейти к: навигация, поиск
Famicom/Pixel Art — различия между версиями
(Пути обхода)
(не показано 19 промежуточных версий этого же участника)
Строка 1: Строка 1:
{{Основная статья|Nintendo Famicom}}
+
<div style="float:right;">__TOC__</div>
 +
{{Основная статья|Nintendo Famicom|Текст=Информация о Famicom}}
 +
{{Основная статья|Портал:Pixel Art|Текст=Портал:Pixel Art}}
  
 
Разрешение: 256х240
 
Разрешение: 256х240
Строка 17: Строка 19:
 
* Использование маппера MMC5 для уменьшения атрибутной зоны до 8х8 и использования максимально возможного количества уникальных тайлов
 
* Использование маппера MMC5 для уменьшения атрибутной зоны до 8х8 и использования максимально возможного количества уникальных тайлов
 
* Гигаскрин - быстрое переключение между двух изображений для иллюзии расширения палитры. Возможно переключать и спрайты
 
* Гигаскрин - быстрое переключение между двух изображений для иллюзии расширения палитры. Возможно переключать и спрайты
* При помощи внешней аппаратуры в теории возможно уменьшение атрибутной зоны до 8х1. Без внешнего железа при штатном количества памяти атрибутная зона может иметь размер 16х8, с расширенной памятью высоту возможно уменьшить до 1.
+
* При помощи внешней аппаратуры в теории возможно уменьшение атрибутной зоны до 8х1. Без внешнего железа при штатном количестве памяти атрибутная зона может иметь размер 16х8, с расширенной памятью высоту возможно уменьшить до 1.
 +
* Изменение палитр сопряжено с трудностями, вызывает появление артефактов. Обычно области с разными палитрами разделяли 1-2 пустыми строками.
  
 
==Примеры работ==
 
==Примеры работ==
Строка 30: Строка 33:
 
Файл:73-Colour Chunkybeetle by pixelrat.png
 
Файл:73-Colour Chunkybeetle by pixelrat.png
 
Файл:Scetch 60p by pixelrat.png
 
Файл:Scetch 60p by pixelrat.png
Файл:Много идей by pixelrat.png
+
Файл:Много идей by pixelrat.png|Пример гигаскрина
Файл:Зима by pixelrat.png
+
Файл:Зима by pixelrat.png|Пример гигаскрина
Файл:Разговор by pixelrat.png
+
Файл:Разговор by pixelrat.png|Пример гигаскрина
Файл:Дедушка by pixelrat.png
+
Файл:Дедушка by pixelrat.png|Пример гигаскрина
 
</gallery>
 
</gallery>
 +
 +
==Инструменты==
 +
* [https://shiru.untergrund.net/software.shtml NES Screen Tool]
 +
* [http://chief-net.ru/index.php?option=com_content&task=view&id=426 YY-CHR]
  
 
==Инструкции и исходники==
 
==Инструкции и исходники==
 +
<spoiler text="Простая картинка">
 +
Нарисовать простую картинку с ограничением в 256 тайлов и без спрайтов можно, используя всего один NESST. На выходе у вас получится три файла с расширениями chr (банк тайлов), nam (таблица размещения и окраски тайлов), pal (набор палитр), которые можно использовать для компиляции образа картриджа.
 +
 +
Для ускорения перевода картинки в эти форматы можно нарисовать свой арт в любом удобном редакторе, затем в NESST набрать наборы палитр, экспортировать nametable в bmp (Export > Nametable as BMP file), открыть bmp-файл и скопировать в него свою работу. Далее нужно импортировать получившийся файл обратно в NESST (Import > BMP file as nametable). Всё. У нас будут набиты и расставлены все тайлы, и остаётся только проверить, правильно ли они раскрашены в nametable.
 +
 +
Для компиляции nes-файла воспользуйтесь [[:Файл:nesasm-simple256.zip|этими]] исходниками.
 +
 +
<gallery widths="128" heights="96">
 +
Файл:The Face of the Eternity by aturbidflow.png|[[:Файл:TheFaceoftheEternity.zip|сурсы]]
 +
Файл:Catrix by Shiru.png|[[:Файл:Catrix.zip|сурсы]]
 +
Файл:Bonsai by pixelrat.png|[[:Файл:bonsai.zip|сурсы]]
 +
</gallery>
 +
</spoiler>
 +
<spoiler text="Простая картинка со спрайтами">
 +
Так как у Famicom есть аппаратные спрайты, то можно этим воспользоваться для обхода графических ограничений, например, спрайты можно накладывать на фон, чтобы добавить ещё несколько цветов в атрибутную зону и/или чтобы сэкономить место в тайловом наборе для фона.
 +
 +
Цветовые ограничения для спрайтов аналогичны фоновым, только нулевой цвет - прозрачный. Спрайты можно накладывать друг на друга, но злоупотреблять этим не стоит, потому что на одной строке не может быть больше 8 спрайтов.
 +
 +
Для начала скачайте [[:Файл:nesasm-simplesprites.zip|этот]] архив. Откройте в notepad++ (ни в коем случае не используйте блокнот!) файл 1.asm и на строчках 111 и 112 вы увидите следующее:<br/>
 +
  LDA #%10010000 ; Спрайты из первого набора, фон - из второго.
 +
; LDA #%10000000 ; спрайты и фон из одного набора
 +
 +
Первый набор - это "CHR bank A" в NESST, а второй - "CHR bank B". Чтобы использовать эти банки оба, вам нужно:
 +
# Оставить эти строчки как есть
 +
# Сохранять графику в CHR 8K bank.
 +
 +
Дальше, на 150 строчке мы увидим следующее:
 +
 +
sprites:
 +
; vert tile attr horiz
 +
; ПРИВЕТ 1
 +
.db $47, $01, $00, $88
 +
.db $47, $02, $00, $90
 +
и т.д.<br/>
 +
 +
vert - координата тайла по вертикали<br/>
 +
tile - номер тайла<br/>
 +
attr - атрибут тайла<br/>
 +
horiz - координата тайла по горизонтали<br/>
 +
 +
Номер тайла можно узнать так:<br/>
 +
[[File:nes-spr-1.png|600px]]
 +
 +
Координаты спрайтов... Если ваш редактор не позволяет их узнать, воспользуйтесь, например, GraphicsGale, а потом переведите их в 16-ричный формат при помощи кое-какого режима "Программист" в обычном калькуляторе из Windows.
 +
 +
На рисунке ниже синее - это спрайт, а красная точка - означает место, координаты которого вам нужно узнать.
 +
 +
[[File:nes-spr-2.png]]
 +
 +
Хотя если вы планируете расставлять спрайты по сетке 8х8, то [[:Файл:tablekoordinat.ods|эта]] табличка тоже поможет.
 +
 +
Теперь ''attr''.<br/>
 +
Первая цифра определяет положение спрайта по "глубине", т.е. за или перед фоном и другими спрайтами, а также отражает спрайт:
 +
* 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 фон, сделайте спрайтовый набор. Задайте координаты спрайтам. Скомпилируйте ром и посмотрите его в эмуляторе.
 +
 +
<gallery widths="128" heights="96">
 +
Файл:Пейзаж by pixelrat.png|[[:Файл:landscape.zip|сурсы]]
 +
Файл:violet_eye_by_pixelrat_x2.png|[[:Файл:eye.zip|сурсы]]
 +
Файл:volk-kuchemal_by_pixelrat_x2.png|[[:Файл:kuchemal.zip|сурсы]]
 +
</gallery>
 +
</spoiler>
 +
<spoiler text="Гигаскрин. Простой вариант">
 +
Исходники для nes-гиги [[:Файл:nesgiga-withoutsprites.zip|тут]]. Позволяют использовать два изображения для получения некоего результирующего результата. Каждое изображение имеет свой набор тайлов, свою таблицу их расположения и окраски, свои палитры. Теоретически на экране может быть до 145 оттенков.
 +
 +
<gallery widths="128" heights="96">
 +
Файл:Разговор by pixelrat.png|[[:Файл:razgovor-nesgiga.zip|сурсы]]
 +
</gallery>
 +
</spoiler>
 +
<spoiler text="Гигаскрин. Простой вариант со спрайтами">
 +
Расширенный вариант со спрайтами. Спрайты свои для каждой из картинок, занимают ту же память, что и фоновые тайлы.
 +
 +
Исходники [[:Файл:nesgiga-withsprites.zip|тут]].
 +
 +
Задание характеристик спрайтам производится путём редактирования файлов расширения oam в [http://frhed.sourceforge.net/en/ 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
 +
<gallery widths="128" heights="96">
 +
Файл:Дедушка by pixelrat.png|[[:Файл:dedushka.zip|сурсы]]
 +
</gallery>
 +
</spoiler>
 +
<spoiler text="Интерлейсинг + гигаскрин">
 +
Большой проблемой на Famicom для художника является ограничение в 256 тайлов на фон. Путём задействования спрайтов можно добавить максимум ещё 128 тайлов, но при площади экрана 960 тайлов этого всё равно мало. Какой есть выход? В нужный момент построения изображения на экране можно переключать банки с графикой, что позволит рисовать картину без оглядки на ограничение ресурсов. Правда, это решение требует точного расчёта тайминга, разного для PAL и NTSC регионов. Можно совместить с гигаскрином.
 +
 +
Инструкция, описанная ниже, основана на работе с иходниками Chris'а Covell'а, взятыми с wiki.nesdev.com. Исходники позволяют нарисовать гигаскрин-изображение с палитрой до 37 цветов и 10 цветами в атрибуте 16х16, каждый тайл является уникальным. Но есть и недостатки: во-первых, первые два тайла должны быть обязательно заполнены, а во-вторых, на границе второго и третьего банков наблюдается несостыковка.
 +
 +
Далее: описанные в инструкции действия почти наверняка можно упростить, но пока этого не сделано.
 +
 +
<hr>
 +
'''Этап 1. Создание черновика'''
 +
 +
Воспользуйтесь любым удобным редактором, в котором можно включать сетку и делать анимацию. Анимация нам нужна, чтобы видеть смешение цветов и для создания двух отдельных кадров, которые потом будут перенесены в формат приставки.
 +
 +
Наша анимация должна иметь частоту 1/60 FPS, и результат в превью будет аналогичен тому, как будет показана картинка в эмуляторе или на реальной приставке.
 +
 +
Можете для пробы нарисовать в первом кадре такое:
 +
 +
[[Файл:nesint-cc-1.png]]
 +
 +
На втором кадре нарисуйте в том же самом месте это:
 +
 +
[[Файл:nesint-cc-2.png]]
 +
 +
И на превью у вас должен быть такой результат:
 +
 +
[[Файл:nesint-cc-3.png]]
 +
 +
Два кадра используют общие атрибуты, т.е. в одном и том же секторе двух кадров используется одна и та же палитра.
 +
 +
'''Этап 2: подготовка набора тайлов и схемы раскраски'''
 +
 +
Теперь давайте перенесём нашу картинку в формат Famicom.
 +
 +
Скачайте [[:Файл:00.nam|00.nam]] и откройте его в NES Screen Tool.
 +
 +
Наберите свои палитры и сохраните их.
 +
 +
Отключите Apply tiles и включите Grid 2x (область 16х16).
 +
 +
В Tileset двойным щелчком мыши вызываем CHR Editor и начинаем переносить первый кадр черновика.
 +
 +
В итоге у вас должно получиться что-то такое:
 +
 +
[[Файл:nesint-cc-4.png|400px]]
 +
 +
Теперь нам нужно раскрасить первую часть в Nametable. Для этого выбираем любой цвет в нужном наборе палитр и кликаем в той области 16х16, где этот набор и должен использоваться.
 +
 +
Сохраняем nametable, сохраняем CHR (Patterns>Save CHR>CHR 8k bank) и переключаем CHR bank на B.
 +
 +
Теперь нам нужно проделать то же самое, но теперь внимание в Nametable обращаем на вторую из повторяющихся частей.
 +
 +
Перекрашиваем Nametable, как надо, сохраняем nametable, CHR. Всё. Мы нарисовали половину первого экрана.
 +
 +
Повторяем действия для оставшихся частей первого кадра, обязательно сохраняем nametable. CHR сохраняется вторым файлом.
 +
 +
Так составлен первый кадр картинки "Много идей":
 +
 +
[[Файл:nesint-cc-5.png|400px]]
 +
 +
Повторяем ровно те же действия для второго кадра, только перекрашивать nametable уже надо. В итоге должно получится 4 CHR-файла.
 +
 +
'''Этап 3: подготовка к компиляции'''
 +
 +
Теперь загрузите в NESST файлы [[:Файл:00.chr|00.chr]] и [[:Файл:00.pal|00.pal]].
 +
 +
Включите Grid 4x, и на экране должно быть что-то такое:
 +
 +
[[Файл:nesint-cc-6.png|400px]]
 +
 +
Теперь скачайте [[:Файл:FDSPicATT.odt|FDSPicATT.odt]] и [[:Файл:nesint.zip|сурсы]].
 +
 +
Найдите в сурсах файл FDSPic.ATT и откройте его в Notepad++.
 +
 +
Cравниваем одно с другим и по образцу переносим в FDSPic.ATT, затем сохраняем этот файл.
 +
 +
[[Файл:nesint-cc-7.png|400px]]
 +
 +
Загружаем в 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-файлы.
 +
 +
[[Файл:nesint-cc-8.png|400px]]
 +
 +
В этой инструкции слева открыт FDSPic.CHR, справа - программа с нашими CHR-файлами.
 +
 +
Выбираем правую копию программы. Нажимает ctrl+c. Выбираем левую копию программы. Нажимаем ctrl+v. Получаем такой результат:
 +
 +
[[Файл:nesint-cc-9.png|400px]]
 +
 +
Теперь в в левой программе двигаем ползунок вниз до тех пор, пока скопированная часть не скроется, а в правой — до самого низа. Аналогично производим другое копирование.
 +
 +
[[Файл:nesint-cc-10.png|400px]]
 +
 +
Теперь в правой программе открываем второй chr-файл и повторяем.
 +
 +
[[Файл:nesint-cc-11.png|400px]]
  
 +
Точно также переносим в левую программу третий и четвёртый CHR-файл.
  
 +
Потом сохраняем файл FDSPic.CHR и закрываем все YY-CHR.
 +
 +
Осталось только нажать на Make_FDSPic.bat, а получившийся ром проверить в эмуляторе.
 +
 +
Чтобы сделать PNG для превью, можно наложить в любом редакторе один кадр на другой в виде двух слоёв, при этом верхний слой с прозрачностью 50-60%. Будут не совсем те же цвета, но для превью сойдёт.
 +
 +
<gallery widths="128" heights="96">
 +
Файл:Много идей by pixelrat.png|[[:Файл:mnogoidei.zip|сурсы]]
 +
Файл:Зима by pixelrat.png|[[:Файл:zima.zip|сурсы]]
 +
</gallery>
 +
</spoiler>
 
==Ссылки==
 
==Ссылки==
* http://hypr.ru/blog/graphics/283.html
+
* http://hype.retroscene.org/blog/graphics/283.html
 +
* http://nesdev.com/
  
 
[[Категория:Графика]]
 
[[Категория:Графика]]

Версия 19:41, 24 марта 2021

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

Палитра:
NES palitra.png

Графическая система тайловая, т.е. данные изображения хранятся в виде плиток 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 пустыми строками.

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

Инструменты

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

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

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

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

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

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

Ссылки