# MakeCode Kart

**URL:** <https://forum.makecode.com/t/makecode-kart/5787>\
**Category:** Collaboration\
**Tags:** art\
**Created:** [January 27, 2021, 4:09pm UTC](https://forum.makecode.com/t/makecode-kart/5787 "2021-01-27T16:09:21Z")\
**Posts on this page:** 20\
**Page:** 5

<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:** [August 26, 2021, 7:57pm UTC](https://forum.makecode.com/t/makecode-kart/5787/87 "2021-08-26T19:57:32Z")

</div>

Pls explain how this whole thing works I really wanna know but my tiny brain cannot understand the code

---

<div class="post-metadata">

**Author:** ![Nome\_muito\_criativo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/nome_muito_criativo/32/5636_2.png) [@Nome\_muito\_criativo](https://forum.makecode.com/u/Nome_muito_criativo)\
**Post date:** [August 26, 2021, 7:57pm UTC](https://forum.makecode.com/t/makecode-kart/5787/88 "2021-08-26T19:57:33Z")

</div>

One more advice, the **fill rectangle** block is veeeery sloooow.  
Try using the **set ( ) color at x ( ) y ( )** with a higher resolution, it may run better.

---

<div class="post-metadata">

**Author:** ![kwx](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kwx/32/1545_2.png) [@kwx](https://forum.makecode.com/u/kwx)\
**Post date:** [August 26, 2021, 8:55pm UTC](https://forum.makecode.com/t/makecode-kart/5787/89 "2021-08-26T20:55:01Z")

</div>

As far as I know, the fastest way to draw is to use `scene.createRenderable` combined with `Image.setRows`. That’s what I use in Space Rocks 3D.

Here’s an older discussion about the topic: [Is it possible to write directly to screen (pixels) on the Arcade?](https://forum.makecode.com/t/is-it-possible-to-write-directly-to-screen-pixels-on-the-arcade/510)

`scene.createRenderable` takes a function as its second argument, that function gets called each time the screen content is refreshed on updates. The called function gets an `Image` as its first argument which is a reference to the screen buffer, you can modify that image to draw directly onto the screen.

The `image.getRows` and `image.setRows` methods copy pixels from the screen into a byte buffer and back.

Something like this (untested):

```auto
const buf = Buffer.create(120)
const zLayer = 0
scene.createRenderable(zLayer, (target: Image, camera: scene.Camera) => {
  for (let x = 0; x < 160; +=x) {
    // Read the current screen content for modification
    image.getRows(x, buf)
    // Now "buf" contains a color value for the current pixel row 
    // (it's actually a vertical column onscreen) where it can be modified.
    buf[12] = 15
    // Write the modified pixels back to the screen.
    image.setRows(x, buf)
  }
})

```

---

<div class="post-metadata">

**Author:** ![Nome\_muito\_criativo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/nome_muito_criativo/32/5636_2.png) [@Nome\_muito\_criativo](https://forum.makecode.com/u/Nome_muito_criativo)\
**Post date:** [August 26, 2021, 10:34pm UTC](https://forum.makecode.com/t/makecode-kart/5787/90 "2021-08-26T22:34:57Z")

</div>

Yeah, but you can’t do that in blocks

---

<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:** [August 27, 2021, 2:48pm UTC](https://forum.makecode.com/t/makecode-kart/5787/91 "2021-08-27T14:48:37Z")

</div>

I made it render 1600 pixels (20x80) and it looks good(30 fps on pc)(thanks @Nome_muito_criativo ). if I would try for 20x160 the framerate is horrible. (sorry @kwx I don’t know Javascript so I don’t know how to implement your method)

> **[Raycast](https://arcade.makecode.com/17005-29106-30653-97268)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![frank\_schmidt](https://avatars.discourse-cdn.com/v4/letter/f/7993a0/32.png) [@frank\_schmidt](https://forum.makecode.com/u/frank_schmidt)\
**Post date:** [August 30, 2021, 5:06pm UTC](https://forum.makecode.com/t/makecode-kart/5787/92 "2021-08-30T17:06:17Z")

</div>

Curious to know why a sprite cannot be inserted into this scene? [https://makecode.com/\_dKkPsCRg2ERJ](https://makecode.com/_dKkPsCRg2ERJ)

---

<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:** [August 30, 2021, 6:40pm UTC](https://forum.makecode.com/t/makecode-kart/5787/93 "2021-08-30T18:40:06Z")

</div>

@frank_schmidt the camera coords are way lower, try using relative to camera

---

<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:** [August 30, 2021, 10:21pm UTC](https://forum.makecode.com/t/makecode-kart/5787/94 "2021-08-30T22:21:11Z")

</div>

also, anyone have any idea how to make the actual casting of the rays be faster, because that’s my main problem. I’m using a 1x1 sprite and detecting what tile is in that sprite’s position for each pixel and I think there might be a more efficient method. If anyone knows or has any ideas please let me know because I want to get to full pixel density (1x1 pixels instead of 2x1 pixels).

---

<div class="post-metadata">

**Author:** ![Agent\_14](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/agent_14/32/17567_2.png) [@Agent\_14](https://forum.makecode.com/u/Agent_14)\
**Post date:** [August 31, 2021, 3:12pm UTC](https://forum.makecode.com/t/makecode-kart/5787/96 "2021-08-31T15:12:40Z")

</div>

That’s the goal.

---

<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:** [August 31, 2021, 4:42pm UTC](https://forum.makecode.com/t/makecode-kart/5787/97 "2021-08-31T16:42:26Z")

</div>

I’m working on collidable pipes

---

<div class="post-metadata">

**Author:** ![Nome\_muito\_criativo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/nome_muito_criativo/32/5636_2.png) [@Nome\_muito\_criativo](https://forum.makecode.com/u/Nome_muito_criativo)\
**Post date:** [August 31, 2021, 4:43pm UTC](https://forum.makecode.com/t/makecode-kart/5787/98 "2021-08-31T16:43:01Z")

</div>

Instead of using sprites you could use X and Y variables, just increment them instead of setting the sprite’s position, then you can get the tile under them with the  
`(tilemap cols ( ) rows ( ))`  
block.

---

<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:** [August 31, 2021, 6:24pm UTC](https://forum.makecode.com/t/makecode-kart/5787/99 "2021-08-31T18:24:41Z")

</div>

The problem is, I’m working with angles and there’s no “detect tile (angle) (distance) from (mysprite)”

---

<div class="post-metadata">

**Author:** ![Nome\_muito\_criativo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/nome_muito_criativo/32/5636_2.png) [@Nome\_muito\_criativo](https://forum.makecode.com/u/Nome_muito_criativo)\
**Post date:** [September 1, 2021, 3:06pm UTC](https://forum.makecode.com/t/makecode-kart/5787/100 "2021-09-01T15:06:54Z")

</div>

This is called “polar coordinates”, to convert to x and y (cartesian coordinates) you just set

```auto
x = distance * cos (angle)
y = distance * sin (angle)

```

Considering an angle of 0 to be on the right

NOTE: trigonometry in MakeCode uses radians not degrees

---

<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:** [September 1, 2021, 4:19pm UTC](https://forum.makecode.com/t/makecode-kart/5787/101 "2021-09-01T16:19:13Z")

</div>

Thanks! I haven’t taken trigonometry yet, so I never learned how cos and sin worked. I’ll get working on the code!

---

<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:** [September 2, 2021, 6:47pm UTC](https://forum.makecode.com/t/makecode-kart/5787/102 "2021-09-02T18:47:56Z")

</div>

The rendering is warped and movement doesn’t work correctly, but thanks @Nome_muito_criativo , but do you have any ideas on how to fix movement and warping?

> **[Raycast](https://arcade.makecode.com/83888-21150-48607-71964)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![Colethewolf](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/colethewolf/32/4165_2.png) [@Colethewolf](https://forum.makecode.com/u/Colethewolf)\
**Post date:** [September 2, 2021, 6:47pm UTC](https://forum.makecode.com/t/makecode-kart/5787/103 "2021-09-02T18:47:59Z")

</div>

am back!!!

---

<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 2, 2021, 9:35pm UTC](https://forum.makecode.com/t/makecode-kart/5787/104 "2021-09-02T21:35:12Z")

</div>

Welcome back, nice to see you again ^-^

---

<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:** [September 7, 2021, 8:15pm UTC](https://forum.makecode.com/t/makecode-kart/5787/105 "2021-09-07T20:15:47Z")

</div>

I’ve been working on this for a hours and I found some wiki articles, but I just can’t seem to get the rendering right. Am I missing something in the calculation of the angles?

---

<div class="post-metadata">

**Author:** ![Nome\_muito\_criativo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/nome_muito_criativo/32/5636_2.png) [@Nome\_muito\_criativo](https://forum.makecode.com/u/Nome_muito_criativo)\
**Post date:** [September 8, 2021, 4:21pm UTC](https://forum.makecode.com/t/makecode-kart/5787/106 "2021-09-08T16:21:50Z")

</div>

I don’t know, I haven’t actually looked very far into the code, but it seems correct.

---

<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:** [October 21, 2021, 3:27pm UTC](https://forum.makecode.com/t/makecode-kart/5787/107 "2021-10-21T15:27:11Z")

</div>

@Nome_muito_criativo are you finished with the mode 7 project or is it abandoned?

[Previous page](https://forum.makecode.com/t/makecode-kart/5787.md?page=4)

[Next page](https://forum.makecode.com/t/makecode-kart/5787.md?page=6)