The very first 3D venture award goes to …
After two days of playing with the math, I’m finally getting the depth lines correct…
For a dungeon crawler, though, I’m not sure I like this better. The detail at the levels that are further away may be too small.
I gave up trying to find a “proper” algorithm to calculate these scale factors. None of the single-point perspective mechanisms that I tried seemed to give a reasonable perspective view for this application. So, I went a different route. I just eyeballed this a bit, threw my numbers into a regression calculator to come up with an equation, and came up with this:
Looks reasonable, yes? I hope so … I think I’m done fighting with this.
Now, on to the real work: Using a tile map to render the dungeon. More soon!
It looks really cool! Dungeon Master MakeCode Arcade Edition
That looks awesome, Alex! Any plans to support shading in the walls? Not that I don’t love the wireframe aesthetic
Hmmm … I don’t see why not. That’d be a reasonable compromise to supporting actual textures.
I see y’all have done some work on image manipulation lately. (I can draw circles now! Yay!) I don’t see anything equivalent to the paint bucket tool, though, in the methods for an image. Filling the walls that are actual rectangles is simple. (Just draw a rectangle that’s one pixel smaller in each direction.) What would you recommend for the trapezoids? I looked at
mapRect, but I don’t think that’s quite what I need.
P.S. Do you go by Rick, Richard, or something else?
Oh … I suppose I should share some code. For those of you who want to play…
For those of you who are curious, this is nowhere near its final state. As the name implies, I’m still playing around with some basic ideas. The code is starting to shape up nicely, though.
Yeah, we don’t really have anything for shading polygons right now. As for a fill-bucket like API, there isn’t anything currently in arcade but I did implement it for the Sprite editor here:
Not sure if that is too memory intensive for the board or not, but might be a good starting point. I think there is an in-place algorithm too
Also, I go by Richard
Thanks for the link, Richard! I have shading working:
The Wikipedia link that you provided served as a great starting point. The pseudocode in that article is not well-structured. (Talk about spaghetti code; Dykstra would throw a fit!) So, I did some poking around and found this:
I basically ported that to MakeCode Arcade. It’s a bit too slow, so I’m going to have to go with something a bit faster (even if it chews up additional memory). I’ll keep playing with this, though, to find an algorithm that balances efficiency for speed. For now, though, it does the job.
You’re all welcome to play in my current sandbox! The algorithm renders the dungeon from a tile map. You can walk around the dungeon with the arrow buttons, and you can pick the colors for the wall outlines and the wall textures. If you set the wall texture to zero, then you get a wireframe rendering (without the penalty of filling the polygons). Those three constants are at the top of the
main.js file. It even works on hardware!
Don’t mind the hidden
game.splash calls. Most of those were there to help me diagnose a problem when running the code on hardware (which I’ve since fixed).
Nota bene: Pathways can only be one tile wide right now. If you try to have pathways that are wider, I doubt highly that it will render properly.
I found an algorithm that seems to be a good compromise between memory usage and performance.
I’ve updated the sandbox:
The old code is in there, too.
You can see how I’ve been testing the different algorithms here:
There is a third algorithm there, similar to the one that @richard employs in the sprite editor. The stack gets too large to work on hardware, but switching to scanlines seems to keep us within the memory constraints of the devices.
This has been way too much fun playing with these different algorithms. It’s one of my favorite things in computer science: Dissecting and understanding different algorithms. There definitely are some additional ways to improve the performance of the shader, but this will do for now.
More updates soon. Have fun!
Made a little more progress on this today. Been having way too much fun with this. The dungeons can now have passages in the floor and in the ceiling so that you can build additional levels in your game. The rendering is a little off, but it’ll do for now.
Next steps (roughly in order):
- Use an update loop with the movement animations instead of
game.pauseso that rendering is more consistent across platforms.
- Incorporate page flipping when updating the screen.
- Allow users to build wireframes (a.k.a. vector images) for enemies and other items and then be able to render them in the dungeon.
- Allow for a cropped viewport, to allow for, say, information to be displayed on the bottom of the screen.
- Allow for diminishing visibility. Currently, the dungeon is drawn as if there is infinite light from all directions. I’ll add the option to render the dungeon as if the hero character is holding some sort of light source that diminishes with distance.
- Transform the dungeon engine into an extension.
- Eventually (to make it easier for Blocks users), allow web app to import and export vector images using MakeCode Arcade cartridges (i.e. the PNG files that contain the MakeCode Arcade code for a project).
Other ideas? Feel free to share them here (as y’all have already done, and which I appreciate).
OK … need to put this away and get ready for class tonight! Cheers, all!
Re: the last few steps, might want to read through https://makecode.com/extensions/extensions (specifically https://makecode.com/extensions/extensions#read-and-write-code); it hasn’t been used as much and there are likely at least a few things that need fixing, but it allows you to create an extension that adds a button to the toolbox that can have it’s own page and inject code / json into it’s own file.
Also note the template repo at the top of the page to start with~
That’s brilliant, Joey! I love the amount of thought that has gone into MakeCode. It’s an incredible platform as a user, and I’m learning more and more how brilliant its design is as a developer. Thanks for the tip; I’ll definitely be employing those mechanisms when I get to that phase of development!
Wireframe mag did an article on a basic version of this. https://github.com/Wireframe-Magazine/Wireframe18/tree/master/source-code
Thanks for sharing, @peli! I’ll have to add that to my subscriptions list!
Totally expecting a gelatinous cube to attack me.
Alex, I think we might be the same person. One of the first things I made in the MakeCode Arcade was a wireframe 3d engine.
I love it, Chase! I’ve been meaning to pick your brain a bit on something.
I’ll be creating some sort of mechanism for users to create wireframe objects for the monsters and such. Those objects, essentially, are vector images. In a thread many moons ago, you had mentioned that you had dabbled a bit in that space.
Did you make any headway in that area?
I didn’t necessarily make any progress on rotated sprites, but dealing with vectors is SO MUCH easier.
I recommend you look at a little game that I made a while ago. I just had to update it and document it.
I dabbled in making a vector graphics extension and this is pretty much as far as I got. Feel free to look at it and steal as much as you want from it.
Oh, and feel free to ask if you have any questions. You can ask here in the thread (or I think this platform supports messaging), or reach me on Discord.
Nice work, Chase! I appreciate you sharing it. I particularly like the ability to set an alternate center point to make rotating the sprite more flexible.
For those of you following along, vector images are the next step on the to-do list. (I’ve already crossed-off some of the other items.) I’ll probably release vector images as a separate extension in case it’s of use to anyone. After that, I’ll add diminishing visibility to the dungeon, and then wrap all of this up into a beta-version of an extension.
I’m looking forward to digging into this!