Monday, February 8th, 2010
Pseudo 3D tricks from old computer games for all your Canvas needs
It is quite interesting to see how technology moves in circles. With canvas being the new fun toy to play with for creating browser-based games we have to find solutions to fake a 3D environment to be really fast (sure there is Canvas 3D but it is overkill for most games). The trick is to dig into the tricks arsenal of old-school game development on machines full of win like the Commodore 64 or Amiga.
Louis Gorenfeld some very detailed explanations on how to fake 3D including some of the formulas used in the days of 8 bit.
He is also working on some demo code which you can help him with by providing some JS/Canvas demos:
dx = 0 // Curve amount, constant per segment
ddx = 0 // Curve amount, changes per line
for each line of the screen from the bottom to the top:
if line of screen's Z Map position is below segment.position:
dx = bottom_segment.dx
else if line of screen's Z Map position is above segment.position:
dx = segment.dx
end if
ddx += dx
current_x += ddx
this_line.x = current_x
end for
// Move segments
segment_y += constant * speed // Constant makes sure the segment doesn't move too fast
if segment.position <0 // 0 is nearest
bottom_segment = segment
segment.position = zmap.length - 1 // Send segment position to farthest distance
segment.dx = GetNextDxFromTrack() // Fetch next curve amount from track data
end if
I wonder if the next stop is going to be some of the older demo scene work.
@carsonm frankly, I am amazed there are no bumpmappers and voxel spaces in canvas out there. there was an ascii fire in 2002 though: http://maettig.com/code/javascript/asciifire.html
There’s still a great deal of tricks like this to play with from the old days of video games. Tile engines come to mind. One could look through old Actionscript2 game tutorials as well. And when all the 3D stuff starts to hit we can dig through those old tutorials as well. Interesting and fun thought that low-poly 3D modeling skills may be in demand again soon.
Ou yes, please let me play Lotus III again. Nice work!
@Chris: Looks like you missed Neja ( which does not even use Canvas ) and all the tiny prods I and Matthew Westcott, to name another demo maker with an interest in the JavaScript, did in the past 6-7 years.
Hi, when I read this article some month ago I knew that I’dl have to try this and the “10k Apart” contest from An Event Apart was the perfect excuse :)! Anyway here is the result : Racer10k and the source code is on gitHub.