# How to use Aseprite to draw art for makecode (tutorial)

**URL:** https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782
**Category:** Help
**Tags:** make, art
**Created:** [July 5, 2026, 9:02pm UTC](https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782 "2026-07-05T21:02:45Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![ScriptScraper](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/scriptscraper/32/35438_2.png) [@ScriptScraper](https://forum.makecode.com/u/ScriptScraper)
#### Post date: [July 5, 2026, 9:02pm UTC](https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782/1 "2026-07-05T21:02:45Z")

</div>

The built-in art editor in makecode is decent and all, but it can be pretty clunky, and lacks a lot of features. You can’t have layers, a reference image, a lasso tool, and many other useful quality of life stuff you’d get in a dedicated pixel art software like Aseprite. So what if you could just use Aseprite(or any other pixel art software) instead? Well, there is a way to seamlessly do so. By following these steps, you can transfer exactly what you draw in Aseprite without manually re-drawing every pixel!

1. Transfer the color palette: Obviously, you need to make sure you have the exact same colors. Go to assets, click on color, and transfer those colors to whatever software you’re using. Preferably save that palette so you don’t have to repeat this step. If the colors aren’t identical, this won’t work.

 ![Screenshot 2026-07-04 221135](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/f/9/f9394ccfba3b3c0c07629a74e107c31cb5236949.png)

1. Draw whatever: Draw the stuff you need to draw, now much more easily. Keep makecode’s screen resolution in mind.

2. Export: Export the image once you’re done, and make sure that it’s the original size, no upscaling.

3. Convert to makecode: By using this makecode image converter, [https://kristianpedersen.github.io/Convert-Image-to-MakeCode-Arcade-Sprite/](https://kristianpedersen.github.io/Convert-Image-to-MakeCode-Arcade-Sprite/), you can transfer that export into makecode! Here’s a few things to note: If it’s a small sprite, be sure toggle “keep original size”, and if it’s bigger than the default resolution, be sure to manually set the custom resolution. If done correctly, it should look EXACTLY like the original!

4. Convert to blocks(optional): Do note that the image converter gives you javascript code, and I KNOW a lot of you hate javascript (except @WoofWoof). So you can simply create an empty project, paste it there, and then just copy the image. Then you can take it wherever you want.

And there you go! With this simple process, you no longer need to use the mid makecode art editor. Oh, and a few more things, the image converter makes empty space black, and I’m not sure how well this works with custom palettes.

---

<div class="post-metadata">

### Author: ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)
#### Post date: [July 5, 2026, 11:20pm UTC](https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782/2 "2026-07-05T23:20:09Z")

</div>

you can paste this into the makecode image editor:

```auto
img`
0 1 1 1 1 0
1 5 0 0 5 1
1 0 0 0 0 1
1 2 0 0 2 1
1 0 2 2 0 1
0 1 1 1 1 0
`

```

---

<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: [July 6, 2026, 5:22pm UTC](https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782/3 "2026-07-06T17:22:21Z")

</div>

I like to use @YuHayate’s website [https://yu-hayate.github.io/Makecode-Yu-Hayate-Dithering/](https://yu-hayate.github.io/Makecode-Yu-Hayate-Dithering/), its a lot easier as it gives you a copyable image directly. It also saves colour palettes which is nice and makes using custom palettes way easier compared to kristian’s version as if you use colours that are too similar, they may be read as 1 colour when translated to the default palette.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/7/1/71ec9353791dcfb7f88b25a0a9d34d46821efc19.png)

---

<div class="post-metadata">

### Author: ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)
#### Post date: [July 8, 2026, 10:57pm UTC](https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782/4 "2026-07-08T22:57:28Z")

</div>

Your using black hole 14 for robot survival 2 cool

---

<div class="post-metadata">

### Author: ![YuHayate](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/yuhayate/32/8275_2.png) [@YuHayate](https://forum.makecode.com/u/YuHayate)
#### Post date: [September 5, 2026, 2:27am UTC](https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782/5 "2026-09-05T02:27:07Z")

</div>

fun fact if you can manage to just copy all the text from makcode arcades interface  
such as

 ![Screenshot 2026-09-04 204437](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/4/8/481d08f78eb0be98fa2bd9171740b10faa9d41b4.png)  
and get a string such as this

```auto
1

#FFFFFF
2

#FF2121
3

#FF93C4
4

#FF8135
5

#FFF609
6

#249CA3
7

#78DC52
8

#003FAD
9

#87F2FF
10

#8E2EC4
11

#A4839F
12

#5C406C
13

#E5CDC4
14

#91463D
15

#000000

```

then right click on my website and press inspect to enter the console

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/e/c/ec9c3624f525c84c6072de265bf8c9782ac70bdf.png)  
you will find this helpful tool  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/d/3/d309e2fd83091e9acd2b550e7cc1318de8670e50.png)

then paste in the previously copied text

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/4/2/42cd921d3804a14efc984fa3f4362c9d9eee4e82.png)  
(it automaticaly filters out what is not a hex color)  
and there you go, all the colors you just had are now pasted in

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/5/3/536c7b362e5e55141ec1d27f708e9d1739f2b369.png)

---

<div class="post-metadata">

### Author: ![ScriptScraper](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/scriptscraper/32/35438_2.png) [@ScriptScraper](https://forum.makecode.com/u/ScriptScraper)
#### Post date: [September 5, 2026, 6:11am UTC](https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782/6 "2026-09-05T06:11:27Z")

</div>

Wow, the very creator of this website is here! You did a really good job, this is easily the best makecode image converter there is.

---

<div class="post-metadata">

### Author: ![YuHayate](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/yuhayate/32/8275_2.png) [@YuHayate](https://forum.makecode.com/u/YuHayate)
#### Post date: [September 17, 2026, 9:50pm UTC](https://forum.makecode.com/t/how-to-use-aseprite-to-draw-art-for-makecode-tutorial/44782/7 "2026-09-17T21:50:39Z")

</div>

thank you very much, i might come back to it and upgrade it even further once I’m done school (I’m in college for Networking and Cyber security)  
i was also planning on making a video converter,  
here is what i had done on that

> **[Bad apple](https://arcade.makecode.com/S10581-99827-86906-06510)**
>
> its Bad apple

video is 2fps played at 12fps
