Фоны для 2D игр

По материалам Киевской конференции FlashGamm 2011



Тема доклада — фоны для 2D игр

ПРОЕКЦИИ

Изначально фоны разделяем на проекции — имеем несколько типов:
1) 3 координаты (объемное пространство)
2) две координаты — тут несколько видов — вид вперед (от первого лица) применяется в 2.5D играх;
вид сбоку, вид сверху.
Объемное пространство в 2д играх создается или изометрией (псевдо 3д) или другими хитростями.
Фон создается при помощи тайлов — плитки подогнанные одна к другой.
1 — основа (текстурированная) плитка, 2,3 — наложение дополнительных элементов
4 — подогнанные тайлы

Вид с боку — нут у нас все просто, камера смотрит с боку

Во всех проекциях разделяют фоны на задний (background), средний (middleground) и передний (foreground)
каждого типа фонов может быть много, этим достигается глубина пространства игры.

Важными моментами для фонов являются освещение которое определяет освещенность объектов.
Источник света может находиться у камеры, на линии персонажа, за персонажем или на линии горизонта (солнце или луна к примеру)
Расположение источника света определяет осветление объектов, так если у нас источник света — солнце, то далиние фоны — будут светлые, средние с нормальным освещением, а ближние — будут затемнены, и наоборот — если мы светим со стороны точки «съемки» (камеры) — дальние объекты будут темнее, а средний фон будет осветлен, передний план будет «засвечен» — его лучше убирать

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

на 6м кадре — разбивка по планам 1 — дальний план, 5- ближний план, 2,4 — средний план, 3 — персонаж

ТАЙЛЫ и СКЛЕЙКИ

Существует несколько принципов создания пространства (фонов в игре)

1 — Тайлы — используются для динамического заполнения пространства графикой (поле, луг, стена, космос, земля) — в большинстве случаем массивы повторяющихся объектов.

Можно генерировать такие пространства динамически — используя определенный набор клипов (череп, кость, камень, тень, воронка) мы накладываем его на пространство залитое или равномерным цветом или используя текстуру. Применяя рандомизация — меняем положение, размер, угол поворота, прозрачность — разбрасываем эти элементы по фону — получаем картинку которая (на слайде) представляет поле битвы. Можно сделать растеризацию изображения и использовать как интерфейсные подкладки или в игре (рисуем поле для Тлвер деффенса) или др. Но такие фоны сложно склеивать (для скроллинговых игр) их прийдется делать очень большими.

Заливка текстурами — текстура представляет собой изображение стыкуемое по краям (две копии картинки подогнанные друг к другу с любой стороны не будут имень видимых швов)

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

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

Изометрические тайлы — подобны описанным ранее но, имеют несколько особенностей:
2 — они не прямоугольной форм — нужно высчитывать координаты каждого тайла
1 — нужно правильно накладывать один на другой (в нахлест), от дальних к ближним, иначе может быть искажение изображений (3)

Склейка горизонтальная (10 кадр) — подобна производству текстуры, только стыковка происходит по горизонтали. Правило то-же, стыкуем все детали в краях.

ЦВЕТ

Цвет важен в фонах. Цвет регулирует глубину пространства, определяет атмосферу (хоррор, фанни), выделяет элементы друг относительно друга. Я считаю что цвет это самое важное — важнее формы. Форма может быть простой, любой, но итоговое восприятие оказывает цвет.

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

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

14 кадр — использование палитры. Это редактор цветов флеша — он позволяет выбрать любой цвет и оттенок. Принято 7 базовых цветов, остальное оттенки. Часто изображение составляется только из базовых цветов или тех которые представлены в наборах (swatches). Я в совей практике стараюсь уходить от слихком ярких оттенков (верхний правый угол или нижний левый), моя паллитра с верхнего левого до нижнего правого, так я могу выбрать не яркие (близкие к природным) оттенки цветов, и быстро подбирать «дружественные к ним».
Кроме того нужно стараться избегать «несовместимых цветов» на пример — красный и зеленый, красный и синий — они очень плохо сопоставляются друг с другом — должны быть отделены нейтральным цветом (черный или белый или общий между ними). Но если использовать не прямые цвета, а разбавленные или белым или черным (оттенки) — то их уже можно будет ставить рядом или накладывать друг на друга.

АНИМАЦИЯ

Фоны можно и нужно анимировать. Один из примеров — вид от первого лица. 15 кадр — горная дорога, 2 кадр (начало презентации) — автодорога,
16 кадр — улица. Если у нас другие проекции — тут у нас могут быть динамические бъекты — волны на воде, водопады6 огонь, дым, и др элементы, часто они являются отдельными клипами привязанными к общей картинку координатами.
Желательно выделять в фоне те элементы которые нужно анимировать покадрово от элементов которые могут быть анимированны твинингом. Так в снежной трассе — елки анимированны твинингом сама трасса — имеет несколько кадров анимации покадрово. В примере с улицей — достаточно много кадров имеет анимация зданий — так как изображение находится далеко от нас следовательно скорость их линейного движения мала. А ближний фон — трасса у нас движется быстрее. Если есть возможность — желательно использовать симметрию для отображения — например левое и правое изображения это один клип. Для рассинхронизации изображения (уход от зеркала) можно одну из копий клипа пустить с другого кадра (первый пускаем с первого, второй например с середины таймлайна клипа). Самы дальный план -облака, имеет настолько малые линейные перемещения что мы имми пренебрегаем, это правило можно использовать при любой анимации.
Число кадров зависит от задач — чем медленнее смещение пространства — тем больше нужно кадров отрисовать илиставить задержки между кадрами (но тут мы можем терять плавность картинки).

НАПОЛНЕНИЕ

Хотелось бы сказать что фоны можно составлять всеми возможными способами — диджитал арт, фото, коллажирование, паинтинг и сканирование, фото объектов природы или предметов быта, 3D пререндер сцен, динамическая генерация фонов или векторный арт.

ОПТИМИЗАЦИЯ

Очень большая тема, выделю ль те элементы с которыми сталкиваюсь на практике.
1 — использовать клипы для фона привязывая их координатно к основному фоновому клипу таким образом происходит экномия ресурсов памяти для хранения такого фона (в сравнении с растровой картинкой отрисованой вручную) — это применимо для случаев если фонов очень много или не нужен
скан отрисованного вручную фона (можно использовать повторы)
2 — Следует выделять область действий — оставлять пространство для действий — не засоряя его дополнительным мусором или шумом.
3 — Не следует детализировать изображение которое движется или будет на экране виднл короткое время
4 — для движущихся изображений не использовать тонких линий или мелких элементов — создают «рябь»
5 — для статических фонов можно использовать градиенты
6 — унифицируйте элементы уровней — так можно будет использовать повторно элементы фонов для сборки уровня и избежать лишних пустот в растре фона
7 — если фон клеиться из нескольких изображений (например комнаты) — линию склейки страться минимизировать деталями — так проще склеивать и можно сделать нахлест — это позволит избежать «прострелов» при движении фонов. По возможности использовать в линиях склейки — сплошные цвета (градиенты сложно склеивать).

Вроде бы все,

Спасибо за внимание!

аудио дорожка с докладом

P.S. Флешгамм был великолепен — организатором огромное спасибо! Спасибо всем кто приехал и пришел на конфу! Спасибо всем кто слушал доклады! Фотки выложил на гуглеплюсе и фейсбуке.