Первичный и вторичный дизайн в гипер-казуальных играх

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

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

На заглавной картинке статьи представлен проект Blob Runner 3D от Rollic Games, в игре четко выделяется каждый элемент дизайна и сейчас мы обсудим как достичь такого результата.

Как определить и выделить важные элементы?

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

Элементы в гипер-казуальных играх:

• Главный объект, персонаж или инструмент, которым управляет игрок
• Ресурсы или бонусы, которые игрок собирает
• Опасные места или враги, которых игрок избегает

Главные элементы визуально отделяют от второстепенных: декор, фон и так далее. Далее рассмотрим 5 советов, как можно достичь этой цели.

Выбирайте контрастные цвета

Объект, фон и игровое поле отличаются по цветам. Разработчики выбирают контрастные цвета и следят за тем, чтобы цвета в палитре дизайна игры хорошо смотрелись рядом друг с другом. Для этого используют ряд инструментов:

• Adobe Color
• Paletton
• Coolors
• Colrd
• Colorsupplyyy

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

Рассмотрим пример с базовыми фигурами: слева игроку неясно, какой объект главный и на чем сосредотачиваться. Справа пример гораздо очевиднее.

Давайте рассмотрим конкретный, игровой пример. Желтый человек сразу заметен на синем фоне на первом скриншоте, потому что эти цвета в противоположных сторонах цветового круга.

На втором скриншоте выделяется красный пиджак — это антагонист синего цвета. Принимая синий цвет, как и брюки, персонажа было бы сложнее выделить на фоне аналогичного цвета.

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

На первом скриншоте красная рыбка плавает в синем пруду — фон и объекты противоположных цветов. Предметы, с которыми игрок взаимодействует под водой, также синие.

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

Необходимо убедиться, что объекты и фон отличаются по тону.

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

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

Учитывайте цветовые ассоциации

Каждый цвет вызывает ассоциации в сознании человека. Красный цвет воспринимается как агрессивный, синий — как спокойный, а зеленый — как естественный и безопасный.

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

На первом скриншоте видно, что два объекта враждуют. Это понятно по противоположным цветам. Второй и третий скриншоты показывают, как легко обозначить цветом объекты: синий безопасный телевизор и опасный — красные мониторы.

Разработчики используют цветовую палитру, чтобы помочь игроку ориентироваться. Например, в игре Arm Simulator объекты, с которыми взаимодействует игрок, выделены красным цветом.

Добавьте контур вокруг объектов

Иногда цветовые ассоциации не дают удовлетворительных результатов и дизайнеры специально выделяют объекты. В этом случае используют действенный способ — обвести предмет контуром.

Когда основные объекты выделены, обращают внимание на второстепенные, которые скрывают, чтобы сцена не выглядела перегруженной.

Не перегружайте фон

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

Как скрыть ненужные элементы?

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

Цветовые градиенты — еще один способ разнообразить фон. Лучше выбирать цвета, похожие друг на друга: темно- и светло-синий, зеленый и бирюзовый и т.д.

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

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

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

Выбирайте правильные цвета для неинтерактивных объектов

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

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

Этот прием поможет объектам слиться и выглядеть во время игры как единое целое. В примерах ниже, здания окрасили в тот же цвет, что и небо, а камни похожи на землю.

Важно помнить о контрасте: фон и неинтерактивные объекты должны сильно отличаться по цвету и тону, иначе будут выглядеть как одна глыба.

Подытожим

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

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

Умный выбор цвета, учет ассоциаций, контурирование, текстурирование и отвлечение внимания от фоновых и неинтерактивных объектов, составляют основу ясного, интуитивного и легкого для восприятия дизайна.

 343