Pixel Art

Create custom pixel art in Minecraft! @showdialog

Learn how to use an extension to draw beautiful 🎨 pixel art 🎨 and leave messages for your friends.

A MakeCode extension is a custom set of blocks that you can use to extend the functionality of the existing blocks in the Toolbox. Learn more about extensions here.

Add the Pixel Art extension @showdialog

In this tutorial, the Pixel Art category is already added for you. If you want to build your own pixel art projects when you’re done with this tutorial, select the Extensions category in the Toolbox, and click on the makecode-minecraft-pixel-art extension in the gallery.

Rename chat command

In the ||player:on chat command|| block on the workspace, click to rename this command from “run” to “draw”.

player.onChat("draw", function () {

})

Print a message

First let’s create a ✉️ message to go along with our pixel art. From the ||blocks:Blocks|| Toolbox drawer, drag a ||blocks:print|| block out to the workspace and drop it into the ||player:on chat command||.

player.onChat("draw", function () {
    blocks.print("HELLO", GRASS, pos(0, 0, 0), WEST)
})

Customize your message

In the ||blocks:print|| block, type in a short message replacing “HELLO”. For example, you could leave a message above a village or your house welcoming people in, like “Welcome!”

Then click on the grass block drop-down menu and select a block to use to print your message, like a 🍄 Red Mushroom Block 🍄!

Finally, print this message at a relative position that will be 20 blocks above your player, so type 20 in the middle coordinate value. Learn more about Positions here.

player.onChat("draw", function () {
    blocks.print("Welcome!", RED_MUSHROOM_BLOCK, pos(0, 20, 0), WEST)
})

Add Pixel Art

Now let’s decorate our message with some custom pixel art! From the ||pixelArt:Pixel Art|| category in the Toolbox, drag out a ||pixelArt:draw image|| block and drop into the ||player:on chat command|| block, just after the ||blocks:print|| block.

player.onChat("draw", function () {
    blocks.print("Welcome!", RED_MUSHROOM_BLOCK, pos(0, 20, 0), WEST)
    pixelArt.drawImage(img`
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        `, pos(0, 0, 0), WEST)
})

Draw an image

In the ||pixelArt:draw image|| block, click on the ▧ grey square ▧ to open the image editor. Use the 🎨 color palette and 🖌️ drawing tools to draw your own pixel art! Click the green Done button to close.

Position your art

Next, we want to set the position for our pixel art so it’s next to our message. In the ||pixelArt:draw image|| block, set the middle coordinate to 20 so our art is at the same height as our message. Then set the first coordinate (East/West axis) to 15, which means our pixel art will be 15 blocks East of our Player’s location. You may need to experiment with the values depending on the size of your pixel art.

player.onChat("draw", function () {
    blocks.print("Welcome!", RED_MUSHROOM_BLOCK, pos(0, 20, 0), WEST)
    pixelArt.drawImage(img`
        . . . . . . . . c c c . . . . . 
        . . . . . c c c c 3 c c . . . . 
        . . . . c c 3 c 3 c 3 c . . . . 
        . . . . c 3 3 c c b c c . . . . 
        . . . . c b 3 c b 3 b 3 c . . . 
        . . . . c c c c c c c 3 c . . . 
        . . . . c 3 3 b b c 3 3 c . . . 
        . . . . c c 3 3 3 c c c c . . . 
        . . . . . c c c c c 7 . . 6 . . 
        . . . . . . . . . . 7 6 6 6 . . 
        . . . . . . 5 . . 7 6 6 . . . . 
        . . . . . . 7 7 7 6 . . . . . . 
        . . . . . . . 7 6 . . . . . . . 
        . . . . . . . 6 . . . . . . . . 
        . . . . . . . 6 . . . . . . . . 
        . . . . . . . 6 . . . . . . . . 
        `, pos(15, 20, 0), WEST)
})

Add more art!

Continue adding more ||pixelArt:draw image|| blocks to place on the other side of your message, or below your message.

player.onChat("draw", function () {
    blocks.print("Welcome!", RED_MUSHROOM_BLOCK, pos(0, 20, 0), WEST)
    pixelArt.drawImage(img`
        . . . . . . . . c c c . . . . . 
        . . . . . c c c c 3 c c . . . . 
        . . . . c c 3 c 3 c 3 c . . . . 
        . . . . c 3 3 c c b c c . . . . 
        . . . . c b 3 c b 3 b 3 c . . . 
        . . . . c c c c c c c 3 c . . . 
        . . . . c 3 3 b b c 3 3 c . . . 
        . . . . c c 3 3 3 c c c c . . . 
        . . . . . c c c c c 7 . . 6 . . 
        . . . . . . . . . . 7 6 6 6 . . 
        . . . . . . 5 . . 7 6 6 . . . . 
        . . . . . . 7 7 7 6 . . . . . . 
        . . . . . . . 7 6 . . . . . . . 
        . . . . . . . 6 . . . . . . . . 
        . . . . . . . 6 . . . . . . . . 
        . . . . . . . 6 . . . . . . . . 
        `, pos(15, 20, 0), WEST)
        pixelArt.drawImage(img`
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . . . . . . . . . . . . 
        . . . . . b b d d b b . . . . . 
        . . . . b 1 1 3 3 1 1 b . . . . 
        . . . . b 1 3 5 5 3 1 b . . . . 
        . . . . b d 3 5 5 3 d b . . . . 
        . . . . c 1 1 d d 1 1 c . . . . 
        . . . . c d 1 d d 1 d c . . . . 
        . . . . . c c 7 6 c c . . . . . 
        . . . . . . 6 7 6 . . . . . . . 
        . . . . . . 6 6 8 8 8 6 . . . . 
        . . . . . . 6 8 7 7 7 6 . . . . 
        . . . . . . 8 7 7 7 6 . . . . . 
        . . . . . . 8 8 8 6 . . . . . . 
        `, pos(-40, 20, 0), WEST)
    pixelArt.drawImage(img`
        . . . . . . . . . . . . . . . . 
        . . d d d d d d . d d d d d d . 
        . d d 3 3 3 3 d d d 3 3 3 3 d d 
        . d 3 3 3 3 3 3 d 3 3 3 3 3 3 d 
        . d 3 3 3 3 3 3 3 3 1 1 1 3 3 d 
        . d 3 3 3 3 3 3 3 3 1 1 1 3 3 d 
        . d 3 3 3 3 3 a a a 1 1 1 3 3 d 
        . d 3 3 3 3 a a a a a 3 3 3 3 d 
        . d d 3 3 a a a a a a a 3 3 d d 
        . . d d 3 a a a a a a a 3 d d . 
        . . . d d a a a a a a a d d . . 
        . . . . d d a a a a a d d . . . 
        . . . . . d d a a a d d . . . . 
        . . . . . . d d a d d . . . . . 
        . . . . . . . d d d . . . . . . 
        . . . . . . . . . . . . . . . . 
        `, pos(-15, 2, 0), WEST)
})

Let’s draw!

Press the 🟩 green 🟩 play button to run your code. Move your player into position on the ground. Press “t” to open the chat window in Minecraft and type “draw” to start printing your message and drawing your art.

Note: do not move your player until the code has finished running, since the position of the blocks is relative to the player. You may need to experiment with the coordinate values to get the placement of your art just right.

⭐ Congratulations on making some beautiful pixel art in Minecraft! ⭐

pixelArt=github:microsoft/makecode-minecraft-pixel-art