Как нарисовать грузовик?
Пока страсти вокруг продажи Грибника и подготовки игры к релизу устаканиваются в моей голове, я немного отвлекусь и вернусь к Mining Truck, чтобы рассказать как нарисовался грузовик, и немного дополню ранее начатую тему о бумажных набросках.
В последние дни завал работой, немного расстройств и весенний витаминоз чуть-чуть выбили меня из еженедельной колеи ведения блога. Но дела нормализуются и я прихожу к обычному ритму жизни. В ближайшие дни я постараюсь нагнать упущенное и много о чем расскажу.
? так, возвращаясь к теме о бумажных набросках, я неожиданно для себя осознал, что для игры Грибник небыло сделано ни одного наброска на бумаге. Вся графика рисовалась сразу во Flash из головы. Хотя черновые наброски отдельных объектов все же были, но прямо в среде Flash.
Рабочий *.fla с графикой из Грибника.
Любой проект я стараюсь разделять как минимум на два рабочих *.fla. Первый из которых — это как правило свалка с игровой графикой, в нем рисуется и анимируется графика, а так же порой тестируется средствами AS2. Возможно вы удивитесь, но графику тоже приходится тестировать на предмет ошибок, особенно анимацию :) Например, ошибки анимации могут возникать когда скорость движения персонажа не соответствует его анимации визуально. Это самая распространенная ошибка и именно из-за нее часто возникает эффект, что персонаж не бежит, а скользит по игровому уровню, и из-за этого может выбиваться из игрового мира. Второй рабочий *.fla — это непосредственно библиотека с ресурсами для игры с входной точкой в саму игру. В нем находится только отборная и проверенная графика, которая экспортируется в него средствами copy/past или через import. Весь код игры, как правило, находится отдельно, во внешних *.as файлах... но что-то я отвлекся от темы.
Все же в последнее время я все чаще использую бумагу для поиска предварительных образов — почему я делаю так, я уже писал ранее. Но повторюсь еще раз. Когда нужно что-то нарисовать, а в голову совершенно ничего не приходит, мне гораздо проще сконцентрироваться над бумажным листком, где ничего нет кроме бумаги и карандаша, а за компьютером в такие моменты, как правило, оказывается много отвлекающих факторов.
Когда бумажный набросок готов, я его фотографирую :) Дело в том, что у меня нет сканера. Ранее в нем у меня не было необходимости, но в ближайшее время похоже прийдется приобрести. После того, как рисунок оцифрован, я произвожу его минимальную обработку в Photoshop. Обесцвечиваю, выправляю контраст и тона, чтобы контуры были максимально четкими, и весь шум/мусор от бумаги сводился к минимуму. А так же подбираю масштаб наброску так, чтобы он соответствовал реальным игровым размерам — об этом я уже писал достаточно подробно в записи «Наброски или графические прототипы?».
После того, как все необходимые правки над наброском выполнены, я его сохраняю как *.png и добавляю в рабочий *.fla с графикой. Там размещаю рисунок на отдельном слое и после начинаю его не спешно и аккуратно обрисовывать кисточкой.
Процесс рисования грузовика для Mining Truck. На бумажный набросок ушел 1 час времени, на обрисовку и раскраску еще два с половиной часа. Видео ускорено на 2000%. Музыка: Bonobo - Transmission94
Я конечно мог бы записать скринкаст обработки набросков, но это совершенно не нужно, так-как никакой магии там нет, все необходимые действия выполняются в течение 5 минут.
Кстати, на этом видео очень хорошо видно, как я пытаюсь подбирать цвета. Когда контур объекта обрисован черным я еще плохо себе представляю, каким цветом может быть сам объект, ну разве что общее цветовое пятно. А вот какими цветами могут быть отдельные детали — мне не понятно. ? тут я начинаю экспериментировать, выполняя заливку отдельных частей произвольными цветами. Полутона подбираются и наносятся уже после того, как основная цветовая гамма подобрана :)
Во многих Flash играх я часто встречаю черную обводку практически вокруг всех объектов на экране, и это очень плохо сказывается на различимости объектов. Тем более если внутри объекта для визуального отделения некоторых деталей так же используется черная обводка. То есть, в итоге картинка выглядит очень раздроблено и не приятна глазу. Поэтому черные контуры нужно использовать аккуратно. Если вы внимательно посмотрите игры с хорошей графикой, использующую контрастную обводку, вы увидите, что контрастная обводка используется исключительно вокруг тех объектов, которые нужно выделить из общей массы. В основном, это те объекты, с которыми игрок может взаимодействовать. ? как правило, все остальное игровое оформление не имеет контрастных контуров. Я же стараюсь сейчас отказаться от использования черного цвета в своих работах, заменяя темные контуры на темный оттенок основного цвета. Мне кажется, что это делает картинку более мягкой и приятной глазу. Но если вы смотрели внимательно ролик, то должны были обратить внимание, что когда я рисовал грузовик я сам наделал ляпов не аккуратно используя черный цвет обводки — тогда я еще не до конца осознал эти тонкости.
Через пару дней я расскажу как я продавал Грибника — было немного нервно и забавно. Набил опять себе шишек и чувствую, что это не последние :)
Как всегда здорово! :) Особенно интересно смотреть как подбираются цвета, у меня с этим проблема...
Насчёт продажи грибника заинтриговал... =)
Отлично все рассказал, объяснил.Если бы были бы уроки по кодам было бы еще лучше =) Побольше бы таких уроков. Ждем новых тем.
@Wind, примеры по коду — это запросто, только у меня не так много идей примеров которые можно разобрать и все они пока пылятся в ящичке на тот момент когда горячие и актуальные темы по текущим проектам немного иссякнут :) Если есть какие-то конкретные вопросы или темы которые было бы интересно разобрать и обсудить, то дайте мне знать.
Не хочу быть назойливым, просто интересно=) Все понял. Просто хотел узнать ту основу программирования , которая приводит в движение flash игры. Пошаговые уроки какие-нибудь. От начала и до конца игры. Если не сложно, и если будет лишнее время. Например как работает тот или иной объект в игре, как заставить выполнять определенную цепочку анимации объектов, от ходьбы и ударов до таких сложных ситуаций как приводить монстров в движение, то есть внедрять в них долю искусственного интеллекта, определенную самостоятельность, проще говоря создавать их поведение. Как все объекты взаимодействуют друг с другом, на каких кодах программирования это строится. Блог интересный конечно но, хотелось бы видеть и такие детали. Спасибо.
Присоединяюсь к Wind`у, таких вещей в интернете катастрофически мало. А с таким интересным стилем рисования и доходчивым объяснением я уверен всем будет интересно. :)
Не, честно это тоже немало важная чаcть. Я знаю что для тебя это прежде всего работа, хоть и хлопотная и отнимающая силы, но в то же время интересная, от которой трудно отойти, как ты говорил раньше, после такой работы по созданию игры, чувствуешь себя создателем, и начинаешь понимать что еще на что то способен, осознаешь "может это твое" и идет нереальный прилив положительных эмоций. Поверь многие мечтают о таком опыте как у тебя. Меня лично по программной части,так как имею опыт в анимации, точнее в рисовании. Просто меня в последнее время сильно заинтересовал это механизм flash, хочется сделать что-то свое, вложить часть себя в творение, полностью вовлечься в что-то интересное, найти для себя стоящее дело, чтобы свободное время хоть чем-нибудь забить, но единственное что мне не хватает так это совета более опытного человека, да и не только мне, но и всем остальным тоже. Я это говорю к чему, просто найти трудно такое пособие, по программной части, лично я не могу найти не в магазинах тех или иных книг на подобную тематику не в средствах массовой информации.
@Wind, бинго! Я уже не раз думал о том чтобы в рамках этого блога разработать игру разбирая все по косточкам начиная с азов и заканчивая готовым продуктом. Поскольку какие-то отдельные примеры мне не очень удобно объяснять и показывать в оторванном виде от всего проекта. Правда я сомневался в целесообразности подготовки такого трудоемкого материала, мне кажется, что интернет переполнен примерами, исходниками и прочими туториалами из которых можно почерпнуть массу информации, и мне кажется, что еще один такой урок просто потеряется во всей этой массе :) Но теперь я вижу интерес и вкорне меняю свое видение ситуации, так что в ближайшее время обещаю начать открывать обратную сторону игр >:)
Не, ты конечно прав, на счет того что полно всей этой информации, но если так поразмышлять, то эта информация или неполная, обрезками, либо иностранного происхождения. Не все в состоянии понять и уяснить суть этих примеров, а тут все на родном языке, да еще можно совет спросить. Просто наброски на бумаге пылятся на полке, а хочется перейти на следующую ступень, на новый уровень как говорится. Очень хочется воплотить мечты и идеи во что то настоящее, живое, то что дает вдохновение. Вообще это удивительно и потрясающе то, что бы один человек нарисовал, анимировал и выпустил в свет свое детище, честно, такое не часто встретишь, хочется выразить уважение за такое трудолюбие. Ты показал что терпение и труд все перетрут. Ну... не буду отвлекать.
Да, чуть не забыл, на таких блогах всегда могут посоветовать что то полезное, ты можешь указать на ошибки или дать совет как лучше справиться с трудностями,всегда объяснят и помогут. Вот такого мне кажется не очень много щас или если есть, то мало, и труднодоступно. Не спеши только=) мы тебя не торопим, нам пользователям некуда спешить, будешь готов дашь знать. C уважением.
Ошибочка:
"об это я уже писал достаточно"
? вопрос, а почему ты не используешь линии когда рисуешь контуры? Мне кажется, что у тебя много времени ушло на аккуратную прорисовку прямых? ?ли это особенность использования планшета?
+1000 к словам Wind`a — тоже очень интересно посмотреть на весь процесс изнутри от А до Я!
не надо туториалов, их и так полным-полно в интернете, правда многие на английском...
гораздо интересней послушать о том как продавалась игра, как договаривались со спонсором, условия сделки, биды и т.п.
мне например очень понравилась статья о продаже mining track
ps: а по коду хотелось бы увидеть ваш класс кеширования анимации, о котором вы как то упоминали
@adzh, если под "линиями" имеется в виду точные прямые проводимые из точки A в точку B, то я их не использую только потому, что при их рисовании рисуемый объект не будет иметь своего характера :) Мне нравится все такое немножко кривое и мультяшное. Ну, а прямые рисуемые рукой с каждым разом получаются все прямее и аккуратнее. Еще я с ними долго мучился потому что планшет слабоват на точность :(
@qdrj, ну ведь на самом деле одно другому совсем не мешает ;) Если будут записи о коде, то это совсем не значит, что все остальное пропадет. Тем более ранее я уже описывал некоторые примеры. Записи о них конечно не такие интересные и интригующие, но все же помогают кому-то разобраться со своими задачами.
Ссылку на класс с примером кэширования графики можно найти в той записи где я об этом рассказывал (ссылка на запись). Этот класс на самом деле не мой и он имеет пару мелких недостатков. Как раз сейчас я задумался о том чтобы на основе оригинального класса написать свой с необходимым мне функционалом.
@Ant.Karlov Я кстати обратил внимание на записи на изменения цветов аутлайнов. Всегда рисовал обводку черной, и действительно — всегда она сливалась с остальными планами объектов.
Следует мне поработать над такой темой.
Несколько удивился тому, что у тебя выходит час на скетч и ещё 2.5 часа на отрисовку, но это личное дело каждого.
А тогда ещё вопрос — кисть у тебя с какими настройками?
У тебя же пока bamboo one? Клавиши на нём настраивал? А само перо как настроено?
?спользуешь ли Pressure?
Хотелось бы узнать, как у тебя получаются такие тонкие линии кистью. Я, даже когда выбираю шаблон кисти, получаю достаточно толстые линии. А в настройках кроме сглаживания ничего больше не доступно.
кстати, в блоге у Lerik`и довольно давно был пост на эту тему:
http://flash-animation.ru/2008/04/contour-line/
У меня другой вопрос.Подскажи пожалуста если знаешь.
Какой должен быть компьютер или что нужно чтобы нормально работать во флеше графически?
Суть в том что я токо начну что то делать,пройдёт 2 - 3 часа и флеш начинает лагать со страшной силой(
мои конфигурации
процессор-2.2
озу - 3 гб
видеокарта - gt 8600
или распиши свой компьютер пожалуста)
@roland
Твоего конфига более чем достаточно.
у меня 2 Гб озу (раньше так вообще на 512мбайтах работал). Видеокарта у меня интегрированная, процессор 1.7
У тебя не с флешем проблемы скорее всего.
@Bakame!, некоторые художники достаточно хитро используют контрастную обводку и в итоге она не мешает глазу и выгодно выделяет динамические игровые объекты на фоне статических :)
А чему именно удивился? 3 часа на грузовик это много или мало по твоим меркам?
Настройки кисти достаточно простые. Во время работы изменяю иногда размер кисти и режим, форма же кисти всегда одинаковая. Pressure использую, но не всегда.
Кнопки на планшете настраивал, но не использую вообще. На данной модели они немного громкие да и левая рука у меня постоянно на клавиатуре чтобы работать с горячими клавишами и отдергивать её от клавы обратно к планшету чтобы нажать кнопку на планшете уже не удобно, тем более если это же действие можно выполнить на клавиатуре.
Настройки пера заводские :) Когда впервые подключил планшет я не стал заморачиваться с настройками и сразу рисовал, а когда стало интересно поковырять настройки, оказалось, что я уже безнадежно привык к заводским и, например, при изменении чувствительности пера испытываю дискомфорт.
Сейчас у меня Bamboo Fun A6.
@Urchin, на панели инструментов, при выборе кисточки чуть ниже, под окошком текущего цвета линий и цвета заливки есть дополнительные настройки кисточки: режим рисования, размер кисти, форма кисти и другое. Так же стоит учитывать, что при увеличении полотна размер кисти не изменяется пропорционально увеличению и остается таким же. То есть линии нарисованные кистью в 100% увеличении и 400% будут отличатся толщиной.
@roland, твоей конфигурации действительно достаточно для полноценной работы с Flash. Проблема скорее всего кроется не в железе, а в системе. Я бы порекомендовал попробовать переустановить систему с нуля.
У меня iMac следующей конфигурации:
Intel Core 2 Duo 2.4 ГГц, ОЗУ 4 Гб, ATI RadeonHD 2600 256Мб — этой конфигурации хватает за глаза, дискомфорта не чувствую, тем более учитывая тот факт, что Flash под MacOS не так шустр как под Win.
Хмм.. а вот первый рисунок твоего поста Рабочий *.fla с графикой из Грибника." Это в какой программе все выполняется, в Flash IDE ? Просто еще там разметка из цифр какая-то, понять не могу. Это в ней же создаются статические непроходимые объекты или статические датчики, от рисовка физических объектов и так далее. Да ? ? что ты дальше делаешь с набросками бумаги после редактирования в photoshop, в какой программе обрисовываешь и заливаешь цвет ? Можно ли полностью весь набросанный уровень от сканировать или же все это нужно по частям (дом, дерево, камень), чтобы после сформировать из них уровень ?
Антон, а может поподробнее объяснить технику, когда уже почти на готовом рисунке ты делаешь засечки. В выше приведённом примере с грузовиком они ярко зелёного цвета, потом что то редактируешь и их удаляешь.
Зачем это? В каких слоях? ? что даёт?
@Wind, всю графику я рисую в основном только во Flash IDE, то есть когда набросок обработан, то я его экспортирую во Flash и в нем его обрисовываю.
Разметка цифрами — это координаты центров клетов в пикселях. Вся игровая карта представлена программно клетками, а так же все игровые объекты размещаются строго по клеткам. Чтобы рисуя графику сразу выставлять тайлы и отлаживать таким образом графику, я, используя обычные текстовые метки сделал линейку, глядя на которую я могу быстро установить новый тайл на рабочем пространстве строго в нужную клеточку указав ему координаты по x и y согласно этой разметке.
Я придерживаюсь схемы: есть некоторое количество разнообразных объектов комбинируя которые я составляю совершенно разные уровни — это наиболее оптимальный вариант для быстрой разработки игр. Если же каждый игровой уровень рисовать снова, не используя, например, объекты из первого уровня, то это будет не только трудоемко, но и не оптимально с точки зрения размера игры. То есть в этом случае для каждого уровня прийдется же рисовать новую графику. Но если ваша игра что-то вроде квеста (вспоминаем Машинариум), то в этом случае конечно можно каждый уровень спокойно рисовать на бумаге. Кроме этого можно рисовать уровни на бумаге и для любых других игр, если это удобно для вас :)
@MihaPro, эти засечки — это линии сделанные карандашом, я их использую только для того чтобы разделить разные области чтобы выполнить заливку новым цветом.
Например, у нас есть квадрат красного цвета и вдруг нам захотелось его произвольную часть покрасить в зеленый, для этого можно использовать несколько разных способов, один из которых использовать карандаш. Мы рисуем карандашом произвольную линию от одного края квадрата до другого, как бы разделяя его на двое, после чего берем заливку и кликаем в одну из половин, если в нарисованной карандашом линии не буде дырок, то мы получим разноцветный квадрат :) После этого можно удалить карандашную линию кликнув по ней два раза и нажав клавишу Del.
Офигенно всё-таки рисуешь, до сих пор поражаюсь)
Спасибо большое. Буду решать проблему)
Антон, большое спасибо, что объяснил. Нужный очень приём во флеше!
Очень симпатичный грузовичок и хороший урок, Антон.
Попозже придётся спросить некоторые технические моменты рисования во Flash, если ты не против.
?звиняюсь, если не в тему, но может, в курсе: у меня планшет Wacom Bamboo, когда пытаюсь им рисовать в любом векторном редакторе, они вылетают. Flash, Illustrator, CorelDraw, Inkscape.
Никто не сталкивался с этим? Операционка WinXP, дрова вроде бы свежие, хотя пока не переустанавливал.
@Vadich, спрашивайте, от меня не убудет :)
По поводу планшета, однозначно надо в первую очередь поставить новые драйвера для планшета, тем более если во всех программах проблема одинаковая.
Спасибо за отзыв!
Всё, заработало после переустановки драйверов :). Отлично.
да! ")
плохо
?нтересно=)
25 Апреля 2010
— 18:04
#