Раскадровка и фазовка. Создаём промежуточный кадр

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

  Все эти вещи требуют очень простого действия – перерисовки. А если мы хотим облегчить себе работу, то прежде всего должны использовать технические возможности, позволяющие упростить и облегчить этот достаточно нудный процесс.
  Я расскажу об облегчающих перерисовку технических приёмах, имеющихся в программе «Стереометрия и Анимация»

  Рассмотрим очень простую, и вместе с тем, очень распространённую задачу – нужно нарисовать и вставить промежуточный кадр между двух, уже имеющихся. Эта задача решается в несколько этапов, и эти этапы показаны на иллюстрации.

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

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

    КАК ЭТО ДЕЛАЕТСЯ. Панель АНИ

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

   Такова и панель АНИ. В нижней её части нарисованы 14 квадратиков, они показывают кадры анимации. Если квадратик серый, значит, кадр заполнен, то есть файл с рисунком этого кадра записан и имеется. Если квадратик белый, это значит, что файл с рисунком отсутствует.
   Один из кадров можно выделить, для этого используются кнопки передвижения < и >. Выделенный заполненный кадр отмечается красным цветом, а незаполненный - зелёным. Кнопки передвижения, нажатые правой кнопкой мыши, передвигают кадры на 10, а нажатые с Ctrl – на 50 кадров сразу. Цифры на розовой кнопке показывают число десятков, а цифра слева – номер кадра среди установленного десятка.
   Как видите, передвижение делается по десяткам, а число показываемых кадров 14. И это удобно, поскольку анимация обычно делается последовательно, один кадр за другим, то перехлёст в 4 кадра всегда позволяет контролировать предыдущие и последующие кадры.
   Как видите, интерфейс панели анимации хорошо продуман, я пользуюсь этой формой давно, и она себя хорошо зарекомендовала.

     ПОСЛЕДОВАТЕЛЬНОСТЬ ДЕЙСТВИЙ

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

   Изображение первого кадра у нас есть, нужно выделить из него контур.
   Переходим в режим рисования и кликом по кнопке «ластик» сначала левой кнопкой мыши, а потом – правой, устанавливаем сиреневый ластик особого типа (с кружком О на кнопке). Одной из опций этого особого ластика является способность красить в цвет фона всё то, что не имеет цвета, приблизительно равного выбранному.
   Фон мы хотим иметь белого цвета, поэтому устанавливаем белый цвет на кнопке «цвет фона». На кнопке активного цвета вместо чёрного, устанавливаем знак  - #, вводя указанный особый режим для ластика и режим «зацепления цвета» - выбирается тот цвет, на который опустился стилус. Стилус «цепляет» цвет.
   Но это не всё. Мы должны указать «степень приблизительности» - устанавливаем цифру 1 на кнопке Плотность, что означает «очень приблизительно». Практически, цифра указывает на то, сколько старших бит остаётся в компонентах цвета в тот момент, кода компьютер принимает решение о том, какой же это цвет?
   Итак, «почти чёрный» цвет контура компьютер принимает за «вполне чёрный» и по этой причине ластик контур не закрашивает. Он закрашивает всё остальное. Белым цветом. Так, как это показано на иллюстрации.
   Если бы на кнопке «цвет фона» был установлен красный цвет, то мы получили бы контур на красном фоне.

   Итак, кадр с чёрным контуром на белом фоне нами получен. Давайте, перекрасим контур в зелёный цвет. Сделать это можно разными путями. Самый простой – тот же ластик, в той же опции, только на кнопке Плотность выставим цифру 0.
   Работа по предыдущему алгоритму с этой цифрой бессмысленна, поэтому алгоритм работы ластика изменён – выбранный при опускании стилуса цвет остаётся нетронутым, а всё остальное красится в цвет фона. Это как раз то, что нам надо – взяв за цвет фона зелёный, мы выкрасим в этот цвет контур. Опция удобная, если бы нам не был бы нужен контур второго кадра, то полученным результатом можно было бы ограничиться.

   Но можно пойти другим путём. Воспользуемся быстрой аппликацией. Кнопка «А» для работы с ней находится на левой панели.
   Кликаем по кнопке, она окрашивается в жёлто-коричневый цвет, убираем с кнопки активного цвета знак решётки и закрашиваем контур, тонируя его активным цветом. Делаем это, не отрывая стилуса от поверхности планшета.
   Оторвав стилус, обрываем процесс создания образа аппликации. Теперь движениями стилуса полученную аппликацию можно перемещать. Контур будет виден, а окружавший его в момент создания образа белый фон, оказывается прозрачен.
   Мы, однако, передвигать аппликацию не будем, а только кликнем по рисунку с тем, чтобы оставить контур на прежнем месте. А чтобы он был не чёрным, а зелёным, тонируем аппликацию – сделаем зелёной кнопку активного цвета, установим заглавное «С» на кнопке буквенных опций, цифру 9 на кнопке Плотность, и только тогда кликнем по рисунку.
   На рисунке появится зелёный контур щенка на белом фоне.
   Нажмем кнопку  1=>2, чтобы запомнить картинку на поле_2.

   Проделаем всё то же самое со вторым кадром анимации, только окрасим контур собачки в розовый цвет. Считаем с поля_2 зелёный контур и наложим поверх него аппликацию с розовым контуром – вот заготовка для рисования у нас и готова. Кликнув по маленькому кусочку коричневого поля на левой панели, увеличим полученную заготовку в два раза. Тем самым мы создадим для рисования более комфортные условия.

     РИСОВАНИЕ ПРОМЕЖУТОЧНОГО КАДРА

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

   Образец для рисования – вы же помните, что первый кадр находится на поле_6? Кликнем по рисунку правее увеличенных контуров, а затем, правой кнопкой мыши по полю_6 (зелёный кусочек этого поля виднеется на левой панели), нажимая при этом клавишу Shift. И образец появится на рисунке.

   Всё очень просто, надо только изучить программу и знать назначение и особенности работы имеющихся на панелях полей и клавиш.
   Теперь дошла очередь до клавиши «К». Эта клавиша, находящаяся на левой панели обособлена – сделавшись активной, она блокирует все действия с левой кнопкой мыши на рисунке, переключая их сначала на создание, а затем, на перемещение кривой линии.
   Мы кликаем по кнопке «К», кнопка становится тёмно-красной, и теперь, опустив стилус на планшет и стараясь не отрывать его, можно рисовать линию контура для нового, промежуточного кадра. Линия рисуется точками, если на кнопке буквенных опций стоит прописное «е», и линией, если «Е» заглавное. Интервал между точками определяется цифрой на кнопке Плотность. Тут можно не стесняться – выставляйте 1, линия с редкими точками тоже используется, но для других целей – ею можно задать траекторию движения персонажа или окна при реконструкции анимации http://proza.ru/2023/09/10/21

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

   Кривая не закреплена на рисунке, если она нам не нравится, то удаляем её кнопкой «cls» и повторяем процесс снова.
   Но вот, контур нарисован, теперь приступим к раскрашиванию. Его лучше всего делать специальной кистью, она называется «кисть АНИ» и является одной из опций кисти текстурного рисования (кисть №7, вспомогательная кисть, опции «а,А» кнопки буквенных опций).
 
   Раскраска делается в опции заглавной «В». Кисть имеет своей основой пиксельный круг http://proza.ru/2023/07/20/33 - пиксели заполняются цветом по расширяющейся спирали, от центра к периферии. В опции «В» заполнение обрывается, как только оно доходит до пикселя, имеющего цвет фона. Достаточно выставить в качестве цвета фона чёрный цвет, и кисть не только не будет окрашивать контур, но контур, даже в том случае, если он окажется очень тонким, будет служить препятствием для распространения цвета.
   Ситуация похода на ту, с которой мы имеем дело при заливке, но раскраска удобнее и подходит для целей анимации гораздо более – во-первых, контур при раскраске не обязан быть замкнутым, а во вторых, раскраска не обязана быть однотонной, и даже полупрозрачной кистью её можно делать.
   Пример ограниченной контуром раскраски показан на иллюстрации.

   Когда персонаж раскрашен изнутри, можно уменьшить рисунок, вернув ему первоначальный вид, и, нажимая клавишу Alt, кликнуть по полю_6 правой кнопкой мыши. Этим действием рисунок будет обрезан до размера кадра.
   Используя ту же кисть, полностью сделаем фон вокруг персонажа зелёным, и тогда промежуточный кадр будет полностью готов.
   Теперь вставим его в анимацию.

   Выделим второй кадр и нажмём клавиши Ctrl/i. Кадры анимации раздвинутся, освободив пустое место для второго кадра. Выделим это место и, кликнув розовую кнопку на панели АНИ, вставим сделанный кадр.

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

   В этой статье я тоже постарался описать процесс создания кадров как можно более подробно, но тем не менее и к этому можно многое добавить, программа многофункциональна, можно придумать и другие способы содействия покадровой анимации. Например, клавиша «П» (просмотр) на верхней панели позволяет просмотреть рисунок на поле_2 и через секунду автоматически возвратиться к рисунку на поле_1. Если на поле_2 находится предыдущий кадр, то эта функция бывает удобна.
   В интернете имеется много картинок с изображением циклов движения разных персонажей, и если вы скачаете их, то с помощью программы «Стереометрия и Анимация», вы сможете подготовить их к анимации и самостоятельно создать небольшой анимационный фильм.

__________
16.09.2023