For a recent game we’re working on, I was tasked with coming up with a unique effect between sections. My mind started scrambling to what I could possibly come up wtih. I started thinking about what you could do by splitting the image up into grids and playing with the individual pieces. I’ve made transitions like this in the past so my mind naturally drifted towards ways of using this technique differently. I decided to try doing the same type of effects, but have the grid emanate from the center of the screen rather a simple top bottom, left right effect.

This task seemed simple at first, but the more I thought about it, the more complicated it seemed. The trick is being able to split your image up into a grid, and then affect the grid pieces in an order that would start from one corner, and work its way to the other corner. I immediately started sketching down grids and trying to figure out patterns. With the help of a fellow employee, we found a pattern that worked for all directions.

The solution revolves around using a grid where the pieces are numbered by row and column. Here’s a simple example:

[0,0][0,1][0,2]

[1,0][1,1][1,2]

[2,0][2,1][2,2]

Lets examine the above example. We know we want to move from one corner to the opposite corner. Examining the grid, there’s a simple pattern using addition and subtraction. Travelling along diagonals, the items in a line all add up or subtract to the same values. 0,0 = 0; 0,1 = 1; 1,0 =1; 0,2 = 2, 1,1 = 2 etc…

Using this as our base, the next trick is how to loop through. The following is how it would work for one corner:

for (sum = 0; sum >= lastRow + lastCol; ++sum)
{
     for (row = 0; row >= lastRow; ++row)
     {
          col = sum - row;
     }
}

After that, all you have to do is affect your bitmaps however you woud like. Below are a few examples I came up with; Just click the image to begin the transition.

The first is a simple alpha fade with a large grid. This allows you to see whats going on from the most basic standpoint:

This example adds rotation and a subtle color transform:

This version scales the x values inward and randomly moves their x position slightly. Again there is a subtle color transform:

This last version is similar to the last only it uses the Y axis as opposed to the X:

With this technique, I’m curious to see what other people can do with it!