Улучшаем графику в Muscles And Bullets за неделю

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

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

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

Но вернемся к нашей "Muscles And Bullets".

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

Помимо этого, мы давно заметили небольшие "лаги" при стриминге игры и просмотре роликов на YouTube (особенно в FullHD) и собственно их мы связываем с высокой детализацией картинки и, особенно с камешками почвы. Сложная картинка в видео-потоке требует большей пропускной способности интернет-канала. В общем, как вы уже поняли, мы решили картинку немного прокачать.

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

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

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

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

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

Вопрос с контрастностью камней мы решили следующим способом.

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

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

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

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

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

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

Поэтому мы добавили к имеющимся эффектам цветокоррекцию и вынесли в опции параметр "гамма", после чего по умолчанию подсветили всю картинку.

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

А как вам новая картинка? Делитесь своим мнением в комментариях :)

Группа VK: https://vk.com/musclesandbullets
Игра: https://yadi.sk/d/SScar2K93Jy8qA