20.11.2015
Время прочтенияВремя чтения: 6 минут
Оценка пользователей1Оценка пользователей
Поделиться:
Другие статьи
  • Middle-earth: Shadow of Mordor

    Middle-earth: Shadow of Mordor берет свое начало там, где большинство других игр по мотивам трилогии «Властелин колец» заканчиваются.

  • Система подбора команд в Overwatch

    Как же на самом деле работает эта загадочная система? Постараемся разобраться!

  • Сказ о том, как Blizzard и Valve Dota пилили

    Мало кто помнит, как так получилось, что Dota была основана на игре Blizzard, а продолжение полностью и безраздельно принадлежит компании Valve.

Три шага, которые улучшат визуальное оформление вашей игры

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

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

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

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

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

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

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

3. Убедиться, что ваши решения эффективно работают. Для этого применяются обратная связь с пользователями, аналитические данные и методы тестирования А/В.

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

1. Фокус и жесткая композиция

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

В чистом виде композиция сводится к грамотному использованию принципов дизайна. Их шесть: Масштаб и Пропорция, Повторение и Контрастность, Баланс, Акцент, Иерархия значимости элементов, Гармония или Единство. Интересно освоить и понять их все. Каждый принцип дает вам мощные критерии для анализа ваших творений бит за битом и последующего их улучшения.

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

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

Три шага, которые улучшат визуальное оформление вашей игры. Мулан

Два простых макета от Марсело Вигнали из мультфильма «Мулан» студии Дисней

Сильная композиция направляет взгляд зрителя к значимым элементам.

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

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

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

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

Миры с глубиной

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

Это создает контраст между передним и задним планом. Это помогает объединить игровой мир и окружающее освещение.

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

Например, пользовательский интерфейс выглядит так, как будто находится поверх игрового экрана, потому что находится в верхней части игрового мира, на другом слое. Благодаря использованию светящихся очертаний многие игры, такие как The Witcher 3, предлагают способы частичного наложения между интерактивными и фоновыми элементами. И это делает их заметными.

Три шага, которые улучшат визуальное оформление вашей игры. Ведьмак

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

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

Три шага, которые улучшат визуальное оформление вашей игры. Холмы

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

2. Стремиться сделать активные элементы привлекательными

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

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

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

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

Сила силуэта

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

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

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

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

Три шага, которые улучшат визуальное оформление вашей игры. Силуэты

Кто они? Подсказка: это некоторые персонажи, которых я больше всего люблю. Не помогло? Я знал, что нужно было использовать Марио и Соника…

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

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

Живые цвета

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

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

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

Три шага, которые улучшат визуальное оформление вашей игры. Monument Valley

Очаровательно!

Более реалистичные цветовые схемы с яркими цветовыми штрихами также привлекают взгляд. Изображения в Guild Wars 2 – отличный пример. В таких палитрах чувствуется зрелость и полнота жизни. Они обладают сильным контрастом, а для художников это сильный инструмент, помогающий рассказывать историю. Mirror’s Edge оперирует живыми и яркими цветами, чтобы направлять игрока в прохождении сложных уровней. В этом случае цвет используется для того, чтобы обозначить путь, которому игрок должен следовать.

Три шага, которые улучшат визуальное оформление вашей игры. Полосы

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

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

3. Получать конструктивную обратную связь!

«Это хорошо». «Это здорово!»

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

Такая обратная связь не говорит нам, что как работает и почему. И, что самое важное, что не работает.

Скорее всего, мы сможем улучшить только некоторые, но не многие аспекты художественного оформления нашей игры.

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

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

Простые тесты А/В

Мы собираемся применять метод, который называется тестированием А/В. Это интуитивно понятный способ. Идея состоит в том, чтобы проверить концентрацию, или СККП (соотношение кликов к показам) данного интерактивного активного элемента в игре. Это испытание А. Затем мы запускаем тест В. Мы заменяем графический элемент на другой и отслеживаем его СККП снова. И сравниваем его с результатом первого теста. Когда был самый высокий процент людей, взаимодействующих с элементом, до или после перемены?

Три шага, которые улучшат визуальное оформление вашей игры. Тест

Какая версия получила самый высокий уровень вовлеченности? А или В? Да, все просто... Но не так легко понять, почему оно так

Этот тест применяется веб-дизайнерами постоянно. Он очень полезен для разработки интерфейса и дизайна в целом. Он может вам таковым не казаться, пока сами не попробуете, но небольшие изменения в кнопке «Поделиться» или «Играть» могут существенно увеличить количество игроков, которые на нее нажмут. Тест А/В является наиболее полезным в ситуации, когда вы ищете способы улучшить взаимодействие игроков с графическими элементами.

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

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

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

Выводы

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

В общем, вот три шага, которые помогут улучшить графику в вашей игре:

1. Для начала разработайте жесткую композицию. Это даст вам прочную основу для преуспевания вашего визуального оформления.

2. Сосредоточьтесь на привлекательности вашего изображения. Ясные силуэты и яркие цветовые штрихи – самые мощные инструменты!

3. Убедитесь, что вы на верном пути. Для этого используйте аналитику и тестирование А/В.

Оригинал взят на http://www.gamasutra.com/