# Isometric render

**URL:** <https://forum.makecode.com/t/isometric-render/22580>\
**Category:** Arcade\
**Tags:** game, graphics-and-math, extension\
**Created:** [September 18, 2023, 5:31pm UTC](https://forum.makecode.com/t/isometric-render/22580 "2023-09-18T17:31:00Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![PLAYER42](https://avatars.discourse-cdn.com/v4/letter/p/e9bcb4/32.png) [@PLAYER42](https://forum.makecode.com/u/PLAYER42)\
**Post date:** [September 18, 2023, 11:11pm UTC](https://forum.makecode.com/t/isometric-render/22580/22 "2023-09-18T23:11:58Z")

</div>

This is amazing! If you could add shadows or let us jump onto the blocks

---

<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:** [September 18, 2023, 11:13pm UTC](https://forum.makecode.com/t/isometric-render/22580/23 "2023-09-18T23:13:08Z")

</div>

Is there a way to change it from sprites to tiles but keep depth of field?

---

<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:** [September 19, 2023, 4:25pm UTC](https://forum.makecode.com/t/isometric-render/22580/24 "2023-09-19T16:25:01Z")

</div>

Yes, but…  
sprites can be transform to tiles in a custom function, as long as sprite.image has same size with tile, in isometric, it should be a diamond shape, or a cube graphic if it’s a wall.  
In your project, the sprites are houses, right? They are all higher than field tile.  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/7/7266a4c960f33edc9a3b79643b5b47f08119887f.png)

And the depth, I still didn’t understand what you want to do with it. Would you show me a scenario in detail pls?

---

<div class="post-metadata">

**Author:** ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)\
**Post date:** [September 19, 2023, 4:34pm UTC](https://forum.makecode.com/t/isometric-render/22580/25 "2023-09-19T16:34:39Z")

</div>

You weren’t the one adressed either way…

---

<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:** [September 19, 2023, 4:50pm UTC](https://forum.makecode.com/t/isometric-render/22580/26 "2023-09-19T16:50:38Z")

</div>

I just meant that stuff behind it is obscured

---

<div class="post-metadata">

**Author:** ![frandev](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/frandev/32/27644_2.png) [@frandev](https://forum.makecode.com/u/frandev)\
**Post date:** [September 19, 2023, 5:18pm UTC](https://forum.makecode.com/t/isometric-render/22580/27 "2023-09-19T17:18:45Z")

</div>

yeah ik

---

<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:** [September 20, 2023, 2:21am UTC](https://forum.makecode.com/t/isometric-render/22580/28 "2023-09-20T02:21:54Z")

</div>

A funny demo of **Jumping On The Wall**  
Jump on wall & walk around & jump/walk off, or even shoot airplane on walls, which is floating in the air as before. (But projectile might be destroied by wall sometime, this wouldn’t be fixed for now.)

> **[Isometric](https://arcade.makecode.com/82099-01373-05124-62374)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![Blobbey](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blobbey/32/20831_2.png) [@Blobbey](https://forum.makecode.com/u/Blobbey)\
**Post date:** [September 20, 2023, 6:02pm UTC](https://forum.makecode.com/t/isometric-render/22580/29 "2023-09-20T18:02:06Z")

</div>

Now you can walk off the map.  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/8f8587fcce8552aed57f0ea70105491a41011bb9.png)

---

<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:** [September 20, 2023, 8:30pm UTC](https://forum.makecode.com/t/isometric-render/22580/30 "2023-09-20T20:30:15Z")

</div>

hah, yes.  
Just about 10+ lines code added in this quick implement, and the build-in isOnWall() treat outside as wall.

---

<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:** [September 20, 2023, 8:33pm UTC](https://forum.makecode.com/t/isometric-render/22580/31 "2023-09-20T20:33:23Z")

</div>

@AqeeAqee? P L E A S E make this an extension… plsplsplsplsplsplsplsplspls… the stuff I could make with this…

---

<div class="post-metadata">

**Author:** ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)\
**Post date:** [September 20, 2023, 8:38pm UTC](https://forum.makecode.com/t/isometric-render/22580/32 "2023-09-20T20:38:08Z")

</div>

> [@AqeeAqee](#):
>
> Isometric extension haven’t release yet.

_ahem_  
It’s being worked on

---

<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:** [September 25, 2023, 9:47pm UTC](https://forum.makecode.com/t/isometric-render/22580/33 "2023-09-25T21:47:00Z")

</div>

Oh yeah, I didn’t read that part. 😅

hehehe…

---

<div class="post-metadata">

**Author:** ![goldtopaz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/goldtopaz/32/28622_2.png) [@goldtopaz](https://forum.makecode.com/u/goldtopaz)\
**Post date:** [September 25, 2023, 10:25pm UTC](https://forum.makecode.com/t/isometric-render/22580/34 "2023-09-25T22:25:00Z")

</div>

Not gonna lie this kinda looks like a gameboy advance game

---

<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:** [September 28, 2023, 8:43pm UTC](https://forum.makecode.com/t/isometric-render/22580/35 "2023-09-28T20:43:59Z")

</div>

I am still waiting for feature request, or feedback, or suggestion, before public release.

Because modifying interface/block design could break early user projects. So I hope modify them as less as possible after release.

So any ideas or request are welcome ! Or even not sure about it, we can discuss then plan it here.

---

<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:** [September 28, 2023, 8:44pm UTC](https://forum.makecode.com/t/isometric-render/22580/36 "2023-09-28T20:44:47Z")

</div>

**A preview of Isometric-SideView.**

Yes, this looks totally diffrent with my previous Isometric, a side view, for side scrolling of platform game.

There’s only 2 dimension, X&Y, so all stuff “motionZ” like jump(z direction) in ext are not required, use all the same tech in a traditional tilemap to implement jump etc instead (shown in main.ts).

2D in this side view, while 3D in previos Isometric, too many stuff differ from each other, and as well as optimizations. So, this will be public as a separate extension Isometric-SideView, while previous  
as Isometric-BoardView (not sure the names yet, and suggustion?)

> **[Isometric\_sideview\_preview](https://arcade.makecode.com/87619-39887-07699-71246)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

**New feature:**

> setWallSideTexture(tex: Image, forTile?: Image)

Set custom texture of wall side faces(can be transparent partially), shown in main.ts , but should be same size with Tiles. If the “forTile” ommitted, set it as all wall default side face.  
This feature will be made to a block before release, and also add to Isometric-BoardView later.

**On device:**  
This can work on hardware, eg: Meowbit, with about 18~20fps, and about 11~12fps while rotating  
(BTW the Isometric-BoardView preview can work on device also, but I forgot to mention in first post.)

**control:**

- walk around with Left/Right
- Scale size with Up/Down
- B jump, A shot
- Holding Menu( ~/` key ): view adjust mode
  - Up/Down for view pitch
  - Left/Right for rotate view angle

---

<div class="post-metadata">

**Author:** ![Blobbey](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blobbey/32/20831_2.png) [@Blobbey](https://forum.makecode.com/u/Blobbey)\
**Post date:** [September 28, 2023, 8:45pm UTC](https://forum.makecode.com/t/isometric-render/22580/37 "2023-09-28T20:45:36Z")

</div>

This continues to astonish me!!! Incredible!!!

---

<div class="post-metadata">

**Author:** ![Mega0star01](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mega0star01/32/14784_2.png) [@Mega0star01](https://forum.makecode.com/u/Mega0star01)\
**Post date:** [September 28, 2023, 9:10pm UTC](https://forum.makecode.com/t/isometric-render/22580/38 "2023-09-28T21:10:41Z")

</div>

this is getting even more good.

---

<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:** [November 15, 2023, 6:05pm UTC](https://forum.makecode.com/t/isometric-render/22580/39 "2023-11-15T18:05:32Z")

</div>

done?

---

<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:** [November 16, 2023, 9:26pm UTC](https://forum.makecode.com/t/isometric-render/22580/40 "2023-11-16T21:26:52Z")

</div>

Pls be finished! I desperately want to make a game with 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:** [November 16, 2023, 9:29pm UTC](https://forum.makecode.com/t/isometric-render/22580/41 "2023-11-16T21:29:41Z")

</div>

Sorry for all who waiting for the block edition, I know it’s time to make it, but I was falling in another rabbit hole recently. 2 holes actually, pico-8 game migration adaptor(APIs), and arcade RPi game optimization. These are a little more complex than I thought, fortunately I did get some progress, managing to clear them up and post out. Hope I can finish soon and back to this project ASAP.

[Previous page](https://forum.makecode.com/t/isometric-render/22580.md?page=1)

[Next page](https://forum.makecode.com/t/isometric-render/22580.md?page=3)
