Basic Attributes

Attributes

To start scripting, the first thing to do is define some attributes that will be used to create the projection. The table below list the attributes used for this tutorial:

Attribute	Description	Value
Screen width	The width of the screen	640
Screen height	The height of the screen	480
Screen half width	The screen width divided by 2	Screen width / 2
Screen half height	The screen height divided by 2	Screen height / 2
Render delay	The delay time for every render iteration	30 milliseconds
Player FOV	The field of view of the player. Normally, the value for games is 60. (In real case, humans have a FOV of 90 but this is not pretty good for 2D screens)	60
Player Half FOV	The FOV divided by 2	Player FOV / 2
Player X	The x coordinate of the player	2
Player Y	The y coordinate of the player	2
Player angle	The angle for the player view direction	90
RayCasting increment angle	The value to increment for each ray in relation of the screen width	Player FOV / Screen width
RayCasting precision	The amout of every ray position to check the wall (higher the value, more iterations) for each ray	64 is a good value
Map	The integer matrix to be the map. Important: This map needs to be rounded with wall value, otherwise our RayCasting logic will get out of the matrix bounds	(Check the code for the value)
Screen	The canvas element	Created at runtime
Screen Context	the context of the canvas element	Got at runtime

Code

We will work with the raycasting.js file now. To define these values in the code (javascript), we can use an object for all values to be more organized. Some values need to be calculated, so, the null value will be used for these.

// Data
let data = {
    screen: {
        width: 640,
        height: 480,
        halfWidth: null,
        halfHeight: null
    },
    render: {
        delay: 30
    },
    rayCasting: {
        incrementAngle: null,
        precision: 64
    },
    player: {
        fov: 60,
        halfFov: null,
        x: 2,
        y: 2,
        angle: 90
    },
    map: [
        [1,1,1,1,1,1,1,1,1,1],
        [1,0,0,0,0,0,0,0,0,1],
        [1,0,0,0,0,0,0,0,0,1],
        [1,0,0,1,1,0,1,0,0,1],
        [1,0,0,1,0,0,1,0,0,1],
        [1,0,0,1,0,0,1,0,0,1],
        [1,0,0,1,0,1,1,0,0,1],
        [1,0,0,0,0,0,0,0,0,1],
        [1,0,0,0,0,0,0,0,0,1],
        [1,1,1,1,1,1,1,1,1,1],
    ]
}

Note: You can use these values as separated variables. I put these in an object to organize it and be easier to access the values.

Calculated values

For calculated values, we will define this code after the object defined.

// Calculated data
data.screen.halfWidth = data.screen.width / 2;
data.screen.halfHeight = data.screen.height / 2;
data.rayCasting.incrementAngle = data.player.fov / data.screen.width;
data.player.halfFov = data.player.fov / 2;

Canvas creation

The canvas is the element that will be used to draw the projection. In this tutorial, we will create the canvas at runtime, but you can create the canvas element in your HTML page. It is up to you. This code creates the canvas with the specified screen width and height, and get the context of the element.

// Canvas
const screen = document.createElement('canvas');
screen.width = data.screen.width;
screen.height = data.screen.height;
screen.style.border = "1px solid black";
document.body.appendChild(screen);

// Canvas context
const screenContext = screen.getContext("2d");

Well done. Our values are defined and we can go to the next part of the tutorial!

• Next: Utilities
• Previous: Files