# 3d Rendering with floor and ceiling!

**URL:** <https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758>\
**Category:** Arcade\
**Tags:** game, graphics-and-math, extension\
**Created:** [July 20, 2024, 5:06pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758 "2024-07-20T17:06:04Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\
**Post date:** [July 22, 2024, 3:10pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/21 "2024-07-22T15:10:35Z")

</div>

This is wonderful! Now I can finally make better art for 3d games. Quick question, could you make the walls 1-2 tiles high? There is an option to scale it’s height but that results in stretched textures which isn’t great

---

<div class="post-metadata">

**Author:** ![neintoes](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/neintoes/32/8315_2.png) [@neintoes](https://forum.makecode.com/u/neintoes)\
**Post date:** [July 22, 2024, 3:12pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/22 "2024-07-22T15:12:21Z")

</div>

To do this, well, @AqeeAqee and @MrFranko already did all the heavy lifting already and left a comment in the extension referring to this site which covers raycasting: [https://lodev.org/cgtutor/raycasting2.html](https://lodev.org/cgtutor/raycasting2.html)

Ceiling raycasting is just inverted floor raycasting so it wasn’t too tough inverting the logic when I initially ran it from tilemaps like this where the extension was reading from the bottom half of the screen.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/3/9/39c604c9f18bec45a86aab51b362376b0902ed06.png)

The challenge really just came from feeding the editor a tilemap that isn’t currently loaded to avoid users having to create strange assets like the image above. From reading AqeeAqee’s logic on grabbing the tilemaps as textures it turned out to be fairly simple in the end.

As for how I learned to code, just trying a bunch of projects like this. Finding something challenging but exciting to you and failing at it over and over again until you finally get it right. The failures can be quite fun too honestly. Even in this project I had an issue with the z axis that resulted in a hopping ceiling, that was fun.  
 ![ceiling_jump_](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/6/7/6743cc867f2f7fd319c902f1a0a2e8392bc7bc5c.gif)

---

<div class="post-metadata">

**Author:** ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/36648_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)\
**Post date:** [July 22, 2024, 3:15pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/23 "2024-07-22T15:15:42Z")

</div>

Interesting!

> [@neintoes](#):
>
> I had an issue with the z axis that resulted in a hopping ceiling, that was fun.

Maybe you raised the roof a little too much! XD

---

<div class="post-metadata">

**Author:** ![Rune](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rune/32/18951_2.png) [@Rune](https://forum.makecode.com/u/Rune)\
**Post date:** [July 22, 2024, 10:49pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/24 "2024-07-22T22:49:06Z")

</div>

Now I’m wondering who will make real 3D with ramps and cliffs. 🤔

---

<div class="post-metadata">

**Author:** ![ChimbroDaPro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/chimbrodapro/32/15852_2.png) [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)\
**Post date:** [July 22, 2024, 11:00pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/25 "2024-07-22T23:00:29Z")

</div>

_definitely not using this in TMF 3…_

---

<div class="post-metadata">

**Author:** ![Josef](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/josef/32/12457_2.png) [@Josef](https://forum.makecode.com/u/Josef)\
**Post date:** [July 22, 2024, 11:33pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/26 "2024-07-22T23:33:15Z")

</div>

WOAH i cant wait!!!

---

<div class="post-metadata">

**Author:** ![neintoes](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/neintoes/32/8315_2.png) [@neintoes](https://forum.makecode.com/u/neintoes)\
**Post date:** [July 22, 2024, 11:34pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/27 "2024-07-22T23:34:19Z")

</div>

It’s definitely possible, that’s what I was thinking about trying out next, ceiling rendering would probably be out of the question for the most part with higher walls in place as I’m thinking the ceiling rendering would have to be separated into different heights if we have walls of different heights around, it would be possible, but a real pain to produce and I’m assuming quite a performance hit.

I’ll see what I can come up with at some point once I’ve gotten through a few other bits I’m working on 🙂.

---

<div class="post-metadata">

**Author:** ![platformermaster](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/platformermaster/32/16102_2.png) [@platformermaster](https://forum.makecode.com/u/platformermaster)\
**Post date:** [July 24, 2024, 7:39pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/28 "2024-07-24T19:39:14Z")

</div>

I have a problem the ceiling tiles are stuck in 8x8 instead of 16x16 and its glitching i need help making the floor ceiling tiles back into 16x16

---

<div class="post-metadata">

**Author:** ![Josef](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/josef/32/12457_2.png) [@Josef](https://forum.makecode.com/u/Josef)\
**Post date:** [July 24, 2024, 11:48pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/29 "2024-07-24T23:48:46Z")

</div>

too bad ur a platformer master; not a 3d master lolz

---

<div class="post-metadata">

**Author:** ![platformermaster](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/platformermaster/32/16102_2.png) [@platformermaster](https://forum.makecode.com/u/platformermaster)\
**Post date:** [July 24, 2024, 11:51pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/30 "2024-07-24T23:51:17Z")

</div>

yeah… Its a work in progress… Anyway do you know how to make 16x16?

---

<div class="post-metadata">

**Author:** ![neintoes](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/neintoes/32/8315_2.png) [@neintoes](https://forum.makecode.com/u/neintoes)\
**Post date:** [July 25, 2024, 5:30am UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/31 "2024-07-25T05:30:18Z")

</div>

I’m not sure I understand the problem, could you link the project?

---

<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 25, 2024, 4:09pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/32 "2024-07-25T16:09:40Z")

</div>

the “set ceiling as [tilemap]” block’s custom tile editor is 8x8, and not the default, 16x16.

---

<div class="post-metadata">

**Author:** ![platformermaster](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/platformermaster/32/16102_2.png) [@platformermaster](https://forum.makecode.com/u/platformermaster)\
**Post date:** [July 25, 2024, 8:55pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/33 "2024-07-25T20:55:49Z")

</div>

@neintoes, @jackal I fixed it but I don’t know how to do the floor. and its kinda laggy so can you help me reduce that? Here is the link [https://arcade.makecode.com/S95929-06881-80109-46935](https://arcade.makecode.com/S95929-06881-80109-46935)

---

<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 25, 2024, 10:04pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/34 "2024-07-25T22:04:03Z")

</div>

tilemap editor → add the ground tiles that you want to your 2.5D map → make sure to not put walls on them → all done

---

<div class="post-metadata">

**Author:** ![neintoes](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/neintoes/32/8315_2.png) [@neintoes](https://forum.makecode.com/u/neintoes)\
**Post date:** [July 25, 2024, 10:04pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/35 "2024-07-25T22:04:19Z")

</div>

The lag I’m afraid I can’t help you with as there are only three blocks in your project there isn’t much to be changed for perfomance (I think demonstrating AqeeAqee was right about the potential performance issues with raycasting ceilings and floors).

To display floors in your project simply paint down tiles on your **non-ceiling** tilemap without painting the red wall surface on them like this below:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/f/0/f03926c7846c5091c3f28e9154aa4c2324aed09c.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/a/6/a6312fa9bd8b8cbfa7b9f3868f4cdc66f0d45ab0.png)

I wasn’t aware about the 8x8 tilemaps in the block selector (whoops!), I’ve pushed a fix for that now.

---

<div class="post-metadata">

**Author:** ![platformermaster](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/platformermaster/32/16102_2.png) [@platformermaster](https://forum.makecode.com/u/platformermaster)\
**Post date:** [July 26, 2024, 5:06pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/36 "2024-07-26T17:06:08Z")

</div>

Thanks. But i have another problem whenever there is dialogue the whole screen goes black is there a way to fix this?

---

<div class="post-metadata">

**Author:** ![neintoes](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/neintoes/32/8315_2.png) [@neintoes](https://forum.makecode.com/u/neintoes)\
**Post date:** [July 28, 2024, 4:05am UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/37 "2024-07-28T04:05:17Z")

</div>

Can you post a link to your project? Generally if you would like some help remember to post a link to your project so we can have a peek at the code and see what might need tweaking.

---

<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 28, 2024, 4:24am UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/38 "2024-07-28T04:24:33Z")

</div>

thats a problem with that main raycasting engine, take it up with one of the mods/devs of makecode and @AqeeAqee ?

---

<div class="post-metadata">

**Author:** ![platformermaster](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/platformermaster/32/16102_2.png) [@platformermaster](https://forum.makecode.com/u/platformermaster)\
**Post date:** [July 28, 2024, 3:15pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/39 "2024-07-28T15:15:16Z")

</div>

Okay here [https://arcade.makecode.com/S95929-06881-80109-46935](https://arcade.makecode.com/S95929-06881-80109-46935) Im pretty sure it has nothing to do with my code. But check it out for me please.

---

<div class="post-metadata">

**Author:** ![RobbyZero](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/robbyzero/32/17188_2.png) [@RobbyZero](https://forum.makecode.com/u/RobbyZero)\
**Post date:** [July 30, 2024, 4:41pm UTC](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758/40 "2024-07-30T16:41:37Z")

</div>

@neintoes I had a question.  
I’m not familiar with big extensions like this one but I was wondering if multiple floor layers is in the future. It would make recreating games like Minecraft so much easier.  
Btw amazing work so far. Absolutely 💯 A+++++++++

[Previous page](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758.md?page=1)

[Next page](https://forum.makecode.com/t/3d-rendering-with-floor-and-ceiling/29758.md?page=3)
