How to make a jumping platformer game on xcode 7! - part 1

Hey guys, welcome to this Xcode video.

Today I'm going to teach you how to make a

character jump up and down. For example,

if you want to make like a platforming

game, this could be useful. So the

first thing we're going to do is New

Project, Single View Application,

and you can just call your product

whatever. You want to,

and Objective-C, iPhone, and then Next.

Okay, then just do Create.

Okay, first thing you want to do is— it's

up to you, but I like to put it into

landscape, so turn off Portrait. You can

do this in portrait as well if you want,

but I think it looks better in landscape.

And then we go to Main Storyboard.

And just close this left tab. Now what

it's done is it's in auto layout.

I like to turn auto layout off and disable

size classes, so this gives you the iPhone

size, not that strange square shape. And

then we go to the 4th tab along— no,

3rd— no, wait, click on the top first and

then do 4th tab along, Orientation, and

then Landscape or Portrait depending what

you want. Okay, so now

we need to create the floor and our

character and the jump button. So we need

an ImageView. We need 2 of these

ImageViews, and make sure these arrows are

in the center and click off— turn off

these outer ones. And then just

reshape it how you want the floor to look

like. It can be like really big or really

small. And then just copy, Command+C,

Command+V, and then just resize it for

your character. Now he can be skinny, or

he can be fat, or he could be short. It's

up to you. Just place him on the floor.

Now select all of them. Command A,

and then go into the fourth tab and go on

Image. Now we didn't need an image. I have

this red red square prepared. Just drag

it, drag it onto and do Finish, and then

it will appear here red dot PNG.

Now on on Image, just type in the file

name. Hold on.

It's not appearing, so just type it as it

appears here, red.png, and it will show

you the image as the one you typed in.

Okay, so we also need a button, so search

for a button at the bottom right, drag it

on, and you can just name it jump or

something. And I don't know why as default

it always starts off like this. But if you

don't change it, if you don't change it to

the center arrows, then it's going to be

in a different location when you play the

game. Okay, so go into ViewController.h

and under interface do open curly

brackets, close curly brackets, and then

IBOutlet UIImage,

and this can be you. And then

the next one for floor So we always put

IBOutlet and then UI, and now because

they're image views, you put ImageView.

If they were labels, you put UILabel. If

it's buttons, put UIButton. So IBOutlet

and then UIButton for the jump button,

asterisk, and just call it whatever you

want— jump, whatever, doesn't really

matter as long as it's easy to remember

for you. Now we need an integer. So

integers and bools go under import. We

need an integer for the jump, jump value,

so let's just call it jumpValue.

And then we also need an IBAction for the

jump button. IBAction is just where you

put the code for the button so that when

you press the button, this code will run.

Let's call it jumpCode.

And we also need a timer so that when the

character goes up in the air, he falls

back down to the ground. So we'll call it

NSTimer and asterisk, and we'll call

it fallingTimer.

And then we need a void as well for the

timer, and we'll call it fallingCode.

So I think we're all done. Now we need to

link up these, uh, what are they called,

thingies, the buttons and stuff. So we

have the floor on outlets, drag it onto

the floor, and you, drag it onto you,

and jump, we'll drag that onto the jump

button. And then the actions, received

actions, jump code. Go on to

jump and do touchUpInside. That just means

that the code will run after you've

pressed it and then let go of pressing it.

So then we go to ViewController.m

and we have to do our timer. So we want

the timer to run as soon as the game

launches, so put it in viewDidLoad. Now

our timer is called fallingTimer equals

square bracket, NSTimer scheduled,

and it will be the second one down with

target, TimeInterval 0.05, target self,

selector @selector, and in the brackets

we put the void name which was

forwardingCode. And then userInfo should

be nil, repeats yes, and then semicolon.

Okay, so now we need to do the void for

the falling— what was it— falling code,

and then open curly brackets. Now this is

for the

movement for the falling movement,

so we do u.center CGPoint.make

u.center.x. Now falling is going to be

u.center.y, but instead of putting a

number, we're going to put minus

jumpValue. And jumpValue

is going to be jumpValue equals jumpValue

minus 5. So it should

be falling by -5 every time it this timer

is running. So we can test it out, just

put it at the top, see if it falls down.

It might fall up, I'm not sure. I get

confused with minus and plus sometimes.

Where is it? So it takes some time to

open. Where is it? There we go. So it's

just fallen, but what we want it to do is

when it hits the floor We want it to stop

falling, so we do if CGRect intersectsRect

, and then— so

what do we want to do? jumpValue equals 0.

Let's see what happens now. Now it's

probably going to stop falling, and then

it's going to get stuck in the floor.

Yeah, it just gets stuck in the floor,

but it keeps going down for some reason.

So we'll also put— make it so the

character appears at the top of the floor.

u.center CGPoint.make .

Now we don't want it to appear at the

center of the floor, we want it to appear

at the top of the floor. So I'm not sure

what the correct number would be, so it

might be something like -50. Just test

So it's still a bit too high, so let's try

-70.

That's about right. Try 75, just so

it looks like he's on top of the floor,

not inside of the floor. Okay, now that's

too high, so it keeps bouncing him back

up. It's kind of funny actually. Try 71.

Okay, so he's like hovering slightly.

Okay, now we do need to do the jump

button. So we do IBAction jump,

jumpCode. Get rid of this extra sender and

then do open curly brackets. Now we want

every time you press the button, we'll put

jumpValue equals 50.

I'm not sure if this is right. Let's just

test it out. Okay, yeah, that's right.

So that's it, we've done— we've made a

jump button. He jumps. If you keep

pressing it, he keeps jumping up, and then

he falls faster and faster. So if you keep

making him go really high, he ends up

falling so fast— oh, there we go. Last

time I did this, he fell through the

floor. So that's how you make a platformer

game jump, jump button. Pretty easy,

right? So if you want, you can fiddle

around with these values. You can make it

jump a bit lower, so lower the number and

he'll jump not so high.

If you increase jump value here, he'll

fall faster.

So he falls faster, so he can't jump so

high. So that's it. Hope you learned

something. Hope it wasn't too fast. It's

not really much code. All you need is the

timer, the void, so the timer

runs this code to make him fall down. And

then the jump button— all the jump button

is, you add 35 to the jump value.

And then you need 3 IB outlets: you,

floor, and jump button, and an end timer.

So pretty simple. I guess in the next

lesson we can do— we can build on this.

We can do a left button and a right button

to make him move left to right. So yeah,

look forward to that video, and I'll see

you next time.