Ray Casting Tutorial

Misc Post by Matt 11 years ago. Read 29543 times



This is the first of hopefully many little tutorials I'll be writing. These tutorials are not only for developers and aspiring game creators, but also those of you who are a little curious about the inner workings of your favourite games.

This tutorial is about an old school method of 3D rendering called ray casting. Games which most notably use ray casting are Doom and Castle Wolfenstein. An example of what this tutorial will show you how to do can be found here.


I quickly want to mention that a far more in-depth analysis of ray casting can be found here: http://www.permadi.com/tutorial/raycast/. This is was I used to learn so it's definitely a good place to expand on what I am going to try and teach here. So, on with the tutorial!


Classic ray casting: Doom

The theory behind ray casting is simple. Take a 2D grid, add a point (your player) and trace a designated amount of lines from that point measuring the length of each line until it hits a wall. When you have an array of line lengths, you can convert this into vertical slices on the screen. The more slices you have, the more accurate the 3D render.


This has probably already got you very confused, so let's break it down into digestible chunks!


  1. Draw a grid of squares, I chose 64x64 pixels per square. In the grid define each square as being a wall or not.

  2. Draw a point. The point can go anywhere on your grid, except in a wall square. The point also needs to have a direction it is facing (0-360 degrees)

  3. Trace 80 lines from -30 degrees of the players direction to +30 degrees. For each line record the distance until the line hits a wall square.

  4. Take those distances and draw a vertical line, 4 pixels wide, on your screen for each.


AS2 source


It's all well and good breaking these steps down, but obviously it's more difficult to actually put into practice! You can download the source of the example file here. This should shed some light on the ins and outs!


If you have any questions which aren't answered in the source files, comment below and I'll be happy to answer any queries!

Sign up to Rusty Arcade Today!


Want to comment? Sign up for a full Rusty Arcade account.
Or please log in if you already have an account
Hartds says:
This information is provides ray casting tutorial website for good learners. These services are really helpful to http://www.bigbangdissertation.com/ bloggers and new users and thank you very much for sharing these online essay reviews.
Posted 4 years ago | report
DJ_KaT says:
whoa, i din tink dat teh game wuz made wiff such complex stuff. das kewl!!! and back in the day, THAT GAME ROCKED!!!
Posted 10 years ago
dwoodsky says:
iv never played doom before whats it about,might play it in a mo
Posted 11 years ago
cicla says:
that sounds hell complex
Posted 11 years ago
Rich says:
Cool, I didn't know doom was rendered like that.

A similar technique called ray tracing can also be used to calculate reflections and shadowing of objects, by casting the ray from viewer position and bouncing it off objects towards the light source to determine which parts of objects appear dark, and which ones appear bright or reflect other objects.
Reflective surfaces can also be calculated similarly.
This does mean it has to be updated and recalculated every time the viewer moves.
Posted 11 years ago




130 exp
851 RA Tickets  96 Achievement

Games Mentioned


Ray Casting Tutorial Example

Play Plays

More Recent Blog Posts


We're still here, and our games are back online

4 years ago by Matt
'The Newgrounds Card Game' and 'World War Flash' are back up and running

Bullet Bill 1 & 2 Passwords

8 years ago by cicla
Bullet Bill 1 and Bullet Bill 2 level and character Passwords

Easier Achievements so far

8 years ago by cicla
A detailed list with the easier achievements so far in rustyarcade

London Riots : The Game Guide

8 years ago by Matt
Can't beat the police? Check out this London Riots : The Game guide

Neopets Hasee Bounce

9 years ago by Matt
There are so many games to play online and one of the cuter ones is Neopets Hasee Bounce