The Beginner’s Guide to Pixel Art


Welcome, everyone. This is for @TrueHarryPotterLover’s academy, Wolfy’s School of Coding and Fun!

There are 3 different types of pixel art you can do.

To do ANY one of them, follow the stuff down below!

Part 1: Setting everything up!

Let’s start! Make a blank text block , and follow along

This Part is Optional, but I do recommend doing it :

You can’t start Pixel Art if you don’t have any presets loaded. I would recommend you delete the Purple Custom Blocks and Rainbow Custom Blocks .

To do this, you need to long press on any one of the 6 default Purple Custom Blocks , and then click the red delete button that comes up.

You should do the same for the Rainbow Custom Blocks . To do this, put up a When Game Starts Block, and delete all Rainbow Custom Blocks and then remove the When Game Starts Block

Your screen should look like this :

This part is mandatory, and controls the size of the pixel art, as well as the amount of clones created :

Now go back to the Purple Custom Blocks , and add a Purple Custom Block , and name it Add to all . Inside the Add to all block, and follow the steps below.

Add a When Game Starts Block. Inside that block, add a ( Set Variable ) block, and make a new variable, and call it Pixel Size , and Set ( Pixel Size ) to 10 . 10 is usually the best, but you can change this number at your will.
Below the Set Variable Block, add a repeat block , and repeat times Pixel Size , create a clone .

Everything should look like this :

If this is what you had, then you are doing stellar work!

This is the second part you need to do :

Add a When Object is Cloned purple block.

You need to make 4 Rainbow Custom Blocks .

Name one of them, Start , Down , Left , and last but not least, Right . NOTE: Right is optional!

You can probably guess by the name what these blocks are going to do, but if not, then these blocks control Position .

Now follow these steps : (a screenshot will be at the end of this part to show what your code should look like.)

Inside the start block, follow along:

Add a set position block, and set the starting x and y position you want. It doesn’t matter, because this is up to you!

Below the first set position block, add another set position block, and inside that, set the first x parameter to (self) X Position , and for the Y position, add a subtract math value, and in the second parameter, add another Subtract math value. There should be three parameters now. In the first one, add a Self Y Position block, and then in the second one, add a Self Clone Index block, and in the third one, type 1 .

In the Down block, add a set position block, and in the x parameter , set it Self X Position and in the Y parameter add a subtract Math Value, and in the first parameter, add Self Y Position , and in the second, add the variable, Pixel Size

Down is now done!

In the Left block, add a set position block, and in the x parameter , set it Self X Position - Pixel Size and in the Y parameter add Self Y Position

Left is now done!

Remember, Right is optional if you are taking the harder Perfect Square Pixel Art Method

In the Right block, add a set position block, and in the x parameter , set it Self X Position + Pixel Size and in the Y parameter add Self Y Position

Right is now done!

Here is what your code should look like so far:

You can remove the rainbow blocks for now, except for Start

Part 2: Choosing your pixel art!

Now, this is the part that comes to handy.

Before you do anything, make sure to have this step done:

To make ANY pixel art, add the Add to All function at the top, and add a When Object is Cloned Block at below the Add to All function. In the When Object is Cloned block, add the Start function we talked about earlier.

Dot pixel art:

Now you need to make pixel’s.

Make a Rainbow Custom Block and name it the color it will be. Now you can continue.

Inside the Rainbow Custom Block, you need to add a Draw a Trail, (MAKE SURE TO SET THE WIDTH TO PIXEL SIZE)
inside of the When Object is Cloned Block, and then, inside of the Draw a Trail Block, add a Move Forward Block, and in the parameter, put Pixel Size. You are done!

Pro: pretty fast
Con: Pretty messy if you are using a larger pixel size.

Code should look like this:

Rounded Square Pixel Art:
If you haven’t done the mandatory step, placed before the section, Dot Pixel Art, do that now please, but now, we have to do this to get Square Pixel Art-

Make a Rainbow Custom Block and name it the color it will be. After that, you need to bring a Draw a Trail block inside of it, and set the width to Pixel Size.

Now bring a Repeat block inside of the Draw a Trail Block, and set the parameter to 4, and inside the Repeat Block, bring a Move Forward Block, and set the parameter to Pixel Size*, and then below the Move Forward Block, bring a Turn block, and in the parameter, set it to 90.

Now below the **Draw a Trail Block, bring a Move Forward block, and in the parameter, put a multiply math value, and in the first parameter, put Pixel Size, and in the second, put 2.

Above the Draw a Trail block, bring *Set Speed Block, and set the speed to a high number.

Your code should look like this:

Pro: it looks sick, and isn’t quite slow.
Con: It’s pretty sloppy.

Perfect Square Pixel Art:

There are two ways to make the ”Perfect Square Pixel Art.”

You can choose which.

#1: Simpler way, but repetitive!

To do the simpler way, you need to make a Rainbow Custom Block and name it the color it will be. After that, you need to bring a Draw a Trail block inside of it, and set the width to 1.

Now, inside the Draw a Trail Block, add a Move Forward Block, and in the parameter, put in Pixel Size!

Your code should look like this:

Pros: fast and sleek
Cons: Repetitive

#2: Harder, but more efficient way!

Make a Rainbow Custom Block and name it the color it will be. After that, you need to bring a Draw a Trail block inside of it, and set the width to 1.

Inside the Draw a Trail Block, add the Right Function that we breached over earlier. If you haven’t made the right function, then this is how:

In the Right block, add a set position block, and in the x parameter , set it Self X Position + Pixel Size and in the Y parameter add Self Y Position

That’s all, and its done!

Code should look like this:

Pros: Fast, and sleek
Cons Too much Rainbow Blocks

24 Likes

:recycle: “Recycled” topic upon owner’s request: we’re off to a new start!

(moved all old posts)

Sure! I updated the OP right now. I see you’ve already talked to other leaders about “recycling” this topic, so I’ll do that as well.

2 Likes

Well, since it’s recycled

Awesome topic! Really helped me into pixel art, I’ll try if I can make something soon!

1 Like

@omtl, if you haven’t seen the new op, then see it! It’s pretty cool, and it isn’t really a copy anymore, and I’d love for anyone to use this!

9 Likes

I disagree with this as for every method you need a rainbow block for a color

very nice beginner’s guide though:)

3 Likes

The fact is, if you are using a bunch of colors, it is annoying to swipe through all of the rblocks. The rblock itself is ok, but all together is annoying

1 Like

I forgot to mention,

For every line, create a blank text block.
Add down and left to position the text block.

That’s all!

Ok @FearlessPhoenix, i know this is out of the blue, but see the new pixel art op i made lol

1 Like

Yeah i saw :)) nice guide,

3 Likes

Thank you, i just forgot to explain why you need down and left, and why right is useful in some cases, but i just explained down and left a few hours ago, but they can figure out right for themselves, since thats the way i found out. I also found out that instead of the set position block in right, you can change it to move forward pixel size, which was interesting, since i have never seen that work!

1 Like

You can, but using set pos is much faster

2 Likes

Yeah. Its just the fact that it works as well as the thingy. Not the best tho lol