Raytracing vision cones on a 2D tilemap

Raytracing is easy to implement, and adapting it for vision couldn't be simpler. As we're already collecting a series of points touched by the rays, we simply need to test if our target is on one of these points.

In our example, we'll change the radial vision to a cone, which we'll rotate around a central point, like an NPC on guard or maybe a security camera.

We'll be making use of our points on arc circumference method from another article.

This is almost identical to our previous method except for a minor change; instead of calling pointsOnCircumference we call pointsInArc. This means we call the main method, updateRayData with two extra arguments. Our new argument list looks like this; cx, cy (the central point from which our arc eminates), cr (the radius or distance of the arc), and arcStart, arcEnd. The new arcStart and arcEnd arguments are values in radians, that express the beginning and end points of the arc.

We calculate these values from the following: the visionDirection, which is the angle (in radians) the object is facing, and visionRadius, which is the radius the vision arc will cover:

arcStart = visionDirection - (visionRadius / 2);
arcEnd	= visionDirection + (visionRadius / 2);

Our new vision function looks like this (for a full description check out the previous raycasting tutorial):

function updateRayData(cx, cy, cr, arcStart, arcEnd)
{
	var edges = pointsInArc(cx, cy, cr, arcStart, arcEnd);
	var points = {};
	
	for(x in edges)
	{
		var line = pointsOnLine(cx, cy, edges[x][0], edges[x][1]);
		
		for(l in line)
		{
			points[((line[l][1]*gridW)+line[l][0])] = [line[l][0], line[l][1]];
			if(mapData[((line[l][1]*gridW)+line[l][0])]==0) { break; }
		}
	}
	
	return points;
}

To see if an object is visible, we just check if its position occurs in the returned points list, which we're calling rayData in the global scope:

blueVisible = (typeof rayData[((bluePos[1]*gridW)+bluePos[0])]!='undefined');

Where ((bluePos[1]*gridW)+bluePos[0]) simply converts the blue target x, y position to an index in the mapData array. We just see if this index occurs in our list of rayData points.

Rotating the cone of Vision

We'll also look at how the cone if vision is rotated briefly. We set the global variables delayRotation to the number of milliseconds we want one full rotation to take, and delayUpdate to the number of milliseconds delay between recalculations of the vision cone. We do not update it every frame - limiting calculations that are not needed every frame helps improve code efficiency!

We also keep track of gameTime, the number of elapsed milliseconds since the demo began, and lastFrame - the time the last frame was drawn. The variable now is the current time, in milliseconds, when this frame is being drawn in our game loop.

	var now = Date.now();
	gameTime+= (now-lastFrame);
	lastFrame = now;

We can check and see if the time since we last recalculated the vision cone is longer than the delayUpdate value - if it is, we'll recalculate:

	if(delayUpdate<(now-lastUpdate))
	{

Our visionDirection is calculated dividing PI² (the number of radians in a circle) by delayRotation, and multiplying the resulting value by the modulus of the gameTime divided by delayRotation:

		visionDirection = ((Math.PI*2) / delayRotation) * (gameTime % delayRotation);

We can now recalculate the vision arc.

		rayData = updateRayData(circleX, circleY, radius,
			(visionDirection-(visionRadius/2)), (visionDirection+(visionRadius/2)));

		lastUpdate = now;

We now check if the target is visible, and update blueVisible accordingly, and we're done!

		// Is the blue target visible?
		blueVisible = (typeof rayData[((bluePos[1]*gridW)+bluePos[0])]!='undefined');
	}

For a more detailed example of how this is all put together, please check the example source code.