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;
        exit(1);
    }
    
    while (getline(ifile, line)) {
        str += line;
    }
    
    ifile.close();
    
    ofile.open("filename here");
    
    if (!ofile) {
        cout << "Error. Cannot write to the file." << endl;
        exit(1);
    }
    
    string temp = "";
    for (auto x : str) {
        if (x != ' ' && x != '\n' && x != '\t') {
            temp += x;
        }
        

    }
    
    
    ofile << temp;
    ofile.close();
    
    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

22 Likes

This will help, thank you!

7 Likes

bows to the pixel art queen

6 Likes

haha thanks fear

4 Likes

Ledecky is a great swimmer (:
Also nice topic!

3 Likes

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 :)))

4 Likes

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

1 Like

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.

2 Likes

But how do I get those string numbers?

1 Like

The save doesn’t work.

1 Like

Save it in excel

1 Like

I can’t save it

1 Like

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

1 Like

The video didn’t get sent try this

1 Like

It’s in save options

4 Likes

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

2 Likes

How do I save, no documents were shown for me to download

4 Likes

once you upload your image, tap “create embroidery pattern” and then “save embroidery pattern.” That should download the file to your device.

Are you using an iPad?

4 Likes

No I’m using a phone

1 Like

Hmm interesting. What internet browser do you use?

2 Likes