Objective-C iPhone Programming Lesson 18 - Finishing Multiple Buttons

Hey guys, this is Mac Heads 101 with our 18th programming tutorial.

Now, in the previous tutorial, we made it so there were two buttons, but they had a little problem. That was that they bounced on the same velocity, and that resulted in all kinds of weird behavior where they could sometimes go off the screen and all of that. I also gave you guys a challenge at the end of the video. I said, uh, try to make it so that there are three buttons, which actually results in more problems because, you know, there are three buttons sharing one velocity.

But first of all, in order to add three buttons, you might have done it in a more complex way. But all you need to do here is say UIButton button3 = this and buttons addObject: button3. When we run this on the iPhone simulator, let's go ahead and see how this looks.

As you can see, there are three buttons, and there's probably more problems and all that good stuff. So, let's see. Alright, they all went off the screen except for one of them. So anyway, that is how to add three buttons. That's the answer to the challenge. Now, let me just update this to show you what it'll look like.

Now, what we're going to do in this tutorial is make it so that there is a different velocity for each and every button. So we're going to declare another array up here, and this array will be called buttonVels. What buttonVels will be is it'll be an array of stuff like this, um, and let's assume there are three buttons. So it's basically going to be an array of vectors or velocities.

The first item here is the X, and the second is the Y. First is the X, second is the Y. As buttons might be button one, button two, button three, the way this will work is this will be the velocity for the first button or for button one. This will be the velocity for button two, and this will be the velocity for button three.

Now, the way we're going to be representing these, these right here—sorry, these right here—is we're going to be using a CGPoint, which has an X and a Y. So each of these will be a CGPoint. Now, you can't put a CGPoint in an array, and I'll explain that to you in a second. But we're going to be wrapping it. So let's say buttonVels, let's keep that declaration, and let's go down here.

As we review, buttonVels equals nil right now, and we'll say buttonVels = [NSMutableArray array]. Now we'll say buttonVels = this. Alright, so for every button we add to buttons, we have to add buttonVels, or else, uh, it won't work. There has to be the same number of velocities in buttonVels as there are in buttons, otherwise serious problems will arise.

So let's add stuff to buttonVels right here. We’re populating our buttons, but let's say CGPoint v, and this will be the same velocity for everything. So all of the buttons will have 44 as their velocity X and Y—X velocity, Y velocity.

Now, this is great, but we can't put v in buttonVels. This would cause an error, and let me just show you what causes an error. First of all, uh, right here you can't do that—sorry about that—you have to say CGPointMake, because that's a function. But you really can't add a CGPoint to an array.

So in order to fix this, we have to wrap this CGPoint in something called an NSValue. So we're going to say NSValue valueWithCGPoint, and this basically returns an Objective-C object that we can put in an array. Um, it creates an Objective-C object around a C object, which is what v is—what a CGPoint is.

So we can do this three times for all three velocities, and now buttonVels equals {{44, 44}, {44, 44}, {44, 44}}, and this is our velocities. Let's build this so that way the silly error goes away.

So now what we have to do in our timer tick is we have to get this velocity, modify it, and then put it back in the array and save it. The first thing to do is we don't know right now in this loop which number button this is. We just know that this is a button. We don't know if it's the first button, if it's the second button, and we need to know that in order to get the place in buttonVels.

So we're going to say int buttonIndex = [buttons indexOfObject: clickMe], and this will tell us where in this array clickMe is. Now we're going to say NSValue *buttonVal = [buttonVels objectAtIndex: buttonIndex]. Now we're going to say CGPoint buttonVel = [buttonVal CGPointValue].

Wow, that's a mouthful! Anyway, now we can say buttonV.y and buttonV.x where it normally says velocity X and velocity Y, and we can say buttonB.x and buttonB.y.

Now we have to save this CGPoint, so we're going to say [buttonVels replaceObjectAtIndex: buttonIndex withObject: [NSValue valueWithCGPoint: buttonVel]]. This will remove the object at this index and then replace it with a new value, with our new velocity because our velocity can change if it hits the walls.

So, in order to update this in the array, we have to create a new NSValue with a new CGPoint, and we have to change this in the array. So there we go, we got the array working hopefully, and let's go ahead and build it and see how we do.

And now there's one more thing we can do is get rid of the two velocity X and velocity Y variables in the header because we really don't need those. We place it with this array. So now let's build in for the iPhone simulator.

Oh, and I have to get rid of this because we don't have these anymore, um, and let's go ahead and run it.

And woo! They're all bouncing independently. Very strange. I have to admit, this is pretty awesome. So that is how to have two or, you know, any number of separate velocities for every button that you add. To buttons, you have to also add a velocity here.

Now let's go ahead and make this more fun. Let's make a random velocity. So arc4random() % 4 + 2, and this will basically be a random number from 2 to 5, I guess. So let's copy this.

So now each of our buttons will have a separate random velocity, and this is even more strange. Yeah, so this is what I like to see—their independent buttons bouncing around with independent velocities.

This is no longer useful because we already have this. So in our next tutorial, I guess we're going to, um, be playing around with this some more. We're going to make it so it dynamically, uh, you can have the user, and they get enough points; it'll add another button or make some of the buttons smaller. There's just so much more fun we can have now that we're dynamically working with an array of buttons.

So that was our 18th programming tutorial. So thanks for watching. Mevs 101, subscribe, and goodbye!