О 3D-Шутерах С Использованием Css+Html [Перевод]

Привет, Хабр! Представляю вашему вниманию перевод статьи Создание 3D-игры с помощью CSS + HTML Майкл Бромли.

Не так давно я изучал редко используемые возможности CSS — анимацию и 3D-функции, и после выступления на конференции по JavaScript я собрал это демо .

Пока я работал над этим, мне стало любопытно, как далеко можно зайти в разработке 3D-графики с использованием чистого CSS.

О 3D-шутерах с использованием CSS+HTML [перевод]

( скриншот сделан переводчиком ) В какой-то момент я наткнулся на работы Кита Кларка.

Он собрал два замечательных примера CSS: один из них является основой для 3D шутер от первого лица от первого лица ( в стиле Counter-Strike. ок.

переводчик) , второй - Модель истребителя X-Wing использование теней:

О 3D-шутерах с использованием CSS+HTML [перевод]

( скриншот сделан переводчиком ) Вдохновленный его работами и образцы на Codepen Я решил попробовать сделать звездный 3D-шутер, используя чистый CSS и HTML, но, конечно же, с добавлением JavaScript. То есть для рендеринга всех игровых объектов я использовал только CSS и HTML. Другими словами, игра разрабатывалась без использования изображений, WebGl, холста или векторной графики (SVG).

Результат может быть посмотреть и протестировать по этой ссылке .

Поскольку этой работой я хотел подчеркнуть возможности CSS, я остановился на космическом шутере старой школы: когда ты уходишь вглубь экрана, а на тебя летят вражеские корабли.

Что еще нужно для получения 3D эффекта? Эскизный дизайн объектов и цветовая палитра вдохновлены старой игрой Tempest. для компьютера Атари .

Этот стиль позволяет вам не беспокоиться о добавлении теней.

Почему CSS?

Хороший вопрос.

Был ли CSS разработан для подобных вещей? Точно нет. Я просто хотел показать, насколько мощным может быть CSS.

Мнение переводчика

Результат автора оказался неплохим; в эту игру действительно можно поиграть, хотя бы пару минут. Я не переводил всю статью.

Далее автор пишет о преимуществах CSS для 3D-разработки, а также о проблемах, с которыми он столкнулся.

Дело в том, что не следует использовать CSS для разработки игр, особенно 3D.

Вместо заключения.
Мысли переводчика

На мой взгляд, идея реализации 3D-пространства в CSS и HTML имеет смысл, когда стоит задача разработать проект с неполной 3D графикой, т.е.

когда части пространства или объекты можно реализовать благодаря каким-то хитростям, например с перспективой.

В целом современные 3D-игры, наполненные обилием эффектов, кажутся перегруженными по сравнению с проектами 20-летней давности.

Стремление к натуралистичным эффектам уводит игрока от самой игры (я имею в виду спортивный азарт, желание пройти саму игру, а не смотреть зрелищные взрывы и фейерверки), поэтому все чаще мне вспоминаются 2.5D игры с объекты из спрайтов, часть из которых, возможно, можно попробовать перенести с помощью веб-технологий.

Может какие-то игры для консолей 90-х (кстати, для приставки Sega были вполне реальные 3D игры.

На заметку молодому поколению).

К желанию немного разобраться в этой теме меня привело чтение некоторых публикаций на Хабрахабре (и не только) по линейной алгебре, а также желание понять, как работают 3D-преобразования изнутри.

Прочитав статьи ниже, у меня даже возникло желание создать какую-нибудь простенькую CSS-игру на тему космоса (с минимальным количеством 3D-преобразований и некоторыми хитростями, заменяющими «настоящее» 3D), но через некоторое время я нашел этот блог.

где почти то, что я хотел сделать, уже сделано.

Должен отметить, что для формирования пространства очень удобно использовать чрезвычайно удаленные предметы.

К таким объектам фактически нет необходимости применять линейные преобразования, а визуальный эффект получается даже более интересным (например, если сделать фотографию пространства на заднем плане и возможность вращения вдоль одной оси), чем 3D стены с фрактальными текстурами.

, как и в современных играх.

В общем, многие старые игрушки вполне реально воскресить для новых поколений.

Ссылки

Теги: #перевод #перевод с английского #CSS #CSS 3D #HTML #игры #CSS #Работа с 3D-графикой #Разработка игр #HTML #Читальный зал

О 3D-Шутерах С Использованием Css+Html [Перевод]

Последнее изменение: 2024-10-19 21:10:22

Вместе с данным постом часто просматривают: