RayCasting

Starting

This is the most important page of the tutorial. To start our logic, we need to know some concepts with the player angle, player FOV and Screen width.

The first thing we have to know is that each ray needs to be throwed in relation of the player angle and the field of view (FOV). The player FOV is 60º, but the player focus is in the middle of the FOV. Because this we have to start the RayCasting in -30º of the player angle. For example, if the player angle is 90º, we have to cast the rays from the 60º angle to 120º angle. Check the image below to see the player FOV representation.

Inside our rayCasting() function, we can get the actual ray angle with this code

function rayCasting() {
    let rayAngle = data.player.angle - data.player.halfFov;
}

After it, we will start the cast of the rays. Remember that we have to iterate all screen slices, so we will use the screen width to do this. For each iteration the rayAngle variable needs to be incremented to iterate the entire player FOV. We will use the data.rayCasting.incrementAngle to do it.

function rayCasting() {
    let rayAngle = data.player.angle - data.player.halfFov;

    for(let rayCount = 0; rayCount < data.screen.width; rayCount++) {

        // Increment
        rayAngle += data.rayCasting.incrementAngle;
    }
}