Всем привет! Уже несколько лет разрабатываю ретро-инди-игру, стилизованную под текстовый режим. Социальные сети — одно из отличных мест для общения с комьюнити и проверки дизайнерских гипотез.

Для того, чтобы показывать дизайн своей игры с текстовыми параллакс-слоями, я решил использовать такую возможность Фейсбука, как 3D-изображения. Оказалось, что сделать их достаточно просто.

Подготавливаются два изображения одинакового размера. Первое — собственно картинка. Второе — карта высот.

Сама картинка может быть в любом формате, который принимает Фейсбук. При подготовке изображения с картой высот необходимо иметь ввиду следующие моменты:

Формат. Допускается только PNG.

Название. Допустим, название файла с картинкой «picture.jpg», тогда название файла с картой высот должно быть «picture_depth.png». Т.е. необходимо добавить «_depth».

Размер. Размер изображения с картой высот должен совпадать с размером основного изображения.

Принцип. Высота задается градациями серого цвета. Чем ярче пиксель, тем ближе он к экрану.

Технически совсем не сложно, а вот сделать так, чтобы было симпатично — сложнее. Дело в том, что алгоритм формирования 3D-фото Фейсбука имеет свои особенности. Мне потребовалось несколько итераций, чтобы получить приемлемое качество без явных визуальных ошибок.

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

У меня, например, в первых вариантах дорисовывался белый цвет фона при сильном повороте, что для моего ASCII Art-а смотрелось очень странно. Пришлось «шаманить» с картой высот.

Еще нюанс: в приложении на телефоне алгоритм отрабатывает по-другому. Не так, как в браузере на ПК. На видео это заметно.

Тем не менее, такой инструмент как 3D-фото можно эффектно использовать при презентации игровой графики. Да, изначально эта возможность сделана Фейсбуком для фоточек, однако можно добиться вполне впечатляющего результата и для параллакс-слоев.

Вот как скомпоновать 3D-фото на Фейсбуке из двух подготовленных изображений на ПК:

1. На панели создания нового поста жмем кнопку добавления «Фото/видео».

2. Выбираем два файла: саму картинку и карту высот.

3. В превью поста сначала появятся сразу две картинки. Через несколько секунд, если все сделано правильно, они «магически» преобразуются в 3D-фото.

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

Пока!