Каша из топора-6: как создается аналог мобильной ролевой игры Darkest Dungeon

Руководитель студии Ole Pole Виталий Мороз написал цикл материалов о том, как создается игра Vikings Dungeon — любительская мобильная версия ролевой игры Darkest Dungeon.

В закладки

Содержание:

Первая часть

Вторая часть

Третья часть

Четвертая часть

Пятая часть

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

Виталий Мороз

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

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

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

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

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

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

{ "items": [{"title":"\u0418\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u044c \u0432 \u0431\u043e\u044e","image":{"type":"image","data":{"uuid":"b75bf293-7851-45a4-98fb-b17ddc735084","width":397,"height":221,"size":90589,"type":"jpg","color":"","external_service":[]}}},{"title":"\u041c\u043e\u043a\u0430\u043f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0431\u043e\u044f","image":{"type":"image","data":{"uuid":"c26739bc-5ee6-478d-94b1-c116e2443d65","width":397,"height":221,"size":112789,"type":"jpg","color":"","external_service":[]}}},{"title":"\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u0440\u044f\u0434\u0430","image":{"type":"image","data":{"uuid":"c5b5afc6-8fd9-46ec-a43a-7ddb0a3780e1","width":1920,"height":1080,"size":401276,"type":"jpg","color":"","external_service":[]}}},{"title":"\u00ab\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0441\u0445\u0435\u043c\u0430\u00bb \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432","image":{"type":"image","data":{"uuid":"bf9576e0-bde3-4aca-a420-1a2daa65e12e","width":766,"height":527,"size":474518,"type":"png","color":"","external_service":[]}}}] }

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

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

Проектирование интерфейсов — начало

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

У меня получился такой список экранов и их функций:

● Бой

○ перемещение (нет врагов)

○ бой

○ инвентарь

○ награды

● Рекрутинг

○ просмотр характеристик персонажа

○ найм персонажа

● Выбор миссии

○ карта

○ информация о миссии

● Больница

○ кого от чего лечим

● Вальгалла

○ возрождение павших героев

● Кузница

○ разборка предметов

○ сборка предметов

● Магазин

○ покупка предметов

○ продажа предметов

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

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

Беглый анализ задачи показывает, что в игре у нас будет множество списков — предметов, героев.Списки — это значит либо таблицы, либо ленты. Ленты могут быть горизонтальными и вертикальными — для ПК я бы предпочел вертикальные ленты, но для мобильного лучше использовать горизонтальные (думаю, выбор вполне очевиден).

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

Теперь попробуем запроектировать бой исходя из озвученных принципов.

Что игроку должен видеть в бою:

● Персонажи— свои и врага;

● Приемы — элементы управления персонажами;

● Инвентарь — дадим лечиться из инвентаря и активировать всякие предметы;

● Cами предметы;

● Кнопка вызова инвентаря;

● Деньги — даже если мы не будем делать Pay2Win-элементов с возможностью покупки чего-то прямо в бою, то все равно место под деньги лучше предусмотреть, вдруг мы потом добавим какие-то платные функции.

Вайрфрейм интерфейса боя

Конечно, к такому виду я пришел не за одну итерацию.

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

А вот как эволюционировала панелька с деньгами

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

Проектирование экрана рекрутинга и прочее

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

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

{ "items": [{"title":"\u0420\u0435\u043a\u0440\u0443\u0442\u0438\u043d\u0433 \u2014 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u043f\u0430\u0440\u0442\u0438\u0438","image":{"type":"image","data":{"uuid":"6d135c3a-400f-438e-839f-52a4e760d1ea","width":1920,"height":734,"size":274505,"type":"png","color":"","external_service":[]}}},{"title":"\u0420\u0435\u043a\u0440\u0443\u0442\u0438\u043d\u0433-\u0441\u0432\u0430\u0439\u043f \u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430","image":{"type":"image","data":{"uuid":"782d26f1-4e73-44b9-ad63-778181b23fd5","width":1467,"height":761,"size":223851,"type":"png","color":"","external_service":[]}}}] }

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

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

Экран Вальгаллы, варианты А и Б

Когда и тут был наведен порядок, я принялся за детализацию окон.

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

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

{ "items": [{"title":"\u0420\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438","image":{"type":"image","data":{"uuid":"1f414d32-736d-4d42-97fe-ff62d1507693","width":708,"height":954,"size":308957,"type":"png","color":"","external_service":[]}}},{"title":"\u0414\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430","image":{"type":"image","data":{"uuid":"d936ac12-9b4b-4a6d-adf6-b16d09943198","width":694,"height":359,"size":69122,"type":"png","color":"","external_service":[]}}},{"title":"\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043c\u043e\u043a\u0430\u043f \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439","image":{"type":"image","data":{"uuid":"8259865d-0ebd-4f2f-8eb1-064816797616","width":1999,"height":542,"size":334731,"type":"png","color":"","external_service":[]}}}] }

Чтобы мокап был понятнее и лучше смотрелся, я вставил туда кроме плейсхолдеров ещё и картинок-заглушек, которых нарезал из оригинального Darkest (т.к в финал они не пойдут, то ничего криминального в этом нет).

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

Схема компоновки под разные пропорции экранов

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

{ "items": [{"title":"\u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e","image":{"type":"image","data":{"uuid":"7c259e64-f393-4bc3-98aa-35a9a1d10104","width":1280,"height":720,"size":862506,"type":"png","color":"","external_service":[]}}},{"title":"\u0411\u043e\u0439 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438","image":{"type":"image","data":{"uuid":"818b63fa-c483-422f-a645-aa34a55bd47e","width":1280,"height":720,"size":885838,"type":"png","color":"","external_service":[]}}},{"title":"\u042d\u043a\u0440\u0430\u043d \u0440\u0435\u043a\u0440\u0443\u0442\u0438\u043d\u0433\u0430","image":{"type":"image","data":{"uuid":"dbd08d1e-0734-42aa-934a-b18a62121ef0","width":1280,"height":720,"size":621973,"type":"png","color":"","external_service":[]}}}] }

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

{ "author_name": "Николай Чумаков", "author_type": "editor", "tags": [], "comments": 0, "likes": 6, "favorites": 0, "is_advertisement": false, "subsite_label": "gamedev", "id": 1555, "is_wide": false }
{ "id": 1555, "author_id": 773, "diff_limit": 1000, "urls": {"diff":"\/comments\/1555\/get","add":"\/comments\/1555\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/1555"}, "attach_limit": 2, "max_comment_text_length": 5000 }

Комментариев нет 0 комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]