How to: Create a Square Grid Quickly


#1

This is a small simple How To on how to create a grid of squares or whatever shape you’d like in a reasonably fast fashion.

Some things you need to know before you start:
• The width of your grid
• The height of your grid


First, create this function:

When (Total Clones < GridWidth x GridHeight){
    Create a clone
}

This will allow clones to be created crazy fast! For each time the screen updates, each clone creates a clone. So the first frame has 1 clone, then 2, then 4, then 8, and so on, allowing it to reach high numbers quickly.


Second. The harder part. You will want to do something like this:
image

When Object Is Cloned {
    Set Position(((Clone Index-1)%GridWidth)xSpacingX + XOffset, ((Clone Index-1)- (Clone Index%GridWidth)/GridWidth)xSpacingY + YOffset)
}

Now, that’s a lot for me to throw at you so I’ll break it down.

Set X Position:
((Clone Index-1)%GridWidth)xSpacingX + XOffset

Clone Index - 1: I’m not completely sure why, but when the first clone Index is equal to zero, the boxes will line up correctly. It’s best to do this.

%GridWidth: Do this to limit how wide the grid is. If you want the grid to be 10 units wide, make GridWidth equal to 10.

x SpacingX: Finally, multiply the value by the number you want to use for how spread out each unit is.

XOffset: This will determine how far they all are from the left side. 0 will mean that the left units are right against or in the left side of the project.

Set Y Position:
((Clone Index-1)- (Clone Index%GridWidth)/GridWidth)xSpacingY + YOffset

Clone Index - 1: Again, same as above. It will line them up correctly. (If you don’t do this, there will be no box in the bottom left corner. It is frustrating.)

- (Clone Index % GridWidth): What this does it that it subtracks from the clone Index to even it out, so then when you create the grid, the boxes don’t go diagonally, they are straight. You’ll see what I mean if you were to not add this.

/GridWidth: Divide the above by the GridWidth, so that it is a low number, then…

x SpacingY: Multiply it by the spacing you want for how far up it is.

+ YOffset: This determines how far up from the bottom. Pretty much the same as the X, but for the Y.

Note: There is no “GridHeight” value used in the Y Position. This is because it is already determined by the total clones. If the total clones is 15, and the width is 5, the height will be 3. 15 / 5 = 3.


Your final product should something like this:


Advantages of using this method:
• Loads way faster than creating each clone using a repeat function
• If you replace the XOffset with LastTouchX and the YOffset with LastTouchY and then put the Set Position function into a When self is pressed function, you can move the grid with your finger with minimal lag. If it’s not too big.
• This has a lot less coding than several “repeat 5 times” functions inside of each other.


I hope this is useful to at least somebody.


#2

This should be useful to everybody.

I use this method all the time because it’s quicker than anything else.


#3

This is the only useful topic in Newest. Better get used to seeing a lot of grid projects from someone named Classified. Classified as in I’m not ready to reveal my secret profile on h’s.

very useful


#4

I´ve never tried that method before, cool! Do you have an approximate loading time?


#5

@William04GamerA depends on the size, if the area is less than 500 it’s usually only a second or two. If you do like 1440 it takes several seconds but still wayyyy faster than using “repeat”.


#6

This is a very well-written, informative tutorial. We need more topics like this being created! Great job!


#7

That is a lot faster than usual! Thank you for sharing this method!