Как можно сделать спрайт

Данная статья - руководство по резке спрайтов от NeoGeo-ирушек с использованием эмулятора NeoRAGEx, графического редактора Adobe Photoshop и GIF-аниматора Microsoft Gif Animator. Это не совсем FAQ, т.к. в нем отсутствуют вопросы и ответы на них; это скорее Guide по резке спрайтов с NeoGeo... Но, надеюсь, данный текст даст достаточное представление об этой теме:).

ВВЕДЕНИЕ
Что такое спрайт? Спрайт - анимированный персонаж игры или любая другая деталь, количество видимых состояний которой превышает 1. Термин "спрайт" не относится к real-time-рендерящимся объектам, потому что спрайт - это последовательность заранее отрисованных кадров. Мультик, короче.

Все двухмерные игры используют спрайты для анимации персонажей. Анимированные герои порой бывают очень прикольны, и их спрайтами совершенно запросто можно украшать/портить (в зависимости от вкуса) Web-странички. Как так? А очень просто!

НУЖНО ИМЕТЬ:
1. Эмулятор NeoGeo, лучше всего - NeoRageX (именно под него заточено это описание). И игрульки, конечно:).
2. Программу для обработки изображений, поддерживающую работу со слоями, например Adobe PhotoShop (именно эта программа описывается здесь в роли инструмента) или Paint Shop Pro.
3. GIF-аниматор, например Microsoft GIF Animator, хотя подойдет и любой другой. Сильно продвинутые функции программы-аниматора нам в этом деле не понадобятся.

Теперь понятно?:) Да, все просто: захватываем последовательно все кадры анимации нужного персонажа, собираем их на слоях, обрезаем, склеиваем в аниматоре, и - вуаля! Анимированные GIF'ы поддерживаются любыми современными браузерами, следовательно - вы можете размещать их на своих страницах.
То, что получается в ходе подобных экзерсисов, - можно поглядеть вот тут:
Пример 1 http://www.emu.narod.ru/sprites/breakers_condorstance.gif
Пример 2 http://www.emu.narod.ru/sprites/galxfight_musafarstance.gif
Пример 3 http://www.emu.narod.ru/sprites/rbff_sokakudemon.gif

РАБОТА С ЭМУЛЯТОРОМ
Первое, что надо сделать - это, конечно, включить эмулятор и загрузить игру. Я советовал использовать NeoRageX не случайно: у него есть замечательная функция "Shots Factory", позволяющая избежать утомительной обрезки по контуру в каждом кадре. Владельцы PhotoShop 5.x или специальных plug-ins (пробок внутрь:)) для автоматического обведения объектов, разумеется, не оценят эпитета "утомительной", но, я надеюсь, им жалко своего времени:).

Во избежание неприятных эффектов рекомендуется сразу сделать следующую вещь: в видео-настройках NeoRageX (кнопочка TAB для выхода в основное меню и последующее перемещение в Video Options) включить 16-битный цвет и выключить все эффекты, обеспечивающие визуальное сглаживание неровностей изображения и имитирующие экран игрового автомата (interlace, edge enhancement & interpolation). Также необходимо выключить полностью Frame Skip (поставить его на 0) - вы же не хотите, чтобы полученная вами с таким трудом анимация оказалась дефективной из-за выпавшего кадрика?:))

Ну так вот. Вернувшись в игру (опять TAB) и взяв персонажа, которым вы собираетесь заняться, переходите в Shots Factory (в основном меню самый нижний пункт).

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

Первое, что надо сделать - это снять крестик с бокса Front Layer - выключить слой переднего плана, и включить Alt Background, дабы заменить подкладку по умолчанию на ядовито-фиолетовую. Это делается для того, чтобы фигуры находились на фоне такого цвета, который вряд ли окажется на самой фигуре персонажа по причине своей отвратительности:).

Далее: поле со множеством квадратиков "Objects". Каждый квадратик символизирует спрайт. И каждый спрайт может быть включен или выключен (отображаться или нет). Эмпирическим путем находим те спрайты, которые составляют изображение нужного нам персонажа, все остальные - выключаем (снимаем с них крестики). Что включено, а что выключено - видно в окошке-миниатюре. Внизу окошка "Objects" находятся два определителя текущего способа отображения: Mark All - пометить все спрайты; и Clear - снять выделение со всех спрайтов соответственно. Очень полезные штучки:).

Примечание: Фигура персонажа может состоять как из одного спрайта (цельная), так и из нескольких. К примеру в игре Kizuna Encounter сам персонаж - один спрайт, а его оружие - вовсе и другой! В Breakers - еще забавнее: там каждая фигура состоит из множества спрайтов-полос определенной ширины. Такая же ситуация в Real Bout Fatal Fury. Поэтому надо учитывать сие обстоятельство в нижеописанном маневре: смене кадров.

Итак, персонаж выделен. Делаем скриншот, нажав соответствующую надпись (Save Shot). Затем нажимаем Next Frame, при этом внимательно глядя на персонажа - а не изменилось ли в нем что? Если нет - снова Next Frame. Как только что-то изменится, жмем Save Shot, потом - опять Next Frame... И так - до победного конца, т.е. до того момента, как вы поймете, что персонаж зациклился и делает те движения, которые вы уже засэйвили... Да, скриншоты будут находиться в папке Shots, располагающейся, соответственно, в той папке, где лежит ваш эмулятор. Формат изображения скриншотов - BMP с разрешением 320x240.

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

Сделано? Следовательно - можно приступать к дальнейшим маневрам.

Еще раз напоминаю: НЕОБХОДИМО следить за тем, как отображается ваш персонаж во время смены кадров. Фишка проста: в каждом следующем кадре количество спрайтов совершенно не обязательно будет таким же, как в предыдущем. Из-за этого выделенные вами спрайты могут запросто съехать, и вместо целого персонажа вы можете радостно пронаблюдать, к примеру, его левую ногу... Корректируйте выделение!

Совет: не надо называть ROMки именами, заканчивающимися на цифры. Такое часто бывает, когда у вас есть часть некой серии - например, файл архива игры Samurai Shodown 2 может носить имя samsho2.zip. Почему это плохо? Потому что в режиме скриншотов каждый сохраненный кадр называется так: имяфайланомеркадра.bmp, например samsho212.bmp - двенадцатый сохраненный вами кадр из игры Samurai Shodown 2... Согласитесь, что подобный способ наименования картинок несколько дезориентирует и мешает выстроить правильную последовательность кадров. Посему рекомендую хотя бы на время работы со скриншотами обозвать файл как-нибудь иначе... NeoRage'у абсолютно все равно, как называется файл, он распознает игрушки по хедеру. Просто, если файл переименован, нужно еще разок нажать Import в основном меню. Зачем я так много пишу об этом? Все просто: сам обломался на такой штуке и не хочу, чтобы другие обламывались.

ОБРАБОТКА ИЗОБРАЖЕНИЙ
Итак, кадры есть. Теперь нужно сотворить с ними пару нехитрых вещей. Открываем первый сделанный вами скриншот в PhotoShop, открываем второй, выделяем все (ctrl+a), копируем (ctrl+c), переходим на первый кадр, вставляем (ctrl+v)... PhotoShop вставит изображение поверх исходного, разместив его на новом слое. Повторяем маневр (выделил-скопировал-вставил на новый слой) со следующим кадром, кладя его поверх второго... и так - до того момента, пока кадры не закончатся, т.е. все не будут лежать "бутербродом" друг на друге. Удобно сразу открыть десяток кадров и потом перемещаться между ними мышкой, а другой рукой с помощью клавиатуры копировать-вставлять кадры. Сделайте таким образом пару спрайтиков - и выработается железный навык на всю оставшуюся жизнь:).

Далее: в палитре "Layers" (слои) смотрим, все ли правильно лежит друг на друге: верна ли последовательность, не вставлены ли два одинаковых слоя друг над другом (лишние сразу удаляем), не съехал ли кадрик на пару пикселей относительно остальных (можно ненароком их сдвинуть во время маневров). Если находится какая-нибудь неполадка - незамедлительно исправляем. Потом находим конечное число кадров, составляющих полный цикл анимации персонажа. Лишние, опять же, сносим. В итоге должна получиться последовательность кадров, где первый кадр находится в самом низу палитры слоев, последний - на самом верху, причем по логике переходов от одного кадра к другому самый верхний слой должен предварять самый нижний, для создания непрерывного и плавного цикла. Получается так называемый "loop", пригодный для создания мультика в GIF-аниматоре. Но это еще не все.

Нужно выверить размеры рабочего фрейма. Для этого последовательно переключаемся между кадрами-слоями и смотрим, до каких границ вверху, внизу, справа и слева доходят всякие выступающие части персонажа в процессе его движений. Помечаем эти точки максимума. Затем берем инструмент "Crop" - "кадрировать", в Пятой версии русифицированного PhotoShop'а именуемый милым термином "обрезание":). Ну вот. Этим самым "обрезанием" делаем рамку вокруг того, что должно войти в наш мультик, и, соответственно, ампутируя все лишнее. Обрезаем. Только надо обрезать все слои разом. Правда, у меня ни разу не получалось иначе, но кто его знает - может кто-то и исхитрится... Все, сохраняемся (разумеется, в формате.PSD, дабы сохранить все слои целыми и невредимыми). Файл готов для анимации.

АНИМАЦИЯ
Наступает самый решительный этап. Открываем GIF Animator, при этом не закрывая наш файл в PhotoShop. В опциях Аниматора ставим Import Color Palette - Optimal Palette (для наиболее точной цветопередачи) и Import Dither Method - Solid (для нормальной заливки цветом одинаково окрашенных зон изображения. При любом другом варианте этой опции таковые области будут отображаться как растры из ограниченного количества цветов, а нам это надо?:)
Вот!

Странное дело: Microsoft GIF Animator почему-то понимает последовательность кадров мультика с точностью до наоборот: первый кадр для него - последний, а последний, значится, первый... Логика в принципе понятная: когда мультик собирается - все встает на свои места. Но в процессе импорта кадров (особенно первых) будет именно так, как я сказал: на место кадра №1 встанет кадр № последний. Это надо учитывать. Итак, в PhotoShop'е выделяем все (ctrl+a), берем самый верхний кадр (последний), выделив его в палитре слоев, щелкнув по его названию. Название должно подсветиться синеньким. Слой выделен. Копируем его в clipboard (ctrl+c), переходим в аниматор, вставляем (ctrl+v). Далее переходим на предпоследний кадр, копируем-вставляем - и так доходим до первого.

Примечание: Во время копирования-вставки кадров каждый раз выделять все в PhotoShop'е не надо!!! Достаточно сделать это один раз перед копированием первого кадра. А от перемещений между слоями выделенная область не изменяется!

Когда все кадры в Аниматоре присутствуют и находятся в правильной последовательности - сохраняемся. Вот. Уже есть мультик. Поздравляю!!! Но теперь нужно довести его до ума. Первым делом в Аниматоре заходим на вкладочку Animation, включаем Looping и Repeat Forever. Мы создали непрерывный цикл.

Затем на вкладке Image выделяем все кадры, нажав специальную кнопочку на панели управления. Она выглядит как символическое изображение трех рамочек - две сверху, одна снизу. После этого в поле Undraw Method выбираем Restore Background - для того, чтобы каждый следующий кадр полностью сменял предыдущий. Конечно, забавно, когда после движения руки за ней остается этакая психоделическая тень, состоящая из всех ее предыдущих изображений. Очень приятный эффект, в духе фильма "Матрица"... но в данном деле его использовать не рекомендуется: спрайт должен быть таким же, каким он выглядит в игре.

Потом, не снимая выделения со всех кадров, делаем прозрачным фоновый цвет (тот самый ядовито-фиолетовый). Для этого включаем Transparency и в качестве прозрачного цвета (transparent color) выбираем вышеозначенный фиолетовый. Кстати, Аниматор в некоторых случаях может догадаться, какой цвет является фоновым, и сразу корректно его сделать прозрачным. А может и не догадаться. Тогда нужно ему пальцем ткнуть в палитре.

Ну вот. Теперь можно поглядеть предварительный результат наших трудов, нажав на панели инструментов кнопочку Play (надеюсь - понятно, как она выглядит:). Ну, что, полюбовались? Если какая лажа возникла - исправьте.

Теперь спрайт почти готов. Единственное, что осталось с ним сделать - выставить тайминг для каждого кадра (время, которое он отображается перед тем, как его сменит следующий). И это - самая трудоемкая часть. Но не самая нудная:).

Выбираем конкретный кадр. На вкладке Image ставим Duration (продолжительность показа кадра в сотых долях секунды) на какое-либо число. Рекомендую сначала выставить всем кадрам одинаковый тайминг, а потом, глядя на превьюшку, выводимую кнопкой Play, прибавлять-убавлять время отображения для каждого кадра, добиваясь наилучшей плавности и естественности движений. Иногда хорошо помогает в этом деле наблюдение за персонажами собственно в игре - поверьте, там герои отбалансированы ну очень хорошо. Иногда также не помешает открыть в Аниматоре уже сделанный спрайт и посмотреть, как с таймингом у него... А вообще - все приходит с опытом, нужно сделать самому, чтобы хоть что-нибудь понять:).

Примечание: если какому-нибудь кадру поставить длительность отображения на 0 - он все равно будет отображаться. Очень малое время, но будет. Такой тайминг вполне применим для анимации крайне быстротекущих процессов, например, стремительных ударов мечом наотмашь.

Ну, в общем, все. Можно еще потешить свое тщеславие, подписав свой спрайт. Для этого выделяем первый кадр полученного мультика, переходим на вкладку, опять же, Image, и в поле Comment пишем, к примеру, такие слова:
ripped by real
condor_stance
sprite from Breakers
system: NeoGeo

Естественно, вы пишете, что спрайт резали вы, а не real, т.е. я:). Очень приветствуется в комментарии название игры и система (в нашем случае - NeoGeo, хотя инфу о спрайторезании из этой статьи легко адаптировать для любой системы, эмулятор которой существует на PC и имеет более-менее достойный набор функций... И резать спрайты, к примеру, с игр для Megadrive).

Печальное Примечание по поводу просмотра: к вящему и пущему сожалению, браузеры от Microsoft и Netscape не могут корректно отображать спрайты с быстрой анимацией - а именно такими они у нас и получатся. Поэтому рекомендуется использовать браузеры исключительно для того, чтобы просмотреть спрайт единожды, а затем - скопировать его (правой кнопкой мышки, а затем выбрать пункт Сохранить Рисунок Как...) на свой винт. Представление о реальном тайминге спрайта можно получить, лишь глядя на него в специальном вьюере вроде ACDSee версии не ниже 2.3:(. Во всем есть как положительные стороны, так и отрицательные. Оттого настоятельно рекомендую вам на эти пакости браузеров положить и несовершенство наших просвещенных забав - отрицать, соответственно:).

И на этом, господа мои товарищи, я завершаю сей удивительный и увлекательный рассказ. Пользуйтесь этой информацией, режьте спрайты и шлите их мне, или в какой-нибудь другой Спрайт-Архив, например Rips'r'Us ( http://ripsrus.retrogames.com/ ). Только не храните у себя их в единственном числе - покажите людям и дайте их поюзать, если кому понравятся:). Спрайты - это хорошо!!!

Да, еще такой момент: когда спрайт готов, удалите с вашего винчестера всякие промежуточные файлы, использованные для его изготовления - PhotoShop'овский многослойный и кучу скриншотов, - это сэкономит вам значительное количество дискового пространства!

Rea


Источник: http://vrgames.by/content/kak-sdelat-animirovannyj-sprajt


Рекомендуем посмотреть ещё:


Закрыть ... [X]

CSS спрайты: основные техники и полезные Как сделать арт себя гта 5

Как можно сделать спрайт Как сделать анимированный спрайт? VRgames
Как можно сделать спрайт Как сделать спрайт дома? - VidInfo
Как можно сделать спрайт Мохито, рецепты с фото на m: 14
Как можно сделать спрайт Как сделать спрайт дома? - m
Как можно сделать спрайт Steam Community : Guide : Получаем Достижения в Borderlands
Как можно сделать спрайт Белая, черная, практическая Магия. Заговоры заклинания законы
Бухгалтерская справочная система «Система Главбух» для Гуттаперчевый мальчик Забыл пароль windows 7 и windows xp. Как снять пароль с Как затонировать заднее стекло ВАЗ 2107 своими руками Как приготовить сочные котлеты. 31 полезный совет Продукты Как сравнить две строки в Excel? Космический магазин - товары для