Any guess on what my next project is going to be? I think y’all are going to have a ton of fun with this! I threw this together tonight to work out some of the arithmetic. Those basic lessons on perspective and vanishing points from high school are still with me!
More in the next couple of weeks. This is just a proof of concept that I can get the basic wireframes working.
For those of you who are curious, the inspiration came from the game that I mentioned in the Lemonville thread along with a game that I absolutely loved from my childhood, Dungeons of Daggorath. Read the game’s manual at the Internet Archive, or use your favorite search engine to get more information on the game. It’s even available in the Microsoft Store!
Just playing with some ideas. I know the perspective arithmetic (i.e. flattening 3-D space into 2-D) is still a little off. It’s the first thing I plan to fix.
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!
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
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.
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.
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.pause so that rendering is more consistent across platforms. (Done.)
Incorporate page flipping when updating the screen. (Done.)
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. (Done.)
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.
Create a web application that will allow users to draw vector images and emit JavaScript code that can be copied and pasted into a MakeCode Arcade project.
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!
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!
I think y’all are going to have a ton of fun with this! I threw this together tonight to work out some of the arithmetic. Those basic lessons on perspective and vanishing points from high school are still with me!
