Психология зрительного восприятия. Заметки на полях Match-3. Часть 1.

За 12 лет существования компанией Playrix было выпущено много казуальных PC-игр различных жанров, но match-3 всегда оставался основным среди них. С 2011 года компания перешла на разработку мобильных free-to-play приложений. Это привело к переосмыслению многих рабочих процессов, в том числе и графики.

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

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

1. Графическая перегруженность уровней.

Из-за ориентированности на бесконечный игровой процесс добиваться хорошего визуального результата при добавлении новых игровых элементов становится сложнее. С одной стороны, их нужно вписать в готовый визуальный ряд, сохраняя графическую целостность. А с другой стороны, игровой объект на поздних уровнях несет важнейшую смысловую нагрузку – стимулировать заинтересованность в продолжении игры и вызывать больший эмоциональный отклик. Как следствие, игровые уровни могут стать зрительно перегруженными.

 2.  Условность vs Образность.

Эта проблема связана с одним из важнейших принципов композиции – обеспечение художественной целостности проекта, единство целого и частей. При поиске новых изобразительных приемов образ игрового объекта часто передается условно, и это художника сбивает с толку. Например, нам приходится соединять на игровом поле одновременно линейную перспективу и аксонометрию, 3D-объект и векторную графику. Художник в этом видит нарушение целостности, но гейм-дизайнер настаивает на абстрагировании. И здесь параллельно возникает третья проблема.

 3. Субъективность восприятия.

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

Итак, три проблемы, которые здесь будут рассмотрены, обозначены.

Решение 1-ой проблемы.  

Основное отличие free-to-play match-3 игр от классических скачиваемых для ПК в ориентированности на бесконечность игрового процесса. Например, в наш проект Fishdom каждую неделю добавляется 25 новых уровней. И на данный момент этих уровней уже 1500.

Раньше для игр на PC мы могли позволить себе создавать в рамках одной игры несколько наборов фишек, меняя их от уровня к уровню и делая таким образом визуальный ряд более разнообразным. Другие же игровые элементы (бонусы, блокирующие элементы и т.д.) на протяжении всей игры оставались постоянными. 

C free-to-play моделью все изменилось наоборот. Набор фишек стал строго фиксирован постоянным набором из шести фишек, а игровых элементов стало гораздо больше. Здесь мы и столкнулись с проблемой графической перегруженности. Попробуем в ней разобраться.

Объём внимания у взрослых обычно колеблется в пределах от 4 до 6 объектов. Например, в шахматах всего 6 фигур и 2 цвета. Фишек в игре тоже 6, но они все индивидуальны не только по форме, но и по цвету. К тому же добавляется ряд других игровых элементов.

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

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

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

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

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

Например:

• основные 6 фишек;
  
• элементы, заполняющие целиком ячейку поля и повторяющие ее форму – квадрат (камень, доски, плитки);
  
• образующие сплошной массив без видимого разделения на ячейки (земля, нефть);
• залоченные элементы внутри квадратных;
• объекты, располагаемые поверх фишек (лед, цепи);
  
• объекты, занимаемые площадь более 1 клетки (айсберг, гейзер);
  
• живой анимированный персонаж, если все окружение предметно (кальмары);
• ахроматичные объекты (покрышки) и т.д.

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

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

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

Если взглянуть на игровые элементы выше, то вычленить из них какую-то обособленную группу практически невозможно.

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

Три пространства картинной плоскости

Однажды на проекте Sky Charms наша команда разработчиков столкнулась с такой ситуацией. Графический контент для match-3 был уже практически готов. Шла стадия полировки. В какой-то момент фишки стали проигрывать другим игровым элементам. Они выглядели плоскими в сравнении с окружением. И работа «закипела»: долгие обсуждения и анализ, правки и корректировки.

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

Спустя год подобная ситуация повторилась на другом проекте - Gardenscapes.Точно так же на этапе полировки мы придавали фишкам больший объем. И точно так же «улучшенный» результат во время теста произвел спорное впечатление (см. скриншот ниже, слева - вариант до правок. справа - после правок)

Второй случай – сигнал для серьезного анализа и поиска настоящих причин. В конце концов ответ был найден в книге Александра Лапина «Плоскость и Пространство».

Наш мозг удивительнейшим образом способен создавать иллюзию пространства на плоскости с изображением. Но где находится это пространство?

Если сравнить картинку из мультфильма Х.Миядзаки и темный диск на белом фоне, то иллюзия такова – уходящая в тенистый лес дорога находится за экранной плоскостью. Диск же выступает на зрителя. Иллюзия «выступания» настолько активна, что диск не просто лежит поверх плоскости. Он реально выступает в пространство зрителя.

Лапин в свой книге на десятках страниц приводит математические расчёты (!), доказывая и выясняя, насколько сильно идет отрыв диска от плоскости фона при различных условиях. В книге есть очень занимательный пример с квадратом Малевича: иллюзия выступания при рассмотрении картины с расстояния 10 метров такова, что между квадратом и картиной может протиснуться человек.

Таким образом, мы имеет три пространства: за экраном, сам экран, удерживаемый форматом девайса, и пространство перед экранной плоскостью.

Использование такого феномена разделения планов, уходящих вглубь или выступающих в пространство зрителя, очень активно используется в рекламе, анимации, дизайне интерфейсов. Здесь очень важно уточнить момент, при каких обстоятельствах объект может «выступать», а при каких он отступает за экран.Давайте проследим, как влияет на пространственность тональность и линия.

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

Конструктивный метод – это самый сильный из всех методов, создающих иллюзию пространства. Однако, объект в ортогональной проекции (а сфера в любом ракурсе будет иметь силуэт окружности) с условно поставленным объемом будет выступать над экранной плоскостью.

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

 Для того, чтобы фишки «выступали» в пространство зрителя, они должны быть:

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

Это обеспечит легкое вычленение группы фишек среди других групп игровых элементов. Этот вывод - не правило, а лишь одно из найденных решений. Фишки могут быть объемными, пространственно ориентированными в противопоставление, скажем, к более условным игровым элементам. Красивые объемные фишки, гармонично вписанные в игровое пространство – это голубая мечта любого художника, которому приходилось работать над match-3 проекте.

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