Бумажная работа: как в Японии создавали 2D-графику для игр

Удивительные устройства и целый ворох технических проблем.

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

Блог Video Games Densetsu опубликовал текст про развитие графики в игровой индустрии Японии. В нём уделено особое внимание устройствам и методам создания двухмерных изображений, а также описывается какие графические редакторы применяли разработчики 80-90 годов. Мы выбрали из материала главное.

Бумажная работа: как в Японии создавали 2D-графику для игр

Технологии

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

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

Solomon’s Key
Solomon’s Key

Для работы графические дизайнеры должны были иметь три вещи: бумагу в клетку, компьютер с клавиатурой и мышью, а также базовые знания шестнадцатеричной системы счисления. Последнее было необходимо, так как минимальной единицей памяти в компьютерах являлся 8-битный байт, значение которого удобно записывать двумя шестнадцатеричными цифрами. Мититака Цурута, разработчик Solomon’s Key, использовал эту систему в первые годы своей карьеры.

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

Мититака Цурута, разработчик Solomon’s Key

Только после этих действий дизайнер мог увидеть результат работы на экране.

Персонажи из Pac-Man, нарисованные на бумаге в клетку
Персонажи из Pac-Man, нарисованные на бумаге в клетку

После выхода Famicom в 1983 году Nintendo решила стать единоличным издателем игр для своей консоли. Однако президент компании Хироси Ямаути пересмотрел планы, когда понял, что Nintendo не сможет выпускать достаточно игр для поддержания спроса. Кроме того, некоторые издатели уже проявляли интерес к разработке проектов для Famicom.

Одной из первых компаний, с которой начала сотрудничать Nintendo, стала Hudson Soft: её разработчики достаточно быстро ознакомились со спецификациями консоли и приступили к созданию собственного development kit. Hudson Soft также обладала правами на издание некоторых игр Nintendo на компьютерах (например, Mario Bros., Super Mario Bros., Donkey Kong 3, Golf).

Команда, занимавшаяся созданием комплекта разработки, состояла из двух человек: Сэцуо Окада — специалиста по «железу», Синъити Накамото — программиста. Development kit был готов к использованию зимой 1983 года, через полгода после запуска Famicom.

Он содержал графический редактор, который запускался на X1 (компьютере от Sharp, для которого Hudson Soft разработала BIOS), ROM-симулятор (который, ко всему прочему, позволял разработчику устроить предпросмотр созданной графики), а также жёсткий диск.

Thunder Force IV
Thunder Force IV

После перехода индустрии из эпохи шестнадцатеричной системы к графическим редакторам, для дизайнеров стало обыденностью иметь два экрана. Первый — монитор или кинескопный видеопроектор (CRT-проектор) для работы, а второй — монитор для визуализации результата.

Это объяснялось тремя причинами. Во-первых, мониторы давали более чёткую картинку, чем CRT-проектор. Во-вторых, была разница в спецификациях компьютеров: нужно было видеть конечный результат с высоким разрешением, чёткими пикселями и яркими цветами. В-третьих, некоторые эффекты отображались не на всех компьютерах, например: эффект параллакса в игре Thunder Force IV не мог быть протестирован на компьютере X68000 от Sharp.

Версия <a href="https://ru.wikipedia.org/wiki/Wizardry" rel="nofollow noopener" target="_blank">Wizardry (1987)</a> для Famikom — известный пример иллюстрации различий рендеринга для старых CRT-проекторов (слева) и современных HD-мониторов (справа)
Версия Wizardry (1987) для Famikom — известный пример иллюстрации различий рендеринга для старых CRT-проекторов (слева) и современных HD-мониторов (справа)

Наличие сканера было опциональным в 80-х годах. Отсканированные изображения занимали много места, а жёсткие диски тогда имели очень ограниченную ёмкость и стоили дорого. Также рендеринг отсканированного изображения был плохим из-за низкого разрешения и ограниченного количества цветов, которые мог обрабатывать компьютер.

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

Фон и персонаж из <a href="https://en.wikipedia.org/wiki/Metal_Slader_Glory" rel="nofollow noopener" target="_blank">Metal Slader Glory</a> (1991). Некоторые художники сперва рисовали на бумаге, сканировали, а потом использовали изображение в качестве основы для работы на компьютере
Фон и персонаж из Metal Slader Glory (1991). Некоторые художники сперва рисовали на бумаге, сканировали, а потом использовали изображение в качестве основы для работы на компьютере

Ёсинори Ямамото, графический дизайнер из Capcom, использовал следующий подход: сперва нужно нарисовать кадр на бумаге в клетку, отсканировать рисунок, нарисовать пиксели, а в конце разукрасить спрайт. Отрисовка каждого кадра на бумаге давала художникам возможность проверить правильность анимации ещё до начала работы над пиксельным вариантом.

Анимация ходьбы для Ингрид из Capcom Fighting Jam (2004)

Графические дизайнеры, работавшие в Nintendo в 80-х, должны были использовать необычный способ оцифровки для относительно простых спрайтов. Персонажей огромного размера сперва рисовали на целлулоиде, разукрашивали, а лишь затем переводили в цифровой вариант.

Геймдизайнер Сигэру Миямото вспоминал, что устройство для импорта рисунков позволяло переносить изображения только в том виде, в котором их создал аниматор. Это создавало определённые проблемы. Например, для оцифровки небольших спрайтов Super Mario Bros. можно было воспользоваться бумагой обычного размера, а вот для создания крупных спрайтов для Punch Out!! изображения рисовали на листах бумаги размером со стол.

Бумажная работа: как в Японии создавали 2D-графику для игр

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

Изготовленная на заказ бумага в клетку, которую использовали во время разработки Street Fighter III: Third Strike (1999)
Изготовленная на заказ бумага в клетку, которую использовали во время разработки Street Fighter III: Third Strike (1999)

В середине 90-х годов многие разработчики были вдохновлены успехом Virtua Fighter и появлением 3D. Некоторые на этом споткнулись, а другие открыли необычные пути.

Компания SNK практиковала наложение разных подходов — совмещались motion capture и 2D-графика. Но в офисе компании в Осаке не было оборудования для захвата движений, поэтому некоторые сотрудники специально уезжали на месяц в США, чтобы там поработать с этой технологией. При этом большинство полученных анимаций не подходили для рендера, поэтому дизайнерам приходилось тратить значительно больше усилий, чем они ожидали.

3D-модель, созданная в 1995 году
3D-модель, созданная в 1995 году

Устройства

Несмотря на то, что компьютерная мышь предоставляла разработчикам определённое удобство в работе, некоторые представители индустрии выбирали клавиатуру в качестве основного инструмента. Коити Ёцуи использовал клавиатуру при создании главного героя Strider, Акира Ясуда точно так же создал открывающую анимацию из Street Fighter II и Darkstalkers.

Сотрудник SNK за работой в 1992
Сотрудник SNK за работой в 1992
Некоторые разработчики использовали гибридные устройства ввода
Некоторые разработчики использовали гибридные устройства ввода

Наряду с клавиатурой, некоторые компании до конца 90-х использовали джойстики в качестве инструмента разработки.

Бумажная работа: как в Японии создавали 2D-графику для игр

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

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

Mahou Daisakusen
Mahou Daisakusen

Масаюки Сузуки вспоминал, что в разработке Metal Soldier Isaac II (1985) использовали графические рабочие станции, которые были созданы из нераспроданных аркадных автоматов с игрой Qix (1981). На этих станциях отсутствовала мышь, а всё управление осуществлялось с помощью блока управления, который включал около 20 кнопок. И на каждые четыре станции, был всего один жёсткий диск.

Qix
Qix

Многие другие компании также использовали джойстики. Например, Capcom, во время разработки Street Fighter II, или NMK при создании игр по франшизе Macross в 1992-1993 годах. Хироюки Маэда (Chip-Chan Kick!, Elemental Tale) использовал клавиатуру в сочетании с джойстиком, когда разрабатывал игры на X1 в 80-х.

Street Fighter II
Street Fighter II

В 1983 году Sega начала использовать первую версию своей Digitizer System — компьютера, состоящего из двух экранов, первоначально предназначенного для разработки аркадных игр. Первый экран отображал конечный результат, а второй был связан со световым пером, благодаря чему на нём можно было рисовать. На GDC 2018 Наото Осима рассказал, что использовал световое перо при создании графики для Sonic the Hedgehog (1991).

Разработка Pitfall II (1985)
Разработка Pitfall II (1985)

Также известно, что световое перо использовалось при разработке Wonder Boy (1986) на Digitizer System. Рюити Нисидзава рассказывал, что самая большая проблема заключалась в сохранении данных: система не имела флоппи-дисковода, поэтому весь процесс был крайне трудоёмким.

В 1991 году Sega обновила своё оборудование до третьей версии Digitizer System, которая была построена на архитектуре аркадного автомата, схожего с Mega Drive. На них была установлена специальная мышь, а также планшет, который вычислял её абсолютное положение (вместо относительного положения, как у традиционных мышей).

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

Мышь для рисования в Sega в 1990 году
Мышь для рисования в Sega в 1990 году

К 1994 году Sega заменила Digitizer System на компьютеры Macintosh. Тем не менее графический дизайнер Том Пейн вспоминал, что в американском подразделении продолжали использовать подобные мыши для рисования даже во время разработки Sonic the Hedgehog 3.

Графический дизайнер из Konami работает над Gradius для Famicom (1986)
Графический дизайнер из Konami работает над Gradius для Famicom (1986)

В 80-х годах Sega не применяла графические планшеты в разработке. Тем не менее есть несколько известных примеров использования в таких компаниях, как Konami и Namco. Например, в разработке Gradius для Famicom использовался графический планшет. А в Konami устройство использовали вплоть до 1995 года.

Программное обеспечение

Аниматор Акира Ясуда рассказывал, что в Capcom использовали графический редактор, работа которого была основана на программе Konami (возможно, это связано с тем, что в 1984 году в Capcom перешёл один из сотрудников Konami). Редактор под названием TCE (Tiny Character Editor) изначально запускался на специальном компьютере Sony SMC-70, которые компания использовала в 1985 году.

Графический редактор Capcom, который использовали во время разработки Street Fighter Zero 2 (1996) для PS1

В начале 90-х Konami применяла собственный графический редактор — Konami PIGS. Компания Taito (Space Invaders, Double Dragon) разработала свой редактор Taito Animator, который позже был портирован на Windows. У него был один крупный недостаток: нельзя было визуализировать цикл анимации, поэтому приходилось вручную прокручивать каждый кадр, чтобы имитировать её.

Компания Dempa Micomsoft также выпустила собственный графический редактор на компьютере Sharp: Object Editor.

Object Editor
Object Editor

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

Так было с художником Сатоши Накаи, работавшим над Gynoug, Cho Aniki и Assault Suit Valken. Он использовал компьютер X68000, мышь и копию Z'Graff. Другой пример — один из графических дизайнеров Thunder Force IV. Ему приходилось обучаться на PCG Editor — коммерческом графическом редакторе, доступном на компьютерах X1 и MSX.

Технические ограничения

Каждая платформа имела свои особенности, которые нужно было учитывать в работе. Например, на Sega Mega Drive существовала проблема с неквадратными пикселями, а красный «растекался» на соседние цвета. Подобные трудности были в меньшей степени заметны на TeraDrive — компьютере, на котором можно запускать игры Mega Drive. Но они так плохо продавалась, что некоторые графические дизайнеры даже не знали об их существовании.

Sega TeraDrive
Sega TeraDrive

Разработчики игр для Mega Drive сталкивались со множеством различных ограничений. Например, консоль не поддерживала эффект прозрачности, а также не могла одновременно отобразить более 64 цветов, хотя общая палитра состояла из 512. Тем не менее даже в самых красочных играх редко встречалось более 30 разных цветов на экране.

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

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

На других консолях, подобные условия удавалось обходить, если часть неиграбельных элементов применялись в качестве фона (например, как в Final Fight). Кроме самого спрайта, такой задник закрашивался определённым цветом (в основном зелёным, синим или розовым), к которому применялся эффект прозрачности.

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

Бумажная работа: как в Японии создавали 2D-графику для игр

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

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

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

Popful Mail на PC-88 (1991)
Popful Mail на PC-88 (1991)

Сами спрайты имели ограничения по высоте или числу оттенков в зависимости от платформы, для которой создавалась игра. Обойти ограничение на размер можно было, собрав персонажа из нескольких спрайтов. Это практика использовалась для больших персонажей, таких как Сагат из Street Fighter (1987, верхняя часть отделена от нижней части) и Sentinel из X-Men: Children of the Atom (1994).

Бумажная работа: как в Японии создавали 2D-графику для игр

Сейчас работа над графикой в играх не ограничена ворохом технических условностей, с которым приходилось уживаться разработчикам 80-х: не нужно вручную разукрашивать огромные спрайты персонажей или рисовать с помощью клавиатуры. Несмотря на подобные проблемы, разработчикам удавалось не просто кое-как собирать игры, а создавать культовые шедевры, которые ценятся до сих пор. Если же знать, какой ценой далась работа над этими играми, их ценность становится ещё выше.

44 показа
13K13K открытий
11 репост
60 комментариев

пример иллюстрации различий рендеринга для старых CRT-проекторов (слева) и современных HD-мониторов (справа) Офигеть. На ЭЛТ на порядок живее, а ЖК мониторы стыквили всю красоту пиксельарта.

Ответить

И это основная проблема эмуляторов. Когда только они появились, мы в восторге качали все игры сега и денди. Но больше 10-15 мин. играть не возможно было. Мутной и сглаженой картинки старого ТВ просто так из головы не сотрешь.

Ответить

Комментарий недоступен

Ответить

Комментарий недоступен

Ответить

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

Ответить

Комментарий недоступен

Ответить

Потому что игры делались с расчетом на особенности CRT. Огромное количество спрайтов рисовалось с расчетом на то, что благодаря сканлайнам они будут выглядеть сочнее, например.
Или те же тени в первом MGS. На самом деле никакого мягкого освещения в игре не было, но игра света и тени достигалась за счет добавления обычных черных текстур. Из-за нечеткой подсветки CRT экрана это было сложно различить.
А вот на эмуляторе - да.

Ответить