I’ve seen a lot of people making pixel art recently, and I thought I’d do a tutorial on the super fast method I use. @BumpSplatGaming.Co was the one that originally created this method, however I have adapted it and added a lot of my own modifications to make it smoother and faster. So if you use it, credit both of us I guess?
Anyway on to the actual tutorial.
Beginner Pixel Art Tutorial:
This section covers the absolute basics of fast pixel art, including how to set up the editor, how to create the pixels, how to set up the pixels and more.
Step 1: Adding An Object.
To code anything, we need an object first. For creating pixel art, blank text objects are preferred, because you don’t need to add access blocks like “Set Invisibility Percent 100” that take up a frame and make the pixel art take longer to load.
To add a blank text object, go to the object bar in the editor. Press the plus button and click “Text Object”. Instead of typing something, press the check button. This creates the blank text object. Press the “Add Code” button that shows up next to it, and now we’re ready for step 2.
Side note: If you’re creating a project that is only pixel art and won’t need anything else, I recommend deleting the default custom blocks (both rainbow and pink) as a way to declutter the editor.
Step 2: Creating The Clones.
In this method, each pixel is created from a number of clones. The number of clones used is equivalent to the width of the pixel. For convience’s sake, let’s use a variable called “Pixel Size”. That way, the variable can be changed once to rescale the whole pixel art, instead of having to manually go in and change the number in the repeat block every time. This can be a pain to do, especially in large pixel arts.
For this reason, it is best to create a pink custom rule. This will be added to all new text objects, and a good way to remember that is by titling it “Add to all”.
In this block, add a “When Games Starts”. Inside this, add a “Set Variable To” block. In the first parameter, enter the “Pixel Size” variable. This will be a device variable, and if you have not created it already, please do so now and enter it. In the second parameter, enter a number. This will be your pixel size, and can always be changed later. A good pixel size to start off with is usually 10, but for pixel arts with less lines, 15 is good too.
Next, add a “Repeat Times” block. In the parameter, enter the “Pixel Size” variable. Inside the loop, add a “Create a Clone” block.
This is the basic start code you’ll need to set up your pixels being drawn.
Here’s a screenshot of what your code should look like right now:
After your code looks at least somewhat like that, it’s time to move on to Step 3.
Step 3: Positioning The Lines
You’ll notice that in the code above, there are no “Set Position” blocks. This means that all of the clones get stacked on top of each other by default, and will create only a line and not the whole pixel. To have the clones create a smooth square pixel shape, “Set Position” blocks are needed. Since this will have to be done repeatedly in every text object for every line, using a rainbow custom block is best. Create a new rainbow Custom block called “Start”. This will have two Set Position blocks. In the first one, you may enter the X and Y coordinates you want the pixel art to start at. I have a method of making sure that it is perfectly centered. To see this, refer to “Centering” in the “Advanced Tutorial” section of this tutorial. If you would like to continue this tutorial, you may refer to that section later and change it if you wish.
Now, in the second blank “Set Position” block, enter [(Self X Position)] for X and [(Self Y Position)-((Self Clone Index)-1)] for Y.
Here’s a screenshot of what your code so far should look like. Focus only on the second “Set Position” block – the numbers in the first can be different.
Now we can move on to Step 4.
Step 4: Organizing The Editor
Organization is a very important skill in almost everything. Coding is no different. In Hopscotch, custom blocks help us do this. Just like functions in text-based programming help keep our code organized and clean, custom blocks do this in Hopscotch. We use custom blocks for storing repetitive code, or code we want to use again multiple times. This is why the “Start” function we created earlier is a custom block. There are many more functions like this that we’ll need, such as one to make the objects move left, right, up or down. Let’s make a “Down” function now. Every object you add will have at least one of these, so this is a very important function. Create a new custom block and call it “Down”. Inside this, place a “Set Position” block. In this, enter (Self X Position) for the X parameter and [(Self Y Position)-(Pixel Size)] for the Y parameter. The mentioned “Pixel Size” is the variable we created at the beginning of this tutorial. For the rest of this step, when you see “Pixel Size” mentioned inside of a block, it refers to that variable. If you would like, you may also create an “Up” function, just in case you want t o use it later. This usually never gets used though, so you may skip this step if you wish. Create a new custom block and call it “Up”. Inside this, place a “Set Position” block. In this, enter (Self X Position) for the X parameter and [(Self Y Position)+(Pixel Size)] for the Y parameter. Now, we’re going to create our “Left” function. This is going to be used many times later in the tutorial, so follow along here. Create a new custom block and call it “Left”. Inside this, place a “Set Position” block. In this, enter [(Self X Position)-(Pixel Size)] for the X parameter and [(Self Y Position)] for the Y parameter. We will also need a “Right” function, which is very important because it will be used in Step 5; Drawing A Line. Create a new custom block and call it “Left”. Inside this, place a “Set Position” block. In this, enter [(Self X Position)+(Pixel Size)] for the X parameter and [(Self Y Position)] for the Y parameter. You’ll notice that this is the exact same as the “Left” function we created with the exception of one sign.
Here’s a screenshot of what your code should look like so far. I chose to include the “Up” function but that’s not necessary. The other ones are, however, so make sure you have them.
Now, since all of our blocks are set up and we know they work correctly, we can delete them from our code. Simply press the delete button and delete that one block. Do NOT delete the whole custom block/function or else you will have to repeat this step. Here’s a screenshot of what your editor and toolbar should look like for clarification.
Now that that’s all set, we can move on to Step 5, and actually start drawing some pixels.
Step 5: Drawing A Line
Last step, we briefly discussed custom blocks and functions, and their importance. Drawing a pixel of one color gets very repetitive, so make a custom block for this. Let’s start by doing that and getting it out of the way. Create a new custom block and call it “[Pixel Color] Pixel”. For this example, I’ll use red. So my custom block would be called “Red Pixel”. To draw a line of pixel art, every object much be positioned. We’ve already done that step so now we can work on creating a pixel. A pixel is a square, so the width must be equal to the height, which is the “Pixel Size” variable we’ve created. The height of the pixel art is made up of a certain number of clones, this number being whatever you’ve decided you want to be the size of of pixel. So to create the square, the clones must draw a trail of that length. The way to do this is to add a “Draw a Trail Block”. Go ahead and add one of these inside the custom block we just created. You may add whatever color you wish in the color parameter, I just used red. Since we want it to be a perfect, smooth square, set the width in the width parameter to 1. Inside the “Draw A Trail” block, add the “Right” function we created last step.
When you play the project, you should have a fast-drawing square that starts where you positioned your start block.
Here’s a screenshot of what your code should look like:
The trail color does not have to be red though. The rest should match.
To add and see the code to create a pixel counter, reference “Pixel Counters” under the “Advanced Tutorial” section of this tutorial.
Other Beginner Tips
This pretty much concludes the beginners section of this tutorial. But there are some other very important tips and things to keep in mind, and without these, your pixel art may get messed up.
- For every new color pixel you want, create a custom block / function following the instructions in Step 5. An easy way is to just copy and paste.
- Create a new blank text object (See step one) for every new line
- Add a down block every time. The number of down blocks you have should be the line number minus (-) 1.
- Remember to add the “Add to All” pink custom block to every new object
- Remember to all code other than the “Add to All” inside a “When Object Is Cloned”. If you don’t do this, the code will not work.
And as always, don’t hesitate to tag me or ask for help.
This section goes over more advanced concepts, such as Centering and creating pixel counters. This also goes over ways to use blocks accessible through JSON editing and the subscription, so if you have either, look through this.
In order to make a perfectly centered pixel, you need for there to be an even number of pixels in each “quadrant” of the screen. This means an even number of pixels must be above and below the center line along the x axis and an even number of pixels on either side of the center line along the y axis. To do this, delete the initial code you had in your first “Set Position” block inside the “Start” custom block, add the following code to your X Position parameter: [((iPad width)/2)- (((Pixel Size)•(NUMBER OF LINES IN WIDTH OF PIXEL ART))/2)]. Anything you see capitalized completely, like “NUMBER OF PIXELS IN WIDTH OF PIXEL ART”, you insert the number based on the width of your template. Now, add the following code to your Y Position parameter: [((iPad height)/2)+(((Pixel Size)•(NUMBER OF LINES IN HEIGHT OF PIXEL ART))/2)]. Like with the X position, the capitalization indicates you enter a number. For this one, enter the number of pixels in the height of your pixel art.
Here’s a screenshot. They have been split up here so you can see them both at the same time. With the exception of the last "Set Position X(Self X Position Y(Self Y Position-((clone index)-(1)), yours must all be in one “Set Position” Block.
Now that we have the code we use to draw a pixel, we can create a tool to count the total number of pixels in our whole image. First things first, let’s create out Pixel Counter variable. Create a new Variable called “Pixel Number” under “Device Variables”. Don’t do anything with this for a little bit, hold on until the tutorial gets there.
Anyway, to do create a counter, we would normally increase the variable by one every time a pixel is drawn. However, if you’ll recall how we set this up, we have multiple clones drawing one line and one pixel. The number of clones drawing it is equivalent to the “Pixel Size” variable which is the size of each pixel. So, we want our count for one pixel to equal one. If we increased the value by just one, it would register as the number set as your “Pixel size” because each clone would be increasing it. So we want what currently equals “Pixel Size” to equal one. If this were a math equation, it would look something like “x=(pixel size)” and you would want to get that to all equal 1. If you divided both sides by “Pixel Size” you would get “x/(pixel size)=1”. This equals 1, and is what we want.
So what we’re doing here is diving what we would usually enter (x) by “Pixel Size”. Written out in code, it looks like this: “Increase Value [(Pixel Number)] by [(1)/(Pixel Size)]”.
Since we want this to happen every time, place this inside the “Draw A Trail” block inside all of the custom blocks you’ve used for creating a pixel.
In simpler words, when you multiply the amount of clones increasing the value (this is equal to “Pixel Size”) by 1/“Pixel Size”, you get (Pixel Size)•1/(Pixel Size). The “Pixel Size”'s cancel and you’re left with the variable increasing by one for every pixel drawn, just like we want it to.
Here’s a screenshot of what your counter code should look like. My only shows this in my sample “Red Pixel” block, but it should be added to them all. Do not just add them into the “Right” custom block though, as that will skew the count.
Secret Blocks; Destroy
Many of these blocks are accessible through the beta editor for subscribers, and all are accessible through JSON editing. One very useful one is Destroy. This destroys the object you want when you want so that it doesn’t count as an object anymore. This frees up space and can help make the project load faster. A signature trick I use is having a Destroy block at the end of every pixel art line so that it makes it faster and less laggy, and overall just is nicer.
This is one of my favorite tricks to use, and I recommend trying it if you can access the beta editor or edit JSON.
This wraps up the tutorial. As always, feel free to @ me if you need any help. If there’s a section you would like me to add or if you want me to do a walk-though of a simple pixel art using what I’ve taught you here, tell me and I’ll do it as soon as I can.
Hope this was helpful to y’all.