Руководство
по heatmap для
анализа игрового уровня
Руководство по heatmap для анализа игрового уровня
Уровень• Метрология » Измерительные приборы и оборудование » Уровень (инструмент) сложности
Средний
Время на прочтение
9 мин
Количество просмотров
37
Блог компании Serverspace Разработка игр * Дизайн• Дизайн игр * Игры и игровые консоли• Отдых, развлечения » Развлекательные игры » Компьютерная игра » Игровые приставки
Визуализация данных *
Мнение
Привет, Хабр! В этой статье мы разберемся, как тепловые карты (heatmaps) могут
стать мощным инструментом для анализа поведения игроков и оптимизации дизайна• Дизайн
игровых уровней. Тепловые карты позволяют выявить скрытые закономерности в
том, как игроки взаимодействуют с игрой: где они часто погибают, какие пути
выбирают, и какие зоны карты остаются неизведанными. С помощью этих данных
разработчики могут принимать обоснованные решения, улучшая баланс и
увлекательность уровней• Метрология » Измерительные приборы и оборудование » Уровень (инструмент). В этой статье мы создадим тепловую карту с
использованием Python и рассмотрим, как это помогает в практике разработки
игр.
Аналитика в играх в первую очередь сосредоточена на удержании игроков,
монетизации и пользовательском опыте. Важной частью анализа игр на ПК и
консолях является улучшение левел дизайна• Дизайн. Игроки часто неправильно
интерпретируют дизайн уровня и используют его таким образом, что это создает
худший ( как минимум не лучший ) опыт как для игрока, что плохо как для него
самого, так и для разраюотчика. Плохой пользовательский опыт может привести к
неудовлетворенности, фрустрации и оттоку игроков.
Что такое тепловая карта или хитмап?
Когда анализируются пространственные данные• Информационные технологии » Геоинформационные системы, такие как траектории движения
игроков, частотность игровых смертей или места размещения предметов, один из
лучших способов извлечь инсайты — это построить тепловую карту (heatmap) .
Предположим, у вас есть данные о движении в двух или трех измерениях. Эти
данные снимаются каждые N секунд и фиксируют координаты игрока X и Y (а иногда
и Z). Как только вы получите эти данные от команды разработчиков,
тестировщиков или фокус-групп, тепловая карта может предоставить массу
полезной информации.
Тепловые карты активно используются в крупных играх для оптимизации карт и
балансировки игрового процесса• Отдых, развлечения » Развлекательные игры » Компьютерная игра » Механизмы компьютерных игр » Геймплей. Например, в игре Overwatch тепловые карты
помогали разработчикам понять, какие участки карты игроки используют наиболее
часто, где происходят интенсивные сражения и какие зоны остаются
незадействованными. Эти данные позволяли улучшить баланс карт, а также
корректировать места для стратегического размещения объектов и препятствий. В
результате игры становились более увлекательными и динамичными, что
способствовало лучшему восприятию уровня• Метрология » Измерительные приборы и оборудование » Уровень (инструмент) и повышению удовлетворенности
игроков.
Пример хитмапы для Overwatch
В зависимости от типа игры можно ответить на следующие вопросы:
Какие участки уровня• Метрология » Измерительные приборы и оборудование » Уровень (инструмент) должны быть игнорируемыми игроками, но почему-то ими
используются?
Где игроки обычно прячутся от босса, чтобы избежать его атак?
Существует ли паттерн в том, как игроки движутся по уровню• Метрология » Измерительные приборы и оборудование » Уровень (инструмент), и соответствует ли
это задуманному дизайну• Дизайн?
Есть ли объекты, которые не подбираются просто потому, что их никто не может
найти?
Есть ли места, которые игроки злоупотребляют для убийства других игроков
(PvP)?
Есть ли слабые места, где игроки постоянно погибают?
Пример
Для простоты рассмотрим двумерные графики. Данные — это координаты Unreal от
нескольких игроков, проходивших этот уровень• Метрология » Измерительные приборы и оборудование » Уровень (инструмент).
Давайте воспользуемся hist2d от Matplotlib и histplot от Seaborn в качестве
отправной точки.
Histplot
Если мы посмотрим на значения плотности, то увидим, что минимальная плотность
в этой сетке размером bins_number * bins_number равна 0, а максимальная
плотность превышает 700. Имейте в виду, что если мы изменим количество ячеек
(bin number), плотности в каждой "ячейке" будут различаться.
bins = 100 sns.histplot(data=pos_data, x="pos_x", y="pos_y", bins=bins,
cbar=True, pmax=1)
Здесь мы видим поле действия и некоторые тропинки, а также место с высокой
плотностью в самом центре
Hist2d
plt.hist2d(pos_data.pos_x, pos_data.pos_y, bins = bins)
Потенциальные проблемы
Эти непрерывные цветовые карты трудно воспринимаются. Обычно люди плохо
различают мелкие оттенки, и на этих графиках видно лишь три цвета• Государство » Государственные символы » Гимны » Три цвета (гимн): один для
низких значений, один для средних и один для высоких значений. Все нюансы
легко теряются, особенно для людей с дефектами зрения.
Паттерны в данных не всегда очевидны. На графике histplot видно много областей
с низкой плотностью, но истинные паттерны едва заметны. На графике hist2d
ситуация немного лучше, так как яркие цвета лучше контрастируют с
темно-фиолетовым фоном, но поле действия теряется.
Если вы создаете тепловую карту для себя, можете использовать решение, которое
вам подходит. Однако если вы собираетесь поделиться результатами с другими
заинтересованными сторонами, стоит подумать о том, как они воспримут
информацию, чтобы она была понятной.
Как улучшить тепловую карту
Используйте дискретные цветовые карты
Люди не всегда хорошо различают оттенки. Лучше выбрать ограниченную палитру с
яркими различиями между цветами.
Пример дискретной цветовой карты
Попробуйте палитру от холодного к теплому
Палитры от холодного к теплому работают лучше для пространственных тепловых
карт, так как плотность только увеличивается, а не уменьшается. Если вы
используете монохромную палитру, вы можете эффективно показать около трех
уровней• Метрология » Измерительные приборы и оборудование » Уровень (инструмент) плотности.
Пример последовательной цветовой карты
Пример расходящейся цветовой карты «тепло-холод». Обратите внимание на белый
цвет посередине для нулевого значения
Проверьте увеличение яркости
Если цвет воспринимается неправильно, важно, чтобы изменения в яркости были
различимыми, особенно для людей с нарушениями цветового восприятия.
Хотя эти цвета воспринимаются по-разному, их яркость одинакова.
Как использовать кастомную цветовую карту
Многие библиотеки по умолчанию используют минимальные и максимальные значения
в наборе данных плотности и линейно отображают их на цветовую палитру. Однако
это может привести к потере деталей в некоторых областях.
Что должно быть на тепловой карте
Места на уровне• Метрология » Измерительные приборы и оборудование » Уровень (инструмент), которые используются в целом
Места, которые используются довольно часто, формируя пути
Места, где происходит действие
Места с экстремальной плотностью
Что можно исключить из тепловой карты
Места, где плотность близка к нулю. Если из всех игроков только один дошел до
точки A, мы обычно считаем, что «игрокам трудно найти точку A». Таким образом,
плотность на пути к точке A не будет нулевой, но она будет мизерной.
Пример Matplotlib
1. Создайте пользовательскую палитру
В палитре 11 разных цветов - от бело-холодно-голубого до красно-черного.
Несмотря на то, что эти цвета не выглядят слишком жизнерадостными или
хипповыми, они были подобраны таким образом, чтобы менять оттенок и яркость в
заметных пределах.
Пример цветовой палитры от холодного к теплому
Если палитра десатурирована, она выглядит следующим образом:
multicolor = ["#ffffff", "#e2eeff", "#c3d8f9", "#80bdff", "#42b0f5",
"#a0e242", "#d1cb1c", "#a06a20", "#872a10", "#630d02", "#000000"]
2. Сделайте количество ячеек переменным
В зависимости от ваших данных и целей необходимо выбрать соответствующий
уровень• Метрология » Измерительные приборы и оборудование » Уровень (инструмент) детализации. Для уровней игры обычно достаточно квадратного метра.
Большие ячейки помогут вам выделить более крупные участки интереса, в то время
как меньшие ячейки помогут выявить часто используемые или перегруженные места.
3. Создайте собственный метод отображения
3.1 Вычисление плотностей
Так как нам нужно больше деталей в определенных местах, одним из способов
создания карты плотности является использование персентилей *. Сначала мы
вычисляем двумерную гистограмму и сохраняем значения плотности.
* Персентиль — это статистическая мера, которая делит набор данных на 100
равных частей, каждая из которых представляет собой 1% от общего числа данных.
Таким образом, персентиль показывает, насколько данные расположены по
сравнению с остальными.
densities,_,_ = np.histogram2d(pos_data.pos_x, pos_data.pos_y, bins=bins)
3.2 Выберите персентели
Обычно тепловая карта в 2D накладывается на изображение реального уровня• Метрология » Измерительные приборы и оборудование » Уровень (инструмент). В
зависимости от того, какие вопросы мы хотим решить, иногда не стоит
перегружать тепловую карту цветом для мест, куда игроки не ходят или посещают
очень редко. В то же время мы хотим выделить пути и места, где игроки ходят
больше всего.
Один из способов достижения этого — создать линейный набор персентилей с двумя
плотными точками в начале и в конце.
Первый персентиль будет выявлять области с очень низкой плотностью, затем мы
можем пройти через каждый 10%-ный интервал до 99-го персентиля. Значения между
99-м и 100-м персентилем будут указывать на чрезвычайно плотные участки.
percentiles = [0,1,10,20,30,40,50,60,70,80,99,100]
Затем мы находим границы для нашей цветовой карты. Если мы возьмем набор
данных плотности в его исходном виде, существует вероятность, что многие
значения будут равны 0, потому что даже если наш уровень• Метрология » Измерительные приборы и оборудование » Уровень (инструмент) не является
прямоугольной сеткой, такая сетка создается при вычислении двумерной
гистограммы. Эти «ячейки» могут не быть на самом уровне• Метрология » Измерительные приборы и оборудование » Уровень (инструмент), но они образуются при
пересечении координат и заполняются нулями.
Чтобы избежать этого, можно использовать уникальные значения из набора данных
плотности.
bounds = [] for i in percentiles:
bounds.append(np.percentile(np.unique(densities),i))
Создайте карту цветов и постройте гистограмму
cmaplist = multicolor cmap = mpl.colors.LinearSegmentedColormap.from_list(
'Custom cmap', cmaplist, len(percentiles)) norm =
mpl.colors.BoundaryNorm(bounds, cmap.N) plt.hist2d(pos_data.pos_x,
pos_data.pos_y, bins = bins, norm = norm, cmap = cmap) cbar =
plt.colorbar(ticks = bounds) plt.show()
Результат будет выглядеть вот так:
Весь код:
import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt
multicolor = ["#ffffff","#e2eeff", "#c3d8f9","#80bdff", "#42b0f5", "#a0e242",
"#d1cb1c", "#a06a20", "#872a10", "#630d02", "#000000"] bins = 100
densities,_,_ = np.histogram2d(pos_data.pos_x, pos_data.pos_y, bins=bins)
percentiles = [0,1,10,20,30,40,50,60,70,80,99,100] bounds = [] for i in
percentiles: bounds.append(np.percentile(np.unique(densities),i)) cmaplist =
multicolor cmap = mpl.colors.LinearSegmentedColormap.from_list( 'Custom cmap',
cmaplist, len(percentiles)) norm = mpl.colors.BoundaryNorm(bounds, cmap.N)
plt.hist2d(pos_data.pos_x, pos_data.pos_y, bins = bins, norm = norm, cmap =
cmap) cbar = plt.colorbar(ticks = bounds) plt.show()
Фильтрация• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса и сглаживание данных для улучшения тепловых карт
Когда мы строим тепловую карту на основе данных, важно учитывать, что исходные
данные могут содержать шум, что приведет к появлению незначительных или
искаженных участков на карте. Одним из способов борьбы с этим является
использование алгоритмов фильтрации• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса и сглаживания, чтобы исключить редкие или
малозначительные значения, которые могут "загрязнять" карту и затруднять
анализ. Например, если игроки посетили определенную точку лишь один раз, это
не обязательно указывает на важность этого места — скорее, это случайность,
которую стоит исключить. Для этого можно применить фильтрацию• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса по плотности,
исключив участки с плотностью ниже определенного порога, или сглаживание
данных, чтобы уменьшить влияние отдельных выбросов.
Пример фильтрации• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса по плотности
Одним из способов фильтрации• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса данных является исключение точек с низкой
плотностью, которые могут быть вызваны редкими событиями. Для этого можно
установить минимальный порог плотности, ниже которого данные будут
игнорироваться. Например:
import numpy as np # Пример данных плотности densities = np.array([[0, 1, 0,
5], [0, 0, 0, 3], [0, 4, 2, 0]]) # Устанавливаем порог плотности threshold = 2
# Фильтруем данные, исключая все значения ниже порога filtered_densities =
np.where(densities < threshold, 0, densities) print(filtered_densities)
Этот код исключает все данные с плотностью ниже 2, устанавливая их в 0. Это
позволяет убрать малозначительные данные и сфокусироваться на реальных
паттернах.
Пример сглаживания данных
Для устранения "шума" можно применить сглаживание с помощью среднего или
медианного фильтра• Информационные технологии » Информатика » Компьютерная графика » Цифровая Обработка Изображений » Медианный фильтр. Один из подходов — это использование движущегося окна .
Например, для 2D-гистограммы с плотностью можно применить фильтрацию• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса с
использованием гауссового фильтра, который плавно распределяет значения
плотности по окружающим точкам.
from scipy.ndimage import gaussian_filter• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса # Применение гауссового фильтра для
сглаживания smoothed_densities = gaussian_filter• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса(filtered_densities, sigma=1)
print(smoothed_densities)
В этом примере применяется Гауссов фильтр с параметром sigma , который
контролирует степень сглаживания. Чем больше значение sigma , тем сильнее
сглаживаются данные.
Гауссов фильтр работает на основе следующей формулы:
Формула Гаусса
Используя такую фильтрацию• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса, мы можем уменьшить влияние шумных данных и сделать
тепловую карту более четкой и информативной.
Кроме того, можно использовать медианный фильтр• Информационные технологии » Информатика » Компьютерная графика » Цифровая Обработка Изображений » Медианный фильтр , который заменяет значение в
каждой ячейке на медиану значений в его окрестности. Это особенно полезно для
устранения выбросов, которые могут сильно искажать тепловую карту.
from scipy.ndimage import median_filter• Информационные технологии » Информатика » Компьютерная графика » Цифровая Обработка Изображений » Медианный фильтр # Применение медианного фильтра• Информационные технологии » Информатика » Компьютерная графика » Цифровая Обработка Изображений » Медианный фильтр
median_smoothed = median_filter• Информационные технологии » Информатика » Компьютерная графика » Цифровая Обработка Изображений » Медианный фильтр(filtered_densities, size=3)
print(median_smoothed)
Этот код применяет медианный фильтр• Информационные технологии » Информатика » Компьютерная графика » Цифровая Обработка Изображений » Медианный фильтр с размером окна 3, что помогает уменьшить
влияние отдельных выбросов в данных.
Заключение
Тепловая карта — это не просто инструмент визуализации, а мощный аналитический
механизм, который может значительно улучшить качество игрового уровня.
Разработчики могут использовать этот метод для улучшения баланса, повышения
интереса к различным участкам карты и исключения избыточных или
малозначительных зон. Важно помнить, что нет универсальных решений : наилучший
подход всегда зависит от контекста и целей проекта. Размещение тепловых карт
на изображении уровня• Метрология » Измерительные приборы и оборудование » Уровень (инструмент), а также фильтрация• Информационные технологии » Информатика » Обработка сигналов и изображений » Обработка сигналов » Фильтр Гаусса и сглаживание данных позволяют
делать их более информативными и удобными для восприятия. Если вы только
начинаете работать с такими инструментами, это руководство станет отличной
отправной точкой для дальнейших экспериментов и анализа.
Источники:
A Heatmap guide for game level analysis by Daria Rodionova
Статья поддерживается командой Serverspace .
Serverspace — провайдер облачных сервисов, предоставляющий в аренду
виртуальные серверы с ОС Linux и Windows в 8 дата-центрах• Телекоммуникации и связь » Компьютерная сеть » Интернет: Россия• Россия, Беларусь• Беларусь,
Казахстан, Нидерланды, Турция, США• Соединённые Штаты Америки (США), Канада и Бразилия. Для построения
ИТ-инфраструктуры провайдер также предлагает: создание сетей, шлюзов, бэкапы,
сервисы CDN, DNS• Телекоммуникации и связь » Компьютерная сеть » Интернет » DNS, объектное хранилище S3 .
IT-инфраструктура | Удвоение первого платежа по коду HABR