Loading In The Balloon Textures And Creating Upward Animation
The first thing we are going to do is load in the balloon png files. We’ll add an array variable to the game interface file (Game.h) as we will want to access the balloons from other places within the class.
We’re also going to add in a Sparrow sprite, sprites are display object containers, and we will use this sprite to hold the balloon images so that we can easily stop and reset the game.
Now we’ll head back to the game implementation file and load the textures into the array.
[balloonTextures addObject:[SPTexture textureWithContentsOfFile:@"bluetutorial.png"]];
[balloonTextures addObject:[SPTexture textureWithContentsOfFile:@"greentutorial.png"]];
[balloonTextures addObject:[SPTexture textureWithContentsOfFile:@"indigotutorial.png"]];
[balloonTextures addObject:[SPTexture textureWithContentsOfFile:@"orangetutorial.png"]];
[balloonTextures addObject:[SPTexture textureWithContentsOfFile:@"redtutorial.png"]];
[balloonTextures addObject:[SPTexture textureWithContentsOfFile:@"violettutorial.png"]];
[balloonTextures addObject:[SPTexture textureWithContentsOfFile:@"yellowtutorial.png"]];
Now the reason why i loaded these balloons as SPTexture objects rather than SPImage objects is because I will be using these textures to create images throughout the class, and rather than loading them in each time I can use the texture objects to quickly create images (you’ll see this in a moment).
Now let’s create the sprite for our playing field and add that sprite to the stage.
This sprite will hold the balloons, and content used to reset the game so that we can easily clear the screen and stop animations.
Now we’re going to create a new method and call that addBalloon (make sure to add it to the interface too):
We’re going to use this method to create a balloon and send it upwards. Don’t forget to also declare this method in the Game.h file.
The first thing we are going to do is add in a balloon image of a random color, and place it at a random location below the screen. Place this code in the addBalloon method we just created.
image.x = (arc4random() % (int)(self.width-image.width));
image.y = self.height;
Notice here that i used imageWithTexture to use the texture object. Also you can see that I used the x and y variables of the object to place the image at the desired location, and also used image and height variables which are available in any display object.
In case you are not familiar with the arc4random() function it is a function used to generate random numbers (supposedly providing a greater degree of randomization than the rand() function), and does not need to be seeded.
Now we’re going to send the balloon upwards, and there are two ways to do that one way would be to modify the x and y coordinates of the balloon image directly, but we’ll take the easy way out and use the SPTween class.
time:(double)((arc4random() % 5) + 2)
Notice that I supplied the SPTween class with the image file, how long I wanted the animation to last for (in seconds) and a transition. There are many different transitions available (which can be found in the SPTransitions.h file included with the Sparrow Framework) the linear transition is simply an animation which is done with completely linear timing from start to finish.
Now we’re going to create the actual animation by changing a couple of properties.
[tween animateProperty:@"y" targetValue:-image.height];
All we had to do was change the x and y properties of the image, and the Sparrow Framework modifies these properties over the duration we specified as time when we created the Tween. If you’d like to see the properties available for an image you can check the SPDisplayObject.h file.
Finally we will add this tween to the “juggler”.
The juggler handles the timing for all animations, and is associated with the stage the image we are animating is on.
Now to add a balloon to the stage we are going to add a call to the drawBalloon method at the bottom of the if statement in the initWitWidth method.
You should now see a single balloon rise through the top of the screen when you run the code like in this screenshot:
If you have any trouble you can download a project to bring you up to this point here.
In the next part of this tutorial we are going to make it so that when this balloon is touched it immediately falls through the bottom of the screen.
Submit A Resource
Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?
You can submit the url here.
The resources we feel will appeal to our readers the most will be posted on the front page.