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