This is an ongoing project where I am developing an increasingly advanced 3D rendering method for Pico-8 and making tutorial videos on my YouTube channel so you can use it too. You can see the end result in the browser-playable project above, which I'll update as the engine improves.

Each downloadable project includes .js and .html files so you can run the demo, and a .p8 file which you can open with pico-8 to see how it was made. Each one corresponds to a YouTube video you can find on my channel, Dev Quest. Here's the link: https://www.youtube.com/channel/UCL5t4tBDT9PfmqtA5ziG0xQ

Let me know if you end up using this in a game, I'd love to see it.

Download

Download NowName your own price

Click download now to get access to the following files:

Draw Walls Demo Download 432 kB
Texture Walls Demo Download.zip 452 kB

Comments

Log in with itch.io to leave a comment.

Does anyone know how to make the map size bigger?

I am very new and know very little lua

Inside the while loop that does the actual raycast, there's an if statement that checks if the ray has gone out of bounds and stops it. It'll look like:

if mget(x,y)>0 or x<0 or x>31 or y<0 or y>31 then

-- stop the ray

You can change those numbers to change the size of the visible map. This demo uses pico-8's map, so it's limited to 128x64. If you need something larger than that, you could use a table instead, which can be whatever size you want.

Just be aware, when the map gets too big it may start to lag because the rays are checking every intersection across the whole map. You can solve this with fancy optimization, or just avoid making wide open spaces or very long tunnels.

Hope this helps!

Hey Isaac you could use the COS() of the and difference of the ray from the player to smooth the fisheye.

Yep, that would work. I think there's even a piece of code in the demo you can un-comment to remove the fisheye effect that does exactly that, but I like the fisheye effect so I kept it that way.

So smooooooooooth

I am curious about  how Pico-8 translates to JS, what tech it uses, 2d canvas, or is it webgl? It's drawing fast and pixels (5*5?) are razor sharp (=no canvas scaleing) So I downloaded and may investigate :). Raycasters are fascinating, but this one lacks of player rotation and collision handling. The latter is easy in a raycaster that uses a 2-dimensional grid for cubes. See the ascii raycaster on my page.

I haven't looked into the JS that pico-8 generates, I have no idea how it works. I haven't added collision because I want to focus on the graphics first. You mentioned lacking player rotation, I have left and right rotation controlled by z and x in the browser example. It's a little janky, but like I said, I'm just focusing on the graphics.

I've never done an ascii renderer before, that looked really cool. I played your more recent one too, and that was amazing. I might have to try it out for myself sometime.

Thanks. It's actually simple, once you have reduced the resolution of any 3D engine to something like 80*40. The artistic part is then to choose 16 letters for a grey scale.

(1 edit) (+1)

It's originally a C/C++ application, ported to web with Emscripten.

but if you want pixel-scaling on a 2d canvas, one trick is to use this CSS

image-rendering: pixelated;

https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look

Thanks.