Pixel Art Background Tutorial

Hey y’all! Here’s a little tutorial on how to make a background out of a repeating pixel art. Here’s what the code looks like:

When game starts;
Set position to X (0) Y (Height)
Repeat times ((Height + 2) / PIXH);
Repeat times (PIXH);
Increase (CID) by (1)
Create a clone of this object
End
Set (CID) to (0)
End
End

When Object is Cloned;
Set ((Self) POS) to (CID - 1)
Set position to X ((Original Object) x position) Y ((Original object) y position - ((Self) Clone index - 2))
Repeat times (Width / PIXW);
Check once if ((Self) POS = 1);
Black
Red
Black

Else;
Check once if ((Self) POS = 2);
Red
Black
Red


End
End

Here’s an explanation of that:
When the game starts the original object is going to go to the top left corner. Then it’s going to create Height clones. Therefore there would be a clone for every space. However, it’s going to increase a variable (CID) by 1, then create a clone. When CID reaches the height of the pixel art (in my example project its 10) it will set it back to 0. It will repeat this process screen height/the pixel art height times. When an object is cloned it will set its POS variable (position variable) to CID. Therefore, each clone will have a POS identity of a number between 1 and the pixel art height. Once the object does this, it will then set its x position to 0, and it’s y position to the original object’s position take away that clone’s clone index take away 2. The clones will then be spaced 1 pixel apart all the way from the top of the screen to the bottom of the screen. The clones will then start the pixel art. The first thing that you are going to put in to start the pixel art is a Check once if else statement. You should then put “Self POS = 1” in the Check once if else. Then you will put all the code for the first line of the pixel art inside that. In the “else” part of the statement, you will put the the next Check once if else. This one will check if the object’s POS = 2. You will then put the code for the second line of the pixel art in that check once if else statement. You will continue this process for the amount of times as the height of the pixel art, where each check once if else is a different line. This should give you a background. If it doesn’t, tag me and I’ll see what you did wrong.

What do those variables do?
“Self” POS - This variable controls what line of the pixel art each Clone is.
CID - Current ID. This variable controls what the current pixel art line is.
PIXH - Pixel Art Height. This is the height of the pixel art your repeating.
PIXW - Pixel Art Width. This is the width of the pixel art your repeating.

What are those blocks that say “Black” and “Red”?
Those are the pixels. Here’s the code for a pixel:
Custom Block: “(Whatever the color is)”;
Draw a trail color “(Whatever the pixel color is)”;
Set position to X ((Self) X position + 1) Y ((Self) Y position)
End
End

Helpful tips:

  • Add 1 to your actual pixel art width, so the pixel art’s don’t look jammed together.
  • Add 1 to your actual pixel art height, so the pixel art’s don’t look jammed together.
  • Pick a simple pixel art, so the check once if else’s don’t get overwhelming.

Link to an example project:



Screenshots of code:

Sorry if this didn’t make sense!

26 Likes

First post + like
Nice tutor

4 Likes

Did that make sense y’all?

3 Likes

makes sense

for easier code readability, put the code in ``` (here) ```

3 Likes

K.

Ok. Sounds good.

3 Likes

Great tutorial!

3 Likes

Thanks! Glad you liked it!

2 Likes

Wow…just wow…

3 Likes

Wow this is overwhelming to look at all at once but I think I understand what you’re getting at. Great tutorial!

3 Likes

I’m hoping those are good “Wow”’s :joy:

@Fenith Glad you liked it!

4 Likes

nice tutorial!

4 Likes

Yes they are. It is simply amazing and a bit complicated.

1 Like

Nice! That’s pretty intresting

1 Like

Leaders Can you edit this into the original post under “Examples:”? Thanks!

3 Likes

@Stylishpoopemoji33 I have no idea how you came up with this idea!
But I’m a bit confused, but if I ever want to try it, I’ll just copy the code from your project.

2 Likes

It just seemed fun.
Lemme know if I can help at all!

2 Likes

Thanks @PumpkinGirl!

2 Likes

Nice tutorial! I’m kinda bad at pixel art, but this will help later on.

1 Like

@Stylishpoopemoji33 I tried to do this, but I couldn’t seem to get it to work, my code looks like this. Help?

1 Like

I can’t view that project. Screenshot?

1 Like