Radar Chart and Its Power

Вы когда-нибудь слышали про лепестковые диаграммы (aka web chart, spider chart, star plot, cobweb chart, irregular polygon, polar chart, и Kiviat diagram). Если да, то круто! Нет? Тогда присаживайтесь, сейчас разберемся, что это такое и когда пригождается.

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

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

Подготовительные работы

Пусть в выдуманном проекте буду роботы (кхе-кхе, это уже классика примеров, надо придумать что-то ещё), у каждого из которых есть статы:

1. HPs — здоровье;
2. DEF — защита;
3. SPD — скорость;
4. DMG — урон;
5. DEX — ловкость.

Выделяем нужные значения и строим лепестковую диаграмму:

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

1. HPs: [50; 100];
2. DEF: [10; 200];
3. SPD: [1; 10];
4. DMG: [100; 1000];
5. DEX: [1; 10];

Соответственно, если оставить всё как есть, то график будет выглядеть криво, так как DMG будет всегда выделяться, а SPD и DEX будут совершенно незаметны. Следовательно, надо перейти к относительными величинам. Будем считать, какой % составляет каждая из величин от её отрезка допустимых значений:

value - minValue / maxValue - minValue

• value — конкретное значение величины;
• minValue — минимальное значение, например, у DEX оно 1;
• maxValue — максимальное, например, у SPD оно 10.

Например, если HPs = 75, то его относительно значение - 50%.

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

Теперь в таблице есть 2 листа:

1. Robots. Содержит роботов, у каждого есть брат, который отражает относительные значения величин.
2. Stats. Содержит статы.

Если инженеры должны делать гибкий код, то дизайнеры — гибкие таблицы, поэтому было сделано следующее:

1. Именованный диапазон характеристик StatsData;
2. Дублирующие данные диапазона StatsData на листе роботов через =ТРАНСП(StatsData), так как данные используются для расчета относительных значений, а огромное число =VLOOKUP не очень хорошо;
3. Общая формула для расчета всех относительных значений, =ARRAYFORMULA(ЕСЛИ(D6:6 > 0; ОКРУГЛ((D6:6 - D$2:$2) / (D$3:$3 - D$2:$2); 2); "")), то есть мы считаем не каждую характеристику по отдельности, а берем всю строку и делаем с ней одинаковые действия, а именно:
1. Проверяем, что абсолютные значения больше 0;
2. Если всё ок, то считаем какой процент составляет каждая из характеристик из соответствующего ей диапазона;
3. Иначе пустая строчка.
4. Специальное выделение для столбца ID, так как оно считается само;
5. Особое обозначение имён дополнительных роботов, начинающиеся с «#».

Важные моменты:

1. Специальные выделения стоит фиксировать, например, в условном Sheets Style Guide;
2. Особое символы дублирующих или расчетных данных также стоит фиксировать;
3. Всё это было сделано лишь для того, чтобы при добавлении/удалении характеристики ничего не могло сломаться;
4. Дополнительные данные по-умолчанию скрыты;
5. На абсолютные значения были накинуты кастомные проверки вида =ЕСЛИ(И(C4 >= C$2; C4 <= C$3); 1; 0), то есть значение должно попадать в отрезок допустимых.

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

Построение диаграммы

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

По настройкам диаграммы:

1. Строки/столбцы включены (в нашем случае);
2. Сглаживание отключено в стиле диаграммы.

Готово! У нас есть диаграмма, через которую мы можем сравнивать роботов или смотреть на их характеристики в более удобном виде.

Power

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

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

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

1. Синус угла находим через количество характеристик N. =SIN(РАДИАНЫ(360/N)), так как весь круг, то есть 360° разбивается на N равных частей;
2. Стороны — значения характеристик;
3. Перемножаем величины из предыдущих пунктов, делим на два, получаем площадь одного треугольника. Осталось так сделать с каждыми соседними характеристиками, то есть треугольниками.

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

В процессе проценты стали просто числами, но сути это не меняет. Теперь точно всё!

Таблица доступна по ссылке.

Определенно в таблице есть минусы, например, отсутствие истории обновлений, фильтра по роботам и так далее... но идея раскрыта.

Заключение

Знание о существовании такого вида диаграммы может пригодиться, потому что она сильно упрощает визуализацию характеристик и мощи сущности. Игрок может бегло посмотреть на диаграмму и понять, какие есть слабые / сильные стороны у объекта или в чём он уступает другому объекту.

Однако, у неё есть определенные минусы:

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

Примеры в реальных проектах:

Примеров ещё много: PUBD, FIFA, Stellaris, Tennis Manager, Captain Tsubasa, etc. В некоторых из них, например, в Wild Rift, используется как отображение стиля игры игрока.

Теперь точно всё! Графиков сегодня было много, самое время поиграть в какой-нибудь тайкун, где их будет не меньше, например, в Cartel Tycoon.

Сюжетный бизнес-симулятор Cartel Tycoon вдохновлен историей наркоторговли в 80-х годах. Расширяйте свою сеть и поглощайте другие, не привлекая внимания конкурентов и властей.

by Chaotic Game Design