About 3D shooters on CSS + HTML [translation]
Hi, Habr! I present to your attention the translation of the article Building a 3D Game with CSS + HTML by Michael Bromley.
Not so long ago, I studied rarely used CSS functions - the function of animation and 3D, and after talking in a conference on JavaScript, I put together this demo . While I was working on it, I was curious how far you can go in constructing three-dimensional graphics on pure CSS.
( screenshot made by translator )
At one point, I came across the work of Keith Clark (Keith Clark). He collected two great examples on CSS: one of them is the basis for a 3D FPS first-person shooter ( in Counter-Strike style. Approx. Translator) , the second is the X-Wing star fighter model using shadows:
')
( screenshot made by translator )
Inspired by his work and samples on Coden , I decided to try making a 3D star shooter in pure CSS and HTML, but, of course, with the addition of JavaScript. That is, to draw all the objects of the game, I used only CSS and HTML. In other words, the game was developed without the use of images, WebGl, canvas or vector graphics (SVG). The result can be viewed and tested on this link .
Since this work I wanted to emphasize the possibilities of CSS, I stopped on the old-school space shooter: when you move deep into the screen, and the enemy ships fly at you. What else do you need to get the 3D effect?
The schematic design of the objects and the color palette are inspired by the old game Tempest. for computer Atari . This style allows you to not care about adding shadows.
Good question. Has CSS been designed for such things? Definitely not. I just wanted to show how powerful CSS can be.
The result was quite good for the author, you can really play this game for at least a couple of minutes. I did not translate the entire article. Next, the author writes about the benefits of CSS for the development of 3D, as well as the problems encountered. Washed it comes down to the fact that you should not use CSS to develop games, especially three-dimensional.
In my opinion, the idea of ​​implementing three-dimensional space in CSS and HTML acquires meaning,
when the task is to develop a project with incomplete 3D graphics, i.e. when a part of space or objects can be realized thanks to some tricks, for example, with perspective.
In general, modern 3D games filled with an abundance of effects, compared to projects 20 years ago, seem overloaded. The desire for naturalistic effects removes the player from the game itself (I mean sports excitement, the desire to go through the game itself, as opposed to watching spectacular explosions and salutes), so I often recall 2.5D games with objects from sprites, some of which, you can probably try to shift using web technologies. Maybe some games for the consoles of the 90s (by the way, for the Sega console, there were quite real three-dimensional games. A note for the younger generation).
Reading a few publications on Habrahabr (and not only) on linear algebra, as well as the desire to understand how 3D transformations are made from the inside, led me to wanting a little understanding of this topic. After reading the articles below, I even had the desire to create some simple CSS game, on the theme of space (with a minimal amount of 3d transformations and some tricks replacing “real” 3D), but after a while I I found this blog, where almost what I wanted to do was already done. I must note that it is very convenient to use extremely distant objects for the formation of space. These objects actually do not need to apply linear transformations, and the visual effect is even more interesting (for example, if you take a photo of space and the ability to rotate along one axis) as a background, rather than 3D walls with fractal textures, like in modern games ... In general, many old toys it is quite possible to resurrect for new generations.
Not so long ago, I studied rarely used CSS functions - the function of animation and 3D, and after talking in a conference on JavaScript, I put together this demo . While I was working on it, I was curious how far you can go in constructing three-dimensional graphics on pure CSS.
At one point, I came across the work of Keith Clark (Keith Clark). He collected two great examples on CSS: one of them is the basis for a 3D FPS first-person shooter ( in Counter-Strike style. Approx. Translator) , the second is the X-Wing star fighter model using shadows:
')
Inspired by his work and samples on Coden , I decided to try making a 3D star shooter in pure CSS and HTML, but, of course, with the addition of JavaScript. That is, to draw all the objects of the game, I used only CSS and HTML. In other words, the game was developed without the use of images, WebGl, canvas or vector graphics (SVG). The result can be viewed and tested on this link .
Since this work I wanted to emphasize the possibilities of CSS, I stopped on the old-school space shooter: when you move deep into the screen, and the enemy ships fly at you. What else do you need to get the 3D effect?
The schematic design of the objects and the color palette are inspired by the old game Tempest. for computer Atari . This style allows you to not care about adding shadows.
Why CSS?
Good question. Has CSS been designed for such things? Definitely not. I just wanted to show how powerful CSS can be.
Opinion translator
The result was quite good for the author, you can really play this game for at least a couple of minutes. I did not translate the entire article. Next, the author writes about the benefits of CSS for the development of 3D, as well as the problems encountered. Washed it comes down to the fact that you should not use CSS to develop games, especially three-dimensional.
Instead of a conclusion. Thoughts of a translator
In my opinion, the idea of ​​implementing three-dimensional space in CSS and HTML acquires meaning,
when the task is to develop a project with incomplete 3D graphics, i.e. when a part of space or objects can be realized thanks to some tricks, for example, with perspective.
In general, modern 3D games filled with an abundance of effects, compared to projects 20 years ago, seem overloaded. The desire for naturalistic effects removes the player from the game itself (I mean sports excitement, the desire to go through the game itself, as opposed to watching spectacular explosions and salutes), so I often recall 2.5D games with objects from sprites, some of which, you can probably try to shift using web technologies. Maybe some games for the consoles of the 90s (by the way, for the Sega console, there were quite real three-dimensional games. A note for the younger generation).
Reading a few publications on Habrahabr (and not only) on linear algebra, as well as the desire to understand how 3D transformations are made from the inside, led me to wanting a little understanding of this topic. After reading the articles below, I even had the desire to create some simple CSS game, on the theme of space (with a minimal amount of 3d transformations and some tricks replacing “real” 3D), but after a while I I found this blog, where almost what I wanted to do was already done. I must note that it is very convenient to use extremely distant objects for the formation of space. These objects actually do not need to apply linear transformations, and the visual effect is even more interesting (for example, if you take a photo of space and the ability to rotate along one axis) as a background, rather than 3D walls with fractal textures, like in modern games ... In general, many old toys it is quite possible to resurrect for new generations.
Links
Source: https://habr.com/ru/post/342546/
All Articles