Greetings,
Now for this third part I wanted to do something much more major and which would be cool! So I found a relatively obscure 2D game engine written in JS called Litecanvas. It is similar to tools like p5.js or raylib which I have some previous experience with.
I noticed there was a long standing issue regarding simulating 3D. This is a topic that has interested me for many years so I decided to try and solve this issue myself using a ray-casting technique. However, I wanted to avoid the awkwardness of asking for the issue then being unable to complete the task.
So I spent a week researching and testing hoping that no one else would take the issue in the mean time. Honestly, looking back I should have just asked for the issue in the first place the maintainer is a very nice person.
It turns out high school trigonometry has a lot of uses for ray-casting which is quite exciting for someone who hasn't had a good use for it. The solution I opted for works in the following way.
First rays are projected out from the player and they record the distance from the wall to the player. The longer the ray the further the wall. Each ray will correspond to a single column in the players' first person field of view.
The first person point of view is then generated by taking the lengths of the rays, with longer rays meaning the wall is drawn smaller since it is further away and shorter rays meaning the wall is drawn longer since it is closer.
This glosses over some of the more complex parts like the fixing the fish eye effect. However, you can view the PR see the it all for yourself.
Overall, although this took me wayyy longer then I thought it would I'm quite please with the final product.
Top comments (0)