Creating Swirling Ball Animations -- Color Crash Step 3

Now that we have balls dropping into the game it is time to start adding in some game logic. Eventually the screen will be so full of balls that there isn't room for anymore, but I'll leave the game over logic for later, first I want to start combining balls. I want to make it so that swiping between two primary colored balls produces a secondary colored ball. When this happens I could just remove one of the balls and then change the other ball into the new color, but it would be nice if there was a animation that happens when the balls are combined. So I am going to need some animation images.

My daughter went to BYU and their school color is blue, she just married a guy who is going to the rival school the University of Utah whose color is red, so their wedding color was purple, and that is the first animation I'll do, turning a red and a blue into a purple.

In Gimp I will open up my purple.xcf file that we created in step 1 and zoom into 400%.

 

Now I am going to open the red.xcf and blue.xcf files as layers. In the menu File->Open as Layer and select both the red and blue files. I can see in the Layers - Brushes window that I have a bunch of transparent layers with nothing in them.

I don't need the empty layers. I'll select the empty layers and click on the little trash can to delete them. I now have a red layer a blue layer and a purple layer. Now I create a mask for the red layer by selecting the red layer and then in the menu Layer->Mask->Add Layer Mask... Select the White (full opacity) option and click on Add.

Now click on the new white mask layer next to the red layer to select it.

Now I want to make make a transparent spiral in the mask which will reveal some of the blue layer below. So in the Toolbox window I will select the pencil tool and set the brush size to be 5 and make sure the color is black.

I will now draw a spiral on the red ball which will reveal the blue ball below, and in the Layer - Brushes window you will see the spiral show up on the mask.

This will be the first image in my animation, so I will save it as purple001.xcf, then create a new directory called purple.atlas and and export it as purple001.png putting the png file in the atlas directory. 

OK, now I'll select the blue layer in the Layer - Brushes window and in the menu Layer->Mask->Add Layer Mask... select a White (full opacity) and Add. Then select the new mask layer.

Once again I will draw a spiral on the mask but last time I did a counter clockwise spiral and this time I will do a clockwise spiral to get a mixing effect. 

I want things to look like they are swirling so the red mask I am going to rotate counter clockwise. First I select the red mask in the Layers - Brushes window and then in the menu Select->All then click on the rotate tool in the Toolbox and click and drag counter clockwise a few degrees.

Then I'll click on the little anchorin the Layers - Brushes window to finish the rotation. And then save as purple002.xcf and export as purple002.png

I now select the red mask, rotate it a few degrees counter clockwise again then draw a new spiral in the mask.

Then I'll select the blue mask rotate it a few degrees clockwise and draw a new clockwise spiral using the pencil. We are now getting a nice mix of red blue and purple. I'll save this as purple003.xcf and export as purple003.png.

Then repeat the rotating the masks and drawing the spirals 2 more times each time saving then next image in the animation, purple004 and purple005.

Then copy the purple.png file from the images.atlas directory to the purple.atlas directory and rename it to purple006.png. I now have a 6 image animation that for combining a red and blue ball to create a purple ball.

I can now repeat this process with green blue and yellow, and orange red and yellow to create animations for green and orange. 

After creating the orange an green animations I can now go back to Xcode and select my images group and the menu File->Add Files to "Epic Color Crash" 

Now we are ready to do some more programming which will be the next step.