Quick Pixel Art

How to make pixel art in a few minutes...

This method should take around 20-30 minutes to implement (depending on how many colors you use)

Here’s an example:

Step 1:

Use the website www.pixel-stitch.net to upload an image and create a pixel art template.
Select the following save options:

File Format → Excel
Pattern Style → Numbers with colored boxes

Step 2:

Open the .xlsx file you downloaded. You need to make all the numbers the same size, so you need to add leading 0’s to the numbers < 10

In Google Sheets tap format → Number → Custom Number Format → type “00” → Done
In Excel select all (command + a) → Right Click → Format Cells → Number → Custom → type: “00” → Done

Next, select all the contents (command + a), and copy them (command + c)
You can use the following c++ code I wrote or the website browserling to remove the whitespaces from the text you copied.

c++ code
#include <iostream>
#include <fstream>
#include <string>
using namespace std;

int main() {
    ofstream ofile;
    ifstream ifile;
    string str = "";
    string line;
    ifile.open("filename here");
    if (!ifile) {
        cout << "Error. Cannot open file." << endl;
    while (getline(ifile, line)) {
        str += line;
    ofile.open("filename here");
    if (!ofile) {
        cout << "Error. Cannot write to the file." << endl;
    string temp = "";
    for (auto x : str) {
        if (x != ' ' && x != '\n' && x != '\t') {
            temp += x;

    ofile << temp;
    return 0;

Copy the result from either the website or c++ program.

Step 3:

Create a new hopscotch project
Add the following code to set up your project:

When game starts {
    set position x: ___, y: ___ //whatever position you want the top-left corner to be at
    set (game)PixelSize: 4 //or however big you want your pixels to be
    set (game)Rows: ____ //find this number on pixel stitch (ex. 500x328, Rows = 328)
    set (game)String: ____ //copied text with whitespaces removed !!MAKE SURE YOU ADD A SPACE AT THE END OF THE STRING!!
    repeat times (game)Rows {
        create a clone

This code initializes most of the variables we need.
MAKE SURE YOU ADD A SPACE AT THE END OF THE STRING, otherwise it will be considered a number, which will not work.

Step 4

Add the following code:

When object is cloned {
    set (self)Start: (cloneIndex - 1) * (____ *2)) // ___ is the width of the pixel art ((ex. 500x328, ___ = 500)
    set (self)Slider: characters in (game)String between (self)Start and ((self)Start + 1)
    set position x: (self)XPosition, y: (self)YPosition - (cloneIndex*2)
    repeat times ____ {            // ___ is the width of the pixel art ((ex. 500x328, ___ = 500)
        draw a trail color: R: characters in (self)Color between 1 and 4, G: characters in (self)Color between 5 and 8, B: characters in (self)Color between 9 and 12, width: (game)PixelSize {
            set position x: (self)XPosition + 2, y: (self)YPosition
        increase (self)Start by 2
        set (self)Slider: characters in (game)String between (self)Start and ((self)Start + 1)


The Slider ‘walks’ along the text string, and sets its value to the 2 characters in the string that make up a color identification. For example, it would be 02, then 15, then 29 in the string “021529”

Step 5

This step takes the longest, but it’s necessary. You have to set the rgb values of each of the colors. For every color, do the following:

when (self)Slider matches ___ {       //___ should be the number matching the color (don't include the leading 0's)
    set (self)Color to "R123G123B123" //The numbers should be the correct values for R, G, and B

This is the code that will set the correct color for when you draw the trail.

You're done!

  • That helps!
  • I’m confused

0 voters

@omtl @The_Swimmers


This will help, thank you!


bows to the pixel art queen


haha thanks fear


Ledecky is a great swimmer (:
Also nice topic!


I saw this notification the other day but didn’t have a chance to read through it. This is absolutely simple, well-explained, and just amazing!!! Great tutorial :)))


Emmm, I still have a question-how do you download the numbers?

You can save them as a . Excel by clicking on the download settings and then open in Google sheets or numbers or excel depending on what you have.


But how do I get those string numbers?

The save doesn’t work.

1 Like

Save it in excel

I can’t save it

1 Like

Well, send me the photo, I will teach you how

The video didn’t get sent try this

1 Like

It’s in save options


I did that in the video, I did everything, it just reloads the image.