И... мы начинаем!
И... мы начинаем!

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

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

Изначально я также состоял во второй группе. Мой первоначальный план заключался в создании серии иллюстраций, или же, концепт‑артов к одной из любимых книг. Да, я по большей части про рисование, а не про графический дизайн. В довесок, в этот же момент происходил бум нейросетей, что вполне могли этот самый процесс отрисовки ускорить.

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

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

Именно её вопросы и комментарии касательно моей серии концепт‑артов в выдуманной вселенной «Puppet Hero» сподвигнули меня не только рисовать персонажей, но и сочинять к ним более углубленный бэкграунд.

Проект "Puppet Hero"
Проект "Puppet Hero"

Дальше — они разрослись до маленьких рассказов. В последствии именно вместе с ней я напишу небольшую зарисовку о лагере, в котором происходит ряд мистических событии. Так родятся самые первые записи о «Соне».

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

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

По задумке должен был получится простой 2д квест, с упором на сюжетную составляющую, милую графику и исследование небольших локации. Рассказывал бы он о летнем лагере, в котором главная героиня и компания расследует ряд мистических событии и учится взрослеть. Эдакий микс между «Sally Face», «Night in the Woods» и, возможно, «Fran Bow».

Забегая вперёд — итоговый внутриигровой вид выглядит вот так
Забегая вперёд — итоговый внутриигровой вид выглядит вот так

Наверное, меня, как и многих других, мечта о создании своей игры пленила ещё с самого детства. Однако именно к этому моменту я осознал, что нахожусь в той точке жизни, где моего навыка рисования достаточно для того, чтобы справиться со всеми задачами, что может поставить передо мной процесс разработки любой игры в двумерной плоскости. Именно «достаточно», не поймите неправильно, я не питаю иллюзии относительно своих навыков и мне еще расти и расти

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

Сплешарт для не вышедшей "TrenchLords". На тот момент это был мой предел и "до" я ничего с фоном не рисовал. Пространство слева пустует, так как там должно было быть игровое меню
Сплешарт для не вышедшей "TrenchLords". На тот момент это был мой предел и "до" я ничего с фоном не рисовал. Пространство слева пустует, так как там должно было быть игровое меню

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

Мы оба разделяли страсть к разработке и оба желали выйти за рамки своих профессии. Оба хотели иметь «особый проект в гараже», в который хотелось бы вложить всю свою душу. А ещё — он просто клевый чувак. Поэтому, когда я пришёл к нему с просьбой присоединиться к разработке — он нырнул в эту авантюру с головой и вложил огромный вклад в проект.

Будучи студентом на факультете графического дизайна, я не был уверен в том, что смогу продвинуть тему разработки игры на диплом, однако тут мне повезло. Преподавательский состав увидел мой энтузиазм и помог с правильной подачей проекта — акцент в текстовых материалах и спичах смещался с аспекта разработки игры на работу с графической составляющей проекта. Так его и оформили: «Разработка визуальной и графической оболочки игры в жанре квест». В целом не могу не отметить того, что мне очень повезло — как с преподавателями, так и со своими сокурсниками. Я получал активный фидбек, ощущал общий раж сделать что‑то «крутое» и не был ограничен какими‑либо сухими рамками. За это я очень благодарен своему университету.

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

Выглядит вырвиглазно
Выглядит вырвиглазно

Все же получилось попасть в нужное направление. Это была «детективная доска», деревянный стол, а также большое количество различных записок на ней. Как оказалось, с дизайном этих инфографик гораздо проще определиться если всё‑таки уже оформлен определенный кусок самой игры и там наработался свой визуальный стиль.

Инфографика по целевой аудитории
Инфографика по целевой аудитории
Тут про рынок
Тут про рынок
Здесь доказываем, что мой проект всё-таки про дизайн
Здесь доказываем, что мой проект всё-таки про дизайн

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

Персонажи

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

Первый вариант Сони. Анимация ходьбы задумывалась покадровой.
Первый вариант Сони. Анимация ходьбы задумывалась покадровой.

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

Чуть позже, обсуждая сюжетную составляющую проекта с Джереми, я услышал от него следующую фразу:

«Мне довольно тяжело представить нынешнюю Соню главной героиней обычно такие люди просто мечтают и плывут по течению, покуда этой истории нужен персонаж, готовый взять на себя риск и действовать здесь и сейчас»

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

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

В своем дизайн‑документе я переписал ее, описав как храбрую и смышленую непоседу с добрым сердцем. Она всё также должна была носить одежду спокойных оттенков, а весь ее силуэт при этом должен сообщать о «мягкости», «доброте» и «уюте» — потому основными фигурами в дизайне должны были выступать овалы. Исключением была причёска — там должен был царить легкий кавардак, сигнализирующий о боевой натуре и энергичности.

Новый вариант Сони, ставший финальным
Новый вариант Сони, ставший финальным

Помимо нового облика, я хотел выдать Соне и новую анимацию ходьбы, с чем возник ряд трудностей. Я хотел сделать ее движения плавными, не ограничивая их лишь тремя кадрами. Быстрый запрос в гугл предложил мне использовать «Spine», или же, его бесплатный аналог «Dragon Bones». Решив сделать всё как можно скорее, я не раздумывая бросился покорять этот софт.

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

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

Решив не изобретать велосипед я просто загуглил иначе — а именно то, как выполнена анимация в игре‑аналоге — Night in the Woods. Мгновенно наткнулся на туториал по After Effects на данную тематику. Вновь учу новый софт за ночь, вновь повторяю шаг за шагом и получаю... Очень даже приятный для себя результат!

Топаем вперёд, к приключениям!
Топаем вперёд, к приключениям!

Есть что‑то особое в том, чтобы увидеть своего персонажа «живым». Всего‑то ряд зацикленных кадров, но они невероятно мотивировали продолжать работу в ещё более активном темпе.

Вскоре был нарисован старший брат Сони — Артём.

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

И ещё один персонаж, что был прописан в сюжете крайне слабо — «Дедушка в панамке». Эдакий образ наставника и проводника в мир загадок и тайн.

Работающий механиком в лагере, по вечерам он бродит в лесной округе и ищет своим странным радио не менее странные сигналы
Работающий механиком в лагере, по вечерам он бродит в лесной округе и ищет своим странным радио не менее странные сигналы

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

Когда персонажи были дорисованы, у всего проекта появилась общая стилистика и стало ясно, в каком направлении идти при работе с локациями.

Локации

Комната Сони стала первой локацией, над которой мы сели работать. Изначальный скетч выглядел примерно следующим образом:

Кот на круглом подоконнике все ещё прекрасен
Кот на круглом подоконнике все ещё прекрасен

Он нравился мне, однако ощущался недоработанным. Все объекты располагались исключительно вдоль стены, покуда боковые стороны пустовали. Настя предложит иной вариант композиции, который выглядел намного более «живым».

Тёмные силуэты выглядят пугающе, но это лишь плейсхолдеры для наших героев
Тёмные силуэты выглядят пугающе, но это лишь плейсхолдеры для наших героев

Взяв данный скетч за основу, я приступлю к проработке локации и ее наполнению в стилистике, что была отработана на персонажах ранее:

Внешние линии — чуть толще внутренних
Внешние линии — чуть толще внутренних
Основные цвета и тени. Немного текстур
Основные цвета и тени. Немного текстур
Поработал с освещением. Поменял монитор на более "пузатую" и старую версию
Поработал с освещением. Поменял монитор на более "пузатую" и старую версию

Отдельно отмечу, что все объекты расположены строго по своим слоям и хранились как отдельные пнг‑файлы. В тот момент мы не были уверены, что будет интерактивным, а что нет и потому перестраховались. Сейчас я понимаю, что в этом не было никакой необходимости.

Плакаты и шкаф потерялись в недрах архивов, потому их тут нет
Плакаты и шкаф потерялись в недрах архивов, потому их тут нет

Далее, вставив всё указанное выше в сам игровой движок (мы использовали Unity), выяснили, что свет можно сделать динамичным, добавить лучи, блики и пылинки. Проблема была в том, что Джереми умел работать с Unity, но справедливо полагал, что работа с визуальной составляющей лежит на мне. Я работать с Unity — не умел, но был готов учиться новому. Открыв парочку туториалов, попытался передать ощущение исходной картинки, но уже в «динамике».

Скриншот с моих попыток научиться работать со светом
Скриншот с моих попыток научиться работать со светом

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

Следующей комнатой станет «Зал», куда бы Соня спускалась из своей комнаты по лестнице в углу. С этой локацией также возникнет ряд проблем — во многом из‑за утекающего времени и того объема деталей, что хотелось бы добавить, но мы уже не успевали.

В дополнение — Джереми столкнулся с трудностями технического характера. Не уверен, в чём именно была проблема, однако картинка вне движка и при экспорте в него менялась в размерах. Будучи не программистом — не знаю как именно он справился с данной преградой и что послужило ее причиной.

Вновь — лайнарт, базовые цвета и тени, свет
Вновь — лайнарт, базовые цвета и тени, свет

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

Комментарии (7)


  1. kooo9058
    01.12.2023 06:39
    +1

    Мне очень понравилась статья. Вы большой молодец!)


    1. Zinemay Автор
      01.12.2023 06:39

      Благодарю!


  1. Astus
    01.12.2023 06:39
    +1

    Было интересно, люблю такое чтиво, пишите ещё.


    1. GoodOldDude
      01.12.2023 06:39
      +1

      Плюсую, ждем продолжение!


    1. Zinemay Автор
      01.12.2023 06:39

      Большое спасибо, вторая часть в процессе!


  1. Alextrazz
    01.12.2023 06:39
    +1

    Жаль что судя по заголовку не выгорело. Надеюсь вы продолжите и не опустите руки! Зарегался на хабре только чтобы это написать.


    1. Zinemay Автор
      01.12.2023 06:39

      Ваша поддержка очень вдохновляет, спасибо! Мы тоже надеемся вернуться к работе над игрой, но уже поднабравшись опыта в этой сфере.