# Isometric render

**URL:** https://forum.makecode.com/t/isometric-render/22580
**Category:** Arcade
**Tags:** extension, graphics-and-math, game
**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:** 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: [September 18, 2023, 5:31pm UTC](https://forum.makecode.com/t/isometric-render/22580/1 "2023-09-18T17:31:00Z")

</div>

A preview of my Isometric Render:  
Building on the same framework of my [Raycasting 3D render – Blocks Edition](https://forum.makecode.com/t/raycasting-3d-render-blocks-edition/12921) extension. Most features of raycasting are planned supportting, but some not finished yet.  
Tiles rotating algorithm is based on the [SNES mode 7 transformations](https://forum.makecode.com/t/snes-mode-7-transformations/8530)

Main features implemented:

- Render view following selfSpr position & view angle
- Tilemap: supported
- Sprite:
  - build-in blocks: Position, Scale, Projectile, SayText, Particle Effect
  - extension feature: jump, floating,etc.

- Walls
- build-in Screen Effects
- Viewmode: Isometric & Tilemap (haven’t combine with raycasting mode)

> **[Isometric](https://arcade.makecode.com/S61521-24567-04318-83766)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

control:

- walk around with arrow keys
- B jump, A shot
- A+B: view adjust mode
  - Up/Down for view pitch
  - Left/Right for scale size

NOTE: This link is just a preview project, Isometric extension haven’t release yet.

Tell what you think and your suggestion pls.  
If you want make game with it, let me know your project and featues you need.

---

<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 18, 2023, 5:35pm UTC](https://forum.makecode.com/t/isometric-render/22580/2 "2023-09-18T17:35:31Z")

</div>

This is phenomenal, great job 🤯

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [September 18, 2023, 5:38pm UTC](https://forum.makecode.com/t/isometric-render/22580/3 "2023-09-18T17:38:35Z")

</div>

@AqeeAqee super cool! are you planning on supporting more than just 1 level of elevation? e.g. will I finally be able to make that final fantasy tactics game i’ve always wanted:

> **[Final Fantasy Tactics Advance](https://en.wikipedia.org/wiki/Final_Fantasy_Tactics_Advance)**
>
> Final Fantasy Tactics Advance\[a\] is a 2003 tactical role-playing game developed and published by Square (now Square Enix) for the Nintendo Game Boy Advance. A spin-off of the Final Fantasy series, the game shares several traits with 1997's Final Fantasy Tactics, although it is not a direct sequel. The player assembles a clan of characters, and controls their actions over grid-like battlefields. Players are mostly free to decide the classes, abilities, and statistics of their characters.
> The game...

---

<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, 5:41pm UTC](https://forum.makecode.com/t/isometric-render/22580/4 "2023-09-18T17:41:23Z")

</div>

LETS GOOOO [ISOMETRIC CITY BUILDER](https://forum.makecode.com/t/isometric-city-builder/19775) IS NOT DEAD

---

<div class="post-metadata">

### Author: ![Sonicblaston](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sonicblaston/32/19164_2.png) [@Sonicblaston](https://forum.makecode.com/u/Sonicblaston)
#### Post date: [September 18, 2023, 5:48pm UTC](https://forum.makecode.com/t/isometric-render/22580/5 "2023-09-18T17:48:21Z")

</div>

I’m speculating that this demo is going to be one of the games with over a hundred clicks

---

<div class="post-metadata">

### Author: ![BoostedGames](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/boostedgames/32/29419_2.png) [@BoostedGames](https://forum.makecode.com/u/BoostedGames)
#### Post date: [September 18, 2023, 6:20pm UTC](https://forum.makecode.com/t/isometric-render/22580/6 "2023-09-18T18:20:43Z")

</div>

Looks very 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: [September 18, 2023, 6:43pm UTC](https://forum.makecode.com/t/isometric-render/22580/7 "2023-09-18T18:43:40Z")

</div>

Keep working on it, the transparent block and houses are so neat, I like your art.  
One of the reason that I start build this Isometric render, is I met some isometric projects in forum, include yours. Many guys want make isometric project or engine, but stoped for reasons. So I had a try, and make this.

---

<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 18, 2023, 6:43pm UTC](https://forum.makecode.com/t/isometric-render/22580/8 "2023-09-18T18:43:49Z")

</div>

does this works with the screen spliting extension???

---

<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 18, 2023, 6:44pm UTC](https://forum.makecode.com/t/isometric-render/22580/9 "2023-09-18T18:44:03Z")

</div>

Thanks you like it!

As a Isometric render this kind of view should be support definitely, though there might be some tech difficulty I haven’t been awared right now.  
Multi-level map is a classic requrement since my Raycasting extension, I always thinkover how make it real. Isometric main effort is drawing rotated tiles as floor, so that become possible.

The main problem/task is to solve how to define multi-level map in Arcade map editor (It can be defined in a ext block or an array block, but that will be a very tough job for user).  
What you think about this?

---

<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, 7:37pm UTC](https://forum.makecode.com/t/isometric-render/22580/10 "2023-09-18T19:37:00Z")

</div>

Can you support 2D tiles that have depth so I don’t have to use sprites?

---

<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 18, 2023, 7:37pm UTC](https://forum.makecode.com/t/isometric-render/22580/11 "2023-09-18T19:37:02Z")

</div>

Unfortunely not, but maybe can be sopported in the future, maybe LOL

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [September 18, 2023, 7:37pm UTC](https://forum.makecode.com/t/isometric-render/22580/12 "2023-09-18T19:37:09Z")

</div>

I think an array of tilemaps, they all need to have the same size and tilemap 0 is the bottom, tilemap 1 is above it, etc.

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [September 18, 2023, 7:46pm UTC](https://forum.makecode.com/t/isometric-render/22580/14 "2023-09-18T19:46:45Z")

</div>

Array of tilemaps would certainly work, but might be a little tedious if you ever have to edit the map.

You could also do two tilemaps, one being the tiles and the other being a depth map:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/4c6b11ef99765e61c88fedbcf536e2ebc538d102.png)

Extensions can export their own tilesets so you could add your own number tiles.

This would work for FFTA style maps, but you would obviously not be able to do 3d structures (like a bridge you could walk under).

---

<div class="post-metadata">

### Author: ![urassari](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/urassari/32/9535_2.png) [@urassari](https://forum.makecode.com/u/urassari)
#### Post date: [September 18, 2023, 8:57pm UTC](https://forum.makecode.com/t/isometric-render/22580/15 "2023-09-18T20:57:22Z")

</div>

this has been my dream for a very long time… **ISOMETRIC 3D TILEMAPS IN MAKECODE FINALLY EXISTS!!!** TURN THIS INTO AN EXTENSION [**NOW**](https://large-type.com/#DO%20IT%20AS%20SOON%20AS%20YOU%20CAN!!!)

---

<div class="post-metadata">

### Author: ![urassari](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/urassari/32/9535_2.png) [@urassari](https://forum.makecode.com/u/urassari)
#### Post date: [September 18, 2023, 8:57pm UTC](https://forum.makecode.com/t/isometric-render/22580/16 "2023-09-18T20:57:23Z")

</div>

can you make an infinitely flat tile, making it a square, to make a bridge??? (oh wait then it will be on the ground)

---

<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 18, 2023, 8:57pm UTC](https://forum.makecode.com/t/isometric-render/22580/17 "2023-09-18T20:57:25Z")

</div>

@UnsignedArduino@richard  
Both ideas are great, why I didn’t even think like that. 😅

Maybe because a solution occupied my mind already:  
Walls defined in the tilemap as a Image, and marked “02”(just according to the color index of Red, in which color walls marked in tilemap editor). Except “00”(not wall) and “02” (wall), no other value used by now. So I hope there could be a way, that walls can be marked in different colors, color index value is just the level value. But this need some hard work to code the editor, and you all are so busy. ☹ But I can’t stop think of this…

---

<div class="post-metadata">

### Author: ![TeddyB](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/teddyb/32/35627_2.png) [@TeddyB](https://forum.makecode.com/u/TeddyB)
#### Post date: [September 18, 2023, 8:57pm UTC](https://forum.makecode.com/t/isometric-render/22580/18 "2023-09-18T20:57:28Z")

</div>

I didn’t know it was possible to make a game like 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: [September 18, 2023, 9:36pm UTC](https://forum.makecode.com/t/isometric-render/22580/19 "2023-09-18T21:36:22Z")

</div>

Hah, what I am doing is try to make this kind of game 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: [September 18, 2023, 10:04pm UTC](https://forum.makecode.com/t/isometric-render/22580/20 "2023-09-18T22:04:46Z")

</div>

You mean the Sprite.Z(depth) ?  
In isometric view, all sprite drawing ordered by distance, which is depend on your current view position and angle, so the Z will be ignored.(except these sprites relative camera)

---

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

</div>

[my opinion on that](https://large-type.com/#I%20don't%20feel%20like%20it%2C%20lmao)

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