Sliding DOOM style collision resolution against arbitrary 2D geometry

Question

I've been working on a HTML5 canvas raycasting engine for the web browser, with the end goal of making a simple FPS game in the style of the early 90s. The engine sits somewhere between Wolfenstein 3D and Doom in terms of complexity and capabilities - there are fixed-height floors and ceilings, skies, and wall geometry made using line segments, which can be non-orthogonal.

Development was going fairly well until I started trying to implement a simple 2D collision system. The collision detection itself is not a problem - I've written collision and vector maths modules which I've tested and have confidence in. The issue is resolving the collision in an acceptable manner. What I'm trying to make is a basic collision resolution algorithm which will detect when the player collider (circle) is colliding with one or more walls (line segments), and resolve the collision so the player slides along the wall(s) they are colliding with. Basically I want the exact same collision behaviour as DOOM has.

Some googling around led me to the following tutorial:

http://peroxide.dk/papers/collision/collision.pdf

This seemed to describe a method for achieving the desired collision response in a robust and pleasing way, but after a couple of weeks of trying various approaches, mostly following this tutorial's method, I'm still no closer to having a working implementation.

Rather than asking for code-specific advice on one of my failed implementations, I'm here looking for guidance from someone experienced in this sort of programming. I need to learn "The Right Way" to approach the problem, from someone who has got similar systems working before, and knows how it's meant to be done.

Any help is sincerely appreciated.

Here is a stable build of the game from just after I got the first basic collision resolution system working: http://188.226.167.230:346/raycaster.html

(Shrink your browser window to see the 2D map below the main game canvas. WASD and arrow keys, mouse support is dodgy at best, I think this build has 360 controller support but I can't remember.)

Answer 1

It's been a while since I did anything like this, but if I recall correctly you want to test a point on the circle against the line that defines the wall, and if the point has bypassed the line (IE, the line is closer to the center of the circle than the radius of the circle), a collision has occurred. The "pushing" effect comes from blocking the ability to move on a certain axis; IE, you're checking to see if the player has crossed the X boundary of the line and/or the Y boundary of the line, and if so, block movement on that axis. Since the player is still free to move along the non-blocked axis, they will "slide" along the wall if their movement velocity in that axis is non-zero.