Эволюция Township: как обновлять графику в игре, которой почти 10 лет
С момента выхода первой версии в 2011 году игра Township выросла в большой мобильный тайтл с плотным расписанием событий, множеством персонажей и новых фич, в который ежедневно заходят больше 4,5 млн человек. Поддержка такого масштабного проекта в течение многих лет — сложная задача для всей команды Playrix, в том числе и для арт-директора и художников.
За это время мы проделали титаническую работу — полностью перерисовали арты, контент, интерфейсы, улучшили UX. Разработали новый подход и пайплайн. В этой статье мы поделимся своим опытом и расскажем, как обновить графику и улучшить визуал игры с огромным количеством контента, сохранить при этом целостность картинки и общий стиль, а также поделимся планами развития фермы №1.
Немного истории…
2011 год — выход Township для социальных сетей.
Первая версия Township для социальных сетей появилась 10 лет назад и сразу попала в топ-50 игр на Facebook. Несмотря на успех проекта, компания изменила фокус на игры для мобайла. Так Township превратился из социальной игры в мобильную.
2013 год — выход Township для мобайла.
В 2013 году состоялся релиз мобильного Township — первого free-to-play проекта Playrix. К выходу мобильной версии мы обновили персонажей и частично перерисовали графику города, чтобы картинка хорошо смотрелась на экране телефона (разрешение экрана телефона было выше, чем на мониторе компьютера). Но глобально за редизайн всей меты никто не брался.
2022 год — Township не просто ферма, а целая площадка с огромным количеством механик и фич, которые связаны между собой.
Сейчас это крупный мобильный тайтл, в который ежедневно заходят больше 4,5 млн человек.
Аудитория Township
Пора менять графику
Со временем разница между новой и старой графикой стала ощутима. В городе одновременно могли находиться здание и 10-летней давности, и совсем свежее. Они отличались по цвету, уровню детализации, дизайну — все это разрушало целостность картинки.
Township 2011
Township 2022
Очевидно, что с этим нужно было что-то делать. Но игроки уже привыкли к старым образам зданий, и кардинально менять дизайн было нельзя. Иначе есть риск, что игрок может не найти нужную фабрику или загон с животными.
Перед нами стояла задача: как не “переделывая” полностью игру, привести ее графику к целостному и единообразному виду?
Мы решили двигаться итерационно и начать с системы игровых событий и сезонов. Они проходят регулярно, и мы сможем обновлять графику, сохраняя при этом стиль Township. В новой графике мы старались придерживаться единого подхода для отрисовки отдельных элементов и деталей, обращать больше внимания на композицию и идею декораций.
Как мы знаем, игра была изначально рассчитана на мониторы, а не экраны телефона, поэтому объекты на карте были прорисованы детально. При уменьшении формата вся детализация в лучшем случае была не видна, в худшем — создавала ненужный шум и дробила картинку. Для лучшего считывания объектов мы решили максимально упростить подход к отрисовке графики и продолжаем следовать этому подходу и сейчас.
Было
Стало
Мудборд
Перед разработкой графики сезона мы сделали мудборд. Это оказалось отличным решением, потому что помогло нам сохранить общий стиль сезона, цветовую гамму, настроение. Художникам стало удобнее работать, опираясь на мудборд.
Помимо референсов, мы накидываем в мудборд и идеи для наших основных окон: загрузочного экрана, главного окна сезона, мини-игр.
Разрабатывая мудборд для рождественского сезона, мы хотели не просто засыпать все вокруг снегом и поставить елку, как делали раньше, а передать правильную атмосферу, поиграть с освещением. Для сравнения, два загрузочных экрана. На первом мы просто отрескинили фон и переодели животных.
№1
А на втором — сделали рендер объемней и мягче, переделали графику животных, добавили новые элементы. Теперь мы рисуем фон каждый раз с нуля, используем декорации, которые можно получить в этом сезоне, и меняем здания на заднем плане, но основные элементы, как транспорт слева, положение персонажей, сохраняем.
№2
Графику животных мы переработали как в плане рендера, так и в плане концепта. Мы сохранили образ и характер персонажей, но немного освежили их и сделали более казуальными.
Концепт
После выпуска нескольких сезонов мы увидели положительный результат и решили обновить всю устаревшую графику в игре. Это коснулось практически всех уровней: основной меты, интерфейсов (как UI ,так и UX), мини-игр, комнат, коллапса и т. д.
Но обновить всю графику в игре одновременно невозможно — за 10 лет ее накопилось слишком много. Поэтому мы решили вносить изменения постепенно, начиная с самой ранней графики, которая больше всего выделялась на общем фоне.
На что мы обращали внимание, когда решили переделать графику проекта? В первую очередь мы смотрели на наши успешные игры — для нас это Fishdom и Wildscapes.
Wildscapes оказался очень близок нам по изометрии, а в Fishdom привлек более смелый подход к рендеру. Мы взяли лучшее из каждого проекта, сделали стиль Township более казуальным, упростив формы и смягчив контур в декорациях.
Мы выделили для себя главные моменты, на которые решили опираться.
1. Упор на интересную идею
На самом деле, это непростая задача — сделать одновременно что-то интересное и в общей стилистике города, особенно если тема этого не позволяет. Например, очередное кафе или беседку. Но и делать каждую декорацию максимально разнообразной тоже нельзя, ведь есть декорации, которые игрок получает за особенные задания (прохождение комнаты, мини-игры или при покупке Золотого билета), а есть обычные. Важно, чтобы декорация выглядела как реально существующее здание, а не домик на детской площадке или какая-нибудь фэнтезийная конструкция.
Ниже пример рескина поезда. Под каждый сезон мы делаем рескин техники в стиле сезона. В этот раз нам нужно было обыграть обычный товарный поезд в стиле диско. Мы сделали несколько скетчей с идеями и выбрали самые, на наш взгляд, удачные: магнитофон и ролики. Их мы и взяли в работу. До этого мы не делали ничего подобного, для нас это был смелый шаг.
Идея №1
Идея №2
Финальный результат
2. Поиск интересной композиции за счет более читаемого силуэта
Мы решили не изобретать велосипед и пойти по стандартному пути: акцент на главном элементе, а все остальное вторично и только подчеркивает основную идею, освободить центральные элементы, чтобы их силуэт считывался. Это особенно актуально в масштабе нашей игры.
Между этими двумя декорациями разница всего полгода, но изменения заметны сразу.
И
3. Упрощение за счет уменьшения детализации объектов в целом
Мы стали отказываться от мелочей, типа мелких заборчиков, перил, большого количества цветов на земле. Например, эта беседка в форме чайника. На первой картинке сложно догадаться, что на ней изображено, из-за обилия мелких деталей, которые будет сложно рассмотреть в игре. Мы сделали несколько итераций и остановились на самом лаконичном варианте.
Рендер
На следующем этапе мы стали следить за чистотой цвета. Мы старались избегать серых оттенков в тенях или выбеленных цветов в свету. При этом важно следить за тем, чтобы картинка не была слишком насыщенной.
Вот один пример маленькой декорации с домиком. Нашей целью было сохранить основные локальные цвета, но избежать лишней “грязи” (крыша, тени на крыше). Мы поработали с теплохолодностью, сделали цвета чище.
Еще несколько декораций в формате “было-стало”. Возможно, здесь не так очевидна разница, но поверьте, в игре она заметна больше. Где-то цвета не сильно поменялись, где-то мы выкрутили их посильнее и почистили от лишней детализации.
Потом мы пересмотрели подход к текстурам. Старые текстуры создавали много шума, и мы сильно упростили отрисовку крыш, стен и других деталей.
Можно увидеть, что на старых декорациях прорисован каждый кирпич, каждая черепица. Мы полностью отказались от этого подхода. Для обозначения деталей мы прорисовываем один-два кирпича. Этого оказывается достаточно, чтобы передать текстуру предмета.
Мы стали больше обращать внимание на объем объектов. Внимательнее простраивать освещение, теплохолодность и т. д. На примере персонажей с загрузочного экрана видно, что мы ушли от жестких граней и переходов между светом и тенью, сделали рендер мягче.
Еще нагляднее это видно на примере зданий. Здесь мы поменяли ракурс, поработали с теплохолодностью и освещением.
Еще одна щекотливая тема для нашей команды — это контур, который есть у всех объектов на карте. Мы очень хотели от него отказаться, но не могли себе это позволить, иначе разница между новой и старой графикой была бы слишком заметна. Мы решили его сохранить, но сделать намного мягче по цвету. Контур выступает больше как стилевая особенность, чем выделение “залипающих мест”, все элементы здания и без него должны хорошо читаться.
Рескин персонажей
На самом деле, персонажей мы начали переделывать раньше, чем графику города. При переходе на мобайл всех персонажей перерисовали заново, и можно было так все и оставить, они выглядели вполне неплохо. Но проблема в том, что новая графика выглядела уже по-другому, к тому же у нас появилась фича с восстановлением комнаты, и старый рендер персонажей плохо вписывался в новую графику.
Сам дизайн и образы персонажей мы старались максимально сохранить. Исправили только некоторые огрехи в анатомии и рендер — он стал мягче и проще для восприятия.
Главное окно сезона
Раньше UI-окно выглядело очень просто: обычная рамка с небольшим декорированием.
Теперь это полноценная иллюстрация. Мы оформляем UI-часть таким образом, чтобы она максимально лаконично вписывалась в окружение. Это касается как рамки окна, так и наполнения.
UI
Главная проблема, которая была в UI — он везде был разный. Иконки, кнопки, подача элементов в разных окнах различались, как и подача прогресс-баров, ракурс иконок и их рендер.
Первое, что мы сделали — это унифицировали элементы UI в мини-играх. Поправляя эти недочеты, мы параллельно исправляли качество отрисовки. Хотелось, чтобы и UI, и графика в игре были в одном стиле.
Это пример коллапса “было-стало”. Мы переделали фишки, сделали новые бустеры, подачу целей.
В мини-играх типовые окна структурно отличались друг от друга. Там была разная верстка, разные подходы к оформлению и отрисовке. Вместе с гейм-дизайнерами мы провели большую работу — заменили крупную красную кнопку “сдаться” рядом с кнопкой “продолжить” на крестик в углу поп-апа, чтобы улучшить пользовательский опыт; сделали больший акцент на бонусах, чтобы сильнее мотивировать пользователя продолжить играть; вынесли персонажа за пределы окна, чтобы привлечь внимание к самому окну, а также добавили анимацию персонажу, чтобы усилить эмоциональный эффект.
Отрисовку окна скидки привели к общей стилистике с ключевыми фичами проекта и сделали его оформление богаче и интереснее. Например, сделали кнопки покупки объемнее и кликабельнее, убрали лишние элементы (таймер, кнопку хелпа и т. д.), но при этом мы сохранили акцент на важной информации для игрока — величине скидки.
Мини-игры
Долгое время мини-игры не меняли свой внешний вид. К изменениям в мини-играх мы подходили осторожно, чтобы не отпугнуть игрока новой подачей.
Потом мы начали делать рескин мини-игр под сезоны. Решили не просто обойтись добавлением тематических элементов на фон и переодеванием персонажей, а практически полностью обновить графику. На примере ниже можно увидеть новый подход к отрисовке фона, обновленного персонажа и препятствия. Мы переделали центр событий, обновили UI.
Другие игры для сезонов также не оставили без внимания. Нам было важно, чтобы все, что мы меняем в сезоне, смотрелось цельно.
Планы на будущее
За почти 10 лет своего существования Township прошел огромный путь. Если сейчас сравнить первую версию проекта с актуальной версией из сторов, то выглядят они как две совсем разные игры. Все это время мы поддерживали и развивали проект, обновляли визуал и следили за тем, чтобы все выглядело целостно и актуально. За всеми изменениями стоят усилия большой команды — от арт-директора до художников.
Мы полностью пересмотрели подход к графике и сейчас уже не оглядываемся назад, а ориентируемся только на новые требования. Пока мы провели редизайн лишь части проекта, но уже изменили большую часть персонажей и начали вводить новых, переработали UI, запустили новые мини-игры, которые планируем дополнять. Недавно вышли полностью переработанные 10 уровней в зимнем рескине.
В будущем изменения коснутся всей игры. Проект постоянно растет, добавляются новые фичи, в которых можно экспериментировать. Например, в мини-играх мы тестируем разные подходы, которые позволяют нам сохранить общую стилистику, но изменить технику отрисовки.
Процесс обновления графики — бесконечный, и мы продолжим делиться с вами своим опытом и наработками, а пока пишите в комментариях, какие темы вас интересуют и задавайте вопросы, мы обязательно ответим!