Quicker display pixel art method tutorial

I believe I have created a method which is and extremely fast load time AND doesn’t take up as much file size. this is a tutorial on it


Screenshot 1 Explained

all this does is set a pixel size then clone the object as many times as the pixel size is set to, exactly what Fearless’s method does

Screenshot 2 Explained

Set position:

this is basic, just set the y position of the object to a value minus the clone’s clone index
you can easily variate this to:

set position x: 512 - (# of pixels width) y: 384 + (# of pixels height) - self clone index - 1 

which is a method for centering the pixel art invented by A_Metalhead or FearlessPhoenix, I forget who lol

variable PixelString

this holds all of the line’s data for pixels and will be explained in depth later on in the tutorial.

wait 0

just delays a frame because for some it doesn’t work without it, this holds true for the wait 0 at the bottom as well

repeat times (length((self)PixelString)/15)

this ensures it only repeats the times necessary, as each pixel string takes up 15 characters—unless your length-with-1-pixel-color is over 100 pixels long, which I’d doubt it is

draw a trail

this is where the actual pixel drawing happens. the code for the color parameter is:

H/R: character in (PixelString) at index 3 to 6; S/G character in (PixelString) at index 7 to 10; B/B character in (PixelString) at index 11 to 14

set position inside draw trail

the code for this is:

set position x: self x position + (OG object PixelSize) x (characters in ((self)PixelString) at index 0 to 2

what this does is reads the first number (number of pixels it does) and makes it so instead of doing 3 pixels in 3 frames, it does 3 pixels in 1 frame + block.

set ((self)PixelString) to characters in ((self)PixelString between 16 and ((length)self(PixelString))

this resets the code for the self PixelString variable so the reading works for the next pixel command. it also deletes the data from the pixel it just drew

The Pixel Code

Number 1:

the first number is how many pixels in a row it is

numbers 2-4:

these numbers define the value (hsb or rgb) of the trail being drawn. if you are doing a pixel art, I strongly suggest using global variables and using (pixelNumber) + Color1 like:

when game starts {
  set color1 to "300,40,75;
" 
  set color2 to "200,70,30;
" 
/* make sure to do the enter, if you don’t change the piece of code that resets the PixelString code and deletes the pixel that was drawn to ..
.((self)PixelString) between *15*... instead of 16 */
// NOTE: only needs to be used once in the code 
}

// insert cloning method here

when object is cloned {
// do the code you would do in screenshot 2 but change setting var PixelString to:
  set self(PixelString) to "20:" + color1 + "30" + color2 // etc.
}

the end

after the repeat loop ends, destroy the object like in Fearless’s method

important

always use your colors as sets of threes. if you do 2,52,100 instead of 002,052,100 it won’t work correctly


I would like credit if you use this method in a pixel art in the future:)

if you have any questions feel free to ask, I probably explained something very badly somewhere

this is a quick-thrown-together-too-lazy-to-do-some-things-I-mentioned example, the file size is 57 kilobytes, which, if I’m correct is smaller than the current speedy method:

https://c.gethopscotch.com/p/11535mxcx6

I’m planning on making a 100x100 pixel art with this method and will post it here and ask a leader to add to this post for an actual example

23 Likes

@/The_Somebodies

8 Likes

Well hello there, great tutorial!

6 Likes

Wait so I could type pixel art? Wow this is groundbreaking

You’re a genius thank you I may no longer procrastinate on pixel arts but note that that’s a may and I probably will still procrastinate

6 Likes

indeed

but I still cannot master the double cross stitch fleck pattern by John Stamos or his silky hair

6 Likes

Huh
So basically which one is quicker to code with :sweat_smile:

7 Likes

I don’t know but this would be quicker to generate


I just thought, if you add the global variables enough then it would lag the editor a lot

5 Likes

Pretty smart idea, great for someone who has the beta.

3 Likes

all these blocks are available to everyone

3 Likes

Oh, cool! Lol that proves how little I’ve been in the editor these days. XP

3 Likes

@aleader can one of you add this right below the part I quoted:

important

always use your colors as sets of threes. if you do 2,52,100 instead of 002,052,100 it won’t work correctly

2 Likes

Bookmarked for the future.

2 Likes

Me reading this while not processing it

4 Likes

Ahhhhh so much more complicated. Dunno

2 Likes

Nobody created this method before I used it!

2 Likes

(@TheCMStudios, tagging you since you’re the last seen lead)

3 Likes

also if you don’t want crazy lag I suggest using multiple set var self PixelString blocks, maybe a new one every 10 math operators

2 Likes

Sic tutorial/method

Btw, I invented the centering and all lol, 6 didn’t do anything

6 Likes

If I use this I’ll give credit, this is great because I’m terrible at pixel art, please don’t look at any of it. Also I notice some hopscotchers have infinite loads on their pixel arts (I won’t say who) so this is really helpful since yours loads at lightening speed. So thanks for this!

1 Like

nice tutorial

1 Like