2 мар в 20:12 2 мар

Как визуализировать 3D-пространство в стиле Doom — описание главных принципов Статьи редакции

2D-пространство изящно превращается в объёмное окружение.

{"id":647321,"url":"https:\/\/dtf.ru\/gamedev\/647321-kak-vizualizirovat-3d-prostranstvo-v-stile-doom-opisanie-glavnyh-principov","title":"\u041a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432 \u0441\u0442\u0438\u043b\u0435 Doom \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432","services":{"vkontakte":{"url":"https:\/\/vk.com\/share.php?url=https:\/\/dtf.ru\/gamedev\/647321-kak-vizualizirovat-3d-prostranstvo-v-stile-doom-opisanie-glavnyh-principov&title=\u041a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432 \u0441\u0442\u0438\u043b\u0435 Doom \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432","short_name":"VK","title":"\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435","width":600,"height":450},"facebook":{"url":"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/dtf.ru\/gamedev\/647321-kak-vizualizirovat-3d-prostranstvo-v-stile-doom-opisanie-glavnyh-principov","short_name":"FB","title":"Facebook","width":600,"height":450},"twitter":{"url":"https:\/\/twitter.com\/intent\/tweet?url=https:\/\/dtf.ru\/gamedev\/647321-kak-vizualizirovat-3d-prostranstvo-v-stile-doom-opisanie-glavnyh-principov&text=\u041a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432 \u0441\u0442\u0438\u043b\u0435 Doom \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432","short_name":"TW","title":"Twitter","width":600,"height":450},"telegram":{"url":"tg:\/\/msg_url?url=https:\/\/dtf.ru\/gamedev\/647321-kak-vizualizirovat-3d-prostranstvo-v-stile-doom-opisanie-glavnyh-principov&text=\u041a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432 \u0441\u0442\u0438\u043b\u0435 Doom \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432","short_name":"TG","title":"Telegram","width":600,"height":450},"odnoklassniki":{"url":"http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/dtf.ru\/gamedev\/647321-kak-vizualizirovat-3d-prostranstvo-v-stile-doom-opisanie-glavnyh-principov","short_name":"OK","title":"\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438","width":600,"height":450},"email":{"url":"mailto:?subject=\u041a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432 \u0441\u0442\u0438\u043b\u0435 Doom \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432&body=https:\/\/dtf.ru\/gamedev\/647321-kak-vizualizirovat-3d-prostranstvo-v-stile-doom-opisanie-glavnyh-principov","short_name":"Email","title":"\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443","width":600,"height":450}},"isFavorited":false}

2899 просмотров

Пользовательница твиттера под ником ValerADHD опубликовала краткий разбор метода, который позволяет визуализировать 3D-пространство в стиле Doom. Разработчица использовала движок Pico-8, чтобы показать, как всё это работает на практике. Мы выбрали из примера главное.

Игра, над которой работает ValerADHD

Сперва нам нужен герой

На самом деле достаточно лишь определить его положение в пространстве, поэтому вместо персонажа можно поставить простую точку

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

Теперь приступаем к созданию сцены. Сперва добавим несколько точек. Это углы комнаты

Теперь соединим их линиями. Они представляют стены

На этом этапе у нас есть герой, направление и окружение. Начнём переносить это всё в 3D

Давайте сохраним эту базовую конфигурацию и поместим её в верхний левый угол

Сперва повернём игрока и окружение, чтобы герой смотрел наверх

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

Далее нам нужно получить расстояние каждой точки относительно плоскости камеры

Так как камера постоянно будет поворачиваться, нам нужно получить только значение по оси Y

Отрицательные значения будут мешать нам на более поздних этапах, поэтому их мы учитывать не будем

Обрезаем все стены, проходящие через плоскость камеры, и удаляем всё, что находится позади неё

В перспективной проекции близкие к камере объекты выглядят больше, а отдалённые — меньше

Это свойство можно эмулировать, разделив значения точек по оси X на их расстояние от камеры

Затем увеличим значения по оси X, чтобы расположение точек и линий соответствовало экрану

Все ключевые действия сделаны. Теперь опустим линии к центру экрана

Затем сделаем из точек линии, которые представляют вертикальные грани в углах комнаты. Используйте для этого их удалённость от камеры

Изобразите линии, которые показывают места соприкосновения с полом и потолком

Теперь нужно лишь залить стены цветом. Всё готово

Полное видео

#опыт #разбор #арт

13 13 комментариев

132

{ "author_name": "Владимир Семыкин", "author_type": "editor", "tags": ["\u0440\u0430\u0437\u0431\u043e\u0440","\u043e\u043f\u044b\u0442","\u0430\u0440\u0442"], "comments": 13, "likes": 132, "favorites": 205, "is_advertisement": false, "subsite_label": "gamedev", "id": 647321, "is_wide": true, "is_ugc": false, "date": "Tue, 02 Mar 2021 20:12:58 +0300", "is_special": false }

Решили сделать ремастер

Как оценить объём работ?

Читать

13 комментариев

Популярные

По порядку

Написать комментарий...

Голодный завод

2 мар в 20:29

Важный момент, нераскрытый в описании – преобразование невыпуклой двухмерной геометрии. В общем случае нужно будет вручную отсекать части двухмерного полигона (которые не будут видны) прежде чем применять проекцию.

Ответить