Многослойность, параллакс и много тумана: как Creaks устроена за кадром

Разбор от разработчика из Amanita Design.

Художник и дизайнер Amanita Design Ян Члуп опубликовал видео, в котором рассказал, как создавались сцены в головоломке Creaks. Разработчик поделился техническими деталями и показал закулисье игры. Подробно пересказываем ролик.

Игра создана в Unity — несмотря на то, что она выполнена в 2D, в её основе лежат принципы 3D.

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

Так уровень выглядит со стороны
Так уровень выглядит со стороны
Так выглядит самый дальний фон
Так выглядит самый дальний фон
Перед ним находится слой тумана, который помогает визуально отдалить его. Туман состоит из множества полупрозрачных простых форм
Перед ним находится слой тумана, который помогает визуально отдалить его. Туман состоит из множества полупрозрачных простых форм
Далее идёт ещё один уровень, имитирующий систему пещер. Здесь используются более чёткие формы. Далее идёт ещё один слой тумана
Далее идёт ещё один уровень, имитирующий систему пещер. Здесь используются более чёткие формы. Далее идёт ещё один слой тумана
Следующий слой — это небольшие интересные детали. Например, колонна с качелями на вершине, которая находится посередине сцены
Следующий слой — это небольшие интересные детали. Например, колонна с качелями на вершине, которая находится посередине сцены
Затем — ещё один слой тумана с добавлением цвета
Затем — ещё один слой тумана с добавлением цвета
Наконец, после этого идёт слой самого дома, по которому двигается герой
Наконец, после этого идёт слой самого дома, по которому двигается герой
В некоторых частях карты пользователь может увидеть другие части мира. Чтобы не прогружать карту целиком, разработчики создали систему, благодаря которой одновременно могут отображаться только определённые куски локации
В некоторых частях карты пользователь может увидеть другие части мира. Чтобы не прогружать карту целиком, разработчики создали систему, благодаря которой одновременно могут отображаться только определённые куски локации
Также в здании находится множество двигающихся элементов — это ещё один слой
Также в здании находится множество двигающихся элементов — это ещё один слой
Элементы освещения всегда находятся перед фоном, но иногда они расположены за героем и некоторыми элементами сцены
Элементы освещения всегда находятся перед фоном, но иногда они расположены за героем и некоторыми элементами сцены
Так освещение выглядит в игре
Так освещение выглядит в игре
Все двигающиеся объекты в игре анимированы при помощи техники cut-out — спрайты собраны из нескольких частей, каждая из которых может двигаться независимо от остальных
Все двигающиеся объекты в игре анимированы при помощи техники cut-out — спрайты собраны из нескольких частей, каждая из которых может двигаться независимо от остальных
Чтобы анимация персонажа всегда соответствовала игровой ситуации, разработчики придумали систему тайлов, содержащих дополнительную информацию 
Чтобы анимация персонажа всегда соответствовала игровой ситуации, разработчики придумали систему тайлов, содержащих дополнительную информацию 
К примеру, если тайл находится у стены, то герой легко коснётся её, когда встанет на этот тайл. Он выполнит это действие благодаря той информации, которая прикреплена к тайлу
К примеру, если тайл находится у стены, то герой легко коснётся её, когда встанет на этот тайл. Он выполнит это действие благодаря той информации, которая прикреплена к тайлу
Эта система очень полезна при прототипировании — она позволяет быстро проверить, какие недостатки есть на уровне
Эта система очень полезна при прототипировании — она позволяет быстро проверить, какие недостатки есть на уровне
Последний слой — это разные статичные элементы сцены, которые накладываются поверх героя: освещение лампы, перила, столбы
Последний слой — это разные статичные элементы сцены, которые накладываются поверх героя: освещение лампы, перила, столбы
Есть ещё один дополнительный слой, который используется для затемнения других частей локации. Это позволяет игроку сосредоточить своё внимание только на важных местах уровня
Есть ещё один дополнительный слой, который используется для затемнения других частей локации. Это позволяет игроку сосредоточить своё внимание только на важных местах уровня

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

Многослойность, параллакс и много тумана: как Creaks устроена за кадром
9090
1 комментарий

Круто. Фигею с того, как современные технологии позволяют анимировать даже 2Д объекты.

3
Ответить