Ray Casting

xevdev

This post is deleted!

faz808

I'm not sure if 128 x 128 is realistic. There would be a lot more graphic work. It took me nearly three hours to do the red brick wall at 64 x 64 !
Try clear(grey) - about line 118. Looks better I think.

xevdev

This post is deleted!

xevdev

faz808

Well done. Looks great at 128 x 128.

PB____

This all is very impressive, I like where it is going, looks great :)

Gothon

This is some great work. The brick texture looks really good. I went on to try and do the floor casting.

Turns out that the floor is a little different from the wall. drawImage() and drawQuad() can only read axis parallel rectangles from the source image, but the floor is 2D rotated relative to the player camera. I was only able to get it to work by using drawImageEx() to rotate the floor in an off-screen buffer before doing the floor casting loop. This is easiest and most efficient if the entire floor is in one giant off-screen texture.

The entire floor is only 24x24 tiles, so to do this with a 32x32 texture for each floor tile, I only need a 768x768 image for the whole floor texture. The rotated floor may be sqrt(2) wider than the original, so I actually use a 1088x1088 image for the destination buffer. (Which I only now realize is 8 pixels taller than maximum :-P) For the textures themselves I found some good 16x16 assets in the media library, and I tiled 4 of them to make a 32x32.

While doing it this way means that I can't enlarge the floor textures or the map without writing more complex code to do the floor from multiple images, there are several advantages too. One thing is the floor is drawn very quickly as it is just scaling lines from the rotated image buffer. There is only 1 floor and its position is fixed so there is no loop to look through the tiles for the nearest floor. Additionally there is memory for each tile to have a unique texture. This I demonstrate by drawing some randomly positioned colored circles on the floor.

"ray casting w floor textures" is pending for approval now with ID: NYKDXMND9L

xevdev

Well done. Can't wait to see it.

faz808

Fantastic job. Can this be added to the red brick/eagle version or would this be too difficult?
I've got a door of sorts - actually just red brick (looking for a door texture). "A" opens "B" closes.
wolfy-door ID: MYK73MND15

faz808

Textured door - "A" opens "B" closes.
wolfy-door2 ID: PL873MND15 (pending)

mario.bodemann

@Gothon Oh that is great, I haven't thought about rotating a big floor texture and then taking lines out of this one... Great job.

I'm curious: this means you are rotating the floor for every "probe" from the camera? And how do you get the perspective right?

Gothon

@faz808 Image-Editor images and code can be copy/pasted between projects, so yes we can merge the programs.

@mario-bodemann I am actually rotating the floor once every frame (opposite the angle of the view angle). Each horizontal line of the floor is parallel to the camera plane, so I only need to do a perspective calculation once per scan line, the rest is just a line copy and scale performed by drawImage()

faz808

Combining the 2 progs together gives some interesting effects. Have a look at the eagle blocks. I think I can see how to do windows.
wolfy-door3. ID: 5PHR7MND15

Dave

This is by far one of the most exciting things I've ever seen.

Hats off to everyone. This is impressive, we're all here at the office just jaws on the floor.

So very excited to see the progress. The fact that this is now almost a big group project is just awesome. We're getting tears in our eyes! :)

faz808

@Gothon As a ceiling is basically an inverted floor, could it be possible to add a ceiling with a modified floor code?

Gothon

@faz808 Yes, the ceiling is basically the same.

If you copy the code from the floor loop into the ceiling loop, you need to make p positive by changing p = int(y - h/2) to p = -int(y - h/2) or p = int(h/2 - y). And you also need to adjust the y texture coordinate by 2 tiles by replacing ..., offset.y + ... with ..., offset.y + 64 + ...

This will mirror the floor onto the ceiling. To have a different ceiling you will need to make image buffers for the ceiling and fill them with something different and replicate the rotation code.

Gothon

Also, since the ceiling and floor loops were using different step sizes, I have noticed some line banding occurs when the loop uses step 2. I have fixed this by using 0 for the sourceH parameter instead of 1. The choice of doing smaller or larger step size is a minor trade-off between speed and visual quality, banding shouldn't be dependent on it. Just make sure the last parameter, the height is at least the step size so that you don't leave any gaps.

faz808

Ceiling works fine until you rotate the camera. Floor goes one way and ceiling goes the opposite. Not sure how to fix this !
I've kept the offset.y + 64 to offset.y + 32 as this brings the ceiling down to the correct height.
+64 seems to lift the ceiling above the blocks creating a gap.
wolfy-ceiling ID: NXYKVQKD15

faz808

Sorry gothon, removed the "fun" parts in the floor texture. Now rotation problem gone !.
wolfy-ceiling2 ID: NXA57ZQD15

faz808

This really is becoming jaw dropping.
I've said it before but I'll say it again - thanks Fuze. What a brilliant piece of software for would-be programmers.