Виртуальные помощники для web

Запомнив три основных правила моделирования помощника, вы сможете избежать ошибок и разочарований. Первое правило — не делайте небольших надписей, а также маленьких проекционных карт и мелких деталей на теле помощника. Такой подход занимает много времени, и в лучшем случае подобные детали просто незаметны или отображаются в виде неясных пятен, а в худшем — портят общий вид модели. Вспомним хотя бы спрайты военной техники из игры «Противостояние III». Техника в игре выглядит просто отлично и кажется очень детализированной, а просмотрев видеоролики, испытываешь легкое разочарование от слишком угловатых форм и малой детализации. А ведь модели использовались явно одни и те же. В нашем случае ситуация точно такая же. Второе правило — в процессе моделирования лучше сначала сделать общий каркас модели, а уж затем цеплять на этот каркас элементы мимики и другие атрибуты личности помощника. Иначе можно столкнуться с проблемой подгонки различных частей между собой и буквально натягивать один элемент на другой. Реальность персонажа в данном случае может намного уменьшиться. Наконец, последнее и самое главное правило. Мимика помощника должна быть максимально реалистична и многогранна. Тогда при анимировании вы не столкнетесь с проблемой воссоздания задуманной гримасы помощника. Если вы не делаете помощника для сайта похоронных услуг, то небольшая доля юмора никогда никому не мешала. Помощники с юморком всегда смотрятся гораздо приятнее и реалистичнее.

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

Теперь перейдем к самой сложной части создания помощника, а именно к анимации состояний. При выборе количества состояний не руководствуйтесь принципом «для каждой страницы свое состояние». Это долго, дорого, а главное, в конце концов начинает надоедать посетителям. Лучше воспользуйтесь принципом «один раздел — одно состояние», и не забудьте про такие общедоступные состояния, как «помощь», «информация», «добро пожаловать» и т.д. Обычно для сайта среднего размера достаточно десяти состояний помощника. Стандартная длина роликов равняется трем-четырем секундам при частоте 6 кадров в секунду. Такой длины роликов вполне хватает для несложных движений. Многие, недоумевая по поводу того, какие действия может сделать персонаж за такое время, начинают снимать настоящие короткометражные фильмы. А когда дело доходит до правки и перекодировки анимации, то получаются gif размером по 40-50 килобайт. Если вы получили такой же результат, значит, вы еще не до конца уяснили себе основной принцип подобной анимации. Поэтому тщательно пересмотрите сделанную вами анимацию и постарайтесь вырезать все ненужные движения и действия. А лучше заново отснимите это состояние, только вначале мысленно поставьте себя на место помощника и задайтесь вопросом «Какие бы я сделал на его месте движения для выражения нужных ассоциаций?». Также старайтесь сделать так, чтобы как можно больше второстепенных движений (вроде махов руками при ходьбе и моргания) выполнялось параллельно основному действию. Во-первых, это добавит реализма помощнику. Во-вторых, такой подход позволит уменьшить длину ролика, т.к. все действия будут проходить одновременно, а не одно за другим.

Учитывая малую частоту кадров, появляется вполне резонный вопрос о проблеме создания резких и быстрых движений в анимации. К таким действиям относится моргание, метание чего-нибудь и т.п. Действительно, для подобных действий в нормальной анимации требуется частота кадров не менее 30 в секунду. Для нас такая частота кадров неприемлема из-за ограниченности размеров ролика. Благодаря Ulead Gif Animator подобную проблему можно с успехом обойти. Дело в том, что в этом пакете существует возможность управления скоростью прорисовки для каждого кадра. Поэтому можно поставить для одного кадра скорость прорисовки 50 раз в секунду, а для другого 1 раз в секунду. Это чрезвычайно помогает в том случае, когда требуется неравномерная скорость прорисовки. К примеру, чтобы сделать персонажу эффект моргания, понадобится всего два кадра. Один кадр — глаза открыты, другой — глаза закрыты. Установив частоту прорисовки для первого кадра в меню Delay равной 100, а для второго 2, вы получите практически готовый gif. При анимации в 3D на такое могло уйти до 5 кадров. Применяя подобный метод, вы сможете, как минимум, на 20-30% уменьшить длину ролика.

Интересными эффектами для помощника будут возможности прозрачного заднего фона, toon render и замкнутых gif. Замкнутые gif (их еще называют «вечными») физически имеют начало и конец, но если смотреть на них, то они кажутся бесконечными. Подобный эффект достигается путем такого проектирования движений помощника, когда, сделав некоторые движения, помощник возвращается в то же положение, в котором он был в начале ролика. В результате после перекодировки в gif помощник неустанно совершает бесконечные движения. У таких gif один недостаток: они занимают на 30-50% больший объем, чем незамкнутые.

Вопреки устоявшемуся мнению, прозрачность в анимации сделать очень легко. Эффект прозрачности достигается путем замены одного выбранного цвета на прорисовку того, что на данный момент закрыто gif-анимацией на вашей странице. Для начала выберите в уже готовой сцене какой-нибудь однотонный цвет фона. Лучше, если этими цветами будет либо черный, либо белый. Дело в том, что при выборе убираемого цвета в Gif Animator он выдает сразу весь набор палитры, которая использовалась в ролике. Поэтому иногда довольно сложно выбрать из кучи оттенков тот, который нужен. А черный и белый цвета видны сразу. Также не забудьте, что цвет, который использовался для фона, уже нельзя будет применять в этой сцене, иначе на помощнике могут появиться прозрачные области.

Эффект toon render – это рендеринг только очертаний объектов при помощи линий.

Чтобы сделать такой эффект в своей анимации, зайдите в меню рендеринга Animation Master и поставьте флажки в подменю Toon render, override lines, lines only.

В появившемся подменю Toon lines можно управлять толщиной, расцветкой и качеством прорисовки линий.

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

Зная немного Dynamic Html, можно сделать так, чтобы помощник в буквальном смысле слова ходил по страничкам вашего сайта. Для этого сделайте замкнутую gif с шагающим помощником и используйте возможности dhtml.

Как видите, уважаемый читатель, сделать такого помощника довольно легко. К сожалению, сайтов с их использованием почти нет. Мода на них пока только начинается. Вживую можно посмотреть большое количество анимированных состояний на нашем сайте. Сходите еще на BeeOnLine, там есть пчелка-помощник — рисованная, но как пример использования подобной технологии вполне подходит. Успехов вам в 3D!

Обсуждение статьи - в форуме "Обсудим "СофтТерру"