Monday, February 8th, 2010

Pseudo 3D tricks from old computer games for all your Canvas needs

Category: Canvas, Fun, Games, JavaScript

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:

Fake 3D

current_x = 160 // Half of a 320 width screen
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[/code]

Posted by Chris Heilmann at 7:04 am

4.3 rating from 29 votes


Comments feed TrackBack URI

I wonder if the next stop is going to be some of the older demo scene work.

Comment by carsonm — February 8, 2010

@carsonm frankly, I am amazed there are no bumpmappers and voxel spaces in canvas out there. there was an ascii fire in 2002 though:

Comment by Chris Heilmann — February 8, 2010

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.

Comment by travisalmand — February 8, 2010

Ou yes, please let me play Lotus III again. Nice work!

Comment by gossi — February 8, 2010

@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.

Comment by p01 — February 10, 2010

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.

Comment by selim — August 26, 2010

Leave a comment

You must be logged in to post a comment.