Пиксель Арт (часть 5)

**™Porshe** · 30.04.2008, 12:03

Тренинг по пиксельарту.
Групповая анимация.

Пока у меня не было интернета, я малость подумал.
И решил сделать еще один тренинг по пиксельарту.
Я парой сам себе удивляюсь как легко мне дается пиксельарт.
Потому я попробовал взаимодействовать в анимации одновременно два объекта...
Это Чара и Машину.
Тренинг довольно сложный, хоть я и давно рисовал машины для XP...
Но всеравно сложный...

Для удобства, пункты написанные здесь, соответствуют цифрам, в примере...

Et-to...
Для начала научимся рисовать саму машину.
1) Основа машины, так сказать её кости.
2) Далее был долгий и мучительный процесс с высчитыванием в геометрических фигурах.
Точнее я просто придал машине некоторый объём.
3) Тут уже довольно таки тяжеловато, это (придать цвет плевое дело, проблема в салоне.) Долго кипятя мозги как бы с импровизировать что бы и было видно салон машины, но и не было сильных там деталей.
4) Тут фотошлеп просто не заменим, иначе вы не сможете сделать полу прозрачное окно с градиентом.

Моя любимая часть работы, это реализовывать уже существующие машины.
Потом глаз радуется когда видишь наглядную схожесть марки машины.
После тюнинга если кто не знает, у нас марка машины "De'Lorean"...
ps: play list windows media: Bummer_Tema_Dorogi.mp3 ^__^

Так советую вам разобрать машину по частям.
Это нам понадобиться для того что бы создать маленькую анимацию.
(Заметьте я стараюсь во все пихнуть анимацию... может из-за того что я люблю более реалистичные игры ?)

Один из сложный частей тренинга.
Мы будем рисовать открывающуюся дверь машины.
(По скольку у Дэлориана двери открываются вверх, то мы не будем уклоняться от реальности... и так же анимируем их вверх.)
В верхней полосе видно последовательность открывающейся двери.
Ниже стекла для этих дверей.
(Заметьте, что стекла и двери отдельно... не поверите, но это так и надо ! не совмещайте их пока что.)

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

Урезанная часть машины с полной анимацией открывающейся двери, и водителем в ней.
Покрайней мере советую вам работать не со всей машиной, а только с той частью которая будет анимированой.
(Можно сказать этот рисунок как пример...)

Вот мы и пришли к полной версии данного добра.
Анимация полного взаимодействия двух объектов по ту сторону экрана.
В смысле я хотел сказать одновременная анимация ^__^
Ну короче вы поняли ))

Одна довольно важная заметка...
Не забудьте нарисовать такую же анимацию и для машины без водителя.
Кстати это куда проще нежели с водителем.
Однако салон все же хромает... как нить придумаю нечто что будет похоже на салон машины.

И последняя часть которую я оставил на потом, но тоже не мало важную.
Она относиться к тем кто хочет сделать полу прозрачное окно с градиентом в PhotoShop.
Для этого то нам и нужны были двери и стекла для дверей отдельно ^____^
Извиняюсь что так перескакиваю с части на часть.
Но мне показалось что о Фотошлепе стоит поговорить более менее отдельно от пиксельарта.

Копируем дверь, и ставим на машину.
Копируем стекло той двери в которое хотим его вставить и открываем PS (PhotoShop).
У меня пиратская версия, постоянно какие то ошибки кидает, потому у меня мошенально наживается 4 раза кнопка Enter )))
Теперь волшебство передачи данных (Ctrl+V) ^___^
И вставленное стекло, умещаем в двери.
Обычно данную операцию я провожу на белом фоне, потому ни куда не денусь, но белые квадраты оставшиеся от копированного стекла нужно убирать.
Делается это просто:
Свободное лассо + обводка + "Очистить" (Очищать дважды не придеться если с двух сторон белый фон... просто удерживая шифт обводите вторую область белого поля...)
Все... окно в двери... но оно пилять не прозрачное !!!
Что же делать ?
Ну в таких случаях можно обратиться к функции не "прозрачность слоя"...
Заметься (по умолчанию панель внизу с право...) в панели слоев, прибавился еще один слой, когда мы вставили стекло через Ctrl+V...
Чуть выше и правее есть шкала, которую можно уменьшить на параметр 50... ну или 70 если хотите более тонированое стекло )))
Далее объединяем слои, и сохраняем рисунок.
После не забудьте очистить осветления из-за "Обрезания" кхм... белого фона.

Все... полу прозрачное стекло на не прозрачной двери полностью готово.
Теперь повторяйте данную процедуру столько раз, сколько вы нарисовали анимацию >___<
Я прям от души зарядил анимации, аж руки устали стекло тонировать...
Кстати, про градиент то на стекле я забыл написать ^_____^
Ну думаю не важно... сами надеюсь с этим разберетесь.
"Настройки градиента" там палитры типа мутно голубой с переливанием на мутно зеленый.
(Я про свой пример на Дэлорине)...

Еще момент... по скольку я не анимировал колёса машины, ощущение в движении всеравно должно присудствовать... и я решил пойти обходным путем... это в утреннее время суток анимировать колеса, а в ночное время суток добавить отблеск на кузове машины от света у фонарей.
Та муть которая показана на примере, делается не сложно...
Всего на всего PhotoShop... комбинирование слоев и не большой градиент.
Как это делать можно догадаться самостоятельно...
Я рассказывать это пока что не буду.
Так как это либо еще примеров 10 делать, либо рассказывать по шагам...
Процесс долгий, а мне еще анимацию рисовать...
Расскажу об этом эффекте позже.

Собственно, не садитесь в не трезвом состоянии за руль авто !

Писал статью, и рисовал: ™Porshe
© Все права нарушены, и преследуется в не закона...

**Валера** · 30.04.2008, 12:21

Да уж...

Взаимодействие нескольких объектов в анимации - это уже высший пилотаж. Впечатляет.
Мне кажется, чтобы кто-то серьезно занялся таким непростым делом, необходимо одно простое условие: в игре такая анимация должна использоваться достаточно часто. А под это нужен геймплей. Вот тогда будет достаточный стимул. Например: небольшая, напичканная подобными анимациями игра.