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

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

*

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задний план

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

Стаффаж

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Баланс

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

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

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

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

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

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

Детали

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

Линии

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

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

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

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

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

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

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

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

Цвета

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

Свет

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

Масштаб

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

Движение

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

Еще советы

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