# Raycasting 3D render -- Blocks Edition

**URL:** <https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921>\
**Category:** Game Design\
**Tags:** game, graphics-and-math, extension\
**Created:** [April 1, 2022, 6:23pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921 "2022-04-01T18:23:28Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![Kiwiphoenix364](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kiwiphoenix364/32/14368_2.png) [@Kiwiphoenix364](https://forum.makecode.com/u/Kiwiphoenix364)\
**Post date:** [June 14, 2022, 10:39pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/82 "2022-06-14T22:39:14Z")

</div>

@AqeeAqee Is it possible to make textures that have clear in the texture actually be see-through, I know it might be tough because you would have to determine what to render behind objects (and get worse perf), but it could be cool, since currently black and clear do the same thing. A way to do this would be to render everything l normally, but if a texture has clear in it, treat it as empty, then render the textures with clear in them after. I don’t expect this to be easy, or for you to do this (because it could require reworking the renderer quite a bit), but it’s just an idea.

---

<div class="post-metadata">

**Author:** ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)\
**Post date:** [June 15, 2022, 6:00pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/83 "2022-06-15T18:00:45Z")

</div>

Hi, @Kiwiphoenix364 !  
Thanks for your wonderful advice.

I think so at a time too, and tried. But the result is disappointed.

- one is you said, I should render the texture behind the transparent wall. Our view direction is horizontal, all walls behind that should be rendered. This leads to all walls in view field should be rendered, instead of “first layer” walls, the perf get to very slow.
- another is sprites. Only the part that didn’t covered by walls is rendered for perf, so if wall at side are transparent, sprites looks like didn’t drawing correctly.  
Overall, the result is somewhat ugly, or performance would get to slow. I am afraid can’t add this to my extention, until got good idea to resolve these issues.

---

<div class="post-metadata">

**Author:** ![DahbixLP](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dahbixlp/32/4760_2.png) [@DahbixLP](https://forum.makecode.com/u/DahbixLP)\
**Post date:** [June 16, 2022, 3:54pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/84 "2022-06-16T15:54:23Z")

</div>

Hi! Is there any way that you can do a second layer of walls for high buildings with another tilemap or something! Next is floors which should be added so that you have a perfect view! I want to make the Monaco GP track (F1 street circuit) which has high buildings and stuff like curbs (kerbs) so those would be cool! Mainly the floor though!

---

<div class="post-metadata">

**Author:** ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)\
**Post date:** [June 16, 2022, 5:29pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/85 "2022-06-16T17:29:29Z")

</div>

Hi!  
From your ask, I realized further that how mutil-layer and floor features are expected.  
These are asked many times(include myself). And [there is a reply](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/63) about it and explained why it can’t be implemented right now.  
I am working on optimizing perf, and made a small progress. A new faster algorithm with “bisearch”. (not “the new algorithm” I mentioned before, which should be more faster but more complicate to code) Maybe the multi-layer become possible, but not fast enough for floor though, I guess.

I will release a preview maybe on tomorrow or later, for I have not much time recently.

---

<div class="post-metadata">

**Author:** ![jackal](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jackal/32/19506_2.png) [@jackal](https://forum.makecode.com/u/jackal)\
**Post date:** [June 16, 2022, 7:53pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/86 "2022-06-16T19:53:19Z")

</div>

Alright, that’s okay. But this extension by itself is a lot of work, so I don’t mind.

---

<div class="post-metadata">

**Author:** ![xavvvvvv](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/xavvvvvv/32/15324_2.png) [@xavvvvvv](https://forum.makecode.com/u/xavvvvvv)\
**Post date:** [June 17, 2022, 4:24pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/87 "2022-06-17T16:24:02Z")

</div>

This project is pretty awesome keep it up.

---

<div class="post-metadata">

**Author:** ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)\
**Post date:** [June 17, 2022, 9:42pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/88 "2022-06-17T21:42:44Z")

</div>

Hi all  
This is a preview of a optimized edition, faster **walls rendering** by bisearch, instead of row-by-row before. This algorithm try to found all in-screen walls by bisearch for less rows calculating. So the less walls in the screen, the faster it will be. Has its advantage for small tilemap(maybe 32x32), not suit for large tilemap.  
press “menu” button will switch within these two, and the score showing micro seconds taken. You can download onto your console for testing.

> **[preview-bisearch-raycasting](https://arcade.makecode.com/15590-30352-68237-86362)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

- no anti-alias yet
- wall positions changed a little for fixed a texX calculating bug in the original rendering codes

---

<div class="post-metadata">

**Author:** ![xavvvvvv](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/xavvvvvv/32/15324_2.png) [@xavvvvvv](https://forum.makecode.com/u/xavvvvvv)\
**Post date:** [June 18, 2022, 5:42am UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/89 "2022-06-18T05:42:37Z")

</div>

Very Good Keep It Up Man.

---

<div class="post-metadata">

**Author:** ![LDJ101](https://avatars.discourse-cdn.com/v4/letter/l/5f8ce5/32.png) [@LDJ101](https://forum.makecode.com/u/LDJ101)\
**Post date:** [June 24, 2022, 12:39am UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/91 "2022-06-24T00:39:01Z")

</div>

@AqeeAqee I really admire your skills in programming, how did you find the time to make all of the raycasting extention and its demos? I’m also curious about how is the extension is able to make the flat images stand up or turn a 2D tilemap to a 2.5D tilemap?

---

<div class="post-metadata">

**Author:** ![LDJ101](https://avatars.discourse-cdn.com/v4/letter/l/5f8ce5/32.png) [@LDJ101](https://forum.makecode.com/u/LDJ101)\
**Post date:** [June 24, 2022, 12:39am UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/92 "2022-06-24T00:39:05Z")

</div>

I have found a bug where if you spawn too many projectile sprites and move backwards against a wall, you clip into the wall.

---

<div class="post-metadata">

**Author:** ![LDJ101](https://avatars.discourse-cdn.com/v4/letter/l/5f8ce5/32.png) [@LDJ101](https://forum.makecode.com/u/LDJ101)\
**Post date:** [June 24, 2022, 5:39pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/93 "2022-06-24T17:39:56Z")

</div>

Whoops! Just now found out that you fixed it already. Thanks!

---

<div class="post-metadata">

**Author:** ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)\
**Post date:** [June 24, 2022, 6:03pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/94 "2022-06-24T18:03:42Z")

</div>

Hi @LDJ101 !  
Thanks very much for you like this extension. I just start up from @mmoskal 's [3d map project](https://forum.makecode.com/t/3d-raycasting-in-arcade/474), which is wonderful, and bring our into 3d world. Than I add sprites and some feature to make it easy to use in blocks.  
To take care kids sometime, I have to work at home, so I have more spare time to do stuffs I am interesting. But our school and kidgarden are closed temporarily due to the COVID, I have to look after them whole day recently, so updates of this extension and replies have to delay.

If you are interesting on raycasting, [this artical](https://lodev.org/cgtutor/raycasting.html) can help.  
If you are interesting on my implementation details, feel free to ask me and we could discuss together.

---

<div class="post-metadata">

**Author:** ![LDJ101](https://avatars.discourse-cdn.com/v4/letter/l/5f8ce5/32.png) [@LDJ101](https://forum.makecode.com/u/LDJ101)\
**Post date:** [June 25, 2022, 10:52pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/95 "2022-06-25T22:52:51Z")

</div>

I made a game with raycasting 😄, hope you like it!

> **[It's A-maze-ing](https://arcade.makecode.com/75324-51967-23341-55064)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

Controls and gameplay:

- Arrow keys to move
- Menu button to toggle view mode
- Every 30s you take 1 damage, find the chest before you die!

---

<div class="post-metadata">

**Author:** ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)\
**Post date:** [June 27, 2022, 8:25pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/96 "2022-06-27T20:25:23Z")

</div>

And, I have forgot to say @kwx also make many amazing 3d projects, which you will like and could learn a lot.

---

<div class="post-metadata">

**Author:** ![LDJ101](https://avatars.discourse-cdn.com/v4/letter/l/5f8ce5/32.png) [@LDJ101](https://forum.makecode.com/u/LDJ101)\
**Post date:** [June 27, 2022, 8:32pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/97 "2022-06-27T20:32:04Z")

</div>

Just now updated It’s A-maze-ing, here are the new features:

- Press and hold A to sprint and release to stop sprinting, it’s harder to turn while sprinting but makes you go much faster.
- Added a floor that disappears when in tilemap mode and reappears when in raycasting mode.

> **[It's A-maze-ing](https://arcade.makecode.com/54036-63117-83152-14668)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![SoftTalker](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/softtalker/32/10776_2.png) [@SoftTalker](https://forum.makecode.com/u/SoftTalker)\
**Post date:** [July 5, 2022, 5:06pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/98 "2022-07-05T17:06:52Z")

</div>

CAN I SUGGEST THAT YOU can jump on tiles

---

<div class="post-metadata">

**Author:** ![jackal](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jackal/32/19506_2.png) [@jackal](https://forum.makecode.com/u/jackal)\
**Post date:** [July 5, 2022, 6:19pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/99 "2022-07-05T18:19:01Z")

</div>

thats probably not gonna happen bro…

---

<div class="post-metadata">

**Author:** ![CuteMrMerp](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cutemrmerp/32/6671_2.png) [@CuteMrMerp](https://forum.makecode.com/u/CuteMrMerp)\
**Post date:** [August 1, 2022, 4:43pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/100 "2022-08-01T16:43:16Z")

</div>

how do i add ui?

---

<div class="post-metadata">

**Author:** ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)\
**Post date:** [August 1, 2022, 9:27pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/101 "2022-08-01T21:27:39Z")

</div>

Hi, @CuteMrMerp

Basically, you can add UI as usual, this extension can work with most other extensions, but I can’t garentee all of them. If they can work well in a 2D project, but has any issue working with this one, let me know pls.

---

<div class="post-metadata">

**Author:** ![jackal](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jackal/32/19506_2.png) [@jackal](https://forum.makecode.com/u/jackal)\
**Post date:** [August 1, 2022, 9:27pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/102 "2022-08-01T21:27:41Z")

</div>

Pretty easy, make a sprite/your ui, then set the sprite to “related to camera” and the sprite will become camera ui.

[Previous page](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921.md?page=4)

[Next page](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921.md?page=6)
