This will be a simple tutorial showing you how to put a UITextField in a UIAlertView. This is simple and just a couple lines if code. You will learn CGAffineTransform and coding UITextField programmatically.

Heres a screenshots of what we should get.

So lets go ahead and get started…

1. Create A New View Based Application
You can name it whatever you want, I am gonna name it TextFieldInAlert.

2. Implementing The Code
Jump in the viewcontroller.m or if you called it TextFieldInAlert then TextFieldInAlert.m Now find the -(void)viewDidLoad method. Uncomment it and put this code in there.

- (void)viewDidLoad {

[super viewDidLoad];

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@”Enter Name Here” message:@”this gets covered!”

delegate:self cancelButtonTitle:@”Dismiss” otherButtonTitles:@”OK!”, nil];

UITextField *myTextField = [[UITextField alloc] initWithFrame:CGRectMake(12, 45, 260, 25)];

[myTextField setBackgroundColor:[UIColor whiteColor]];

[alert addSubview:myTextField];

[alert show];

[alert release];

[myTextField release];

}

So we are basically calling a UIAlertView and then we are adding the UITextField programmatically. You might have noticed in the message part of the UIAlertView we put “this gets covered!”, if we didn’t put that sentence then the alerts buttons would go up more and the UITextField will be messed. You can try taking that line out and see what happens. Now Build and Run the app. Now you got the UITextField to be inside the UIAlertView. Now try tapping the UITextField. Uh oh, why is the Keyboard covering the UIAlertView? Well there is just a simple fix to this. We just add two more lines of code and it will fix that. Add this to your code

CGAffineTransform myTransform = CGAffineTransformMakeTranslation(0, 60);

[alert setTransform:myTransform];

So now your full code should be looking like this.

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@”Enter Name Here” message:@”this gets covered!” delegate:self cancelButtonTitle:@”Dismiss” otherButtonTitles:@”OK!”, nil];

UITextField *myTextField = [[UITextField alloc] initWithFrame:CGRectMake(12, 45, 260, 25)];

CGAffineTransform myTransform = CGAffineTransformMakeTranslation(0, 60);

[alert setTransform:myTransform];

[myTextField setBackgroundColor:[UIColor whiteColor]];

[alert addSubview:myTextField];

[alert show];

[alert release];

[myTextField release];

Now if you Build and Run, you will notice the UITextField is a little higher and when you tap the UITextField the Keyboard doesn’t cover it up anymore. That is what the CGAffineTransform was for. So that is basically it! There is a video tutorial also available and if you like video tutorial more then written ones you can check it out out by clicking HERE. You can download the source code below. Happy iCoding!

iPhone Tutorial – UITextField In A UIAlertView

As you may have seen, there are quite a few services out there offering free leaderboards.  These are great and all, but sometimes you want to have complete control over your data.  I have put together a complete tutorial detailing step by step how you can create your own online leaderboard for use in your iPhone games. For those of you who don’t know, a leaderboard is essentially a high scores list. This tutorial will also give you a very simple introduction to interfacing with web services.

The first part of this tutorial will discuss how to build the server.  We will be doing this using PHP and MYSQL.  I will also assume you have some working knowledge of PHP and MYSQL (if not, use the Google machine to get up to speed).

Since this tutorial is so long, I have decided to split it up into pages. You will notice the page number at the bottom. Please use them to navigate between parts of this post. I feel that I have to make this explicit as I will undoubtably get some dude in the comments saying “Where is the rest of the tutorial”.

Skill level: Advanced

Creating The Database

When creating a leaderboard, you will need some way of storing the data.  We will be using MYSQL for our storage.  You can also be lame and simply use flat files.  This would add quite a bit of code in the long run as you would have to write all of the sorting and pagination functionality yourself. Don’t do it.

One thing to note about my php server files. I know they could be cleaned up a little and optimized (you could create a config.php that contains all the db interface code), but the goal of this tutorial is not to show you how to code killer PHP. It’s to show you how to create code that you can connect your iPhone apps to.

I like to create one file that does a complete flash of the database.  That way, when I’m testing or switch from staging to production, it is a very simple process.  So, with that being said, here is my code for create_db.php.

<?php
        // create_db.php
	/** MySQL database name */
	define('DB_NAME', '');
	/** MySQL database username */
	define('DB_USER', '');
	/** MySQL database password */
	define('DB_PASSWORD', '');
	/** MySQL hostname */
	define('DB_HOST', $_ENV{DATABASE_SERVER});
 
	$table = "highscores";
 
	// Initialization
	$conn = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD);
	mysql_select_db(DB_NAME, $conn);
 
	// Error checking
	if(!$conn) {
		die('Could not connect ' . mysql_error());
	}
 
	// Drop existing table if exists
	mysql_query("DROP TABLE $table", $conn);
 
	$retval = mysql_query("CREATE TABLE $table(
		id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
		udid VARCHAR(45),
		name VARCHAR(25),
		score FLOAT(10,2),
		date TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
	)",$conn);
 
	if($retval) {
		echo "Database created...";
	} else {
		echo "Could not create database " . mysql_error();
	}
 
	mysql_close($conn);
?>

I’m not going to go into too much detail about this code, however I will give a high level description of what’s going on. One thing to note about this code is it assumes you already have the database created.

First, we are defining variables that contain our database information. Make sure you replace my empty strings with your database info. After we connect to the database, we drop the table if it already exists. This is useful if you want to wipe out your test data. Finally, we create the scores table. Navigate to this file in your browser to run it and create the scores table. Pretty easy right?

You will want to make sure to remove this file from your server after running it to avoid people resetting your database.

Now that our database table has been created, it’s time to implement the web service code to publish new scores to our leaderboard.

One thing I have noticed about many of the games in the app store is they lack animation. Of course, the huge companies like Sega and PopCap have some pretty amazing animation, but what about us indie iPhone game developers?

Well, Apple has made it quite simple to do animations. I really feel this method is often overlooked. I will show you in just a few lines of code, how to completely animate your game images. I will walk you through creating a simple application that uses animation. If you don’t care about creating the app and just want the animation code, you can skip to this step.  We will be making an animation of Ryu throwing some punches.

1. Create A View Based Application

I’m not going to explain this one…

2. Add These Images To Your Resources Folder

Downloadryu.zip and unzip it. Then drag the unzipped files into your Resources folder. Note: Sprite sheet downloaded from http://panelmonkey.org/. This file contains 12 images of Ryu from Street Fighter punching. It also has the background to Blanca’s stage just for fun.

3. Create The Background

You don’t have to do this step, it’s just to make it pretty.

Double click on whateveryoucalledyourapplicationViewController.xib to open it in Interface Builder. Click the arrow button on the view to rotate it. If you don’t what I am talking about, check out this post.

Drag a UIImageView on to the screen and stretch it to fill the entire iPhone screen. In the Attributes inspector select sfst-blanka.jpg. Make sure mode is set to center as this image has very low resolution. It should look something like this (I have added a black background color).

4. Creating The Animation

Open up yourApplicationViewController.m and add the following code to the viewDidLoad method.

- (void)viewDidLoad {
    [super viewDidLoad];
	NSArray * imageArray  = [[NSArray alloc] initWithObjects:
							[UIImage imageNamed:@"1.png"],
							[UIImage imageNamed:@"2.png"],
							[UIImage imageNamed:@"3.png"],
							[UIImage imageNamed:@"4.png"],
							[UIImage imageNamed:@"5.png"],
							[UIImage imageNamed:@"6.png"],
							[UIImage imageNamed:@"7.png"],
							[UIImage imageNamed:@"8.png"],
							[UIImage imageNamed:@"9.png"],
							[UIImage imageNamed:@"10.png"],
							[UIImage imageNamed:@"11.png"],
							[UIImage imageNamed:@"12.png"],
							nil];
	UIImageView * ryuJump = [[UIImageView alloc] initWithFrame:
		CGRectMake(100, 125, 150, 130)];
	ryuJump.animationImages = imageArray;
	ryuJump.animationDuration = 1.1;
	ryuJump.contentMode = UIViewContentModeBottomLeft;
	[self.view addSubview:ryuJump];
	[ryuJump startAnimating];
}

For all of you “1337″ coders that are going to post in the comments telling me “Why don’t you use a for loop to load the images” (very nerdy voice): I am doing it like this, so it is obvious what is going on.  I want to show that you must populate the array with images.

So here is what is going on in this code:

We first create an array of UIImages.  Next, we allocate our UIImageView. The next part is where the magic happens… Apple has given you a property of UIImageView that is an array of images.  The UIImageView class has a built in functionality to cycle through images at a given interval (hence animating them).

The next variable we see is the animation duration.  This is the number of seconds it takes to cycle through all of the images.  The default value for this is the number of images multiplied by 1/30.  This will give you a 30 fps frame rate.  Since we have 12 images and not 30, this duration would make our Ryu look like he was on crack.

In our case, the default would be 12 * (1/30) or .4 . We are going to slow this down significantly to 1.1.  Go ahead and play with this number when creating your animation.

The next variable is the contentMode.  The content mode determines how the image will fit inside the UIImageView frame.  Since our animation images vary in size, we just make the frame as large as the largest image and set the contentMode to UIViewContentModeBottomLeft.  What this means is, draw the image withough scaling and place it in the bottom left of the UIImageView.  Read up on contentMode to figure out what will be right for your applicaiton.

Finally, we just add the UIImageView to our main view and call the startAnimating method on it.  This will start the animation of these images.  There are also some other helpful methods you might use when doing animation.  They include stopAnimating and isAnimating.

5. Make Sure The Device Starts In Landscape Mode

In this example, we assumed that the device was in landscape mode.  Again, read this post to see how to do this.  It involves adding Initial interface orientation to the info.plist file and adding this code to your viewController.m file.

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft);
}

That concludes our simple animation tutorial. Post a question or ask me on Twitter if you need help.  You can download the source for this tutorial here. Happy iCoding!

Ok, I will be finishing up this series by showing you guys how to add basic audio to your game.  Since this is a beginner tutorial, I won’t go into complex audio using OpenAL or Audio Queues.  Today, we will just be playing short sounds (less than 30 seconds).  This will be the easiest way to do audio if you don’t require any background music (I guess you could do a nasty hack and loop a 30 sec clip but that would be shameful ).  The downfall of doing audio this way is only one audio file can be playing at a time.  Ok, let’s get started… Make sure you are starting with the base code from the previous tutorial (either use yours or download a fresh copy).  We will be using 2 sounds today, 1 for when the ball is hit and another for when someone scores a point.

Here are the sound files you will need to download for this tutorial:

• clapping-crowd-studio-01
• tennis-volley-01

Notice that all of the audio files have a .caf extension.  This is the audio type all of your sound files must be in to be played by the iPhone.  Luckily Apple has provided us a utility for converting audio to this format. You can read up on it here. It’s pretty straight forward, just open up a Terminal and type

/usr/bin/afconvert -f caff -d LEI16 {INPUT} {OUTPUT}

Where {INPUT} is the path to your input audio file and {OUTPUT} is the file you want it to save it to with a .caf extension.

Adding the Audio Files To You Project

Start by downloading these files.  Then drag them to your Resources Folder inside of your project.  You may also want to add a subfolder called Audio to keep organized. Make sure you check the box to copy the files into your project’s directory.

Add The AudioToolbox.framework to Your Project

Since we need to call functions within this framework, we will need to add it to our project. The best way I have found to locate a framework on my mac is to search for it. Right Click on the Frameworks folder in your project and select Add -> Existing Frameworks.  In the search box type AudioToolbox.framework and select the framework among the search results. (Make sure you have Computer selected to search your entire computer)

When you find it, click Add. We are now ready to start coding…

Add the Header Declarations

Open up iTennisViewController.h and add the following code.

First we see an import for the AudioServices.h. This is needed to call the functions required for us to play audio.  Next, we declare 2 SystemSoundID’s.  These are basically just Integers (could actually use an int instead but you’d get a warning).  Next, open up iTennishViewController.m and add the following code to synthesize these variables.

Now let’s initialize our sounds objects.  Go to the viewDidLoad method and add the following code.

Pretty straight forward.  The first line gets the path of the audio file.  The next line converts the path to a CFURLRef.  Finally, we load that audio file and associate it with the given sound ID. Notice we pass &clappingFileID.  This is a pass by reference and allows the AudioServicesCreateSystemSoundID method to modify this variable.  We do the same thing to load the volley sound.  Now, let’s play the sounds.

Playing The Sounds

It’s actually quite simple to play the sounds we have loaded.  Simply call the AudioServicesPlaySystemSound method and pass it the soundID of the file you want to play.  So to play the clapping sound when someone scores, add this code to your reset method.

Notice, we are passing the clappingFileID to indicate we want to play the clapping sound.  Now, add the following code to gameLoop to play the racquet sound when someone hits the ball.

Pretty straight forward Right? Now click Build and Go and check out the game audio.  That concludes this tutorial.  If you have any questions or comments, feel free to leave them in the comments section of this post or write them to me on Twitter.  You can also download the sample code here

Happy iCoding!

]]> http://icodeblog.com/2009/05/04/iphone-game-programming-tutorial-part-4-basic-game-audio/feed/ 57 http://icodeblog.com/2009/03/18/iphone-game-programming-tutorial-part-3-splash-screen/ http://icodeblog.com/2009/03/18/iphone-game-programming-tutorial-part-3-splash-screen/#comments Wed, 18 Mar 2009 20:01:04 +0000 brandontreb http://icodeblog.com/?p=703 Ok, So it’s time to wrap up this series.  Today I will be showing you how to add a few “bells and whistles” that will make your game more complete.  Let’s start by adding a splash screen to your game [...]]]>

Ok, So it’s time to wrap up this series.  Today I will be showing you how to add a few “bells and whistles” that will make your game more complete.  Let’s start by adding a splash screen to your game (Again I truly apologize for the lack of graphics skillz. Photoshop and I are not friends).

Creating a Splash Page

We will be adding a splash page that will fade out into our main game screen.  Start by downloading this image and adding it to your project’s Resources Folder. Make sure you check the box to copy this image to the project’s directory.

Now we need to add a View Controller to our project that will handle the Splash View.  Go ahead and add a new file to your project that is a UIViewController subclass. Name this file SplashViewController. Make sure you check to create the .h file as well.

That’s all for today.  Join me next time when I will show you how to add audio to your game. If you have any questions or comments, feel free to leave them in the comments section or write me on Twitter.

You can download the source for this tutorial here

Happy iCoding!

Ok folks, here it is. The next tutorial in our iPhone game programming tutorial (sorry for the delay).  Today, I will be discussing the basics of player interaction, simple game AI, and game logic.  We will also be exploring how to do simple collision detection so we know when the ball hits a paddle. Per popular request, I will be adding “Challenges” to the bottom of the tutorials from now on to give some more advanced ideas for improvement. Let’s begin. Start by opening your code from part 1…

User Interaction

The first thing we will implement is user interaction.  All we really want to do is move the paddle’s X location to the X location of the touch from the user.  This will be a very simple implementation and could be much better (I will add this as a challenge at the bottom of the tutorial).  Open iTennisViewController.m and add the following code.

Just as we did in a previous tutorial, we are overriding the touchesMoved method.  This will detect when the user “drags” their finger on the screen.  First, I added the “else if” statement inside of touchesBegan that simply forwards all events to touchesMoved if the game is in a running state.

The first 2 lines inside of touchesMoved simply detect the location of the user’s touch.  Next, we need to create a new CGPoint from the X location of the touch and the Y location of the yellow racquet (player racquet).  Objective-C won’t simply let us say racquet_yellow.center.x = location.x.  This is probably because CGPoint is immutable (not editable).

Finally, the center of the player’s racquet is set to our new location.

Collision Detection

*Update, the user Naren has pointed out a much simpler collision detection.  The code has been updated to reflect it. Inside the gameLoop method of iTennisViewController.m add the following code

So, Apple has provided us with a very handy methods to check if to object frames collide.  Its called CGRectIntersectsRect.  We simply hand this method the frame of our ball and racquet.  When the ball collides with the racquet, we want to reverse its Y velocity.  The next if statement is required because sometimes we get in a state where the ball gets “trapped” on a paddle bouncing back and for and not going anywhere.  So, we want to ensure the ball’s velocity only gets reversed if it is front of each racquet. (Note, the NSlog is not needed, it was just for debugging)

Simple Game AI

Next, we are going to discuss how simple AI can be added to allow a computer player to play iTennis with you.  Many of you might not know just how much is involved in a decent Artificial intelligence.  I could go on and on with nerdy math, philosophy, heuristics and the like, but I’m not.  I will show you some super NOOB, very easy to understand game AI.  Basically, the computer will “watch” the ball and move in the direction of it in hopes of hitting it.  Let’s get started… 

We first need to define a constant that will define how fast the computer player can move.  Add the following define to the top of iTennisViewController.m

As you start testing, you can adjust this number.  This is basically defining how fast the computer player can move in order to get to the ball.  The higher you make this number, the “better” the computer player will be.  You could actually make your computer unbeatable if this number were high enough.  Now, add the following code right under your collision detection code:

The first “if” statement is to add some difficulty for the computer.  It basically checks to see if the ball is on “his” side of the court.  The computer will not move or respond to the ball unless it’s on his side.  It could be omitted, but makes for a more interesting game.  The next if statements check to see if the X coordinates of the center of the ball are different than the X coordinates of the center of the racquet.  If the ball is to the right of the computer’s racquet, the X coordinate of the computer’s racquet is increased by kCompMoveSpeed. If the ball is to the left of the computer’s racquet, the X coordinate of the computer’s racquet is decreased by kCompMoveSpeed. 

It should now be clear how adjusting the kCompMoveSpeed variable, will affect the computer’s performance…

Now, you can actually hit Build and Go to see the game in action.  As you can see the computer responds to the ball and hits it most of the time.  There is still one last piece to make the game fun. Scoring!

Game Mechanics: Scoring

Now, we need a way to keep score.  This is actually some more simple collision detection.  We are basically checking to see if the ball collides with the back walls.  First, let’s define a few variables and a method.  Open up iTennisViewController.h.  Add the following highlighted code:

We need integer representations of the score so we can add points when the player and the computer score.  Also, we will need a function called reset that will be called to reset the ball to the center of the screen.  Now we need to define one more variable.  Add the following line to your defines at the top of iTennisViewController.m

This variable is pretty self explanatory, but in case you didn’t catch on, it defines the amount of points needed to win.  I just made it 5 for a quick game.  Now, let’s check to see if a player or computer scored.  Right after your AI code, add the following code:

Ok, first we see 2 if statements.  The are basically checking to see if the ball has hit/passed the top or bottom of the screen.  If it passes the top, the player score gets incremented.  If it passes the bottom, the computer score gets incremented.  The next line contains a little bit of fanciness if you are new to programming.  We are calling the reset function, but what is that expression we are passing to it? 

Well, if you look at the definition of reset, it takes a BOOL value that determines if the game is over.  So this can either be true or false.  We are simply passing true or false when the expression is evaluated.  So, (player_score_value >= kScoreToWin) will evaluate to false when the player_score_value variable is less than 5.  Once this variable reaches 5, it will return true and pass it into the reset function.

Why do this? Well it saves us lines of code and complexity.  So now you don’t have to do if(player_score_value >= kScoreToWin) ) [self reset:YES]; }else{[self reset:NO];} . make sense?

Now, let’s define the reset function. Add the following method to iTennisViewController.m

The first thing we do is pause the game.  Remember pausing the game causes the “Tap to Begin” Message to Display. Next, we center the ball on the screen.  If YES/true was passed in for the newGame variable, we need to do a few things.  First, we check who won by comparing the computer and player scores.  Next, we update the “tapToBegin” message to notify the player who won.  You could add another label for this, but I am just recycling this one… Finally, we reset the player and computer scores to 0 because a new game is starting.

If it is not a new game, we need to reset the tapToBegin message to display “tapToBegin”.  This has to be done in case the message was altered to say “Player/Computer wins!”. Finally, we update the labels on the screen to reflect the new scores.  Now you should be good to go…

Click Build and Go and battle the computer in an epic game of iTennis!  If you have any comments or questions, leave them here or ask me on Twitter.  You can also download the source for this tutorial here

As Promised, Here are some challenges

• Improve on user interaction – Make it so when the user taps, the racquet moves towards the tap rather than moves directly to the tap location
• Improve collision detection – When the ball hits the paddle, use some simple physics to make the speed of the paddle affect the speed (and direction) of the ball
• Improve on the AI – add some randomness to your AI, make it attempt to “predict” where the ball is going to be
• Improve Scoring – Make it used tennis scores 15, 30 , etc…
• Improve scoring – Make it so you must win by 2 points

Stay tuned for the next tutorial when I will be going over game audio, splash screen, about, and some other polishing… Happy iCoding!

This is the first in a multipart series where I will be teaching you to create an iPhone game from the ground up.  As many of you know, OpenGL and Quartz have quite a steep learning curve.  This tutorial will simplify the development process and not use either one of those technologies.  For our graphics, we will simply use UIImageViews.  

In this tutorial series, I will teach you about every aspect of developing an iPhone game.  The game will include graphics, sounds, game mechanics, and even some simple computer AI. 

The game we will be creating is called iTennis.  It is essentially Pong with a tennis theme.  It will follow all of the same rules and mechanics of Pong.  I chose this as a first game tutorial as iTennis does not require any special animation.  If there is significant interest, I will move on to a more complex game in a later series. Here is a screenshot of the game we will be making:

Let’s get started… Here are the images you will need for the project. (I know my Photoshop skillz are weak, so be easy on me).  Click the link below to download the zipped images.
   

Open up XCode and create a View Based Application. Name this application iTennis.