Композиция в левелдизайне

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

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

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

Бывший левелдизайнер CD Projekt RED Матеуш Пьяскевич несколько лет назад в своём блоге опубликовал текст про использование правил композиции при создании уровней. Он поделился своим опытом и рассказал про множество аспектов, на которые нужно обращать левелдизайнерам. Мы выбрали из материала главное.

Композиция в левелдизайне

Правила композиции могут применяться в нескольких случаях.

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

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

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

Основы композиции

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

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

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

Слои композиции

Композицию можно разделить на три основных набора слоёв: передний план, центр интереса и задний план (фон). Кроме того, можно дополнительно учитывать слой стаффажа.

Пример композиции — слои
Пример композиции — слои
Вид с перспективы игрока
Вид с перспективы игрока

На этом примере красный блок — доминанта, жёлтые блоки — элементы композиции, зелёный блок — наблюдатель, белый сегмент — поле зрения наблюдателя, серая плоскость — земля.

Слои переднего плана

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

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

Передний план
Передний план
Тёмный передний план из кустов, травы и веток — Call of Duty: Ghosts
Тёмный передний план из кустов, травы и веток — Call of Duty: Ghosts

Центр интереса

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

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

Центр интереса может содержать более одной доминанты. Другая доминанта в композиции называется «контрапункт». В качестве примера можно привести сцену «Фонтан на рыночной площади и авария танка». Фонтан — первая доминанта, но танк также требует внимания. Когда наблюдатель увидит все доминанты, он начнёт осматривать детали центра интереса и фоновых слоёв.

Слой центра интереса
Слой центра интереса
Одинокая башня — доминанта, а реклама на стене — контрапункт
Одинокая башня — доминанта, а реклама на стене — контрапункт

Слои заднего плана

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

Цель этих слоёв — выделить силуэт доминанты; произвести впечатление масштабом; создать глубину и устранить впечатление изолированности сцены. Чтобы подчеркнуть глубину используется воздушная перспектива. Также важно избегать использования ярких цветов, резких линий и большого количества деталей.

Задний план
Задний план
Несколько слоёв гор на заднем плане — Rage
Несколько слоёв гор на заднем плане — Rage

Стаффаж

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

Аликс наблюдает за тем, что происходит на горизонте. Она помогает определить пропорции сцены, а направление, в котором она смотрит, указывает на событие на горизонте — Half-Life 2: Episode 2
Аликс наблюдает за тем, что происходит на горизонте. Она помогает определить пропорции сцены, а направление, в котором она смотрит, указывает на событие на горизонте — Half-Life 2: Episode 2

Параметры наблюдения

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

Вертикальный угол

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

Низкий угол — доминанта видна сверху. Изображение может продемонстрировать глубину и перспективу. Этот угол даёт игроку отличную видимость на всех слоях композиции. Эту особенность можно использовать как преимущество пользователя и позволить ему спланировать свою тактику или маршрут исследования.

Низкий угол
Низкий угол

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

Плоский угол
Плоский угол

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

Высокий угол
Высокий угол

Горизонтальный угол

С помощью разного угла по горизонтали, можно регулировать перспективу и глубину сцены.

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

Прямой угол
Прямой угол

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

Полупрямой угол
Полупрямой угол

Полубоковой угол используется чаще всего. С ним перспектива выглядит лучше всего.

Полубоковой угол
Полубоковой угол

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

Боковой угол
Боковой угол

Точки наблюдения

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

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

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

«Воронка» и точка наблюдения
«Воронка» и точка наблюдения
Памятник с экраном и небоскрёбом на заднем плане — Half-Life 2
Памятник с экраном и небоскрёбом на заднем плане — Half-Life 2

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

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

В Doom 3: Resurrection of Evil можно увидеть, как дизайнер позаботился о композиции. Эта доминанта действует как помощник по навигации и выглядит красиво со всех сторон.

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

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

Воронки и три точки наблюдения
Воронки и три точки наблюдения
Композиция деревни в игре с открытым миром — Skyrim
Композиция деревни в игре с открытым миром — Skyrim

Размещение элементов композиции

Расположение

Положение доминанты может кардинально изменить восприятие композиции. Именно поэтому очень важно следовать нескольким основным правилам, чтобы добиться желаемого эффекта. В живописи и фотографии есть ряд правил композиции, которые могут помочь и в видеоиграх. Например, правило золотого сечения или приём рабатмент прямоугольника.

Статическая (симметричная) композиция — доминанта устанавливается в середине кадра. Из-за этого композиция кажется искусственной, сделанной человеком, чистой. Её лучше всего использовать, когда важно выделить рукотворные объекты или архитектуру.

Симметричное положение доминанты
Симметричное положение доминанты
Памятник на городской площади — симметричная композиция — Bioshock: Infinite
Памятник на городской площади — симметричная композиция — Bioshock: Infinite

Динамическая (асимметричная) композиция — доминанта находится не в середине кадра. Позиция устанавливается одним из упомянутых правил позиционирования. Композиция кажется органичной, созданной природой, грязной. Её можно использовать для имитации природных сцен. Важно оставить свободное пространство между доминантой и краем сцены.

Асимметричная позиция доминанты
Асимметричная позиция доминанты
Асимметричная композиция, путь к замку — Dishonored
Асимметричная композиция, путь к замку — Dishonored

Баланс

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

  • Большой визуальный вес — объект крупный, детализированный, тёмного тона, насыщенного цвета, высокой контрастности.
  • Лёгкий визуальный вес — объект маленького размера, размытый, светлого тона, мягкого цвета, низкой контрастности.

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

Очень асимметричная композиция. Можно увидеть, что баланс сильно смещён в правую часть изображения
Очень асимметричная композиция. Можно увидеть, что баланс сильно смещён в правую часть изображения
Асимметричная и сбалансированная композиция. Обе стороны разные, но визуальный баланс соблюдается
Асимметричная и сбалансированная композиция. Обе стороны разные, но визуальный баланс соблюдается
Хорошо сбалансированная композиция  с примерно симметричным расположением элементов и симметрично расположенной доминантой
Хорошо сбалансированная композиция с примерно симметричным расположением элементов и симметрично расположенной доминантой

Объекты, привлекающие внимание

Существует некоторое количество приёмов для дополнительного привлечения внимания игрока.

Детали

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

Тело человека, высокая плотность деталей и текст используются для привлечения внимания — Bioshock: Infinite
Тело человека, высокая плотность деталей и текст используются для привлечения внимания — Bioshock: Infinite
Портреты пропавших людей побуждают игрока побольше узнать об истории места, которое он исследует — Bioshock 2
Портреты пропавших людей побуждают игрока побольше узнать об истории места, которое он исследует — Bioshock 2
Текстовые вывески используются для информирования игрока о местах, которые он может посетить — Rage
Текстовые вывески используются для информирования игрока о местах, которые он может посетить — Rage

Линии

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

  • Действительные линии — видимые линии, нарисованные границами объектов и элементами композиции.
  • Воображаемые линии — линии, которые не нарисованы фактически, а созданы с помощью элементов композиции. Например, направление взгляда стаффажа. Эти линии нарисованы в воображении. Их можно использовать, чтобы обогатить композицию и подчеркнуть её.

Линии должны спокойно и мягко проходить через сцену в направлении доминанты. Это создаёт чувство гармонии. Можно построить элементы композиции так, чтобы нарисовать линию, которая ведёт к доминанте. Но есть некоторые открытые композиции, в которых линии мягко проходят через сцену, не показывая доминанту. Обычно эти линии применяются на заднем или переднем плане. Жёсткие линии и границы используются для доминант или других важных элементов композиции.

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

Горизонтальная линия моря делает сцену спокойной — Dear Esther
Горизонтальная линия моря делает сцену спокойной — Dear Esther

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

Вертикальные линии дымовых труб и жёлтого здания поддерживают направляющую линию небоскрёба — Half-Life 2
Вертикальные линии дымовых труб и жёлтого здания поддерживают направляющую линию небоскрёба — Half-Life 2

Кривые линии — S-образный серпантин, который плавно проходит через композицию. Это делает её мягкой и естественной. Для обозначения этих элементов можно использовать термин «линия красоты» из ландшафтной архитектуры.

Извилистая линия пути, обозначенная камнями — Call of Juarez: Bound in Blood
Извилистая линия пути, обозначенная камнями — Call of Juarez: Bound in Blood

Линии с резкими углами создают впечатление динамичной и активной сцены.

Внутри разрушенного туннеля — Fallout: New Vegas
Внутри разрушенного туннеля — Fallout: New Vegas

Цвета

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

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

Цвет сарая полностью отличается от других элементов композиции. Тем не менее он хорошо вписывается в сцену — Alan Wake
Цвет сарая полностью отличается от других элементов композиции. Тем не менее он хорошо вписывается в сцену — Alan Wake
Яркие лестницы помогают игроку  в навигации — Mirror’s Edge
Яркие лестницы помогают игроку в навигации — Mirror’s Edge

Свет

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

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

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

Сильный свет используется, чтобы показать красивый горизонт и подчеркнуть глубину пейзажа — Rage
Сильный свет используется, чтобы показать красивый горизонт и подчеркнуть глубину пейзажа — Rage
Цвет и свет, используются для того, чтобы провести игрока через коридор — Call of Duty: Black Ops 2
Цвет и свет, используются для того, чтобы провести игрока через коридор — Call of Duty: Black Ops 2
Силуэт статуи используется, чтобы подчеркнуть композицию, а синий свет позволяет лучше её рассмотреть — Bioshock: Infinite
Силуэт статуи используется, чтобы подчеркнуть композицию, а синий свет позволяет лучше её рассмотреть — Bioshock: Infinite

Масштаб

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

Гигантская конструкция привлекает внимание игрока — Crysis 3
Гигантская конструкция привлекает внимание игрока — Crysis 3
Дымовые трубы притягивают внимание игрока, а линия электропередачи ведёт его в город — Fallout 3
Дымовые трубы притягивают внимание игрока, а линия электропередачи ведёт его в город — Fallout 3

Движение

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

Дымящий паровоз — единственный движущийся элемент композиции — Sniper Elite V2
Дымящий паровоз — единственный движущийся элемент композиции — Sniper Elite V2

Дополнительные советы

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

  • Важно сохранять постоянство композиции на каждом слое.
  • Слои переднего плана можно смешивать с остальными (дороги, расположение объектов).
  • Нужно давать игроку несколько секунд для того, чтобы он заметил, изучил и понял композицию.
  • Если доминанта расположена выше поля зрения, стоит поместить перед ней лестницу или крутой склон. Во время подъёма игрок естественным образом будет смотреть вверх.
  • Для композиции требуется пространство. Важно обращать внимание на узкие улицы и близко стоящие здания. Если места недостаточно, то там нельзя размещать точку наблюдения.
  • Для построения композиции стоит выбрать одну тему и не нужно стремиться рассказать сразу несколько историй.
  • Доминанты должны быть хорошо освещены, выделяться цветом и большим количеством деталей. На переднем и заднем планах цвета и деталей должно быть меньше.
  • Слишком слабые доминанты и хаотичные композиции быстро теряют внимание игрока.
  • Следует уменьшать объекты на заднем плане, чтобы они казались меньше, чем на самом деле.
  • Стоит удерживать внимание игрока на чём-нибудь одном. Важно, чтобы после битвы у него было время, чтобы отдохнуть и насладиться видом.
  • Композиция не обязательно должна полностью умещаться в поле зрения наблюдателя. Нужно лишь следить за тем, чтобы доминанта не была скрыта за чем-то.
  • Многие игры используют разные углы поля зрения. Для тайтлов с видом от первого лица значение угла обзора варьируется от 60 до 100 градусов. Чем больше угол, тем больше пользователь будет видеть в кадре. Но при этом всё будет выглядеть мельче, а изображение может казаться растянутым.
  • Большое количество слоёв в одной композиции может привести к хаосу.
  • Лучше органично вписать композицию в геймплей, чем прерывать геймплей ради одномоментной композиции.
77 показов
19K19K открытий
15 комментариев

Первый скрин напомнил вид на наш питерский Лахта-центр) Газпромовская цитадель зла)))

Ответить

Очень удивило в примерах наличие скриншотов из Rage, довольно таки недооциненная игра с точки зрения визуала и художественности картинки. Для многих она так и осталось "серо/коричневым" унынием, к сожалению. А вообще id tech 5/6 отлично может в красоту. Визуал в аддоне к Вуьфу 2013 года очень сильно выделяется.

Ответить

Да сама Rage очень недооцененная игра на мой взгляд.

Ответить

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

Ответить

Раньше никогда не приходило в голову, но Винтерфел настолько сильно похож на Эдорас из Властелина колец, что аж дежавю посетило.
Хороший источник для вдохновения!

Ответить

Откуда тут Винтерфелл, может имеется в виду Вайтран? Хотя тут его назвали деревней, и это уже какая-то талморская пропаганда.

Ответить

Ага тоже обратил внимание,даже подьём к цитадели по высотам кажется 1 в 1

Ответить