» Инструкция по созданию персонажей
Страница: Инструкция по созданию персонажей

Вступление

 

Как уже понятно из картинки выше, это гаед (гайд) по созданию персонажа на M.U.G.E.N.

Итак, разберем сначала, что такое M.U.G.E.N.

M.U.G.E.N: это движок для создания 2D файтинга, в котором вы сможете создавать игры качества сравнимого даже с коммерческими файтингами. В этой игре все можно менять на свой вкус, создавая все от своих персонажей до арен, и даже изменять внешний вид игры! На этом описание закончим.

Рекомендуемый софт и ОС(Операционная система):

1.  Windows XP+ (64 битная).

2.  M.U.G.E.N 1.0(Устарел) /M.U.G.E.N 1.1 beta patch 1(Рекомендуется)

3.  Fighter Factory 3

4.  Adobe Photoshop/Или любой другой графический редактор.

5.  Snagit9/Программа для нарезки спрайтов.

Кейген/Активатор внутри архива.

 

6.  Alfred Spritesheet/Авто-нарезатель спрайтов.

 

Рекомендуемые системные требования (M.U.G.E.N 1.1):

Для правильной работы мугена 1.1 с рендером 32 бит. нужны самые свежие драйвера для вашей видеокарты, либо будет вылетать, либо вообще не запустится.

1.      Операционная система e.g. Windows 7 Professional 64-bit

2.      CPU type and speed, e.g. Intel Core Duo P8800 @ 2.66GHz

3.      Оперативная память 4.00 Гб

4.      Видеокарта модель + RAM, e.g. ATI Radeon HD 3400 1 GB

Для обычного рендера достаточно среднего ПК.

 

                                   

 

 

 

 

 

 

Тех.Описание и свойства движка

 

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

 

Ограничения движка:

1.     Helper: Максимальное количество в сцене: хелперов(помощников) = 56.

·         Самый функциональный и гибкий объект движка.

·         С его помощью можно создавать дубликат игрока и манипулировать им по желанию пользователя.

·        

2.     Explod : Максимальное количество в сцене: эксплодов(эффекты) = 256.

·        Объект для спавна(создания) эффектов в сцене.

·        Используется для визуализации спец-приемов, создания пыли т.п.

·       

3.     Projectile: Максимальное количество в сцене: прожектайлов(снарядов) = 32.

·         Объект для спавна(создания) снарядов игрока в сцене.

·         Ограничен в функционале, используется только для создания снарядов.

·        

4.     AfterImage: Максимальное количество в сцене: афтеримеджей(шлейфов) = 16.

·         Объект для создания шлейфа(остаточных изображений) игрока.

·         Используется для визуализации персонажа.

·        

5.       Var(): Максимальное количество целых(int) переменных = 60 (Отсчет начинается с 0 по 59).
Fvar(): Максимальное количество дробных(float) переменных = 40 (Отсчет начинается с 0 по 39).

 

·         Попытаюсь упростить…Переменная это-величина, значение которой можно изменять по желанию.

·         Этим придется пользоваться регулярно, для создания более продвинутого персонажа.

 

 

 

Важное примечание! (Читай сука!)

Запомни, это строгие ограничения движка. Лимит на объекты действует на всю сцену, то есть, если в сцене находятся 2-4 игрока, лимит на объекты действует на всех игроков, независимо от их количества. При достижении лимита-вылета не будет, просто объекты игроков не будут создаваться, до того момента пока объекты не исчезнут. Так же M.U.G.E.N изначально рассчитан на файтинги, на практике по своему опыту могу сказать, что на нем можно реализовать полноценный аркадный режим, или арканойд/платформер, но это сложно и только исключительно в виде перса, и лучше такое делать только в рамках полноценного, отдельного проекта.

Подробные свойства каждого из объектов рассмотрим позже.

 

Создание персонажа
часть-1
(нарезка спрайтов и создание палитры)

Палитра

 

v  Итак, после того как ты ознакомился с технической частью движка, и решил, что он тебе подходит, то можно приступать к созданию персонажа. А именно, тебе нужен спрайт-лист твоего персонажа. Для примера и дальнейшей работы я взял спрайт-лист Рю(Персонаж из вселенной: Street fighter-ваш кэп).

v  Спрайт-лист персонажа есть, что дальше? А дальше тебе нужно его подготовить для создания палитры.

v  Я пользуюсь фотошопом, что и тебе советую).

v  Вот так изначально выглядит спрайт-лист:

v  Видно, что он не имеет фона, и сам лист не в режиме индексированных цветов.

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

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

v 

v  После того как ты залил фон, тебе необходимо перевести спрайт-лист в индексированные цвета, для этого переходим по вкладке «Изображение>Режим>Индексированные цвета» .

 

v   

 

v 

v  Настраиваешь все так, как по скриншоту выше.

v  Если в спрайт-листе слишком много цветов, то тип «точной» будет не доступен тогда нужно сделать так:

v 

v  После нажимаешь Ок. 

v  Всё! Теперь спрайт-лист готов для создания палитры. Сохраняешь его в формате .png …

v  Далее открываешь Fighter Factory 3

v  Ты видишь перед собой такое окно:

v  Далее тебе необходимо импортировать спрайт-лист, для этого нужно нажать на эту кнопку

v  После чего перед твоим молодым взором откроется это:

v  На данный момент для тебя-неважно в какую группу определить свой спрайт-лист, выбирай по желанию, после чего нажми на «Ок».

v  Ты импортировал спрайт-лист? Молодец…

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

v  Вот так выглядит редактор палитр:

v  Чтобы удалить фон, тебе необходимо выделить цвет фона в таблице цветов. Это можно сделать вручную, либо выделить нужный тебе цвет «пипеткой» . Нажимаешь ,а после выделяешь цвет фона,будет примерно так:

v 

v  Далее тебе необходимо сделать выделенный цвет прозрачным, это можно сделать двойным щелчком мыши по выделенному цвету или нажатием на эту кнопку:

v  Далее у тебя открываеться редактор цвета палитры:

v  Для того чтобы изменить прозрачность цвета, тебе необходимо изменить его значение, для этого тебе нужно изменить значение  на «0»  и нажать «Ок».

v  Всё! Теперь фон прозрачный!Теперь тебе необходимо сохранить изменения в палитре, это делается нажатием вот по такой кнопочке . И на этом по сути можно было бы закончить, но для практики ты сделаешь 2-ую палитру персонажу, на базе 1-ой, ты изменишь цвет одежды. Но перед этим тебе необходимо сохранить спрайт-лист перса, нажатием кнопки, после чего высветится окно с выбором экспорта изображения/изображений в группе:

v  Так как тебе необходимо лишь сохранить сам спрайт-лист, выбираешь «Current», после чего выбираешь директорию(путь/местонахождения файла) для сохранения файла.


v   Теперь тебе необходимо создать 2 палитру. Сделать дубликат можно простым щелчком мыши по кнопке выделенной на скриншоте:

v  После того как ты нажал, программа спросит тебя, подгрузить ли ей палитру из файла или изображения:

v   Нажимаешь «Yes», и выбираешь спрайт-лист, который ты сохранил ранее, тот у которого уже настроен цвет прозрачности фона.

v  После того как ты выбрал спрайт-лист в качестве палитры цветов высветится следующее окно:

v  Так как Индекс (номер палитры в группе) под номером «0» уже занят, сменишь значение индекса на «1». После чего нажимаешь «Ок».

v  Всё! Теперь у тебя имеются две палитры с одинаковым набором цветов.

v  Теперь тебе необходимо изменить цвет одежды у 2-ой палитры, но сначала убедись, что у тебя выбрана 2-ая палитра, а не 1-ая, хотя по сути это не важно, тебе все равно нужно сменить цвет одежды у одной из палитр.

v  Открываешь редактор палитры , после чего теобходимо выбрать сами цвета одежды, это просто, для этого необходимо выбрать пипетку ,после чего зажать «Ctrl» и выделять цвета одежды из спрайт-листа:

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

v  Отрегулируй ползунок «оттенка» и «насыщенности» на синий и нажми на кнопку :

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

v  Это ползунки настройки коэфициента цветов в выделенных тобйо цветах.

v  Отрегулируй их ближе к синему или голубому, после чего нажми .

v  Результат:

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

v  Ты сохранил изменения, вроде все хорошо/тип топ и тп. Но ты видишь это!

v 

v  Вот незадача! Как так-то?! Изменения коснулись обоих палитр! Но не унывай! Решение этой проблемы имеется! Для этого необходимо сохранить наши спрайт/спрайт в .sff файл (файл архив так сказать, который муген воспринимает), этот процесс осуществляется нажатием  кнопки. После чего, высвечивается вот такое вот окно:

v  Программа спрашивает тебя, в каком «формате» сохранить .sff файл, как видно тут 3 вариант:
1. Дос муген

v  2 Муген 1.0

v  3 Муген 1.1

v  Так как ты создаешь персонажа под актуальную и последнюю версию движка, выбираешь вариант «M.U.G.E.N. 1.1»

v  После, тебе уже сейчас. Да, сейчас! (читай внимательно, сука), необходимо создать папку для сохранения всех файлов персонажа (файл спрайтов, комманд, кодов, звуков), вводишь название .sff файла спрайтов и нажимаешь «Сохранить»

v  Теперь ты закрываешь файл спрайтов перса, а после снова его же открываешь :

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

v  Программа спросит тебя «Использовать ли ей цветовую палитру листа для всех других похожих палитр», ты же, как хороший, добропорядочный, молодой мальчик/девочка, должен нажать «No», иначе мама не купит тебе сладкий и вкусный леденец!

v 

v  Все готово осталось лишь сохранить изменения в нашем .sff файле, кнопочкой:

v  Поздравляю! Ты создал 2 отдельные палитры для персонажа, можешь гордиться собой (нет). На это часть гаеда (гайда), по созданию палитры для персонажа, можно закончить.

v  Но я думаю ты задашь мне вопрос, почему тебе такой хорошему, занятому человеку приходиться так изворачиваться чтобы создать дополнительный экземпляр палитры? Все на самом деле просто: редактор воспринимает подгруженную цветовую схему спрайт листа как основу для всех похожих палитр, для решения проблемы нужно заново подгружать .sff файл, то-ли это фича, либо баг. В любом случае после создания дополнительной палитры проблема спадает и все работает как надо. Для особенных залил .sff файл на облачный сервис скачать: ТЫК!

Дополнительная информация

 

v  Иногда при генерации палитры встречаются подобные артефакты/баги:

v 

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

v 

v  Далее, выбираешь инструмент «пипетка»

v  Выделяешь «прозрачный» цвет кожи.

v  На скриншоте ниже видно, что цвет кожи абсолютно прозрачный:

v 

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

v  Откроется редактор:

v 

v  Здесь тебе нужно будет настроить уровень прозрачности цвета:

v  «Alpha channel»=0 - полностью прозрачный цвет.

v  «Alpha channel»=255 - полностью непрозрачный цвет.

v  Как не трудно догадаться из предложения выше, тебе придется выставить уровень прозрачности цвета на 255.

v 

v  Далее нажимаешь «Ок».

v  Ну а уже после, сохраняешь изменения в палитре, на кнопочку .

 

 

 

 

 

 

Нарезка спрайтов

v  Итак, палитра готова, что дальше? Дальше тебе нужно нарезать спрайт-лист по кадрам. ВАЖНО! Чтобы лист был в индексированных цветах! Иногда случается так, что при сохранении настроенного спрайт-листа в .png  он не индексируется, в случае если ты столкнулся с этой проблемой советую сохранить спрайт лист в .bmp ВАЖНО! Только не в .pcx!

v  Рекомендую сохранять лист в .bmp

v  Ты имеешь вот такой готовый и настроенный спрайт-лист:

v 

v  Далее необходимо выделить все кадры через «Расскройка»

v 
Выделим нужные кадры:

v 

v  После тебе необходимо сохранить их как отдельные кадры, для этого переходим по вкладке

v  «Файл>Экспортировать>Сохранить для web»

v 

v  В результате откроется следующее окно:

v 

v  После нужно настроить все так как на скриншоте ниже:

v 

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

v  Зажимаешь «Shift» и кликаешь по нужным тебе кадрам, после чего они буду выглядеть так:

v  Осталось только сохранить их, для этого ты должен нажать кнопку «Сохранить»

v 

v  Далее тебе нужно выбрать папку сохранения и формат файла.

v 

v  .Gif нужно заменить на .png

v  После, нажать кнопку:

v 

v  Теперь я рассмотрю другой способ нарезки спрайтов, а конкретно с помощью программы «Snagit» Внимание! Только 9 версия, версии старше не сохраняют палитру. Понял нахуй?!

v  Открой редактор «SnagitEditor.exe»

v  Открой спрайт-лист в редакторе:

v 

v 

v  Для того чтобы обрезать нужное движение, нужно выбрать этот инструмент:

v  После, выделяешь нужный тебе кадр:

v 

v  Ты выделил? Да? Молодец(нет)

v  Итак, для того чтобы сохранить выделенный тобой кадр, ты должен сделать следующее:

1.Нажимаешь правый кнопку мыши.

2.После нажимаешь:

3.Выбираешь папку сохранения, после чего-сохраняешь в .bmp.

v  Таким образом вырезаешь каждый отдельный кадр, в «Snagit» это удобно и быстро.

 

v  Теперь ты будешь рассматривать самый быстрый метод нарезки спрайт-листа.

 

v  Для этого ты будешь использовать программу под названием «Alfred Spritesheet»

 

v  Открываешь ее…

 

v 

 

v  Далее перетаскиваешь спрайт-лист в окно программы.

 

v  Результат:

 

 

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

v 

v  Итак, теперь ты в настройках, не бойся, здесь их не так много. Это не должно вызвать у тебя трудностей (надеюсь…)

v 

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

v  Настраиваешь всё, как на скриншоте ниже:

v 

v  После чего нажимаешь на кнопку:

v  Итак, дело за малым!

v  Для того чтобы выделить все кадры и сохранить их, ты нажимаешь на:

1.      

2.       После того как все кадры выделились:

Нажимаешь на:

3.       Выбираешь папку сохранения, после чего сохраняешь!

 

v  Теперь пришло время для импорта  всех кадров в .sff файл…

v  Открываешь Fighter Factory 3…

v   

v  Далее открываешь,  .sff файл в котором находится спрайт-лист персонажа.

v  Для начала не спеши удалять спрайт-лист, перед этим следует подгрузить все кадры (кроме кадров получения урона игроком) персонажа в редактор.

v   

v  Внимание! Читать, сука! Внимательно! Ты должен импортировать все кадры, КРОМЕ КАДРОВ ПОЛУЧЕНИЯ УРОНА ПЕРСОНАЖА!!!!

v  Усвоил? Молодец (нет)

v  Теперь пора приступить к самому процессу импорта спрайтов .

v  Для того чтобы назначить нашу стандартную палитру персонажу во время импорта необходимо, сделать всё как на скриншоте ниже:

v 

v 

v  Эта опция принудительно задает группу и индекс палитры под импортированные спрайты.

v  Лучше изначально распределить все кадры отдельных движений по отдельным группам.

v  После чего следует нажать:

v  После чего сохраняешь изменения в .sff файле .

v 

Сортировка и выравнивание спрайтов

v  Итак, после того как ты импортировал все нужные тебе спрайты и распределил их по группах, остается только одно…

v  Да! Мой юный аутист! Это выровнять их!

v  Для этого в программе существуют вспомогательные элементы, в виде дополнительных направляющих и т.п.

v  Ты рассмотришь все варианты.

v  Первым из вариантов будут дополнительные направляющие(линии), для того чтобы отобразить их, необходимо перейти по этой вкладке и активировать ее:

v 

v  После чего появятся такие линии:

v 

v  Теперь нужно их отрегулировать для дальнейшего выравнивания:

v   

v 

 

v  Таким образом можно выравнивать спрайты относительно угла другого/предыдущего спрайта…

v  Теперь рассмотрим следующий вариант

v  А именно-режим подложки!

v  Чтобы его отобразить тебе всего лишь нужно-поставить галочку вот в этой вкладке:

v 

v  После того как ты активировал ее у тебя отобразилась подложка:

v   

v  Как она работает и как ее настроить? Спросишь ты. А все просто, подложка создается из текущего выбранного спрайта и его положения по «х» и «у». Перед тем как ее использовать тебе следует выровнять спрайт так, чтобы его позиция служила в качестве примера для других спрайтов. Вот так:

v 

v  После, следует выровнять текущий спрайт, вот так:

v 

v  Также у подложки имеется функция смены кадров, для этого тебе следует регулировать вот этот ползунок:

v 

v  Никто не запрещает комбинировать вместе два этих метода и использовать их как один.

v  Выравнивать спрайты лучше относительно положения головы/тела/ног.

v  Конечно же можно выравнивать спрайты «на глаз», что крайне не рекомендую.

v  Сейчас я рассмотрю дополнительный инструмент, а именно «Extra Cross», во вкладке по клику на:

v 

v  Для того чтобы активировать-нужно переключится на любое окно вида, а после нужно вернуться в окно вида спрайтов.

v 

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

v  Ты, наверное после этого или же с самого начала работы в окне спрайтов спросишь меня об этом:

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

v   

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

v 

v  А после ты повторишь те-же операции что были выше:

v     

v  Думаю теперь тебе понятно, что позиция точки центролизирования спрайта влияет на смещение масштабирования, изменения угла и отражания спрайта по вертикали/горизонтали.

v  Теперь уже после того как ты выровнял все нужные тебе спрайты, тебе необходимо импортировать спрайты получения урона персонажем, пример:

v 

v Теперь! Внимание!  Тебе нужно чётко распределить кадры получения урона по группам как в примере ниже:

v

v Тут наглядно показаны точки централизации спрайтов получения урона, группы и индексы (номера спрайтов в группе) должны быть точно такими же как в примере выше и все спрайты получения урона должны быть выровнены как в примере выше! Другие примеры:

v

v Понял, сука? Если у тебе не имеются спрайты получения урона в присяди, можно заменить их на кадры получения урона в стойке.

v  

v Если у тебя не имеются все спрайты получения урона из примера что был выше, дублируй их, подставляй самые похожие.

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

v Для чего это нужно? Эти группы и кадры создаются, чтобы персонаж отображался при переходе в специальный стейт-урона соперника. Так как при переходе перса в этот стейт, соперник «задает» ему специальную анимацию, которая использует кадры из этих групп.  Если же у тебя проект, то ты можешь забыть об этих группах и использовать свои созданные и добавленные как базу и основу спрайты. Исходник (.sff файл) из этого урока прилагается: ТЫК!

v На этом работу со спрайтами можно закончить и приступить к созданию» черновиков», а после к работе над анимациями.

 

 

 

Создание черновиков и работа с анимациями

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

Конечно, можно было бы сделать все это через шаблон, но в данном случае ты будешь делать все с нуля. Для чего ты будешь этим заниматься? А для того-чтобы понять всю суть и принцип работы со своим персонажем.

 

Сначала зайдите на смотреть фильмы, а потом обязательно зайдите сюда это стоит того