Рубрика развивается при поддержке
Gamedev
Олег Кочетков
2619

Проектирование уровней: молекулярный дизайн

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

В закладки
Аудио

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

Узлы – вершины, представляющие собой одну из локаций уровня. Параметры вершины:

  • Название;
  • Размер.

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

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

Ребро отображает переход из одной локации в другую. Параметры ребра:

  • Направление;
  • Толщина.

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

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

Между локациями может быть несколько рёбер. Например, между локацией А и Б есть слабая однонаправленная связь. Однако из локации Б при помощи скрытого прохода можно вернуться в локацию А:

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

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

1. Активности;

2. Враги;

3. Расходные предметы;

4. Усиления;

5. Секретные места;

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

Схематичное представление уровня полезно не только для проектирования локаций и переходов между ними, но и для анализа и оптимизации спроектированной карты.Полученный граф покажет, как много переходов между локациями вы спроектировали. Он поможет выделить максимально быстрый и максимально медленный пути следования игрока и исключить избыточные переходы между локациями – избыточный выбор пути вызывает такое же чувство фрустрации, как и отсутствие выбора:

После создания графа можно переходить к проектированию детального плана уровня:

Источник: https://www.gamasutra.com/view/feature/184783/the_metrics_of_space_molecule_.php

Заключение

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

Оригинал статьи впервые опубликован на telegram-канале "Кодзима Гений".

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Олег Кочетков", "author_type": "self", "tags": [], "comments": 11, "likes": 106, "favorites": 359, "is_advertisement": false, "subsite_label": "gamedev", "id": 62420, "is_wide": false, "is_ugc": true, "date": "Sun, 04 Aug 2019 21:33:27 +0300", "is_special": false }
0
{ "id": 62420, "author_id": 65752, "diff_limit": 1000, "urls": {"diff":"\/comments\/62420\/get","add":"\/comments\/62420\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/62420"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954, "last_count_and_date": null }
11 комментариев
Популярные
По порядку
Написать комментарий...
11

Дополнительно использую цветовое+символьное кодирование. Красная стрелка - проход заблокирован до выполнения условия (ключ), оранжевая - проход возможен при выполнении задачи во время прохождения (разбор завала, например). Код на стрелочке - нужное условие (на стрелке KEY1, например). Код в локации - выполнение условия для прохода по стрелке с нужным кодом (key1, например). Пунктирная стрелка - просматриваемая, но непроходимая область.

Ответить
0

Спасибо за статью, довольно эффективный подход!
А софт для этого существует?

Ответить
6

Можешь попробовать сайт draw.io

Ответить
0

Miro должен отлично подойти

Ответить
0

Любой рандомный бесплатный mindmap софт подойдет.

Ответить
0

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

Ответить
0

спасибо , очень полезные статьи. как раз изучаю level design. инфы конечно не много , но интересный приём

Ответить
2

Советую подробно изучить игры Arcane, в частности Dishonored 1 и 2. Просто погулять по уровням, потом попробовать самому воссоздать карту уровней, если конечно не запутаешься :)

Ответить
0

я считаю это высший пилотаж , наравне с ББ
но да , эта мысль была у меня

Ответить
0

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

Ответить

Прямой эфир

[ { "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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovz", "p2": "glug" } } }, { "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, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "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" } } } ]