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
Hi just figured i would let you know i also had a problem with this blog appearing blank also. Might be monkeys in the system.
Hey Soulwire , This site is awesome and you show a great programming stuff!! I can see a Pattern based oops in it..
nJoy Coding!!
To drewm ,
It is not a bug, it does what he programmed… When you click and drag quickly, you may not know where your mouse pointer is.. If the mouse pointer is not pointing the SWF window, obviously the “Tile will be dropped”
Thanks for this code, it’s very usefull
hi mate, amazing work you have donde here! seriously!.
hey, i was wondering how coul i put images inside each block, i really dunno how to do it, so any help would be great!!
anyway,, congrats, great work mate.
shif.
Thank you very much for your script!
I’ve made a adjustment for the grid to work irregulary. It’s probably not the best optimized but works perfect for me and could work for others.
Here is what I do:
1) I declare an empty grid at start:
this.grid = new ShuffleGrid(0, 0, ThumbGiftZone.WIDTH, ThumbGiftZone.HEIGHT, paddingGrid);
addChild(grid)
2) I add (in a loop or not) items to the grid with:
var maxCols:uint = Math.floor(stage.stageWidth / (ThumbGiftZone.WIDTH + padding));
grid.updateIndexArray(1, maxCols);
var thumb:ThumbGiftZone = new ThumbGiftZone();
grid.addItem(thumb);
You can see I added a new function inside ShuffleGrid.as, here it is:
public function updateIndexArray(numToAdd:int, maxCols:int):void { var tempNumItems:uint = numItems + numToAdd; var i:int; var j:int; var cols:int; var dif:int; var rows:int = Math.ceil(tempNumItems / maxCols); for (i = 0; i < rows; i++) { if(_index.length < rows) { _index.push(new Array()); } // Pour chaque row on détermine le nombre de col. Tous sauf la dernière auront le maxCols cols = (i < rows-1)?maxCols:tempNumItems - (i * maxCols); if(_index[i].length < cols) { dif = cols - _index[i].length; for (j = 0; j 1)?maxCols:cols; }Then I did chane shuffelItems:
private function shuffleItems() : void { var itemVO : ShuffleGridItemVO = _dictionary[_currentItem]; var cell : Point = getCell(_currentItem.x, _currentItem.y); var col : int = cell.x; var row : int = (getItemAtPosition(cell.y, cell.x) != null)?cell.y: itemVO.row; if(col == itemVO.col && row == itemVO.row) { return; } var hMove : int = col - itemVO.col; var vMove : int = (row == itemVO.row)?0:row - itemVO.row; var i : int; var item : ShuffleGridItemVO; var move : Array = []; if(hMove = itemVO.col + hMove; i--) { if(_index[itemVO.row][i]) { item = _index[itemVO.row][i]; item.col++; _index[item.row][item.col] = item; move.push(item); } } } else { for (i = itemVO.col + 1;i <= itemVO.col + hMove; i++) { if(_index[itemVO.row][i]) { item = _index[itemVO.row][i]; item.col--; _index[item.row][item.col] = item; move.push(item); } } } if(vMove = itemVO.row + vMove; i--) { if(_index[i][itemVO.col + hMove]) { item = _index[i][itemVO.col + hMove]; item.row++; if(item.col >= _index[item.row].length) { item.col = _index[item.row].length - 1; } _index[item.row][item.col] = item; move.push(item); } } } else { for (i = itemVO.row + 1;i <= itemVO.row + vMove; i++) { if(_index[i][itemVO.col + hMove]) { item = _index[i][itemVO.col + hMove]; item.row--; _index[item.row][item.col] = item; move.push(item); } } } for (i = 0;i col) { itemVO.col = col; } _index[row][itemVO.col] = itemVO; }AND getItemAtPosition
public function getItemAtPosition(row : int, col : int) : ShuffleGridItemVO { var item:ShuffleGridItemVO; if(_index[row] != null && _index[row].length > col) { item = _index[row][col]; }else { item = null; } return item; }The whole idea I use is that, even though there is a grid of 6 x 2 for example, if there no “thumb” at row 2, col 3 then I don’t allow the move and don’t update the v move during the shuffleItems()