Monday, February 8th, 2010

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

Category: Canvas, Fun, Games, JavaScript

<>p>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

  1. current_x = 160 // Half of a 320 width screen
  2. dx = 0 // Curve amount, constant per segment
  3. ddx = 0 // Curve amount, changes per line
  4.  
  5. for each line of the screen from the bottom to the top:
  6.   if line of screen's Z Map position is below segment.position:
  7.     dx = bottom_segment.dx
  8.   else if line of screen's Z Map position is above segment.position:
  9.     dx = segment.dx
  10.   end if
  11.   ddx += dx
  12.   current_x += ddx
  13.   this_line.x = current_x
  14. end for
  15.  
  16. // Move segments
  17. segment_y += constant * speed // Constant makes sure the segment doesn't move too fast
  18. if segment.position < 0 // 0 is nearest
  19.   bottom_segment = segment
  20.   segment.position = zmap.length - 1 // Send segment position to farthest distance
  21.   segment.dx = GetNextDxFromTrack() // Fetch next curve amount from track data
  22. end if

Related Content:

Posted by Chris Heilmann at 7:04 am
6 Comments

++++-
4.3 rating from 29 votes

6 Comments »

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: http://maettig.com/code/javascript/asciifire.html

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.