Разные способы анимации и копирование дорожкой

Дмитрий Маштаков
   Хорошо, когда программа предоставляет различные технические приёмы, облегчающие анимацию, и пользователь может сам, в зависимости от задачи, которая перед ним стоит, может выбрать тот или иной способ. Создавая собственную программу для анимации и рисования, я не только хотел сделать рабочий инструмент, но и исследовать на практике возможности разных технических приёмов.
   Даже такой, казалось бы однотипный инструмент, как копирование дорожкой, в зависимости от общей организации работы, может проявлять себя с разных сторон.

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

   Как это ни прекрасно, но полностью получить персонаж, только на этом приёме, мы не можем. Руки и ноги персонажа нужно пририсовывать отдельно и поочерёдно, используя дорожки с разными записями. И перед каждым пририсовыванием счищать старое изображение зелёным ластиком. Зелёный ластик оставляет на месте изображения серый след, который затем нужно будет удалить.
   Таким образом, мы создаём изображение «перекладкой», перекладывая на нём отдельные части, находящиеся в форме записей на нескольких дорожках. Отличие от классического метода перекладки состоит только в том, что дорожки, раскладывая их, можно изгибать, создавая выразительные повороты и жесты.

    ЗЕЛЁНЫЙ ЛАСТИК.
    В программе есть три вида ластиков – «нормальный», сиреневого цвета ластик получается, если кликнуть по кнопке «ластик» первый раз. Этот ластик попросту рисует, используя цвет фона, потому и кажется, что он будто бы стирает.
   Второй, «синий» ластик получается, если кликнуть по кнопке «ластик» второй раз. Этот ластик действительно «стирает» - он очищает рисунок от только что нарисованной и незакреплённой на нём графики, как если бы было применена функция очистки экрана «cls» для очень маленькой прямоугольной области, двигающейся вместе с указателем мыши.
   Третий, «зелёный» ластик получается вместо синего, если активирована полоска «^^^^», её, и находящуюся над ней кнопку вставки кадра «ins» вы можете видеть на иллюстрации. При активации и полоска, и кнопка над ней приобретают жёлтый цвет.
   Полученный таким образом «зелёный» ластик тоже фактически не стирает, а рисует серым цветом, окрашивая в этот цвет все места, по которым он проходит, и оставляет незакрашенным только белый цвет.

   БЕЛЫЙ ЦВЕТ.
   Белый цвет имеет в программе особое значение. Поскольку программа не поддерживает «прозрачные» слои, то именно белому цвету чаще всего в программе приписывается свойство прозрачности.
   Вместо прозрачного слоя в программе используется буфер «д». Содержание этого буфера численное, и просто так видеть его мы не можем. Однако картинку в буфер можно записать, если кликнуть зелёную полосочку под кнопкой «^^^^». Содержимое буфера «д» можно считать, если кликнуть оранжевую полосочку рядом. При считывании учитывается прозрачность фона, окружающего изображение – считается прозрачным и не считывается фон, который окружал кнопку активного цвета в момент активации буфера «д».
   Таким образом, содержимое буфера «д» считывается и накладывается на картинку не целиком, а имея прозрачные прорехи, обусловленные «прозрачным» цветом в этих местах.

   Кстати, прозрачность частей дорожки при её наложении, с буфером «д» никак не связана – она определяется цветом фона в момент наложения дорожки. Если образец был запечатлён дорожкой на белом фоне, то наложить его без окружающего фона мы не сможем, если не установим белый цвет в качестве фонового.

   УСТАНАВЛИВАЕМ БУФЕР «д»
   Как активировать буфер «д», я писал много раз, но всё же повторю.
Для буфера нужно задать координаты его зоны и цвет его фона. Цвет фона выбираем белый. Для этого кликаем по кнопке активного цвета и получаем белый цвет, затем кликаем по полю, окружающему эту кнопку и переводим белый цвет в цвет фона.
   Обозначаем прямоугольник буфера на рисунке, кликая по его диагональным углам, и нажимаем кнопку «д» на панели в левой части окна. Кнопка «д» окрашивается в розовый цвет. Это означает, что буфер «д» активирован.
   Если хотим увидеть зону буфера воочию и убедиться в том, что она расположена правильно, то переходим в режим обычного ластика и кликаем кнопку «Fill». Эона буфера будет заполнена белым цветом.
   Заполнить зону буфера цветом его фона можно и по-другому – нужно сделать лайк «^^^^» жёлтым и нажать кнопку «Cls».

   УБИРАЕМ СЕРЫЕ СЛЕДЫ.
   Серые следы, остающиеся после «зелёного» ластика, очень помогают работе – именно на них мы ориентируемся, рисуя новый кадр анимации.
   Другой способ, это реперные точки. Они создаются на кадрах анимации заранее и отмечают траекторию движения персонажа. Например, при копировании головы и тела дорожкой, очень важно, чтобы дорожка начиналась в точно определённой точке, иначе персонаж начнёт трясти головой точно также, как он дёргает руками или переступает ногами. Реперная точка позволяет избежать такой ситуации.
   Реперную точку легко удалить «обычным» ластиком, но удалять им серые следы затруднительно. Поэтому, для удаления их можно применить общий способ замены цвета на картинке – кликнуть по диагонали область замены, кликнуть правой кнопкой тот цвет, который нужно заменить, то есть - кликнуть по серому следу, затем установить тот цвет, на который серый цвет будет заменён, то есть – кликнуть по белому фону, и нажать кнопку «Swap».
   Если вам такой способ кажется затруднительным, и вы пользуетесь буфером, то для удаления в зоне буфера серых следов достаточно нажать кнопку «sw д» - она расположена в верхней части окна (см. иллюстрацию).
   Таковы общие черты технического приёма перекладки с применением дорожек. Дорожки для перекладки создаются заранее и запоминаются в файлах Я1, Я2… Я7. Из них они и извлекаются по мере необходимости.
   Как двигается персонаж, сделанный таким способом, можно посмотреть тут - http://yadi.sk/i/E800xYBpzyTVEg


   ДЕЛАЕМ ПОКАДРОВУЮ ЗАПИСЬ.
   Покадровую запись с использованием одной единственной дорожки удобно делать, если персонаж помещается на дорожку целиком. Например, создадим на дорожке изображение рыбки и организуем буфер «д» с белым фоном так, как это описано выше. Чтобы автоматизировать дальнейшую работу, кликнем правой кнопкой мыши по кнопке «pale». Кнопка эта окрасится тёмным зелёным цветом.

   Кнопка «pale» в любом своём состоянии выполняет ту же работу, что и «зелёный» ластик, то есть, переводит всякий цвет в неяркий серый, но делает это сразу по всей зоне буфера, не разбираясь с деталями. Если такой результат нас устраивает, то можно пользоваться этой кнопкой.
   В «зелёном», автоматизированном режиме эту кнопку даже нажимать не надо – при записи картинки в буфер анимации «розовой» кнопкой записи, картинка вначале очищается от серых следов (стало быть, и кнопку «sw д»  лишний раз нажимать не надо), затем картинка будет записана как очередной кадр по месту розовой метки, затем изображение на картинке будет заменено новыми серыми следами и затем розовая метка продвинется на шаг вперёд, указывая на следующий кадр очередной записи.
   Ориентируясь на серый след, мы разворачиваем дорожку с изображением рыбки и продолжаем процесс записи кадров анимации. Обращаю ваше внимание на то, что разворачивание дорожки проводится в том же направлении, как мы её записывали – от головы рыбки к её хвосту, что очень удобно, поскольку на конечной стадии хвостом можно вильнуть в сторону.
   Движение рыбки получается очень живым, его можно посмотреть тут - http://yadi.sk/i/Ka_NiRV79z-T5g 

   Запись дорожки происходит в режиме «Copy» - кнопка с указанием ширины дорожки имеет жёлтый цвет, а разворачивание дорожки делается в режиме «Paste» - кнопка имеет зелёный цвет, такой, каким она показана на иллюстрации. Режимы эти переключаются кликами ПРАВОЙ кнопки мыши.

   Итак, в описанном режиме покадровой записи, кнопки в верхней части экрана должны быть в том состоянии, в котором они показаны на иллюстрации над рыбкой с пузыриками. Если мы хотим сделать изображение рыбки поуже и чуть обрезать ей плавники, то можно уменьшить размер дорожки – кликами по кнопкам сделать поперечный размер дорожки не 8, а 6 или 5, и тогда рыбка как бы прижмёт плавники к туловищу.

РОЗОВАЯ КНОПКА ЗАПИСИ ОЧЕРЕДНОГО КАДРА.
На иллюстрации снизу справа эта кнопка имеет не розовый, а малиновый цвет. Связано это с тем, что мы находимся там в режиме пошагового просмотра буфера анимации, проще говоря, мы зашли в буфер, нажав кнопку > и просматриваем первый кадр – в этот кадр уже была сделана запись и поэтому он маркируется красным цветом. На этот же кадр и будет сделана новая запись, если мы нажмём кнопку записи.
   Чтобы сделать кнопку записи розовой и записывать кадр по месту розового маркера, нам нужно выйти из буфера, нажав кнопку <. Тогда кнопка записи станет розовой, и мы попадём в описанный выше режим.

   МОРФИНГ НА ДВУХ КАДРАХ.
   Следующие два режима создания анимации, которые мы рассмотрим, связаны с морфингом. Морфингом называется технический приём, в котором анимация основана на заполнении ключевых кадров некими элементами, а промежуточные кадры, находящиеся между двумя ключевыми, заполняются программой автоматически. В программе MA_Paint такими элементами могут быть Линия, Точечная_линия, Поле_зачерченное_веером и Дорожка. Первые три элемента выбираются лайком над большой буквой «О» - эта буква означает режим обычного рисования. А «дорожка» выбирается установкой на кнопке активного цвета символа #, для чего нужно по этой кнопке кликнуть.
   Таким образом, переход от первых трёх элементов морфинга к дорожке и обратно, делается легко.

   Режим морфинга включается кликами по маленькой кнопочке выбора режима ПРАВОЙ кнопкой мыши. В режиме морфинга верхняя кнопка окрашивается в тёмный синий цвет, и ширина дорожки этими кнопками перестаёт регулироваться – клик ЛЕВОЙ кнопкой мыши по синей кнопке запустит процесс морфинга, а клик по маленькой кнопочке снизу сделает её розовой и создаст подрежим ПАРАЛЛЕЛЬНОГО морфинга на двух кадрах.
   Но пока мы будем говорить о режиме ПОСЛЕДОВАТЕЛЬНОГО морфинга.
   
   ПРОЦЕСС ПОСЛЕДОВАТЕЛЬНОГО МОРФИНГА.
   Последовательный морфинг осуществляется так.
   Заходим в буфер на один из ключевых кадров. Выбираем какой-нибудь цвет и проводим на рисунке линию. Если ошиблись, то ничего страшного – линию можно провести заново. О том, что наша линия воспринята, можно прочесть в сообщении сверху, в самом углу окна. «Записано столько-то точек», будет там написано.
   Переходим на второй ключевой кадр и проводим линию на нём.
   Сомневаетесь, как проводить, поскольку не видите линии первого кадра? Кликните правой кнопкой мыши по «cls», и на кадре появится её чёрный контур. Ориентируйтесь на него.
   Если мы хотим изобразить на кадрах не линию, а дорожку, то на кнопке активного цвета нужно установить символ #.
   
   Морфинг запускаем, кликнув кнопку синего цвета. И наблюдаем за процессом – квадратики, демонстрирующие буфер анимации, начинают перемигиваться. После окончания процесса можно запустить прокрутку полученного результата, не забудьте только поставить розовую метку в буфере на последний кадр – прокрутка осуществляется от первого кадра буфера и до этой метки включительно.

   А можно ли, не выходя из морфинга, изменить ширину дорожки? Ведь кнопка, указывавшая на эту ширину, стала синей, и цифры на ней не видно.
   Ширина дорожки при морфинге со знаком # определяется цифрой на третьей кнопке справа от кнопки «cls» - в обычном режиме эта кнопка управляет красной составляющей цвета. Убираем знак # - выходим из режима развёртывания дорожки, и функция этой кнопки возвращается на своё место.
Напомню ещё, что развёртывание дорожек никак не связано с буфером «д». На прозрачный цвет дорожки указывает не цвет фона буфера, а текущий цвет фона, обрамляющий кнопку активного цвета.

   ПРОЦЕСС ПАРАЛЛЕЛЬНОГО МОРФИНГА.
   При последовательном морфинге заводить буфер «д» необязательно, а вот при параллельном морфинге этот буфер необходим.
   Связано это с тем, что при параллельном морфинге организуется показ двух ключевых кадров одновременно – на первом поле показывается кадр, находящийся в зоне буфера и привязанный к пошаговой отметке, а на втором – кадр, отмеченный розовым квадратиком. Положение этих ключевых кадров, 1-го и 6-го, вы можете видеть в последнем примере на иллюстрации.

    Итак, активируем буфер «д», задавая зону анимации и цвет фона, который будет подкладываться в этой зоне под первый элемент морфинга при его первоначальной записи. Поскольку морфинг «серые следы» не использует, то цвет фона в буфере «д» не обязательно делать белым. Он может быть выбран цветным, и никаких неудобств это не составит. Таким способом вы сразу же можете сделать хромакей, то есть, изображение на ярком зелёном фоне.
   Если кнопка, организующая морфинг, у нас синяя, то переходим в режим параллельного морфинга. Для этого кликаем точку, в которой будет находиться левый верхний угол кадра, отмеченного розовым квадратиком, и ЛЕВОЙ кнопкой мыши нажимаем маленькую кнопочку под синей. Она окрасится в розовый цвет, а на рисунке появится розовая рамочка, показывающая, где будет располагаться «розовое» поле. Обычно это поле располагают правее поля буфера «д», но мы можем расположить его в любом месте.

   Далее работа ведётся очень просто – нам не надо перелистовать буфер анимации, переходя с начального ключевого кадра на конечный и обратно. Достаточно просто нарисовать линию в зоне буфера и линию на «розовом» поле, неважен даже порядок, в котором эти линии рисуются, компьютер сам разбирается с ними, относя к кадру «розового» поля те линии, которые на нём начинаются, а кончаться линии могут где угодно.
   После того, как линии на полях начерчены, нужно запустить морфинг, кликнув синюю кнопку. Линия, или другой элемент морфинга, окрашиваются в тот цвет, в который окрашена кнопка активного цвета.
   Если на этой кнопке стоит символ #, то на ключевых и на промежуточных кадрах на месте линии будет развёртываться дорожка. Проделав морфинг один раз, его можно тут же повторить, изменив цвет и уменьшив размер точки, или изменив размер дорожки и уменьшив размер точек на ней. Таким способом можно создавать элементы морфинга с окантовкой, или дорожки с прореженными краями.
   Интересен повтор морфинга с заменой последней проведённой линии. Таким способом можно изобразить «взрыв», состоящий из элементов, расходящихся из одной точки.
   Результат морфинга можно тут же просмотреть, нажав кнопку «P», и продолжить добавление других элементов на ключевые кадры. Что и говорить, такой режим работы с анимацией очень удобен. Вот клип, сделанный таким способом, без дорожки, но с другими элементами морфинга - http://yadi.sk/i/biwDZj6LZy4jKw 

   В режиме морфинга с показом двух кадров, немного по-другому работает кнопка «cls». Кликнув по левой или по правой её стороне, можно избирательно очистить одно из окон показываемых кадров. Это тоже удобно.
   Если в результате длительной работы графика скапливается на рисунке вне окон, и это мешает, то её можно удалить, нажав кнопку «Cls», и вновь проиграть анимацию. Рисунок будет как новенький.

   Дополнительные опции в морфинг приносят 1-я и 2-я кнопки, находящиеся правее кнопки «cls» – морфинг, проведённый с цифрами 0 на этих кнопках, не будет затрагивать начальный и конечный кадры, соответственно. Таким образом, ключевые кадры могут служить неразрушаемыми морфингом образцами.
   Жёлтый лайк «^^^^» создаст плавный переход в цвете, если элемент морфинга на крайних кадрах записывался с разными цветами.
   Программа имеет много возможностей, и мастерство аниматора состоит в умении ими пользоваться.
__________
12.01.2020