Я работал, делая инструментарий и движки для художников, создающих игры и визуальные эффекты более десяти лет, и я всегда недоумевал, что люди делают различия между «программным артом» и «настоящим игровым артом». Я также заметил, что люди, которые дают вам свободно пропустить плохую графику, это в основном другие программисты. Не зависимо от того, как забавна ваша игра или как удивительна технически демоверсия, ‘непрограммисты’, которым вы показываете такой нарисованный персонаж, начинают думать: «Это у него реактивный ранец или может что-то другое?». Зачастую, вы можете найти способ создать хорошую графику без необходимости рисовать ее с чистого листа. Но иногда вам нужно создать графику «на лету». Ограничения в бюджете или правила в игровом соревновании, или просто сжатые сроки для прототипа, могут потребовать от вас взять линейку и кисть в руки.
Я не умею рисовать, правда… Хочу сказать, посмотрите на это:
Если это — то, на что похожа ваша графика, тогда эта статья для вас. Я думаю, что поделился бы рядом подсказок, как сделать графику лучше. Эти подсказки будут полезны всем, вне зависимости от способностей и опыта в рисовании.
В то время как подсказки типа «занимайтесь рисованием набросков каждый день» или «посетите художественный музей» могут быть полезны для начинающего художника, эта статья предназначена не для художника, она о том, как заставить людей думать, что вы — кодер, программист, любящий математику, обладаете некоторыми художественными способностями.
Кроме того, ни одна (почти) из этих подсказок не требует «практики», хотя практика является полезной и даже существенной для настоящего художника. Всегда кажется, что крайний срок сдачи проекта приходит с рассветом, а вам всего-то нужно несколько этих проклятых спрайтов.
Кое-что из этого рассказа пригодится и для пользователей Фотошопа, потому что, насколько я знаю, такие же понятия применимы к любой программе для рисования, и существуют схожие операции для всего, что я упоминаю здесь в Gimp’е, и возможно в любой другой программе, используемой вами.
Некоторое из описанного также адресовано участникам соревнования LudumDare и участникам других подобных соревнований, где цель — создать игру «на лету» за 48 часов. Мои игры имеют склонность достигать хорошего результата в графической категории (увы, убийца геймплея продолжает ускользать от меня), учитывая даже то, что я не считаю себя особенно хорошим игровым художником. Множество этих примеров исходят из моих LD записей, а большая часть этого опыта — это вещи, которые я изучил, участвуя в этих соревнованиях и будучи вынужденным создавать арт в предельные сжатые сроки. Более того, они должны быть бесценны для любого, кто пытается создать качественную графику (или что-то приближенное к ней) при коротком расписании времени или ограниченном бюджете.
Наиболее частая ошибка, которую я вижу и которую легче всего избежать. Палитра, использующаяся по умолчанию для большинства программ компьютерного рисования, возвращает во времена DOS’а (можете ли вы обнаружить связь между цветами в этой палитре и четырехбайтовыми двоичными значениями от 00 до 15? Конечно — да. Если бы вы не смогли это увидеть, вы бы были настоящим художником.).
Я не подразумеваю под палитрой палитру из 16-ти или 256-ти цветов времен VGA. Просто имею в виду скоординированную систему для вашей игры. Если вы начнете с хорошо выбранной палитры, то ваши «каракули» будут казаться эстетически приятными и даже предварительно имеющими «графический дизайн».
Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!
Хорошо, немного теории цвета проходит длинным путем и если вы потратите пятнадцать минут, чтобы отыскать в интернете, что такое «теория цвета», то вы окажетесь перед определением, что такое игра. Но если у вас нет на это времени, вот несколько советов, которые работают удивительным образом:
Для большой игры вы можете использовать другую палитру на уровне или области игрового мира. В случае, если ваши элементы интерфейса и главный персонаж изображены нейтральными цветами, или если эти палитры имеют общий главный цвет, вы можете в равной степени применять их между уровнями или областями.
В этом примере используется «монохроматическая» палитра, где все цвета различного оттенка очень схожего тона, другие цветовые схемы более разнообразны, но важно то, что цвета смотрятся вместе хорошо.
Ресурсы:
- MultiColr от idee labs
Этот потрясающий сайт хорош тем, что благодаря ему можно сделать палитру и получить связку фотографий на ее основе, просто выбрав несколько желаемых цветов и изображение, из которого затем можно использовать цвета.
Я не умею рисовать!..
Возможно, Вы просто слишком крутой человек, чтобы уметь рисовать. Возможно это все преднамеренно. Так и есть. Вместо того, чтобы делать хороший арт, выберите тему, которая требует плохой арт. Это сработало для «SketchFighter» и «Crayon Physics» , нарисованных на бумаге.
Используйте то, что вам доступно. Получили какую-нибудь ерунду у себя на столе? Вы, возможно, сделали одну из самых популярных игр всех времен «Desktop Tower Defense» .
Люди начинают понимать смысл этого трюка, но у него есть немного лет для существования. Будьте криативными… возможно ваши персонажи — печенья, и вы буквально можете испечь их. Или какой-нибудь зомби-бекон атакует вашу кухню. Или даже волосатая грудь, которой нужно, чтобы ее побрили .
Подсказка Третья: простые формы и силуэты
Круг, Квадрат, Треугольник, Ромб, Трапеция, Параллелограм, и т.д. Вы знаете как точно высчитать их площадь, но вы знаете, что нарисовать их получается плохо? Сделайте наброски нескольких форм от руки, затем добавьте глаза (для персонажа) или колеса (для техники) или что-нибудь еще. Они, возможно, получатся смешными и нелепыми, и совсем неточные.
В зависимости от того, как много кофе вы уже выпили, они могут быть совершенно разной формы. Все в порядке! Это хорошо, фактически, поскольку изъяны и разнообразия создают «индивидуальность» и делают их живыми. Не используйте инструменты для создания форм в своей программе для рисования, это уничтожитель «спрайтовых душ». Делая их очертания отчётливыми, вы облегчаете игроку способность визуально различать их.
Одно замечание: не пытайтесь разбираться с этим во время соревнования по написанию игры. Протестируйте сначала все перед его проведением, чтобы точно знать как что делать. Вы потратите много времени, но во время соревнования это может занять всего 15-20 минут и будет иметь большое значение.
И еще, не спешите делать «запекание» пока не закончите с текстурами для моделей. Вы не сможете убрать «запекание» или сделать его дважды.
Подсказка одиннадцатая: приобретите планшет
Даже если у вас нет стремлений стать игровым художником, но если рисуете какой-нибудь арт на компьютере, то вам нужно приобрести планшет. Необязательно большой или дорогой, можно купить планшет фирмы Wacom. Потому что рисование мышью схоже с рисованием кирпичом на бумаге.
Многие люди, которых я знаю, впервые купившие планшет, не спешили его использовать. Вот некоторые советы, которые помогут максимально эффективно использовать планшет.
- В панели управления планшета увеличьте показатель чувствительности пера на более твёрдый. Это обеспечит наилучший контроль при рисовании.
- Рисование с использованием чистого листа бумаги полностью изменить ощущение. Различные типы бумаги: офисная, страницы журналов, плотная бумага и тд. — помогут полностью ощутить рисование на планшете. Попробуйте.
- Практикуйтесь. Знаю, что до этого я говорил, что ни один из моих советов не требует практики — я лгал. Попробуйте эти упражнения:
- Сделайте в фотошопе десять квадратов в ряд и заполните их черным цветом в радиусе прозрачности от нуля до ста. Под ними сделайте десять пустых квадратов. Попробуйте оттенить нижние квадраты, чтобы выровнять основные квадраты. Попробуйте с другими кистями и попрактикуйтесь с чувствительностью нажатия пера.
- Попробуйте написать что-нибудь, алфавит или просто текст. Начните с больших размеров букв, а потом продолжайте их уменьшать. Это позволит вашей руке привыкнуть к плашнету, также как и глазам к экрану во время рисования.
В сегодняшнее время интерфейсов на основе сенсорных дисплеев, иметь планшет становится выгодно, чтобы понять как работают игры, основанные на этой технологии. Хотя такой подход ничем не отличается в сравнении технологии использования мыши.
Архитекторы программного обеспечения разговаривают на языке UML . Это такая своеобразная программисткая латынь . Использовать UML напрямую для программирования неудобно, зато многие его понимают и используют для выписывания рецептов описания архитектуры системы. Нарисовал диаграмму классов и стало понятней что к чему. Её поймет и дельфист и жаваист, и сишник и питоньшик, и сишарпер и рубист (вобщем все кто изучал ООП).
Центральное место в UML занимают диаграммы классов . Это букварь. В интернете можно найти огромное количество информации о диаграммах классов (структура, обозначение классов, интерфейсов, атрибутов, отношений и т.д.), но при этом относительно мало информации о том, как осуществлять сам процесс проектирование . В этой связи хотел обратить внимание читателя на два особых момента.
От общего к частному...
Самое главное при создании диаграммы классов использовать принцип "от общего к частному". На самом деле это один из фундаментальных принципов, который великие художники прошлого открыли уже много лет назад.
Представим, что Вы не умеете хорошо рисовать, но вам очень хочется нарисовать например чью-то голову. Вы берете карандаш, кладете лист бумаги и начинаете рисовать его левый глаз. Потратив на этот несчастный левый глаз больше часа, Вы беретесь за нос, затем за правый глаз, ухо и только потом пытаетесь дорисовать все остальное. Вполне вероятно, что итог работы Вас опечалит (не советую показывать жертве результат работы) - глаз, нос, рот и уши будут не на своем месте. Конечно, бывают среди нас гении, у которых получится шедевр, но все-таки, те, кто занимается этим профессионально проповедуют другой подход - "От общего к частному, от частного к общему". Вначале делается эскиз, "топорный" рисунок. Затем дальнейшая проработка. Например так:
Точно так же я советую поступать в работе с диаграммами классов в UML. Мы создаем эскиз. Выделяем основные классы, определяем отношения между ними, затем прорабатываем мультипликаторы, поля, методы и их область видимости, сигнатуру вызовов, вспомогательные классы и так далее...
Но начинать нужно с формирования набора базовых классов. Для этого нужно просто нарисовать прямоугольники и написать в них имена основных классов. Затем постепенно прорабатывать все остальное.
Например так:
Кстати, если вы владеете техникой кунг-фу "UML colors" от мастера Кода, то можно начать использовать её уже на первом этапе.
Теперь давайте приступим к исследованию другого фундаментального вопроса в архитектуре ПО.
Быть или иметь?
Существуют два фундаментальных отношения "быть" и "иметь". Самое грубое и примитивное объяснение: "быть" - наследование, "иметь" - агрегация (см. ). Казалось бы, какая разница? В некоторых языках это вообще одно и тоже слово.
Например: "У меня есть телефон" (иметь, обладать) и "Телефон есть орудие общения" (быть, являться).
На самом деле разница огромная. Представим что у нас есть класс User, который определяет некоторого пользователя системы. Пользователи бывают разные: анонимный пользователь или гость, редактор статей и администратор. Как определить эти сущности?
Можно сделать так:
А можно сделать так:
В первом случае у нас отношение "быть, являться". Любой из объектов класса Admin, Editor, Guest также является пользователем (is a User ).
Во втором случае отношение "иметь". Объект класса User, имеет некоторое свойство-атрибут (has a ), которое определяет статус этого пользователя в системе. Проецируя на реальный мир, мы должны задуматься "кто такой наш пользователь?". Что значит для него "быть админом "? Если это нечто неотделимое от него самого, его внутренней сути, сущностного Я, его Identity , если наш пользователь рожден админом и уходит в другой мир админом, то тогда "Admin is a User" вполне оправдано.
Но если "админ" это всего лишь ярлык, некая роль, должность или социальный статус, обладание которым облегчает или усложняет жизнь нашему пользователю и при этом мы отлично знаем, что "высшие силы" всегда могут в любой момент лишить его админских сверхспособностей, то тогда, возможно, второй вариант будет более правильным.
В первом случае админ-пользователь гордо кричит "Я есть админ!" и этого у него не отнять, то во втором он скромно говорит: "У меня есть статус админа".
Таким образом отвечая на вопрос "быть или иметь?", мы задаем базовые отношения в нашей системы и нужно хорошо подумать, прежде чем рисовать стрелочки между классами.
Нужно ли программисту уметь рисовать? Я подумал это довольно-таки интересная тема, под катом рассуждения о том нужно ли это вообще + урок рисования кота для полных новичков от программиста.
Итак, прежде чем приступить к созданию мультипликационного персонажа стоит обговорить практические аспекты предстоящего проекта.
- У вас в голове уже есть набросок (неважно, вы его нашли или придумали, сами или не сами, лишь бы был).
- У вас есть какой-никакой софт для рисования. Рисовать мы будем не на бумаге, так что, должен быть хотябы эмулятор кисточки. Я лично использовал адобовский софт, потому как привык к нему.
- Время, желание, терпение.
Тут поподробнее. Зачем это нужно? Вы часто используете картинки? Я да. Очень часто. И каждый раз, вставляя в дизайн сайта или программу очередную картинку/клипарт/сэмпл мы используем чужую работу. Чем это плохо? Чем хорошо?
Коротко о плюсах:
- картинку можно быстро найти - экономия времени.
- ежедневно потребители (для кого мы это и делаем) просматривают гигабайты различного рода изображений, оценят ли они долгую работу должным образом?
- каждый должен заниматся своим делом, для повышения быстродействия команды/предприятия/общества/государства.
- Не изображениями едины. Хороший сайт или программа не основывается на дизайне. Это нечто большее, чем набор изображений, поэтому им мы уделяем второстепенную роль.
Собственно плюсы надеюсь не все, но для меня они заканчиваются этими пунктами.
Что из минусов?
- Изображение - творение другого человека. Абсолютно другого. Его самовыражение. Использование в ваших работах, вкрапления других, делает этот проект уже более общим и с каждым новым вкраплением, лишает его индивидуализма. В тоже время, игнорировать прогресс и делать все с ноля - глупо.
- Авторские права. Проклятые авторские права. Они то не всегда играют на нас. Сейчас все больше и больше качественных изображений оценены в денежном эквиваленте.
- Картинку можно найти быстро. Но нужную картинку быстро найти гораздо сложнее. Гораздо сложнее. Можно найти приемлемую или хорошую замену на несколько дней, но найти идеально подходящее изображение можно только создав его.
Должен к сожалению заметить, что вкус есть далеко не у всех, в то время как деньги есть почти у всех и поэтому в 90% случаев мы покупаем чужие работы, экономя свое время, и делая очередной шаблонный проект.
Сам я программист, поэтому мне не хочется посвящать рисованию времени больше, чем программированию. Моей целью было научится рисовать мелкие и средние детали достаточно быстро и достаточно качественно. И если скорость это вопрос навыка, то качество определяется прежде всего софтом. Не хочу превращать пост в книгу, поэтому напишу только о том, что я использовал.
Это Illustrator CS4 и Flash CS4, которые доступны в триал-версии в разделе загрузок.
Иллюстратор я всегда использую для рисования скетчей. Не знаю хорошо это или нет, но уже вошло в привычку.В иллюстраторе очень прикольные кисти. Как известно векторный графический редактор хранит все что мы наваяли в виде формул, в следствии чего все дрожания рук, все неровности и прочее убираются еще на этапе создания. Масштабирование так же происходит без потери качества (просто в формулах увеличивают один из коэффициентов), что дает не думать о том, влезет ли будущее изображение на сайт.
Последнее перед тем как приступить
Я не профессиональный художник и поэтому не пользуюсь ни планшетом, ни сенсорным экраном, ничем кроме 8-ми долларовой мышки, самой обычной клавиатуры и 17ти дюймовым экраном, отрегулированным на максимальную яркость (так более адекватно можно оценить цвета).Итак приступим к наброску.
Запускаем иллюстратор, создаем любого размера лист (можно вылазить за границы так что пофиг). Рисовать мы будем кота (то что объединит программистов и художников). И причем делаем так: вы рисуете своего кота, я своего, если бы он у меня был. То есть вы не копируете мой стиль. Придумайте свой. Не повторяйте, а создавайте.Для того чтобы создать набросок выбираем Paintbrush Tool и в настройках сверху выбираем 1pt ,3 pt.Round.
Теперь попробуем как это работает. Поводите по листу и увидите, что все маленькие неровности, на этапе рисования сглаживаются и превращаются в линии постоянной толщины.
Вот что у меня вышло при первом наброске:
Это 5-6 секунд рисования.
Учитесь прощать себе свои ошибки. Если это ваш первый рисунок, то ничего страшного если он не выйдет. Вы всегда сможете исправить его в будущем. Мои наброски были попросту ужасными:
Это не должно останавливать вас. Моими ошибками в самом начале было то, что я уделял слишком много внимание наброскам и в дальнейшем их было очень сложно исправлять. Набросок должен быть гибким для дальнейшего использования. Экспериментируйте и все выйдет так как нужно.
Когда финальный скетч уже готов, выделите все что вы набросали, и в новом документе адоб флеша вставьте.
В выпавшем меню выберите:
Так как это продукты одной кампании то согласовываются они хорошо. Выберем Modify-Break apart (ctrl+B)
и сделаем это второй раз. Наш набросок из формульного уравнения превратился в набор пискелей (фактически).
Во флеше я обычно разукрашиваю сделанные наброски. А раз речь идет о цвете и вы (возможно) плохо ориентируетесь в цветах то в помощь приходит kuler.adobe.com
Я выбрал горячие цвета для кота. И раскрашенным он выглядил примерно так:
Стоит отметить пару практических трюков:
Во флеше инструмент закраски имеет очень полезную настройку - Gap Size, что позволяет закрашивать не до конца замкнутые фигуры. Очень радует, что не приходится просматривать каждый пиксель в поисках дыры.Во флеше инструмент кисть может быть неприятен тем, что имеет не постоянную толщину:(слева флеш, справа иллюстратор)
Но это же и его преимущество. Кистью очень удобно рисовать маленькие черточки, штрихи и прочее. Я использовал его, чтобы нарисовать коту возле глаз морщинки, придать шерсти вид неровной и нарисовать блеск в глазах.
Следующий этап -тень. Я действую в 3 хода.
Вначале по рисунку провожу карандашом, отделяя места, которые будут затемнены.
Затем выбираю Eyedropper tool и высасываю цвет который буду затемнять/осветлять.
После этого я захожу в Fill Color () и выбираю
Затем вожу ползунок вниз или вверх, для того чтобы выбрать осветлять я буду или затемнять.
Не стоит делать так, чтобы цвет тени сильно отличался от изначального.
Если же нужно рисовать тени у особо неровных объектов, не стоит тратить время на обрисовывание каждого карандашом. Еще одна хитрость. Выбираем Selection tool, кликаем по цвету, в котором находятся объекты, которые мы будем раскрашивать.
Выбираем Paintbrush Tool в настройках в разделе Brush Mode выбираем Paint Selection и теперь мы можем красить только внутри выделенного цвета, не боясь вылезти за границы.
Мой финальный результат выглядел примерно так:
Я подумал, что он совсем непохож на кота, особенно нос и мне пришлось исправить его до такого:
Это был финал
На все про все у меня ушло 18 минут моего свободного времени. Не знаю сколько бы стоила мне эта работа у фрилансера, но должен заметить что сам процесс мне принес удовольствие. Привожу спидпеинтинг видео:Если у вас появились вопросы, их можно задать по gmail: gflirtzarkua, т.к. автора нет на хабре. И не надо ни давать, ни просить инвайты.
Загрузка...
