Фоны для 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. Флешгамм был великолепен — организатором огромное спасибо! Спасибо всем кто приехал и пришел на конфу! Спасибо всем кто слушал доклады! Фотки выложил на гуглеплюсе и фейсбуке.
+34
osa
16 декабря 2011, 11:38
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.
Комментарии (21)
ps: Тараканы, на Берлин!!!
RIP
Спасибо огромное за презентацию и описание. Плюсую несомненно!
Хотя меня удивило, что на последнем слайде 3 независимых передних плана, а задний — всего один и то не движется.
Чем дальше от нас предмет — тем меньше он смещается, при перемещении наблюдателя.
Поэтому сильно удаленные объекты практически не смещаются.
:)
Можно посмотреть canabalt, там все планы смещаются (с разными скоростями).
и ваобще по флешовому крутому арту…