# Raycasting 3D render with directional animation sprites

**URL:** https://forum.makecode.com/t/raycasting-3d-render-with-directional-animation-sprites/12802
**Category:** Show & Tell
**Tags:** extension, graphics-and-math, game
**Created:** [March 21, 2022, 4:44pm UTC](https://forum.makecode.com/t/raycasting-3d-render-with-directional-animation-sprites/12802 "2022-03-21T16:44:52Z")
**Posts on this page:** 6
**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: [March 21, 2022, 4:44pm UTC](https://forum.makecode.com/t/raycasting-3d-render-with-directional-animation-sprites/12802/1 "2022-03-21T16:44:52Z")

</div>

> **[pxt-Raycasting](https://arcade.makecode.com/54021-42412-02435-70419)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

An extension for Makecode Arcade, render a tilemap to 2.5D view, with directional animations of sprites, and minimap, based on @mmoskal 's [3d map](https://forum.makecode.com/t/3d-raycasting-in-arcade/474).

Tested on my Meobit (STM32F4) about 25~30 fps (I have no SAMD51 device, tell me if you tested)

I am wondering how to define interface for codes&block better, and what can do to optimize perform further, looking forward for your suggestions.

## features:

- Simply interface
- Directional multi sprites with animation, see animation.ts
- Auto direction/animate calculate, any count
- Predefined animations(hero, princess, skelly, …), or define yours as Image
- Manipulate sprite in your own main code, no need update to engine
- Mimimap

## todo:

- collide & events
- enclose into blocks

## known issues:

- sprite isn’t drawn when it’s center not inside screen, will fix later
- sprite floating when reducing height rate, will fix later

> Open this project at [https://aqeeaqee.github.io/pxt-raycasting/](https://aqeeaqee.github.io/pxt-raycasting/)

---

<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: [March 21, 2022, 10:54pm UTC](https://forum.makecode.com/t/raycasting-3d-render-with-directional-animation-sprites/12802/2 "2022-03-21T22:54:08Z")

</div>

This is Awesome

---

<div class="post-metadata">

### Author: ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)
#### Post date: [March 24, 2022, 11:44pm UTC](https://forum.makecode.com/t/raycasting-3d-render-with-directional-animation-sprites/12802/3 "2022-03-24T23:44:00Z")

</div>

this is so cool - once this has a tutorial then i would love to use 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: [March 25, 2022, 8:10pm UTC](https://forum.makecode.com/t/raycasting-3d-render-with-directional-animation-sprites/12802/4 "2022-03-25T20:10:01Z")

</div>

Tutorial, yes I will do.  
But it would be the last one in my TODO list, cause I’m working on a whole new edtion of this, which is compatible Arcade existing blocks as much as possible.

---

<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: [March 25, 2022, 8:10pm UTC](https://forum.makecode.com/t/raycasting-3d-render-with-directional-animation-sprites/12802/5 "2022-03-25T20:10:03Z")

</div>

BTW, known issues have been fixed

Try it at [https://aqeeaqee.github.io/pxt-raycasting/](https://aqeeaqee.github.io/pxt-raycasting/)

## known issues:

- [fixed] ~~sprite isn’t drawn when it’s center not inside screen~~
- [fixed] ~~sprite floating when reducing height rate~~

---

<div class="post-metadata">

### Author: ![Mik](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@Mik](https://forum.makecode.com/u/Mik)
#### Post date: [May 27, 2026, 6:11pm UTC](https://forum.makecode.com/t/raycasting-3d-render-with-directional-animation-sprites/12802/6 "2026-05-27T18:11:03Z")

</div>

Can you make it have floor and ceiling?
