Displaying The Game Background, Score And Level Text, And Playing Background Music
In this tutorial everything will happen in the Game class files, the Game class extends the Sparrow Stage (SPStage) and
Let’s open up the Game class implementation (game.m) and in the initWithWidth method after the if statement opens we are going to load an image with the line
The reason why I used the imageWIthContentsOfFile: method is because this is the only background image in the game and so I did not need to save the image information as a texture for use elsewhere.
Now we’ll draw the background image to the screen.
Notice that this places the image in the top left corner of the screen which is the (0,0) screen co-ordinate when using the Sparrow Framework, the point in the top left corner is the anchor point for images.
Next we are going to display the score and level text. The first thing we are going to do is declare class wide variables for the score and level in the game.h interface file (place this code inside the squiggly brackets)
We’re also going to declare two SPTextField variables in the interface so that we can update the score and level text throughout the class.
Now getting Back to the Game.m file we are going to initialize the score and level values, create our two text fields and initialize them to contain the score and level values.
Notice that I used textFieldWithText to initialize the text fields and immediately fill them with text. This string of text is immutable, and we will need to change the SPTextField’s text attribute each time we want to update the score and level.
Now we’ll change the text field font, and place them in the upper corners
scoreTextField.x = 160;
scoreTextField.y = 7;
scoreTextField.vAlign = SPVAlignTop;
scoreTextField.hAlign = SPHAlignRight;
scoreTextField.fontSize = 20;
levelTextField.fontName = @"Marker Felt";
levelTextField.x = 0;
levelTextField.y = 7;
levelTextField.vAlign = SPVAlignTop;
levelTextField.fontSize = 20;
The fontName attribute of the text field was used to change the font, and the x and y attributes to place the location of the text field.
I also changed the vertical alignment with vAlign attribute and the horizontal alignment with the hAlign attribute because by default the text receives centered alignment.
Notice that I used the addChild method to add the text fields to the screen.
Now we are going to get the background music playing. The first thing we are going to do is load in the music using the SPSound class.
The reason why we loaded it in like this, and stored it in a variable is because in order to have a sound looping with the sound player we will need to create a channel, we’ll do that with this code:
We’ll now set things up so that the channel loops, turn down the volume a little bit, and start the actual playing.
channel.loop = YES;
channel.volume = 0.25;
If you were to were not retain the SPSoundChannel is that it would stop playing shortly after this init method had finished execution.
Now running the on the iPhone or in the simulator your screen should look like this and music should play:
In the next part of the tutorial we are going to load in the balloon textures and send a balloon upward through 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.