Pixel Art String Method

yes, I made a topic about a somewhat string method before but I’ve improved it greatly so here’s a tutorial on it


Some notes

  • I strongly suggest doing this in 1 object unless you want to break the project
  • in theory the filesize of the finished product should be a lot smaller then if you were to use a non string method
  • even though it may be harder to spot mistakes, I believe this is a lot easier of a method
  • if you want to do this with over 100 colors and are confused, @ me and I will explain what you need to change

Setup

this is pretty easy to setup, so let’s dive right in
first, you want to get the clones setup
the code for this is

when game starts {
  set PixelSize to __ // Size of 1 pixel
  set self TotalClones to PixelSize * ___ // ___ is the number of lines
  ability Clone {
    if self(total clones) < originalObject(total clones) {
      create a clone of this object 
    }
// do this in a when object is cloned rule too

basically this initializes all the clones so they are ready to draw

then, in the when object cloned rule you want to set the position
it would look like this:

when object is cloned {
  ability Clone 
  set position x ___ y ___ – self clone index  // __ are for whatever values you want
}

now that that is set up, it’s on to the

Colors

this is probably the most tedious part, but it isn’t too hard. the basic code to set this up is:

when characters in self(PixelString) between 0 and 2 [3 for 100+ colors] matches 01 {
  set self(Color) to "R100G100B100" 
}

this sets a color to a string that will be interpreted in the interpreter
basically if the first 2 [or 3] characters of self(PixelString) are equal to 01 then it knows you want the first color and sets the color string to a color

you would do this for every color. sounds boring, I know, but it will pay off and setting up the colors are usually tedious

you will notice that if you add a lot of colors + clones it will start to lag. this is why it must be done in 1 object, else there will be a lot more lag (if I am correct)

I’ve tested this with 130 colors and 500 clones and the FPS drops to about 30, so it isn’t horrible. I haven’t tested it with 500 clones all doing 500 pixels though


The interpreter

setting up the interpreter is by far the hardest part, it may look complex but if you think about it it makes sense
the code for the interpreter is:

ability Interpreter {
  repeat times length(self(PixelString)) / 6 [7 for 100+ colors] {
    set self(ConsecutivePixels) to characters in self(PixelString) between 3 and 5 [4 and 6 for 100+ colors]
    // fetches the consecutive pixels
    draw 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 1 {
      set position x self(x position) + (game(PixelSize) * self(ConsecutivePixels) y self(y position)
      // moves forward 
    }
    set self(PixelString) to characters in self(PixelString) between 7 [8 for 100+ colors] and length(self(PixelString)) + 1 
    // pushes read pixel out of the string so it is not repeated
  }
}

I don’t understand any of this!

don’t worry, once I show you how to draw the pixels it will make more sense. basically this just gets all the data and interprets it so it outputs pixels


Drawing the pixels

you’ve finally reached the fun point—this is probably the easiest part.
the code to draw a pixel is:

set self(PixelString) to
"01*01;
02*02;"

what is this alien language?

let me explain. this first number is the color represented by a number, so if you did it based on a sandbox pixel art it would correspond with the number you see
the asterisk is saying how many times the pixel is to repeat
and the set of 2 numbers after that is how many times the pixel repeats. take the first line; the pixel would repeat only once. in the second line the pixel draws twice

as I’ve done before, I made the semicolon a breakup character as well as a new line for each pixel “chunk”


Adding a new line

you will be using the same object for every line, so this could get complicated if you do it inefficiently
the basic code for adding a new line is:

when object is cloned {
  check once if self(clone index) < game(PixelSize) + 1 and self(clone index) > 0 { 
    set self(PixelString) to ____ // a pixel string
  } 
// this is for line 1
}

you would make a new rule for each new line. I’m not sure how efficient this would be if doing 500 lines, but you should do the calculations instead of using math as math tacks on more file size than a normal number


I think that covers it, as always let me know if I messed up or you need help

  • Makes sense, good tutorial
  • I am confused

0 voters

@/The_Somebodies @/omtl
sorry for 2 tags in 2 days

17 Likes

Where is the link? Lol

FIRST

3 Likes

Awesome tutorial n method

Super helpful

5 Likes

I’ve already made this code… look at all my pixel arts…

2 Likes

I have a method I haven’t posted yet, I get around 50 FPS on an iPhone mini 12, and iPad 8th gen

3 Likes

That’s true, link it

3 Likes
3 Likes

:clap:t2: :clap:t2: :clap:t2:

4 Likes

Lol iPhone 12 mini*

2 Likes

it’s the same basic concept, but you use squares and a different string thingy—though if you want I can mention your method as well in the op (I’ve had this relative same method for a few months though)

no template for this…yet

7 Likes

Same I’ve been working on it for a while but it’s easily possible with actual trails just GoatGames edit some code that’s all but mine was designed too be used in games for buttons or health indicator or titles @Nobody nive thought out way though

3 Likes

Um…

How do you put something in a when game starts rule and a when object is cloned?

3 Likes

how long?

can I see?

?

I mean to put the code in a different when object is cloned rule

4 Likes
  1. Two and a half months first time using strings

  2. yes you can give me a second tho as I am leaving school in 10 min and need too wait too get picked up

  3. “Nice Concept Btw”

@Nobody

3 Likes

ok
so do you want a mention of your method in the op?
I mean others have done this using strings as well though so I’d have to mention them too

ah thanks autocorrect is pure evil

4 Likes

What does op mean? @Nobody

3 Likes

original post

4 Likes

meant to put this as TotalClones
@TheCMStudios can you change this?

5 Likes

Hey this kinda makes sense lol
Nice tutorial!

7 Likes

A lot of clicking back and forth to test this lol.

Nice method, though. It wasn’t too confusing.

3 Likes