Amount of vertical bars to raycast. canvas_sizes > resolution.
How many units away do we stop drawing walls
focal length for our drawing calls
What color (gradient) the floor should be drawn in
What color (gradient) the ceiling should be drawn in
Mocked window object, used exclusively for testing.
Buffer to record at what distances the individual bars were drawn from the player. This is crucial to determine whether we are allowed to draw a Sprite or Enemy. Is used as a lookup table. Mapping is [x_coor] -> distance_from_player
Canvas DOM element to draw in (reference)
The color gradient to be shown above (ceiling)
Javascript Graphics Context 2D (reference)
Determines how far away the walls are rendered. 1 means a maximum of 1 block gets rendered in the distance. A lower number means lower work load for the CPU. 1 unit = 1 MapElement
Field of view of the player. Note that this is in radians and set depending on sensor width and the focal length.
The color gradient to be shown below (floor)
Determines the field of view. Ranges from 0 to 1. This refers to the y-vector length in the unit circle. The shorter it is,the more you see. https://en.wikipedia.org/wiki/Focal_length
Shall equal 0.5 * this.fieldOfView. Why as variable?: Because it's used frequently and we want to save ourselves the divisions.
The near color (#RRGGBB) for resetting the ceiling
The near color (#RRGGBB) for resetting the floor
Rendering resolution. Determines how many rays are cast. A lower number means lower work load for the CPU. The bigger this is, the more detailed the walls are since they have more bars to represent them.
Screen width to FOV ratio. Necessary for drawing the enemy on screen on the x-axis.
Bar spacing. Determines how wide the bars are are. Example: If our resolution is 500 and our canvas is 1000, then spacing is 2, so walls are made of vertical bars 2px wide each. Note that the higher this (and thus resolution), the more rays are being cast.
Color of the crosshair.
Color of the death screen (if the Player dies)
Maximum opacity of the death screen (if the Player dies)
Default font size for player tags.
Default font color for player tag
Default font for player tags.
Used for calculating this.fieldOfView
Default value for this.drawDistance
Default value for this.focalLength
Calculate bottom, top and height of wall.
Height of current bar. WARNING: TODO BUG currently will only draw correctly walls as walls, if we add another wall type with the ENUM ID 2, then it may cause issues.
Angle of current bar.
Distance to the bar.
Top x coordinate where the wall begins and how tall it is (height)
Changes the resolution to enable dynamic resolution scaling.
By how much we change the current resolution.
Shows an animation in case the Player is defeated.
Draw a single bar. Remember that multiple bars add up to a wall. How "tall" a bar is rendered is determined by how far away the ray has hit (the more steps, the smaller the bar appears).
Needed for wall texture resources
The n'th bar we're drawing up to this.resolution
The individual steps the ray took
In radians, what the ray is angled from the player
Counterpart to drawFloor, but drawn in the top half of the screen
(Dimensional units in px)
How far the horizontal lines are from the center
How wide the horizontal crosshair line is
How thick the lines are
Color of the whole crosshair (example: '#AABBCC')
Draw floor as a gradient rectangle covering the bottom half of the screen. Rendering order is between skybox and walls for desired effect.
Drawing the skybox which encompasses both sky and floor.
Viewing angle in radients. (Totally rad)
Draw the player's weapon with a "bobbing" animation (weapon swaying from left to right to simulate walking from the players perspective).
Pass the player to get his weapon
Needed for time synchronization of the bobbing animation
See if the player shot his gun and overwrite the floor and ceiling gradient.
Sets up the color gradient on the graphics context for drawing
Coloring of the floor from close to far away
Sets up the color gradient on the graphics context for drawing
Coloring of the floor from close to far away
Generated using TypeDoc
The renderer class takes in map data and enemy entities and displays it on the user's screen from the perspective of the player.
It does so by using the browser's Canvas Context Graphics API: See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
It uses the RayCaster class to render pseudo 3D using only 2D elements. The enemies are rendered separately, NOT using raycasting, but as whole sprites using trigonometry from MathHelper. The first person weapon is drawn as a whole image aswell.