Как рисовать мокапы, если не умеешь рисовать

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

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

Можно заметить, что ни один из пунктов не гласит «делает мокапы или макеты UI», но на самом деле он там есть — во втором и третьем пункте.

Допустим, вы придумали замечательную, прекрасную механику. Не тратя «лишнего» времени на UI, вы подробно описываете ее и отдаёте UI-художнику на проработку (если он есть), или сразу программисту на реализацию.

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

Во втором случае программист просто делает окно с тридцатью двумя кнопками, двумя слайдерами и тремя чекбоксами.

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

Одна из главных задач геймдизайнера — объяснять свои идеи другим, а игра как ни крути — визуальный вид искусства, так что рисовать все-таки придётся немного научиться.

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

Обычно в качестве одного из вопросов на собеседовании я предлагаю соискателю представить, что ему нужно сделать вертикальную версию Clash of Clans и нарисовать на бумаге мокап окна апгрейда башни для этой игры. Это хорошее упражнение, потому что сделать горизонтальный интерфейс вертикальным, как правило, сложнее, чем наоборот; однако, вертикальные изображения обычно плохо выглядят в статьях, поэтому давайте сделаем что-то другое.

Например, возьмем игру Hero Wars (мобильную) и попробуем сделать для нее мокап новой фичи: “временное дотягивание героя до уровня самого сильного героя в команде”. Идея взята с потолка, поэтому качество самой идеи, нужность этой фичи и так далее мы рассматривать не будем.

Внимание: я не просто так написал “придется немного научиться рисовать”. Я плохо рисую и не претендую на звание UI-дизайнера. Пожалуйста, уберите от экрана впечатлительных детей и настоящих дизайнеров.

Инструменты: доска, бумага и ручка (или карандаш), Balsamiq Mockups

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

В случае с фичой “временное дотягивание героя до капа” я попробовал предположить, что для этого понадобится, и нарисовал на бумажке:

Инструменты: поисковик

Не пытайтесь изобрести велосипед.

Во-первых, наши идеи обычно не так хороши, как сперва кажется (и да, ко мне это тоже относится).

Во-вторых, это сэкономит вам огромное количество времени.

В случае с нашей фичей для примера я сперва подумал об AFK Arena, потому что там есть довольно похожая механика: герои “дотягиваются” до минимального уровня пяти самых сильных героев. Однако, я хотел “дотягивать” одного героя до уровня одного другого героя, и не постоянно, а временно, так что в конечном случае этот пример не подошел.

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

Инструменты: Фотошоп (если вы можете его себе позволить), Paint.net, любой другой графический редактор

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

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

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

Это мой бумажный мокап, обведенный в графическом редакторе. Дает ли он представление о том, что должно получиться в итоге?

Если просто отдать его программисту, результат может получиться примерно таким:

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

Если же подключить UI-дизайнера, то вам все равно пришлось бы тратить его и ваше время на объяснение того, что на самом деле имелось в виду, и в итоге ему все равно пришлось бы нарисовать несколько принципиально разных вариантов. С более проработанным мокапом было бы очевидно, что часть из них рисовать не надо.

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

Для начала подвинем фигурку героя в сторону и поменяем заголовок окна. Выглядит как “…а теперь нарисуйте всю остальную сову”, не так ли?

На самом деле я использую два скриншота из ML: Adventures, один с пустым фоном, а другой с героем:

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

Важно понимать, что тут не нужно переживать о том, что что-то отрезано криво, или неровно, или остался “мусор” — в конце концов, это по-прежнему мокап, он не предназначен для того, чтобы к нему присматривались с лупой.

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

Потом я убрал все элементы управления, которых в Hero Wars нет или которые не нужны этому окну. И заодно поменял заголовок окна, потому что мне пришло в голову новое название для фичи: “Темная Сделка”.

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

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

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

Для начала я не буду использовать доступ к исходникам, потому что он не всегда есть и это не всегда быстро, а возьму пару окон Hero Wars:

Нарежу из них элементы, как и раньше, и начну вставлять в полученный ранее мокап:

То же самое я проделаю со списком героев:

Вставлю все это в мокап и добавлю верхний заголовочный блок из другого окна:

Почти все готово, только я хотел бы, чтобы в итоговом интерфейсе у героев было что-то вроде постаментов. Кроме того, “плюс” на плейсхолдере для героя намекает на то, что на этот элемент можно нажать; но на самом деле это не так, нажимать нужно на героев в списке. Заодно стоит показать, как это окно выглядело бы с выбранным героем для усиления.

Получилось ли красиво? Я не знаю, смысл был не в этом. Можно ли это отдать на верстку программисту? Только если у вас нет UI-дизайнера, в противном случае не стоит. Смысл в том, чтобы создать максимально общее понимание того, как работает фича и “про что” она.

Инструменты: InVision, Unity или другой игровой движок, с которым вы умеете обращаться

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

Обычно этих вещей можно избежать, если попробовать превратить ваш мокап в интерактивный прототип. Для простых случаев я лично предпочитаю использовать InVision — это очень простой инструмент, который позволяет настраивать переходы между картинками при тапах (или кликах, или что вам надо) по определенным зонам этих картинок.

Вот что у меня получилось в итоге (когда на картинке непонятно, куда жать — нужно нажать куда угодно, и нажимабельные зоны подсветятся)

1.Оверполишинг

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

Придется искать какой-то баланс между качеством проработки и количеством потраченных на это усилий.

2. Lorem ipsum

Я много раз видел мокапы с текстами типа “две строчки текста” (отдельная ирония в том, что этот текст занимал одну строчку), “очень длинное имя игрока”, или просто “Lorem ipsum и так далее”.

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

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

3. Шутки и мат

Это еще одна яма, в которую я когда-то не раз падал.

Во-первых, как и с предыдущим пунктом, “заглушечные” тексты могут значительно отличаться по объему от реальных. Так, когда-то на мокапе окна апгрейда скилла я написал ему в описание, что он “призывает плюшевого Сатану”. Шутка всем понравилась, но когда дошло до реализации, все вспомнили, что реальные описания скиллов в нашей игре гораздо длиннее.

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

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

А теперь немного упражнений, на которых вы могли бы потренироваться! Присылайте результаты в комментарии или мне на почту: a.panfilov@protonmail.com

1. Адаптировать окна коллекции карт из Clash Royale под горизонтальный экран

Бонусное задание: представить, что вы делаете игру с механикой прокачки как в Clash Royale, но другим сеттингом — например, Лавкрафтианским. Отразить это на мокапе.

2. Нарисовать мокап окна героя для Hero Wars-подобной игры, но вертикальной.

Бонусное задание: перенести все в киберпанковый сеттинг.

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