# Next Project: Sneak Peek **URL:** \ **Category:** Arcade\ **Created:** [July 16, 2019, 2:10am UTC](https://forum.makecode.com/t/next-project-sneak-peek/340 "2019-07-16T02:10:34Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 16, 2019, 2:10am UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/1 "2019-07-16T02:10:34Z")
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! ![MakeCode%20Arcade%20Sample%20Dungeon](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/446e851b6d0f16f6b687290d54ee4b9b30f93b1e.png) 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](https://archive.org/details/Dungeons_of_Daggorath_1983_Tandy), or use your favorite search engine to get more information on the game. Itā€™s even available in the [Microsoft Store](https://www.microsoft.com/en-us/p/dungeons-of-daggorath/9nblggh4spb4)! ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 16, 2019, 5:19am UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/2 "2019-07-16T05:19:34Z")
I was playing around with this, too: ![3D%20Cube](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/31c02b2b62f8a810f30af6d6225697312d82ef53.gif) 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. šŸ™‚ ---
**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\ **Post date:** [July 16, 2019, 5:58pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/3 "2019-07-16T17:58:06Z")
Iā€™ve been wanting to do this for a long time; excited someone is finally building a good dungeon crawler! ---
**Author:** ![Gus](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gus/32/28_2.png) [@Gus](https://forum.makecode.com/u/Gus)\ **Post date:** [July 17, 2019, 11:04am UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/4 "2019-07-17T11:04:26Z")
The very first 3D venture award goes to ā€¦ ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 18, 2019, 9:29pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/6 "2019-07-18T21:29:51Z")
After two days of playing with the math, Iā€™m _finally_ getting the depth lines correctā€¦ ![Cube%203](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/009c2673c0f0c4357b295cf58362536c9f68e49b.png) 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. ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 21, 2019, 5:17am UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/7 "2019-07-21T05:17:31Z")
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: ![Final%20Scale%20Factors](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/b874dccb5aa1dc4586fa18b089e8f4cfb7be8930.png) 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! ---
**Author:** ![Adri314](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/adri314/32/182_2.png) [@Adri314](https://forum.makecode.com/u/Adri314)\ **Post date:** [July 21, 2019, 3:11pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/8 "2019-07-21T15:11:30Z")
It looks really cool! Dungeon Master MakeCode Arcade Edition šŸ˜ƒ ---
**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\ **Post date:** [July 23, 2019, 6:43pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/9 "2019-07-23T18:43:59Z")
That looks awesome, Alex! Any plans to support shading in the walls? Not that I donā€™t love the wireframe aesthetic ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 23, 2019, 6:59pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/10 "2019-07-23T18:59:14Z")
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? ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 23, 2019, 7:06pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/11 "2019-07-23T19:06:20Z")
Oh ā€¦ I suppose I should share some code. šŸ™‚ For those of you who want to playā€¦ ![arcade-Dungeon-Wireframe-Playground](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/a37dbacadef46f04240ccfecf04a5f8dd1e6bf74.png) 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. ---
**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\ **Post date:** [July 23, 2019, 7:56pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/12 "2019-07-23T19:56:15Z")
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](https://en.wikipedia.org/wiki/Flood_fill#Fixed-memory_method_(right-hand_fill_method)) Also, I go by Richard ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 24, 2019, 12:43am UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/13 "2019-07-24T00:43:09Z")
Thanks for the link, Richard! I have shading working: ![Dungeon%20Shaded%20Walls](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/e52ce19e47865175437a965ffd707ce8a9fdf6e3.png) 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: [https://www.freebasic.net/forum/viewtopic.php?t=26381](https://www.freebasic.net/forum/viewtopic.php?t=26381) 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! > **[Dungeon Map Playground - Microsoft MakeCode](https://arcade.makecode.com/78575-03336-09593-96601)** > > Made with ā¤ļø in MakeCode Arcade. 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. šŸ™‚ ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 24, 2019, 9:19pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/14 "2019-07-24T21:19:04Z")
I found an algorithm that seems to be a good compromise between memory usage and performance. [https://lodev.org/cgtutor/floodfill.html](https://lodev.org/cgtutor/floodfill.html) Iā€™ve updated the sandbox: > **[Dungeon Map Playground](https://arcade.makecode.com/21517-56595-56579-62570)** > > Made with ā¤ļø in MakeCode Arcade. The old code is in there, too. You can see how Iā€™ve been testing the different algorithms here: > **[Image Color Flood](https://arcade.makecode.com/04807-41662-41944-47122)** > > Made with ā¤ļø in MakeCode Arcade. 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! ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 31, 2019, 8:13pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/15 "2019-07-31T20:13:35Z")
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. ![arcade-Dungeon-Map-Playground](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/dda8129e46e0ac22e0429f59309d08caf244c194.png) > **[Dungeon Map Playground](https://arcade.makecode.com/13973-85277-16765-54441)** > > Made with ā¤ļø in MakeCode Arcade. 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! ---
**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\ **Post date:** [August 1, 2019, 6:02pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/16 "2019-08-01T18:02:12Z")
Re: the last few steps, might want to read through [https://makecode.com/extensions/extensions](https://makecode.com/extensions/extensions) (specifically [https://makecode.com/extensions/extensions#read-and-write-code](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~ ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [August 1, 2019, 8:32pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/17 "2019-08-01T20:32:26Z")
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! ---
**Author:** ![peli](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/peli/32/12_2.png) [@peli](https://forum.makecode.com/u/peli)\ **Post date:** [August 3, 2019, 2:45pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/18 "2019-08-03T14:45:15Z")
Wireframe mag did an article on a basic version of this. [https://github.com/Wireframe-Magazine/Wireframe18/tree/master/source-code](https://github.com/Wireframe-Magazine/Wireframe18/tree/master/source-code) ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [August 3, 2019, 11:15pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/19 "2019-08-03T23:15:16Z")
Thanks for sharing, @peli! Iā€™ll have to add that to my subscriptions list! ---
**Author:** ![jedgarpark](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jedgarpark/32/202_2.png) [@jedgarpark](https://forum.makecode.com/u/jedgarpark)\ **Post date:** [August 29, 2019, 3:45pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/20 "2019-08-29T15:45:20Z")
Totally expecting a gelatinous cube to attack me. ---
**Author:** ![ChaseMor](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/chasemor/32/18_2.png) [@ChaseMor](https://forum.makecode.com/u/ChaseMor)\ **Post date:** [August 30, 2019, 6:46pm UTC](https://forum.makecode.com/t/next-project-sneak-peek/340/21 "2019-08-30T18:46:03Z")
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. [![](https://cdn.discordapp.com/attachments/492394440695087104/492394617812156426/3d-arcade.gif) ](https://cdn.discordapp.com/attachments/492394440695087104/492394617812156426/3d-arcade.gif) [Next page](https://forum.makecode.com/t/next-project-sneak-peek/340.md?page=2)