Всем привет! Уже несколько лет разрабатываю ретро-инди-игру, стилизованную под текстовый режим. Социальные сети — одно из отличных мест для общения с комьюнити и проверки дизайнерских гипотез.
Для того, чтобы показывать дизайн своей игры с текстовыми параллакс-слоями, я решил использовать такую возможность Фейсбука, как 3D-изображения. Оказалось, что сделать их достаточно просто.
Подготавливаются два изображения одинакового размера. Первое — собственно картинка. Второе — карта высот.
Сама картинка может быть в любом формате, который принимает Фейсбук. При подготовке изображения с картой высот необходимо иметь ввиду следующие моменты:
Формат. Допускается только PNG.
Название. Допустим, название файла с картинкой «picture.jpg», тогда название файла с картой высот должно быть «picture_depth.png». Т.е. необходимо добавить «_depth».
Размер. Размер изображения с картой высот должен совпадать с размером основного изображения.
Принцип. Высота задается градациями серого цвета. Чем ярче пиксель, тем ближе он к экрану.
Технически совсем не сложно, а вот сделать так, чтобы было симпатично — сложнее. Дело в том, что алгоритм формирования 3D-фото Фейсбука имеет свои особенности. Мне потребовалось несколько итераций, чтобы получить приемлемое качество без явных визуальных ошибок.
Изображение с картинкой у нас одно, и поэтому Фейсбук не знает, что должно быть под верхними слоями. Когда верхние слои смещаются, то алгоритм визуализации пытается дорисовать то, что под ними может находиться.
У меня, например, в первых вариантах дорисовывался белый цвет фона при сильном повороте, что для моего ASCII Art-а смотрелось очень странно. Пришлось «шаманить» с картой высот.
Еще нюанс: в приложении на телефоне алгоритм отрабатывает по-другому. Не так, как в браузере на ПК. На видео это заметно.
Тем не менее, такой инструмент как 3D-фото можно эффектно использовать при презентации игровой графики. Да, изначально эта возможность сделана Фейсбуком для фоточек, однако можно добиться вполне впечатляющего результата и для параллакс-слоев.
Вот как скомпоновать 3D-фото на Фейсбуке из двух подготовленных изображений на ПК:
-
На панели создания нового поста жмем кнопку добавления «Фото/видео».
-
Выбираем два файла: саму картинку и карту высот.
-
В превью поста сначала появятся сразу две картинки. Через несколько секунд, если все сделано правильно, они «магически» преобразуются в 3D-фото.
Надеюсь, что вам было интересно и, возможно, полезно узнать о такой возможности соцсети. Для меня это однозначно полезная фича, ведь я выпускаю апдейты игры реже, чем хотелось бы, а получать фидбэк очень полезно. Игра у меня в раннем доступе на Стиме, а далеко не все игроки готовы покупать игры из раннего доступа и качать апдейты. Такие «стерео-посты» могут вызывать и поддерживать интерес.
Пока!
Автор: Андрей Фомин
