Ray Casting Tutorial

 
Misc Post by Matt 8 months ago. Read 1772 times

Hi,

 

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!

 
 

Comments

 
Tired of filling all this in? Sign up for a full Rusty Arcade account.
Or please log in if you already have an account

Won't be public

#
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 3 months ago
#
dwoodsky says:
iv never played doom before whats it about,might play it in a mo
 
Posted 7 months ago
#
cicla says:
that sounds hell complex
 
Posted 7 months 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 7 months ago
 
 

Author

 
#

Matt

76 exp, 538 RA Tickets
Achievements:24
 

Games Mentioned

 
Play

Ray Casting Tutorial Example

Plays: 1633
Score: 2.89
 
 
 
 
 

More Recent Blog Posts

 
Read

Line Simulator complete walkthrough

14 hours ago by cicla
This is a walkthrough for the game Line Simulator. Win the game and get the 20 item!
(0 comments)
Read more...
Read

Text walkthrough for the game Score!

3 days ago by cicla
Complete text walkthrough for the game Score
(0 comments)
Read more...
Read

New avatars available

5 days ago by cicla
If you dont have an avatar, it's time to go to the Options page and see the new avatars we have available for you!
(4 comments)
Read more...
Read

Unreal Flash MSN icons

5 days ago by cicla
This is a compilation of the Unreal Flash msn icons!
(0 comments)
Read more...
Read

Millenium Falcon 360 - Part 1

1 week ago by Matt
I begin my journey of building an xbox 360 with a Star Wars twist!
(3 comments)
Read more...