Drag & Drop the images to shuffle them around…
A friend of mine, Dale Sattler over at No Ponies recently posted a grid sorting class. He said it was based on my old dynamic stacking menu; but that was pure modesty as his script is based on a 2D grid and much more sophisticated.
Anyway – it inspired me to create a grid sorting / shuffling algorithm of my own. It behaves differently to Dales but I think it works pretty well.
The basic logic of the algorithm works by determining how far a dragged item travels along the grid (rows and columns) and then shuffling the surrounding items in the opposite direction by these values, therefore creating space for the dragged item to slot into when released.
It currently only works for grids which are fully populated, but adding more flexibility for incomplete grids will only be a matter of adding a few conditions – functionality which I’ll add when I get a moment.
You can extend the ShuffleGridItem class to add the functionality you need. In the demo I’ve made a simple image class which grabs a photo from Flickr.
Creating a ShuffleGrid is very simple, and can be done like so:
var grid:ShuffleGrid = new ShuffleGrid(4,7,40,40,1);
for (var i : int = 0; i < grid.numCells; i++)
{
grid.addItem (new ShuffleGridItem());
}
addChild (grid);
The constructor takes the following arguments:
new ShuffleGrid(rows, cols, cellWidth, cellHeight, spacing);
Feel free to download the class and a simple demo and have a play around. I can imagine many uses for it, so hopefully it will come in handy.
Download: Shuffle Grid Class & Demo
Great work Justin!
I was just this week going to write something similar…except without the added touch of making room for the move.
I did find one tiny bug when I was testing it with non-square boxes…40 by 100, for example.
(in ShuffleGridDemo.as)
var grid : ShuffleGrid = new ShuffleGrid(6, 10, CustomGridClass.WIDTH, CustomGridClass.HEIGHT, 1);
The HEIGHT and WIDTH were reversed and a very understandable error…
since we’re used to something like: graphics.drawRect(0, 0, WIDTH, HEIGHT);
(Yet, row height really is y rather than x…etc.)
So a simple fix in var names in the CustomGridClass to keep the convention of columns following rows in arguments:
var grid : ShuffleGrid = new ShuffleGrid(6, 10, CustomGridClass.ROW_HEIGHT, CustomGridClass.COL_WIDTH, 2);
Can’t wait to play with this as yes, so many useful applications…will certainly share when I come up with something.
(Also, appreciate how you came up with a rather elegant way to do motion tracking in an earlier post.)
-g
@Ahad
Glad it helped you mate – and cheers for the shout out. Hope things are good with you.
@Loris
I think the key to using objects of different sizes would be in the getPosition and getCell methods. Instead of returning values from these methods based on a fixed size and spacing, you could loop over the objects in the preceding rows or columns and add up their individual width / height.
@Gpepos
Yeah – I had wondered about the ‘row’, ‘col’ thing. I didn’t really go over the class and tidy it up as I normally do, but it’s a valid point and I think you’re right.
I was planning an update when I get a moment, as I want to fix the incomplete grid issue, and also add some extra options for configuration (like whether the boxes sort automatically on drag or just when released etc), so I’ll clean up the API when I do that. Thanks for the pointer.
Great class Soulwire!
And yeah – a fix to incomplete grid would be cool!
/megl
Hey Megl. I agree that’s a useful feature and I’m on it! Maybe I’ll get a chance this weekend. I love your work by the way :)
This is cool. Thanks for sharing the code. Did you fix the irregular grid issue?
Working on it! I’ll let you know.
Thanks man :-)
Let me know when you fix the grid issue – I have an upcoming project that might benefit from your class.
Thanks again for sharing!!!
/megl
the functionality is pure elegance..
total class all the way (excuse the pun).
helps me to believe the web truly is a good place.
thankyou. :-)
quick question:
how to provide my own series of images to populate the grid..
i read here:
“The constructor takes the following arguments:
new ShuffleGrid(rows, cols, cellWidth, cellHeight, spacing);
”
is there an additional content array that needs to be made?
i hope to not seem impertinent with my questions.
thanks a lot man…it´s great. just a question. is very complicated to add photos, as you´ve done below?
thanks again, genius
Hi
Did you get my email about this?
I was looking for something like this a while ago… beautiful solutions ;)
Can you let me know when you’ll be updating the class (incomplete grid etc)?
Thanks a lot!
PS: Love your theme btw…custom build?