Doom Style 3D Projection

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|280\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Concept/Design -> Doom Style 3D Projection
Sun, 12 Sep 2021, 05:37
Jayenkai	Doom Style 3D Projection Pakz retweeted @ValerADHD's quick guide to doing Doom style projections, yesterday. Figured I'd attempt a rewrite in JSE, and it .. kinda works.. except I can't figure out a decent way to fill it all in, due to the slowness of the engine. Bah, humbug! Anyhoo... // @ValerADHD's Doom-Style 3D Projection // https://twitter.com/ValerADHD/status/1333754186148818949 // Created 2021/9/12 Graphics 512,512,2 Dim Point(256,20) // Tweak these Walls=8 FOV=1/512 PosX=0 PosY=0 Turn=0 // Define a circular "map" ang=360/Walls For m=1 to Walls Point(m,1)=Sin(mang)160 Point(m,2)=-Cos(mang)160 Point(m,3)=Sin((m+1)ang)160 Point(m,4)=-Cos((m+1)ang)160 // Note, I'm defining two points for each wall, so that (I would hope!) it's easier to expand. Point(m,7)=mang Next Repeat CLS ResetDraw:SetThick 4 w=ScreenWidth()/2 h=ScreenHeight()/2 For m=1 to Walls // For each wall // Move the map so the player's in the middle Point(m,11)=Point(m,1)+PosX:Point(m,12)=Point(m,2)+PosY Point(m,13)=Point(m,3)+PosX:Point(m,14)=Point(m,4)+PosY // Rotate the map so that the thing in front of the player is at the top. // Find angle/distance of the point, from the player ang=ATan2(-Point(m,11),Point(m,12)) ang2=ATan2(-Point(m,13),Point(m,14)) dist=Pyth(Point(m,11),Point(m,12)) dist2=Pyth(Point(m,13),Point(m,14)) // Then rotate it based on the player's angle Point(m,11)=Sin(ang-Turn)dist Point(m,12)=-Cos(ang-Turn)dist Point(m,13)=Sin(ang2-Turn)dist2 Point(m,14)=-Cos(ang2-Turn)dist2 // Step Two - Slice everything below 0 (where "below" = >0!) if Point(m,12)<=0 or Point(m,14)<=0 // If a line intersects 0, then find the point where it intersects it, and chop it to there. if Point(m,12)>0 if CollideLineToLine(Point(m,11),Point(m,12), Point(m,13),Point(m,14), -2048,0, 2048,0) Point(m,11)=LineCollidePointX Point(m,12)=LineCollidePointY endif endif if Point(m,14)>0 if CollideLineToLine(Point(m,11),Point(m,12), Point(m,13),Point(m,14), -2048,0, 2048,0) Point(m,13)=LineCollidePointX Point(m,14)=LineCollidePointY endif endif // Record the y as the distance Point(m,15)=Point(m,12)+0.01 Point(m,16)=Point(m,14)+0.01 // Divide the X co-ordinate by it's distance to give perspective. s=1:if Point(m,11)<0 then s=-1 Point(m,11)=(Abs(Point(m,11))/(Abs(Point(m,15)FOV)))s s=1:if Point(m,13)<0 then s=-1 Point(m,13)=(Abs(Point(m,13))/(Abs(Point(m,16)FOV)))s // Replace the Y with the inverted distance Point(m,15)=h+Point(m,15)0.5 if Point(m,15)<1 then Point(m,15)=1 Point(m,16)=h+Point(m,16)0.5 if Point(m,16)<1 then Point(m,16)=1 InkRot Point(m,7),1,1 Line Point(m,11)+w,h+Point(m,15),Point(m,13)+w,h+Point(m,16) Line Point(m,11)+w,h-Point(m,15),Point(m,13)+w,h-Point(m,16) Line Point(m,11)+w,h+Point(m,15),Point(m,11)+w,h+Point(m,15) Line Point(m,13)+w,h-Point(m,16),Point(m,13)+w,h+Point(m,16) endif Next Speed=(GamePad(ButtonUp)-GamePad(ButtonDown))2 Turn=Turn+(GamePad(ButtonRight)-GamePad(ButtonLeft))4 PosX=PosX+Sin(Turn)Speed PosY=PosY-Cos(Turn)*Speed Flip Forever --v -=-=- ''Load, Next List!''
Sun, 12 Sep 2021, 07:59
Pakz	Is a fill polygon function or something similar in native javascript not an option? Nice short code though!
Sun, 12 Sep 2021, 11:56
PHS	Cool
Tue, 21 Sep 2021, 02:52
Afr0	This is awesome Jay! Does this mean that Doom can be ported to JSE? -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Tue, 21 Sep 2021, 02:56
Jayenkai	It's still too slow for that. But, sure. Hop to it. -=-=- ''Load, Next List!''
Tue, 21 Sep 2021, 03:03
Afr0	What do you mean it's too slow? This example seems to run fine on my computer! Have you checked the FPS on it? -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Tue, 21 Sep 2021, 03:08
Jayenkai	The above example might work, but the above example doesn't even include filled polygons, never mind trying to texture them. Could really do with the ability to draw Quads in JSE, but that requires switching to WebGL, and that's a known battery killer on mobile devices. JSE's bad enough at doing that without adding WebGL into the mix. -=-=- ''Load, Next List!''
Tue, 21 Sep 2021, 03:20
Afr0	Couldn't you include WebGL as an optional feature? -=-=- Afr0 Games Project Dollhouse on Github - Please fork!
Tue, 21 Sep 2021, 03:26
Jayenkai	Some day, perhaps. I'd much rather work on getting the actual script parsing to go faster, first. Adding in WebGL at this point would still end up being bottlenecked by the speed of the script. -=-=- ''Load, Next List!''
Tue, 21 Sep 2021, 03:58
cyangames	Might attempt some Doom style projection on NES / gameboy in the future, could be fun that. -=-=- Web / Game Dev, occasionally finishes off coding games also!
Tue, 21 Sep 2021, 04:29
Pakz	I was thinking on how to do a polygon fill routine. I had placed a triangle fill on this site before. This was by basically getting the left and right coordinates of each line point(bresenham) and drawing lines between them. Going from top to bottom. I still have no real idea how to implement that and not take a whole weak debugging and getting it work.
Tue, 21 Sep 2021, 04:40
Jayenkai	Plain/coloured/gradient poly's aren't complicated. It's texturing them that's the hard part. -=-=- ''Load, Next List!''