Raycasting

Raycasting is used to create a 3D projection of a 2D scene. Raycasting can be seen in games like Wolfenstein 3D, and was used because it wasn't possible to run 3D engines in real time, when computers were slower. Raycasting saves computing power by only casting one ray per vertical strip on the screen.

In this project the map of the game consists of walls, a floor, and ceiling. This is represented by a 2-dimensional array of integers. Each integer represents a cube section of a wall. e.g. 0 would indicate no wall, 1 would indicate a red wall And the player position, direction are defined using vectors. And either a field of view (a floating point number) or projection plan (a vector) is defined.

Using this information, a ray (a ray starts at one point and goes off in a direction for infinity) for each vertical section of the screen is cast out until it hits a wall. The correct vertical section of the wall is then drawn to the screen and scaled down depending on how far it is from the player.
 
For more information and tutorials see links at the bottom.

360 Panorama of Raycasting

Raycasting code (for Processing)

for (int x = 0; x < width; x++) {
	//gives a value from -1 to 1 to each x coordinate
	float planePosition = (2 * x / (float)width - 1) * -1;
	//direction vector of ray
	Vector2D ray = new Vector2D(direction.x * cos(fov * planePosition) - direction.y * sin(fov * planePosition), direction.x * sin(fov * planePosition) + direction.y * cos(fov * planePosition));

	//position in array
	int mapX = (int)position.x;
	int mapY = (int)position.y;

	//DDA algorithm (used to find the wall)
	Vector2D distanceToNextSquare = new Vector2D(0, 0);
	Vector2D nextSquareIncrement = new Vector2D(sqrt(1 + (ray.y * ray.y) / (ray.x * ray.x)), sqrt(1 + (ray.x * ray.x) / (ray.y * ray.y)));
	Vector2D mapStep = new Vector2D(0, 0);
	boolean XY = false;

	if (ray.x < 0)
	{
		mapStep.x = -1;
		distanceToNextSquare.x = (position.x - mapX) * nextSquareIncrement.x;
	}
	else
	{
		mapStep.x = 1;
		distanceToNextSquare.x = (mapX + 1.0 - position.x) * nextSquareIncrement.x;
	}
	if (ray.y < 0)
	{
		mapStep.y = -1;
		distanceToNextSquare.y = (position.y - mapY) * nextSquareIncrement.y;
	}
	else
	{
		mapStep.y = 1;
		distanceToNextSquare.y = (mapY + 1.0 - position.y) * nextSquareIncrement.y;
	}
	while (true) {
		if (distanceToNextSquare.x < distanceToNextSquare.y)
		{
			distanceToNextSquare.x += nextSquareIncrement.x;
			mapX += mapStep.x;
			XY = false;
		}
		else
		{
			distanceToNextSquare.y += nextSquareIncrement.y;
			mapY += mapStep.y;
			XY = true;
		}

		if (mapX < 0 || mapY < 0 || mapX >= mapSize || mapY >= mapSize) {
			//ray now outside of array
			break;
		} else if (map[mapX][mapY] > 0) {
			//wall found

			//calculate distance
			float distance = 0;
		if (XY) {
			distance = mapY - position.y; 
			if (ray.y < 0)
				distance++;
				distance /= ray.y;
			} else {
				distance = mapX - position.x;
			if (ray.x < 0)
				distance++;
				distance /= ray.x;
			}

			//fisheye correction
			distance = fishEyeCorrection ? distance * abs(cos(fov * planePosition)) : distance;

			//wall segment size
			int drawStart = -(int)(height / distance) / 2 + height / 2;
			int drawEnd = (int)(height / distance) / 2 + height / 2;

			//get color and darken color for back faces to create shading
			if (XY) {
				color c;
			if (map[mapX][mapY] > colors.length || map[mapX][mapY] <= 0)
				c = color(#0AFFD4);
			else 
				c = colors[map[mapX][mapY] - 1];

			float r = red(c);
			float b = blue(c);
			float g = green(c);

			stroke(color(r / 2, g / 2, b / 2)); 

		} else
			if (map[mapX][mapY] > colors.length || map[mapX][mapY] <= 0)
				stroke(color(#0AFFD4));
			else 
				stroke(colors[map[mapX][mapY] - 1]);

			//draw line
			line(x, drawStart, x, drawEnd);
			break;
		}
	}
}

Video

Fish Eye effect

The fish eye effect is created when the distance the ray has to travel to get to a wall is farther than the actual distance to the wall from the player.

You can see how when uncorrected the walls bulge in the center. When correction is turned on the wall becomes straight again. However the sides of the screen become distorted the larger the field of view is and does not work past 90 degrees field of view.

06e9b4_defcb8b16f1d4c7bb50736c602696455.gif

360 Degree View: Click Here

Raycasting Info
Lodev: Click Here
Permandi: Click Here
PlayfulJS: Click Here 
Processing: Click Here

HTML5 Spatial Audio

When messing around with Phaser I wanted a way to use HTML5 3D audio. 3D audio allows people using headphones to hear noises coming from different directions.

Instead of creating a phaser plugin, I instead created a stand alone library that you can interface with phaser. This means that this library can be used with other game frameworks or by itself. The library is essentially a wrapper for the HTML 3D audio api. The library uses code from here to load sounds.

Loading Sounds

 // Creates the buffer to load sounds - createBufferLoader(array of sound locations, function to run after sounds are loaded)
audioLIB.createBufferLoader([ 
    "sound.mp3"
    ], function(){
		console.log("loaded");
	});
});

// load sounds
audioLIB.loadBuffers();

//is true if sounds have loaded
audioLIB.loaded;

Manipulating Listener (the listener is like where the persons ears would be in the scene)

//Set the listener's orientation - setListOrientation(x, y, z, x up vector, y up vector, z up vector)
audioLIB.setListOrientation(x, y, z, Ux, Uy, Uz);

//Set the listener's position
audioLIB.setListPosition(x, y, z);

//Set the listener's velocity
audioLIB.setListVelocity(x, y, z);

//Update the listener's orientation and position based on a sprite - updateFromSprite(sprite, [optional] sprite body)
//Doesn't set the listener's velocity
audioLIB.updateFromSprite(sprite);

Mainpulationg Sounds

//Array containing all sounds
audioLIB.sounds;

//Shortcut for setting whether the sounds should loop or not - setSoundLoops(boolean)
audioLIB.setSoundLoops(loops);

//Starts playing all sounds
audioLIB.startAll();

//Stops playing all sounds
audioLIB.stopAll();

//Runs a function for each sound
audioLIB.forEachSound(function (sound) {
});

//Functions in sound objects

//Set sound object orientation, position and velocity
audioLIB.Sound.prototype.setOrientation(x,y,z);
audioLIB.Sound.prototype.setPosition(x,y,z);
audioLIB.Sound.prototype.setVelocity(x,y,z);

//Set sound object direction - setDirection(coneInnerAngle, coneOuterAngle, coneOuterGain)
audioLIB.Sound.prototype.setDirection(iA, oA, oG);

//Set sound object gain - setGain(float)
audioLIB.Sound.prototype.setGain(v)

//Set whether sound object loops - setLoop(boolean)
audioLIB.Sound.prototype.setLoop(v)

//Set the sound object's buffer (the buffer contains the sound objects sound data)
audioLIB.Sound.prototype.setBuffer(b)

//Update the sound object's orientation and position with a sprite - updateFromSprite(sprite, [optional] sprite body)
audioLIB.Sound.prototype.updateFromSprite(sprite, body);

//Start playing the sound at position v
audioLIB.Sound.prototype.start(v);

//Stop playing the sound
audioLIB.Sound.prototype.stop();
Download Link: Click here
Please credit me if used

Download Link for BufferLoader: Click here

Asteroids

An asteroids game made with Phaser. Phaser is a HTML5 game framework. It allows you to create 2D games for websites. 

You fly around as a space ship trying to avoid the asteroids, and shoot at them to gain points. When you shoot a large asteroid it splits into smaller asteroids, and shooting a smaller asteroid will destroy it. Objects wrap around screen edges, for example if the ship goes off the left edge it appears on the right edge.

The game is based on Asteroids, an arcade game made in the 70s. It had the same aesthetic as the original game. The arcade game also had flying saucers, which would attack the player, and a hyperdrive that would place the player randomly on the screen.

Click here to play the game

Libraries Used: Click Here
Ateroids Arcade Game: Click Here