Как нарисовать грузовик?

Пока страсти вокруг продажи Грибника и подготовки игры к релизу устаканиваются в моей голове, я немного отвлекусь и вернусь к Mining Truck, чтобы рассказать как нарисовался грузовик, и немного дополню ранее начатую тему о бумажных набросках.

 

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

И так, возвращаясь к теме о бумажных набросках, я неожиданно для себя осознал, что для игры Грибник небыло сделано ни одного наброска на бумаге. Вся графика рисовалась сразу во Flash из головы. Хотя черновые наброски отдельных объектов все же были, но прямо в среде Flash.

Mushroomer graphics set

Рабочий *.fla с графикой из Грибника.

Любой проект я стараюсь разделять как минимум на два рабочих *.fla. Первый из которых — это как правило свалка с игровой графикой, в нем рисуется и анимируется графика, а так же порой тестируется средствами AS2. Возможно вы удивитесь, но графику тоже приходится тестировать на предмет ошибок, особенно анимацию :) Например, ошибки анимации могут возникать когда скорость движения персонажа не соответствует его анимации визуально. Это самая распространенная ошибка и именно из-за нее часто возникает эффект, что персонаж не бежит, а скользит по игровому уровню, и из-за этого может выбиваться из игрового мира. Второй рабочий *.fla — это непосредственно библиотека с ресурсами для игры с входной точкой в саму игру. В нем находится только отборная и проверенная графика, которая экспортируется в него средствами copy/past или через import. Весь код игры, как правило, находится отдельно, во внешних *.as файлах... но что-то я отвлекся от темы.

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

Когда бумажный набросок готов, я его фотографирую :) Дело в том, что у меня нет сканера. Ранее в нем у меня не было необходимости, но в ближайшее время похоже прийдется приобрести. После того, как рисунок оцифрован, я произвожу его минимальную обработку в Photoshop. Обесцвечиваю, выправляю контраст и тона, чтобы контуры были максимально четкими, и весь шум/мусор от бумаги сводился к минимуму. А так же подбираю масштаб наброску так, чтобы он соответствовал реальным игровым размерам — об этом я уже писал достаточно подробно в записи «Наброски или графические прототипы?».

После того, как все необходимые правки над наброском выполнены, я его сохраняю как *.png и добавляю в рабочий *.fla с графикой. Там размещаю рисунок на отдельном слое и после начинаю его не спешно и аккуратно обрисовывать кисточкой.

Процесс рисования грузовика для Mining Truck. На бумажный набросок ушел 1 час времени, на обрисовку и раскраску еще два с половиной часа. Видео ускорено на 2000%. Музыка: Bonobo - Transmission94

Я конечно мог бы записать скринкаст обработки набросков, но это совершенно не нужно, так-как никакой магии там нет, все необходимые действия выполняются в течение 5 минут.

Кстати, на этом видео очень хорошо видно, как я пытаюсь подбирать цвета. Когда контур объекта обрисован черным я еще плохо себе представляю, каким цветом может быть сам объект, ну разве что общее цветовое пятно. А вот какими цветами могут быть отдельные детали — мне не понятно. И тут я начинаю экспериментировать, выполняя заливку отдельных частей произвольными цветами. Полутона подбираются и наносятся уже после того, как основная цветовая гамма подобрана :)

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

Через пару дней я расскажу как я продавал Грибника — было немного нервно и забавно. Набил опять себе шишек и чувствую, что это не последние :)

Система Orphus

Написать комментарий
Индикаторы: Графика, Видео
Постоянная ссылка

 

Интересно=)

Sanctorum
25 Апреля 2010
— 18:04
#

Как всегда здорово! :) Особенно интересно смотреть как подбираются цвета, у меня с этим проблема...

Насчёт продажи грибника заинтриговал... =)

Кирилл
25 Апреля 2010
— 18:09
#

Отлично все рассказал, объяснил.Если бы были бы уроки по кодам было бы еще лучше =) Побольше бы таких уроков. Ждем новых тем.

Wind
25 Апреля 2010
— 19:06
#

@Wind, примеры по коду — это запросто, только у меня не так много идей примеров которые можно разобрать и все они пока пылятся в ящичке на тот момент когда горячие и актуальные темы по текущим проектам немного иссякнут :) Если есть какие-то конкретные вопросы или темы которые было бы интересно разобрать и обсудить, то дайте мне знать.

Ant.Karlov
25 Апреля 2010
— 20:15
#

Не хочу быть назойливым, просто интересно=) Все понял. Просто хотел узнать ту основу программирования , которая приводит в движение flash игры. Пошаговые уроки какие-нибудь. От начала и до конца игры. Если не сложно, и если будет лишнее время. Например как работает тот или иной объект в игре, как заставить выполнять определенную цепочку анимации объектов, от ходьбы и ударов до таких сложных ситуаций как приводить монстров в движение, то есть внедрять в них долю искусственного интеллекта, определенную самостоятельность, проще говоря создавать их поведение. Как все объекты взаимодействуют друг с другом, на каких кодах программирования это строится. Блог интересный конечно но, хотелось бы видеть и такие детали. Спасибо.

Wind
25 Апреля 2010
— 22:00
#

Присоединяюсь к Wind`у, таких вещей в интернете катастрофически мало. А с таким интересным стилем рисования и доходчивым объяснением я уверен всем будет интересно. :)

Кирилл
25 Апреля 2010
— 22:14
#

Не, честно это тоже немало важная чаcть. Я знаю что для тебя это прежде всего работа, хоть и хлопотная и отнимающая силы, но в то же время интересная, от которой трудно отойти, как ты говорил раньше, после такой работы по созданию игры, чувствуешь себя создателем, и начинаешь понимать что еще на что то способен, осознаешь "может это твое" и идет нереальный прилив положительных эмоций. Поверь многие мечтают о таком опыте как у тебя. Меня лично по программной части,так как имею опыт в анимации, точнее в рисовании. Просто меня в последнее время сильно заинтересовал это механизм flash, хочется сделать что-то свое, вложить часть себя в творение, полностью вовлечься в что-то интересное, найти для себя стоящее дело, чтобы свободное время хоть чем-нибудь забить, но единственное что мне не хватает так это совета более опытного человека, да и не только мне, но и всем остальным тоже. Я это говорю к чему, просто найти трудно такое пособие, по программной части, лично я не могу найти не в магазинах тех или иных книг на подобную тематику не в средствах массовой информации.

Wind
25 Апреля 2010
— 22:24
#

@Wind, бинго! Я уже не раз думал о том чтобы в рамках этого блога разработать игру разбирая все по косточкам начиная с азов и заканчивая готовым продуктом. Поскольку какие-то отдельные примеры мне не очень удобно объяснять и показывать в оторванном виде от всего проекта. Правда я сомневался в целесообразности подготовки такого трудоемкого материала, мне кажется, что интернет переполнен примерами, исходниками и прочими туториалами из которых можно почерпнуть массу информации, и мне кажется, что еще один такой урок просто потеряется во всей этой массе :) Но теперь я вижу интерес и вкорне меняю свое видение ситуации, так что в ближайшее время обещаю начать открывать обратную сторону игр >:)

Ant.Karlov
25 Апреля 2010
— 22:52
#

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

Wind
25 Апреля 2010
— 23:21
#

Да, чуть не забыл, на таких блогах всегда могут посоветовать что то полезное, ты можешь указать на ошибки или дать совет как лучше справиться с трудностями,всегда объяснят и помогут. Вот такого мне кажется не очень много щас или если есть, то мало, и труднодоступно. Не спеши только=) мы тебя не торопим, нам пользователям некуда спешить, будешь готов дашь знать. C уважением.

Wind
25 Апреля 2010
— 23:31
#

Ошибочка:
"об это я уже писал достаточно"
И вопрос, а почему ты не используешь линии когда рисуешь контуры? Мне кажется, что у тебя много времени ушло на аккуратную прорисовку прямых? Или это особенность использования планшета?

adzh
25 Апреля 2010
— 23:57
#

+1000 к словам Wind`a — тоже очень интересно посмотреть на весь процесс изнутри от А до Я!

pomidorchi
26 Апреля 2010
— 01:09
#

не надо туториалов, их и так полным-полно в интернете, правда многие на английском...

гораздо интересней послушать о том как продавалась игра, как договаривались со спонсором, условия сделки, биды и т.п.

мне например очень понравилась статья о продаже mining track

ps: а по коду хотелось бы увидеть ваш класс кеширования анимации, о котором вы как то упоминали

qdrj
26 Апреля 2010
— 01:56
#

@adzh, если под "линиями" имеется в виду точные прямые проводимые из точки A в точку B, то я их не использую только потому, что при их рисовании рисуемый объект не будет иметь своего характера :) Мне нравится все такое немножко кривое и мультяшное. Ну, а прямые рисуемые рукой с каждым разом получаются все прямее и аккуратнее. Еще я с ними долго мучился потому что планшет слабоват на точность :(

Ant.Karlov
26 Апреля 2010
— 03:07
#

@qdrj, ну ведь на самом деле одно другому совсем не мешает ;) Если будут записи о коде, то это совсем не значит, что все остальное пропадет. Тем более ранее я уже описывал некоторые примеры. Записи о них конечно не такие интересные и интригующие, но все же помогают кому-то разобраться со своими задачами.

Ссылку на класс с примером кэширования графики можно найти в той записи где я об этом рассказывал (ссылка на запись). Этот класс на самом деле не мой и он имеет пару мелких недостатков. Как раз сейчас я задумался о том чтобы на основе оригинального класса написать свой с необходимым мне функционалом.

Ant.Karlov
26 Апреля 2010
— 03:14
#

@Ant.Karlov Я кстати обратил внимание на записи на изменения цветов аутлайнов. Всегда рисовал обводку черной, и действительно — всегда она сливалась с остальными планами объектов.
Следует мне поработать над такой темой.

Несколько удивился тому, что у тебя выходит час на скетч и ещё 2.5 часа на отрисовку, но это личное дело каждого.

А тогда ещё вопрос — кисть у тебя с какими настройками?
У тебя же пока bamboo one? Клавиши на нём настраивал? А само перо как настроено?

Используешь ли Pressure?

Bakame!
26 Апреля 2010
— 06:48
#

Хотелось бы узнать, как у тебя получаются такие тонкие линии кистью. Я, даже когда выбираю шаблон кисти, получаю достаточно толстые линии. А в настройках кроме сглаживания ничего больше не доступно.

Urchin
26 Апреля 2010
— 11:44
#

кстати, в блоге у Lerik`и довольно давно был пост на эту тему:
http://flash-animation.ru/2008/04/contour-line/

adzh
26 Апреля 2010
— 13:24
#

У меня другой вопрос.Подскажи пожалуста если знаешь.
Какой должен быть компьютер или что нужно чтобы нормально работать во флеше графически?
Суть в том что я токо начну что то делать,пройдёт 2 - 3 часа и флеш начинает лагать со страшной силой(
мои конфигурации
процессор-2.2
озу - 3 гб
видеокарта - gt 8600
или распиши свой компьютер пожалуста)

roland
26 Апреля 2010
— 14:45
#

@roland
Твоего конфига более чем достаточно.
у меня 2 Гб озу (раньше так вообще на 512мбайтах работал). Видеокарта у меня интегрированная, процессор 1.7
У тебя не с флешем проблемы скорее всего.

Bakame!
26 Апреля 2010
— 15:28
#

@Bakame!, некоторые художники достаточно хитро используют контрастную обводку и в итоге она не мешает глазу и выгодно выделяет динамические игровые объекты на фоне статических :)

А чему именно удивился? 3 часа на грузовик это много или мало по твоим меркам?

Настройки кисти достаточно простые. Во время работы изменяю иногда размер кисти и режим, форма же кисти всегда одинаковая. Pressure использую, но не всегда.

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

Настройки пера заводские :) Когда впервые подключил планшет я не стал заморачиваться с настройками и сразу рисовал, а когда стало интересно поковырять настройки, оказалось, что я уже безнадежно привык к заводским и, например, при изменении чувствительности пера испытываю дискомфорт.

Сейчас у меня Bamboo Fun A6.

Ant.Karlov
26 Апреля 2010
— 16:28
#

@Urchin, на панели инструментов, при выборе кисточки чуть ниже, под окошком текущего цвета линий и цвета заливки есть дополнительные настройки кисточки: режим рисования, размер кисти, форма кисти и другое. Так же стоит учитывать, что при увеличении полотна размер кисти не изменяется пропорционально увеличению и остается таким же. То есть линии нарисованные кистью в 100% увеличении и 400% будут отличатся толщиной.

Ant.Karlov
26 Апреля 2010
— 16:32
#

@roland, твоей конфигурации действительно достаточно для полноценной работы с Flash. Проблема скорее всего кроется не в железе, а в системе. Я бы порекомендовал попробовать переустановить систему с нуля.

У меня iMac следующей конфигурации:
Intel Core 2 Duo 2.4 ГГц, ОЗУ 4 Гб, ATI RadeonHD 2600 256Мб — этой конфигурации хватает за глаза, дискомфорта не чувствую, тем более учитывая тот факт, что Flash под MacOS не так шустр как под Win.

Ant.Karlov
26 Апреля 2010
— 16:40
#

Хмм.. а вот первый рисунок твоего поста Рабочий *.fla с графикой из Грибника." Это в какой программе все выполняется, в Flash IDE ? Просто еще там разметка из цифр какая-то, понять не могу. Это в ней же создаются статические непроходимые объекты или статические датчики, от рисовка физических объектов и так далее. Да ? И что ты дальше делаешь с набросками бумаги после редактирования в photoshop, в какой программе обрисовываешь и заливаешь цвет ? Можно ли полностью весь набросанный уровень от сканировать или же все это нужно по частям (дом, дерево, камень), чтобы после сформировать из них уровень ?

Wind
27 Апреля 2010
— 09:55
#

Антон, а может поподробнее объяснить технику, когда уже почти на готовом рисунке ты делаешь засечки. В выше приведённом примере с грузовиком они ярко зелёного цвета, потом что то редактируешь и их удаляешь.
Зачем это? В каких слоях? И что даёт?

MihaPro
27 Апреля 2010
— 23:26
#

@Wind, всю графику я рисую в основном только во Flash IDE, то есть когда набросок обработан, то я его экспортирую во Flash и в нем его обрисовываю.

Разметка цифрами — это координаты центров клетов в пикселях. Вся игровая карта представлена программно клетками, а так же все игровые объекты размещаются строго по клеткам. Чтобы рисуя графику сразу выставлять тайлы и отлаживать таким образом графику, я, используя обычные текстовые метки сделал линейку, глядя на которую я могу быстро установить новый тайл на рабочем пространстве строго в нужную клеточку указав ему координаты по x и y согласно этой разметке.

Я придерживаюсь схемы: есть некоторое количество разнообразных объектов комбинируя которые я составляю совершенно разные уровни — это наиболее оптимальный вариант для быстрой разработки игр. Если же каждый игровой уровень рисовать снова, не используя, например, объекты из первого уровня, то это будет не только трудоемко, но и не оптимально с точки зрения размера игры. То есть в этом случае для каждого уровня прийдется же рисовать новую графику. Но если ваша игра что-то вроде квеста (вспоминаем Машинариум), то в этом случае конечно можно каждый уровень спокойно рисовать на бумаге. Кроме этого можно рисовать уровни на бумаге и для любых других игр, если это удобно для вас :)

Ant.Karlov
28 Апреля 2010
— 03:28
#

@MihaPro, эти засечки — это линии сделанные карандашом, я их использую только для того чтобы разделить разные области чтобы выполнить заливку новым цветом.

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

Ant.Karlov
28 Апреля 2010
— 03:34
#

Офигенно всё-таки рисуешь, до сих пор поражаюсь)

J0x
28 Апреля 2010
— 09:29
#

Спасибо большое. Буду решать проблему)

roland
30 Апреля 2010
— 19:00
#

Антон, большое спасибо, что объяснил. Нужный очень приём во флеше!

MihaPro
30 Апреля 2010
— 22:30
#

Очень симпатичный грузовичок и хороший урок, Антон.
Попозже придётся спросить некоторые технические моменты рисования во Flash, если ты не против.

Извиняюсь, если не в тему, но может, в курсе: у меня планшет Wacom Bamboo, когда пытаюсь им рисовать в любом векторном редакторе, они вылетают. Flash, Illustrator, CorelDraw, Inkscape.
Никто не сталкивался с этим? Операционка WinXP, дрова вроде бы свежие, хотя пока не переустанавливал.

Vadich
10 Мая 2010
— 14:40
#

@Vadich, спрашивайте, от меня не убудет :)

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

Спасибо за отзыв!

Ant.Karlov
12 Мая 2010
— 21:36
#

Всё, заработало после переустановки драйверов :). Отлично.

Vadich
18 Мая 2010
— 11:13
#

да! ")

настя
22 Мая 2011
— 04:09
#

плохо

катя
12 Января 2013
— 11:38
#
 



 

Вы можете использовать следующие тэги для форматирования текста в комментариях: [b]толстый[/b], [i]наклонный[/i], [u]подчеркнутый[/u], [link]ссылка[/link], [link=адрес ссылки]текст ссылка[/link]