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

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

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

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

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

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

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

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

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

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

  • Adobe Color
  • Paletton
  • Coolors
  • Colrd
  • Colorsupplyyy

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

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

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

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

Слева Tall Man Run от Supersonic Studios. Справа Backflip Master — Parkour Game от Voodoo

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

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

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

Dragon Island от Alohafactory

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

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

Money Run 3D от XGame Global

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

Archery Bastions: Castle War от AZUR GAMES

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

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

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

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

Truck Wars от Hoopsly FZE и TV Invasion от Yso Corp

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

Arm Simulator от Supersonic Studios

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

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

My Mini Mart от Supersonic Studios

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

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

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

Arm Simulator от Supersonic Studios

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

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

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

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

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

Слева Stickman Hook от Madbox. Посредине Knife Hit от Ketchapp. Справа Spiral Rider от Voodoo

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

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

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

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

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

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

Слева Money Run 3D от XGame Global. Справа Dragon Island от Alohafactory

Подытожим

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

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

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

Help Ukraine