Discuss Scratch

Water_Ninja
Scratcher
12 posts

Snap to grid

So in my project, I have different sized grids. I also have squares that are 100x100 in size. I have been able to scale then, but they get placed so that they aren't lined up with the grid. Like 3x3 taking up the space of a 4x4 square. how to I make the square always line up with the background?
deck26
Scratcher
1000+ posts

Snap to grid

Sharing the project might make it clearer.

Snapping to a grid is normally just a case of using the grid cell size as part of the positioning system.

If tiles are ‘size’ x ‘size’

grid x position = size * (floor (( x-position + x-adjust) / size)) and similarly for y

(x-adjust is size/2.)

eg if the first grid square is centred at x=-200 and size=50 you want the range from -225 to -175.1 to snap to 200. x-adjust = 25.

so x-position - x-adjust gives -200 to –150.1, divide by size and use floor to get -4. Multiply by size to get -200.

Repeat with size=10 the range from -205 to -195.1 now snaps to -200. x-pos - x-adjust is -200 to -190.1. Divide by size and take floor to get -20 and multiply by size to get -200.

The -175.1 and -195.1 are just to indicate the change of snap value at -175 so anything just less than -175 would snap to -200 but 175 would snap to -150.

Last edited by deck26 (March 3, 2016 09:36:04)

gtoal
Scratcher
1000+ posts

Snap to grid

deck26 wrote:

Sharing the project might make it clearer.

Snapping to a grid is normally just a case of using the grid cell size as part of the positioning system.

If tiles are ‘size’ x ‘size’

grid x position = size * (floor (( x-position + x-adjust) / size)) and similarly for y

(x-adjust is size/2.)

eg if the first grid square is centred at x=-200 and size=50 you want the range from -225 to -175.1 to snap to 200. x-adjust = 25.

so x-position - x-adjust gives -200 to –150.1, divide by size and use floor to get -4. Multiply by size to get -200.

Repeat with size=10 the range from -205 to -195.1 now snaps to -200. x-pos - x-adjust is -200 to -190.1. Divide by size and take floor to get -20 and multiply by size to get -200.

The -175.1 and -195.1 are just to indicate the change of snap value at -175 so anything just less than -175 would snap to -200 but 175 would snap to -150.
or possibly it may be simpler to set the origin of the sprites in the bottom (or top) left corner and avoid all the extra center calculations. Just “mod” and “-”.
Water_Ninja
Scratcher
12 posts

Snap to grid

gtoal wrote:

deck26 wrote:

Sharing the project might make it clearer.

Snapping to a grid is normally just a case of using the grid cell size as part of the positioning system.

If tiles are ‘size’ x ‘size’

grid x position = size * (floor (( x-position + x-adjust) / size)) and similarly for y

(x-adjust is size/2.)

eg if the first grid square is centred at x=-200 and size=50 you want the range from -225 to -175.1 to snap to 200. x-adjust = 25.

so x-position - x-adjust gives -200 to –150.1, divide by size and use floor to get -4. Multiply by size to get -200.

Repeat with size=10 the range from -205 to -195.1 now snaps to -200. x-pos - x-adjust is -200 to -190.1. Divide by size and take floor to get -20 and multiply by size to get -200.

The -175.1 and -195.1 are just to indicate the change of snap value at -175 so anything just less than -175 would snap to -200 but 175 would snap to -150.
or possibly it may be simpler to set the origin of the sprites in the bottom (or top) left corner and avoid all the extra center calculations. Just “mod” and “-”.

Can you give me an example using a screenshot of blocks?
deck26
Scratcher
1000+ posts

Snap to grid

Water_Ninja wrote:

Can you give me an example using a screenshot of blocks?
Shouldn't be necessary. We've shown you how to calculate the x and y position for each cell so you go to that position and create a clone or stamp or whatever.

Last edited by deck26 (March 9, 2016 10:11:43)

Water_Ninja
Scratcher
12 posts

Snap to grid

deck26 wrote:

Water_Ninja wrote:

Can you give me an example using a screenshot of blocks?
Shouldn't be necessary. We've shown you how to calculate the x and y position for each cell so you go to that position and create a clone or stamp or whatever.
I wish, but I'm not even close to as smart as you guys, so I don't understand. If I did, I might use java
flutehamster
Scratcher
500+ posts

Snap to grid

Check here in the cat sprite. https://scratch.mit.edu/projects/100279074/

It divides by 10, (to round to nearest 10), then rounds. Then it multiplies by 10 again…. EX:

1. x=9, 9/10= 0.9
((x) / (10))
2. Round 0.9 = 1
(round ((x) / (10)))
3. 1x10 = 10 - so it snaps to a grid of 10 by 10 squares.
((round ((x) / (10))) * (10))
Really really simple when you think about it. Good luck!
Water_Ninja
Scratcher
12 posts

Snap to grid

thanks I got it now
flutehamster
Scratcher
500+ posts

Snap to grid

Water_Ninja wrote:

thanks I got it now
That's what the forums are for!

Powered by DjangoBB