Forget about canvas for a moment
Somehow it happened that considering various browser demos of recent years, I could not help but notice that everyone started using canvas .
So recently, looking at Habr, I came across wolf3d on javascript through canvas (from the same author as mario). (in the reference, the letters c and p are Russian, but this is not me, but habr)
But in fact, many effects can be done without using this wonderful tag.
And, using these ideas, in some cases, you can refuse the flash, especially since, unlike canvas, it all works fine in IE (the market share of which, for the present, is very large).
Take, for example, the same Wolf3D.
Rendering technology is based on RayCasting .
In short: the image is formed from a column array, and for each column from the viewpoint a beam is “emitted” and “reaches” to the wall. The height of the column is inversely proportional to the length of the beam.
')
For us it is especially important that the image is formed from a variety of vertical lines.
Each of these lines is a column of texture, compressed (or vice versa, stretched) to the desired height.
And the browser is very well able to increase and decrease these pictures.
There was only one problem - to select the desired column from the image. Or rather, this is not a problem, since these are ordinary css-sprites, so we do (for example) like this:
and we get this very column.
And if you apply raycasting + css-sprites, then you can get an interesting thing that works in all browsers
(well, almost :) , tested in IE6, IE7, FF2, FF3, Opera and Safari).
Note for IE users: the explorer somehow draws elements for the very first time, so when loading the page interesting artifacts are observed (by the way, as long as the artifacts are artifact, you can easily run around the map).
An example can be developed by adding sprites there (lamps, monsters, etc.), and unlike manual rendering (using canvas ),
You do not have to draw them in columns, comparing each column with the z-index of the already drawn one. Instead, you can set the same css property,
and the browser itself will do this for us.
The use of technology, of course, is not limited to the creation of shooters :) .
There is only one thing that you don’t need to do at all - to emulate a canvas by means of divs arranged in a table. It will be terribly slow (especially in IE).
PS Technology, by the way, is not new. The first time I saw it in the browser demo Comrade. gasman-a two years ago.
Update: Emulating the canvas for IE slows down even more than the pictures ( see for yourself ). Therefore, if cross-browser compatibility is required, then either flash or pictures.
Update 2: In the comments, they often mention the uselessness of the invention of the 3d bicycle on the canvas / pictures / divas. However, I note that I did not set a goal to write a 3d engine, but only to show the use of an interesting method. It’s just that the stars have come together that at the time of writing the post I was impressed by wolf3d on the canvas.
So recently, looking at Habr, I came across wolf3d on javascript through canvas (from the same author as mario). (in the reference, the letters c and p are Russian, but this is not me, but habr)
But in fact, many effects can be done without using this wonderful tag.
And, using these ideas, in some cases, you can refuse the flash, especially since, unlike canvas, it all works fine in IE (the market share of which, for the present, is very large).
Take, for example, the same Wolf3D.
Rendering technology is based on RayCasting .
In short: the image is formed from a column array, and for each column from the viewpoint a beam is “emitted” and “reaches” to the wall. The height of the column is inversely proportional to the length of the beam.
')
For us it is especially important that the image is formed from a variety of vertical lines.
Each of these lines is a column of texture, compressed (or vice versa, stretched) to the desired height.
And the browser is very well able to increase and decrease these pictures.
There was only one problem - to select the desired column from the image. Or rather, this is not a problem, since these are ordinary css-sprites, so we do (for example) like this:
<div style = "position: absolute; top: 0px; left: 0px; width: 1px; height: 256px; overflow: hidden;">
<img src = "wall.png" style = "width: 256px; height: 128px; position: absolute; top: 64px; left: -32px;" alt = "" />
</ div>
and we get this very column.
And if you apply raycasting + css-sprites, then you can get an interesting thing that works in all browsers
(well, almost :) , tested in IE6, IE7, FF2, FF3, Opera and Safari).
Note for IE users: the explorer somehow draws elements for the very first time, so when loading the page interesting artifacts are observed (by the way, as long as the artifacts are artifact, you can easily run around the map).
An example can be developed by adding sprites there (lamps, monsters, etc.), and unlike manual rendering (using canvas ),
You do not have to draw them in columns, comparing each column with the z-index of the already drawn one. Instead, you can set the same css property,
and the browser itself will do this for us.
The use of technology, of course, is not limited to the creation of shooters :) .
There is only one thing that you don’t need to do at all - to emulate a canvas by means of divs arranged in a table. It will be terribly slow (especially in IE).
PS Technology, by the way, is not new. The first time I saw it in the browser demo Comrade. gasman-a two years ago.
Update: Emulating the canvas for IE slows down even more than the pictures ( see for yourself ). Therefore, if cross-browser compatibility is required, then either flash or pictures.
Update 2: In the comments, they often mention the uselessness of the invention of the 3d bicycle on the canvas / pictures / divas. However, I note that I did not set a goal to write a 3d engine, but only to show the use of an interesting method. It’s just that the stars have come together that at the time of writing the post I was impressed by wolf3d on the canvas.
Source: https://habr.com/ru/post/25025/
All Articles