# Raycasting 3D render -- Blocks Edition

**URL:** https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921
**Category:** Game Design
**Tags:** extension, game, graphics-and-math
**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:** 1

<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: [April 1, 2022, 6:23pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/1 "2022-04-01T18:23:28Z")

</div>

Here it comes finally.  
It took me several days to find out how raycasting render would work with existing blocks/functions and Arcade game platform together. After read many source codes to try to inject my codes in, the last supposition worked. That is take over tilemap’s renderable instance and all sprites created in current scene to prevent them from being drawn, and keep them in physical engine to make overlap things happen at meanwhile, and then register frameHandlers to draw tilemap and update&draw sprites.  
Let me know pls, if there is a more proper/elegant way.  
Also need suggestions to impove, really appreciate!

## Demo project:

> **[demo\_pxt-Raycasting](https://arcade.makecode.com/59169-39428-75390-60169)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

## Extension URL (v0.3.2 or above)

> [https://github.com/AqeeAqee/pxt-raycasting](https://github.com/AqeeAqee/pxt-raycasting)

## Brief:

An extension for Makecode Arcade, render a tilemap into raycasting 2.5D view(a kind of less calculation consuming 3D perspective view mode), with directional animations of sprites,

based on mmoskal’s [3d map](https://forum.makecode.com/t/3d-raycasting-in-arcade/474)

## Quick Start

- Basically, this render just draw a traditional tilemap game into “3D view”
- setTilemap(), walk around with arrow keys
- Do your game as usual
  - sprites, suggest sprite.setScale(0.5) for each, set directional animations with provided animation block.
  - work together with most of Arcade blocks and extensions, sprite, projectile, overlap,…
  - except these drawing screen directly, sprite effects/saytext …

- Operate view pos and collision size with provided “myself sprite”, and view direction with “setViewAngle” block
- Switch view mode with block “setViewMode to tilemap(2D)/raycasting(3D)”
- Zoom in/out by set fov

> **More ...**
>
> ## Known issues:
> 
> - Performing: To compactible with existing blocks, many codes are added in, the perf goes down significantly, need tuning later.
> - The Arcade phyical engine worked fine if sprite image is square. But if not, say a tall tree, collision will occured before hit the wall at y axis.
> - Reason: The physical engine working in 2D mode, that consider sprite image as its size(x&y direction). But 3D render consider the image width as size for both x & y axises, height as sprite Z-axis size. This could be fix by override the physical engine, in future, if needed.
> 
> ## Todo:
> 
> - Sprite sayText, particles, effects
> - Override physic engine.
> - Perf tuning, Fx8
> - Pose depended animations, stand, walk, attack. Any one need?
> - function/block for disable controller codes in this extension, so user can control “myself” in user code
> - Tutorial

---

<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: [April 1, 2022, 10:04pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/2 "2022-04-01T22:04:05Z")

</div>

> [@AqeeAqee](#):
>
> The Arcade phyical engine worked fine if sprite image is square. But if not, say a tall tree, collision will occured before hit the wall at y axis.
> 
> - Reason: The physical engine working in 2D mode, that consider sprite image as its size(x&y direction). But 3D render consider the image width as size for both x & y axises, height as sprite Z-axis size. This could be fix by override the physical engine, in future, if needed.

You could use the sprite’s “bottom”, “top”, “left”, or “right” anchors, so it wouldn’t matter what size the sprite was. Just an idea, instead of coding a new physics engine. (IDK if I fully understand the above quote, but I think this might work)

---

<div class="post-metadata">

### Author: ![Segatendo](https://avatars.discourse-cdn.com/v4/letter/s/898d66/32.png) [@Segatendo](https://forum.makecode.com/u/Segatendo)
#### Post date: [April 4, 2022, 4:13pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/3 "2022-04-04T16:13:47Z")

</div>

this is AMAZING i can do so much with this but just wondering is there a way to make the myself sprite jump or have a character in front cause with this i could make maze games snic robo blast 2 or super mario 64 or even some type of minecraft like game if you can add layers onto this

thanks for creating this 😀

---

<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: [April 4, 2022, 4:15pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/4 "2022-04-04T16:15:45Z")

</div>

Thanks @Kiwiphoenix364 for your suggustion !  
The sprites top,left,right,bottom are critical for collision. They all are “mapped” into hitbox when create, with which physical functions calculate , and it will be “re-map” every time setImage(). So user need notice extension to update hitbox every time after set a new Image (need user learn more about this extension). I will try to dig deeper to find whether this can work. If yes, it still need a balance between simple implement and easy learning(convenience).  
Thanks again for providing me more idea, very appreciated!

---

<div class="post-metadata">

### Author: ![2ndClemens](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/2ndclemens/32/809_2.png) [@2ndClemens](https://forum.makecode.com/u/2ndClemens)
#### Post date: [April 4, 2022, 5:00pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/5 "2022-04-04T17:00:05Z")

</div>

Wow, this looks great, thanks for sharing.  
I will try to understand how this works and add some protagonists to my 3D experiment:

> [@Hedges & Pylons](https://forum.makecode.com/t/hedges-pylons/2683):
>
> Yet another mod of the amazing 3D raycasting demonstrator by [mmoskal](https://forum.makecode.com/u/mmoskal) . Performs well and looks quite nice on the Meowbit device. Nothing to do yet, just enjoy the walk wink

> **[Hedges & Pylons](https://arcade.makecode.com/80239-85851-24772-21589)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

### 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: [April 4, 2022, 5:22pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/6 "2022-04-04T17:22:30Z")

</div>

This is incredibly cool, great job 😃

---

<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: [April 5, 2022, 8:41pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/7 "2022-04-05T20:41:36Z")

</div>

> [@Segatendo](#):
>
> is there a way to make the myself sprite jump

yes, jump maybe possible, but be aware it’s not “jump on” to some cube or platform, cause infact every cube have no top/bottom surface. 😂

> [@Segatendo](#):
>
> or have a character in front

yes, I should say sorry for this, it’s a bug, that sprites with flag “relative to camera” are tookovered too by my render, so they would not be drawn as HUD alike.  
Check out new release please (v0.3.3). (to update:In your game, goto JS mode and press refresh button next to the name of my extension in files list at leftside)

---

<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: [April 5, 2022, 8:41pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/8 "2022-04-05T20:41:51Z")

</div>

Wow, really cool!  
You made walls alive, that make me to think to add ani feature for wall textures too.

> [@2ndClemens](#):
>
> I will try to understand how this works

Feel free to let me know if you have any question on it, or let’s discuss what features/interfaces need to make this kind of 3D render better.

---

<div class="post-metadata">

### Author: ![GoMustangs](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gomustangs/32/4323_2.png) [@GoMustangs](https://forum.makecode.com/u/GoMustangs)
#### Post date: [April 11, 2022, 5:17pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/9 "2022-04-11T17:17:22Z")

</div>

Wow! This is really cool!

---

<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: [April 13, 2022, 6:40pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/10 "2022-04-13T18:40:40Z")

</div>

## SayText featrue preview

It works, but I didn’t release new version yet, cause I am not sure about following:

- need show say in 2d? No add to 2d map yet, many saying text make 2d map kind of mess I think.
- only show saytext when center of sprite in screen? Right now, shown as long as any part of sprite shown.
- issue: can’t be covered by walls/sprites by now, it will invovle many calculation, really need?  
What do you think about these?

> **[demo\_say-Raycasting](https://arcade.makecode.com/29721-97642-86811-03060)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<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: [April 22, 2022, 10:28pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/11 "2022-04-22T22:28:04Z")

</div>

Another preview edtion

- add wall scale
- add jump, via selfSpr offsetZ as view point height
- btw, other sprites can also “jump” with it’s offsetZ

> **[jump-Raycasting](https://arcade.makecode.com/00667-96681-21691-34909)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

### Author: ![2ndClemens](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/2ndclemens/32/809_2.png) [@2ndClemens](https://forum.makecode.com/u/2ndClemens)
#### Post date: [April 25, 2022, 5:13pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/12 "2022-04-25T17:13:37Z")

</div>

Wow, thanks AqeeAqee, wall scale and jump are great additions 🙂  
It runs very well on Meowbit hardware,

---

<div class="post-metadata">

### Author: ![TZG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/tzg/32/7392_2.png) [@TZG](https://forum.makecode.com/u/TZG)
#### Post date: [April 25, 2022, 5:15pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/13 "2022-04-25T17:15:05Z")

</div>

Will it be in blocks?

---

<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: [April 25, 2022, 6:41pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/14 "2022-04-25T18:41:31Z")

</div>

Good new !  
So happy you like it!  
And waiting for your project with it!

---

<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: [April 25, 2022, 6:41pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/15 "2022-04-25T18:41:33Z")

</div>

Definitely yes!  
Blocks for all functions is one of my basic principle when building this extention ( as far as I can 😂 )

---

<div class="post-metadata">

### Author: ![TZG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/tzg/32/7392_2.png) [@TZG](https://forum.makecode.com/u/TZG)
#### Post date: [April 25, 2022, 11:26pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/16 "2022-04-25T23:26:24Z")

</div>

Okie Dokie

---

<div class="post-metadata">

### Author: ![xcz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/xcz/32/6136_2.png) [@xcz](https://forum.makecode.com/u/xcz)
#### Post date: [May 2, 2022, 4:49pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/17 "2022-05-02T16:49:32Z")

</div>

yo this is awesome

---

<div class="post-metadata">

### Author: ![brandodon](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/brandodon/32/3625_2.png) [@brandodon](https://forum.makecode.com/u/brandodon)
#### Post date: [May 2, 2022, 4:49pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/18 "2022-05-02T16:49:40Z")

</div>

Do you think you are ever going to create strafing?

---

<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: [May 3, 2022, 5:23pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/19 "2022-05-03T17:23:30Z")

</div>

Yep, it is if you fire fast enough 😄  
Have fun!

---

<div class="post-metadata">

### Author: ![brandodon](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/brandodon/32/3625_2.png) [@brandodon](https://forum.makecode.com/u/brandodon)
#### Post date: [May 3, 2022, 8:18pm UTC](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921/20 "2022-05-03T20:18:24Z")

</div>

Well that makes sense 😆. I meant, is there any official way to enable side-to-side movement?

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