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

Разработка игр | |

Оригинал статьи был опубликован в базе знаний сайта LEVEL-DESIGN.org под авторством Матеуша Пашкевича (Mateusz “seir” Piaskiewicz). Позже материал, перевод которого вы найдете ниже, Composition in Level Design был размещен на Гамасутре. Статья содержит только базовую информацию о художественных правилах композиции, чтобы показать, как можно использовать их при создании уровней.

*

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

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

Когда и где применяются правила композиции:

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

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

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

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

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

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

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

Compo_full

Пример композиции

Compo_perspective

Пример композиции в перспективе

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

Передний план

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

Compo_1_foreground

Передний план

Composition_foreground-codg_1

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

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

Слой или слои, где размещается доминанта. Доминанта – это фокусная точка композиции, она не должна сливаться с остальными элементами, но должна согласовываться с ними; выделить её поможет повышенная яркость и выгодное размещение. Благодаря доминанте можно быстро охарактеризовать сцену, например: «Зимний пейзаж с руинами средневековой дозорной башни в горах», где руины будут доминантой, а горы – задним планом. Доминанты можно использовать, рассказывая историю сцены и придавая ей уникальности. Планировать композицию нужно так, чтобы доминанта первой оказывалась в центре внимания наблюдателя. Убедитесь, что она ничем не перекрыта, но не волнуйтесь насчёт объектов, накладывающихся на другие слои. В центре интереса может находиться и несколько доминант. Дополнительную доминанту называют контрапунктом. Вот ещё один пример: «Фонтан на рыночной площади с затонувшим танком». Здесь фонтан – это первая доминанта, но танк тоже требует внимания. Когда наблюдатель изучит доминанты, он начнёт искать детали в центре интереса и фоновых слоях.

Compo_2_center

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

Counterpoint-dishonored_1

Одинокая башня (доминанта) и реклама на стене (контрапункт) – Dishonored

Задний план

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

Compo_3_background

Задний план

Background_rage_1

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

Стаффаж

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

Composition-hl2ep2-example1

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

Параметры наблюдения композиции

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

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

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

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

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

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

Sight_angle_low

Низкий угол

Sight_angle_flat

Плоский угол

Sight_angle_high

Высокий угол

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

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

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

Полупрямой угол – Угол, при котором уже заметна перспектива. Идеален для узких пространств.

Полубоковой угол – Угол, при котором перспектива выглядит наилучшим образом. Наиболее распространён.

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

Comp_angle_front

Прямой угол

Comp_angle_front_half

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

Comp_angle_side_half

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

Comp_angle_side

Боковой угол

Позиции наблюдения

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

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

Obs_spot_1

Воронка и позиция наблюдения (зелёный круг)

Composition-hl2-example1

Монумент с экраном и небоскрёб на заднем плане – Half-Life 2

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

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

Композиции в Doom 3 BFG: Resurrection of Evil:

Doom_3_nav_room1

Doom_3_nav_room2

Doom_3_nav_room3

На примере Doom 3 BFG: Resurrection of Evil видно, как дизайнер тщательно проработал композицию. Доминанта подсказывает направление и отлично смотрится с любой стороны.

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

Obs_spot_2

Воронки перед тремя позициями наблюдения

Composition-skyrim-example1

Композиция деревни в открытом игровом мире – Skyrim

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

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

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

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

Symmetric_composition

Статуя на городской площади – Bioshock: Infinite

Динамичная (асимметричная) композиция – Доминанта смещена в сторону от центра изображения. Место её размещения определяется согласно упомянутым правилам. Композиция чувствуется естественной, грязной, созданной самой природой. Используйте для воспроизводства природных сцен. Убедитесь, что между краем экрана и доминантой остаётся свободное место.

Asymmetry-dishonored_1

Асимметричная композиция с подходом к замку – Dishonored

Баланс

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

Визуальная тяжесть – большой размер, детализация, тёмные тона, насыщенные цвета, высокая контрастность.

Визуальная лёгкость – маленький размер, размытость, светлые тона, мягкие цвета, низкая контрастность.

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

Comp_asymmetric_no_balance

Очень асимметричная композиция. Вы видите, как баланс резко сдвинут в правую сторону.

Comp_asymmetric

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

Comp_symmetric

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

Визуальные приманки

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

Детали

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

Details_bio3_1

Человеческое тело, детализированное пространство и текст в качестве визуальных приманок – Bioshock: Infinite

Details_faces_bio2

Фотографии пропавших людей призывают игрока узнать побольше об истории места, которое он изучает – Bioshock 2

Details_text_rage_1

Вывески с текстом информируют игрока о местах, которые можно исследовать – Rage

Линии

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

Фактические линии – Видимые линии, очерчиваемые границами элементов и самими элементами композиции.

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

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

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

Dear_Esther_0128

Горизонтальная линия неба привносит ощущение спокойствия – Dear Esther

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

Lines-hl2_1

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

Кривые линии – Мне нравится использовать для них термин «линия красоты». Это S-образные линии в форме волны, плавно проходящие через композицию, делая её мягкой и естественной.

Soft_line-coj2_2

Извилистая линия дороги, очерченная камнями – Call of Juarez: Bound in Blood

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

Angled_lines_fallout_nv_1

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

Цвета

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

Color_alanwake_1

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

Color_mirrorsedge_1

Ярко-оранжевые ступеньки подсказывают игроку направление – Mirror’s Edge

Свет

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

Light_in_composition-rage_1

Яркий свет используется для демонстрации красивого горизонта и подчёркивает глубину сцены – Rage

COD_BO2_0068

Цвет и освещение направляют игрока по коридору – Call of Duty: Black Ops 2

Bioshock3_0248

Статуя усиливает эффект композиции, а синий свет позволяет лучше её рассмотреть – Bioshock: Infinite

Масштаб

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

Crysis_3_0686

Огромная постройка привлекает внимание игрока – Crysis 3

Fallout_3_0349

Дымовые трубы притягивают взгляд игрока, а линия электропередачи ведёт его к городу – Fallout 3

Движение

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

Motion_sniperv2_1

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

Еще советы

  • Сохраняйте постоянство композиции на каждом слое.
  • Слои переднего плана можно смешивать с другими (дороги, места размещения объектов ).
  • Давайте игроку несколько секунд на то, чтобы заметить, изучить и понять композицию.
  • Если доминанта расположена выше поля зрения, поместите перед ней лестницу или крутой склон. Поднимаясь, игрок естественным образом посмотрит выше.
  • Для композиции требуется пространство. Обращайте внимание на узкие улицы и близко стоящие здания. Если места слишком мало, там нельзя размещать позицию наблюдения.
  • Выберите для композиции одну тему и не стремитесь рассказывать несколько историй сразу.
  • Доминанты должны хорошо освещаться, выделяться цветом и большим количеством деталей. На переднем и заднем планах цветов и деталей должно быть меньше.
  • Слишком слабые доминанты и хаотичные композиции быстро лишатся внимания игрока.
  • Уменьшайте объекты на заднем плане, чтобы они казались дальше, чем на самом деле.
  • Удерживайте интерес игрока на чём-нибудь одном. Убедитесь, что после боя у него найдётся минутка, чтобы отдышаться и насладиться красивым видом.
  • Композиция не обязательно должна полностью умещаться в поле зрения наблюдателя. Следите только, чтобы доминанта не пряталась где-то в углу и не была ничем перекрыта.
  • Многие игры используют разные углы поля зрения. Для игр с видом от первого лица эти углы варьируются от 60 до 100 градусов. Чем больше угол, тем больше вы будете видеть в кадре, но при этом всё будет мельче и изображение будет казаться растянутым.
  • Если вы задумали множество слоёв для одной композиции, всё может обернуться беспорядочным нагромождением объектов.
  • Проще органично вписать композицию в геймплей, чем прерывать геймплей ради одномоментной композиции.
Владимир FrostBite Хохлов frostbite@progamer.ru

Поделиться

Обсудить