Objective-C iPhone Programming Lesson 14 - Starting a Game

Hey guys, this is MacHas1 with our 14th iPhone programming tutorial.

Now in the last tutorial, I promised you guys that we'd go more into the thing I did then. But, um, it doesn't seem like many of you are actually interested in this. You just want me to either do game development tutorials or, um, tutorials on how to make something like a Notes app or something like that. So, I don't know, um, I think for now I'm going to start off doing game development tutorials because, um, in general, game development is just more fun and I think more people want to do it than, you know, making utility apps.

So today in this tutorial, we're actually just going to make um a game where you have to click um click a square that's moving around. And when you do, you'll win! We're going to be elaborating upon this in the next few tutorials. So let's open up Xcode and let's go to File, New Project, iOS Application, View Based Application.

And we're going to be calling this our first game and I'll not put spaces. All right, so we're going to be making this game using UIKit. There are a couple of different ways you can make a game. You can make a game using OpenGL, Cocos2D, UIKit, or Core Graphics, and there are other libraries as well. But we're going to be using UIKit because UIKit is built into the iPhone, and, well, so is OpenGL and Core Graphics, but it's also the easiest to use and I think you'll understand it the best.

So we're going to just have our main view controller, as you can see here, um our first game ViewController.h, and this is where we're going to be declaring our variables. So I'm going to start out with one view. So I'll have a UIView and I'll call this ClickMe. And I'll actually make it a UIButton because they have to be able to click it.

Now, in order to make it move, we went over how to make things move in two different ways: NSTimer, which just allows us to move it a little bit every, um, like tenth of a second or so. And we also know how to use, uh, Core Animation or, you know, UIView beginAnimation, etc. And so we're going to be using NSTimer for the animation because we have more control over what it actually does.

So we're going to set up our NSTimer moveTimer, and basically this button is going to bounce around the screen pretty quickly until we click it. And when we click it, we will win! So we're going to have a function here and this function is going to be called timerTick, and we're going to have something called, uh, buttonClick, which will be when they click on the button.

So let's go in here and put the code for these, and I'll put it right under viewDidLoad. But I'm going to uncomment this. So in our timerTick, we're going to move the button. So I'll put a comment "move the button," and in our buttonClick, we're going to say tell the user they won.

Now, um, we're going to be learning in this tutorial how to do an alert to bring up a little window that says you've won, but we're not going to go over that yet. So as we review, our timer is called moveTimer. So we're going to set that up.

moveTimer equals NSTimer scheduledTimerWithTimeInterval, and I'll do this um method. So we'll make it have the time interval of 0.1. The target will be self, the selector we'll use the @selector to specify timerTick. userInfo will be nil because we don't want any, and repeats will be YES.

Um, all right, so now in here, we're going to get the frame of the button. So CGRect buttonFrame equals, and what's it called? ClickMe.frame. Now we're going to say buttonFrame.origin.y += 10, which means we're moving it down on the Y axis. Now, uh, as we move it down, um, we're also going to move it to the right.

Um, so let's do this. Now, as we review, we're moving it over to the right and down 10 pixels. This eventually will move it off the screen. So we actually want it to go um to bounce off the right side, bounce off the left side, bounce off the top, and bounce off the bottom.

So in order to do this, we're going to need two velocity variables. So I'm going to declare int velocityX and int velocityY. Um, this is essentially our velocity vector that we will use to move it around. So initially, when the view loads, we're going to say velocityX = 10 and velocityY = 10, and this is how much it'll move in pixels every second here.

So this is 0.1. So every 0.1 seconds, the button is going to move, um, by 10 pixels. And I shouldn't call it a ball; it's a button. But here we're going to add velocityX and velocityY. Now, um, when it hits the side, um, when it hits the side of a view, uh, it's going to switch our X velocity. When it hits the top or the bottom, it's going to switch our Y velocity.

And by switch, I mean make negative or positive flip, um, the negation. So in order to do this, we're going to use an if statement like we did in our previous tutorial. So we're going to say if button.frame.origin.x < 0. That means it hit the left side, so we'll say velocityX *= -1.

*1 makes, and we can also say double pipe. Uh, in order to do this, you press Shift + Backslash. This is not a capital L, so don't type that because it's wrong. But yeah, this is how you type this, so it's double pipe. And then the other condition is if it hits the um the right side.

So origin.x + button.frame.size.width > self.view.frame.size.width. Now this is a bit more complicated, and I don't think I've gone over this in the past, but essentially the x-coordinate is the coordinate of the button in the top left-hand corner. So in order to tell the coordinate of the right side of the button, we have to add the width, then we have to check if it's greater than the total width of our view. If it is, then it's gone too far to the right.

Now we can copy this and change everything to y and to height. So we change this to height, height, and velocityY *= -1. Now we can say button.setFrame or setFrame, yeah, no, ClickMe.setFrame. All right, and there we go. This will move it all around and about. So that's that.

Now we're going to set it up in Interface Builder, and I'll make the button click work at the end, so we'll get to that last. All right, so here's our view. Let's just drag on our button. Let's say "Click Me." And let's um move it, I'll start it off in the center, and I'll make it taller. I'll make it the same height as it is wide and I'll center it again, um, so hopefully you can see what I just did there in Interface Builder.

Um, now we're going to go to File's Owner, go to our outlets, and set up buttonClick with this onTouchUpInside. Now, something I forgot to do is to make this an IB Outlet. We have to make this an IB Outlet in order for us to be able to use it in our Interface Builder. Now we see it, we drag it over, and boom!

So we're pretty much done with Interface Builder. So let me just view this code, and everything looks pretty fine. So let’s run it, and here we have our button moving around at about 10 frames per second about our view. Now we can click it, and nothing really happens. We don't win or anything like that, so we have to make it do that.

So first of all, I'm going to make this go slightly faster and set the velocity as half as much as it is. Whoopy-doo! Now let's make the button click code. So in order to bring up an alert view, a box that says you've lost or you've won, we have to use a class called UIAlertView. This is declared as followed: we say UIAlertView alert. Now we have to initialize it, so we'll say equals UIAlertView alloc and initWithTitle.

Here's the title of our alert. I'll call it "You Win!" The message will be "You clicked the button, hence, all right therefore you have won the game." I'll set the delegate for now will be nil, and we'll get into that in a future tutorial. The cancel button will be nil, and the other button titles we're going to write "OK," comma and then nil. The comma and nil is something called as "sendal."

Um, basically, it just means that when after the commas, you can have as many buttons in here as you want. So you can say "OK," "Cancel," and separate them by commas. Nil just represents the end of your buttons, basically. So that's how we create our view.

In order to show it—sorry, in order to show it, we have to say alert.show. This is a function on every UIAlertView to show it. And now, so we don't have memory leaks, we have to do alert.release. That just, um, makes sure that alert is deallocated. It just makes it so your app is more efficient; that's all you really have to understand about that.

So now if we run it and we click it, you won, and you won again. You won again, you won again, etc., and you will never lose. So that is the first part of my many, many parts um game tutorial. In the next tutorial, I think we're going to make it um so there are multiple buttons that keep on appearing every 5 seconds that bounce around, and you have to get rid of all of them before you can win, and they start going um faster and faster.

So I think that's what we'll do in our next tutorial, so look forward to that. Um, so thanks for watching MacHas1, subscribe, and goodbye!