I'm working on a game that is an 8x8 grid of sprites. Each sprite is the same object, just a different animation frame. My goal is to get each row or column of the grid to "slide" on a single axis with a touch gesture according to which sprite is touched and which direction the swipe is. Once a sprite passes through the edge of the grid. It should wrap around to the opposite side, appearing as though each side is connected. When the touch event ends, the sprite should snap to the nearest grid square.
Right now I have the grid set up, the sprites spawn in the correct position with a random animation frame. The sprites slide when swiped and they snap to nearest grid square when the touch event ends. Any sprites left outside the grid (i.e. the "masking" sprites) are destroyed, so there aren't a numerous amount of invisible sprites lingering around.
I'm having a problem with the wrapping portion. I just haven't been able to figure out how to accomplish this. I'm using a 2D array to collect the animation frames of each sprite in the row/column at the time the grid is created and then access the array when a sprite is swiped to set the masking sprites to the proper animation frame. It works great for the first swipe. The masking sprites show up in the right places, everything moves according to the initial axis of the swipe. Everything snaps to the closest grid square. But when you swipe another sprite in the same row/column, the original order of the sprites show up again, instead of the new order. Something like this:
Original order - (masking sprites are regular font and main board sprites are bold)
123456781234567812345678
If the sprites are shifted over by one so the row that was shifted now looks like this -
23456781
But, the masking sprites of the next touch event look like this -
123456782345678112345678
They don't match up. Like I said, I've been trying to use a 2D array to create the masking sprites, so I know I need to shift the index order of the array after every touch event, but I haven't been able to figure out how to do that. Push/pop doesn't do the job and I haven't been able to figure out how to use delete/insert to access the array properly to achieve this.
The only thing I can think of is to use the 2D array to capture the frames at the time of creation, then use a 1D array to store the animation frames at the time of access, then use delete to remove the old values from the 2D array. Push/pop the values of the 1D array to match the amount of squares moved, then insert the contents of the 1D array into the corresponding row/column of the 2D array. All that just makes me feel like I'm making this way too difficult on myself though. lol
If anyone knows how to help me use an array to do this, or if anyone has any suggestions to use another method I'm willing. lol