[MUSIC]

I'd like to do a tutorial in which I show you how to make a simple

side-scrolling 2D game for iOS.

The high-level, what this tutorial is hopefully going to communicate, is that,

first of all, that Xcode has a lot of support for making platform style games.

So this is going to be a game that will run on an iOS device, like iPad or

iPhone or iTouch.

You need a Mac in order to follow this tutorial, and

then you need Xcode in order to do the code for it.

Now, it's easy to make a simple game.

And that's what we're going to do in this tutorial.

It gets much more complicated if you want to have all the bells and

whistles that are associated with a full-fledged commercial game.

But sometimes it's really fun just to get your own game up and running.

It would make a good sort of clever gift for

a friend if you made them a custom game.

And it doesn't have to be super elaborate.

On the other hand, this is enough to get started for a much more elaborate game,

if you want to do something like that.

So let's see where we're going to start here.

We've got a couple steps, and this is kind of what we're shooting to produce.

This is a game in which I knew that I wanted to do this tutorial.

And so what I did, I sat down with my daughters and

we're hanging out over the weekend.

I said hey, why don't you make some graphics for me for

the game that I'm going to show.

So I don't want to communicate that this is like the best graphics in the world,

although it does sort of have a charm to it because it's hand drawn by kids.

So my daughters drew the background, and they drew the mushrooms, and

they drew the gnome head.

And then we found some basic animation sequences online in order to implement

the animation.

So this is kind of what we're trying to create,

a game in which you have a character who animates, can jump.

There's some things that you can interact with in the world,

in this case it's the mushrooms.

And as you move along,

the camera follows the character as you move throughout the game.

So in this case, very simple, that's the level, the goal is to get to that

orange spot, and we want to just show you all the pieces that you need to do it.

Now what isn't present in that tutorial is a description of how I was moving.

The idea of how you move in this game is that you

touch the side of the screen that you want the character to walk towards, and

if you double-touch the screen, the character jumps.

So you kind of can hold it with your thumbs, move and

then jump with the other thumb, or move back and jump with the opposite thumb.

That's the basic scenario of what we're trying to shoot for.

The steps that we're going to walk through are as follows.

We're going to make the project, collect the assets,

build our level, set up basic physics and our camera.

And actually, I think for

some of the people who have been following along with these tutorials,

the adding the camera bit is probably the most interesting new thing here.

We need to set up a world boundary so

the character doesn't fall off the edge of the world.

We need to build up animation sequences and set up camera constraints.

And there's a few other things we have to do as well.

But let's get started by making our project.

So I'm going to hide my slides here, and I am going to go to Xcode.

And I'm going to make a new project.

This project is going to be a game, so we're going to use the iOS application and

we're going to use the game template.

Load it up, we'll call it Martha's World Demo.

That's my name.

And then that's currently what I'm developing at Westmont College,

and DCI, UC Irvine, a couple places.

So for now that will just do com.djp3.,

actually net.djp3, call it Martha's World Demo.

It's going to be in Objective-C.

We're going to use SpriteKit because SpriteKit is a 2D graphics engine for iOS.

Go ahead and hit Next and put it in our existing workspace,

we'll give it a Git repository.

And that's enough to get us started.

All right, the default game out of the box entails a bunch of moving spinning

spaceships, so we're going to have to delete that in a second.

That's our first step.

Now the second step is collect your assets.

It turns out that these assets are really critical part of the game.

By assets what I mean is I mean the graphics and

I mean the sounds that are associated with your game and

also the animations that connect those graphics together.

Now why that's important is because the assets give you the aesthetic for

the game, and they can actually take a lot of your time.

So that's the case, that's true in my case.

So what I have is, I have my asset set aside in a folder here, and

we have a bunch of different things.

So let me walk through what we got here, using the Quick Browser for iOS.

So I have a bunch of components of mushrooms that I scanned

in a drawing that my daughter made.

And then I cleaned it up in Photoshop and

I created a PNG in the root file which is a graphics format.

The reason that I did that is because PNG can support transparency and

transparency's going to be convenient for what I'm trying to do,

the physics work with the physics.

So this is a mushroom cap that is transparent around it, and

I have four of them here, different sizes and shapes.

And then I have the stalks for the mushrooms as well, and they're just

pretty simple and they're different sizes and couple of different presentations.

Those are kind of easy.

Those are the static things that you're going to interact with in the world.

I of course have a background, and the way the background works is the background is

going to be something you don't interact with but

scrolls around behind you so you get a sense of movement as well.

It's the background.

I have a sound that I'm going to use for when the character jumps.

[SOUND] And the sound for when the character walks.

[SOUND] And I made those in Garage Band and

just output them in the format as in Garage Band you share to a file.

Now the components of the animation are a little trickier.

So here's what I did for the animation.

For the walking sequence, I decided I was going to use eight different steps for

the walking sequence.

And when you create these images, a good way to

manage it is to make sure that all the images are exactly the same size.

And that way as you move that, imagine that there's no image there and

you're just going to move a square block across the screen for walking.

That square block is going to be the reference for where your character is.

So as the block moves, the animation has to act

as if the block is moving in response to the character moving as well.

So somehow in a block, you need to anchor your character so

that as the block moves and the character walks, it looks natural as if

the character's animation is moving at the correct amount with the block.

I didn't do that great in this game, but there's an art to it and

it's a little bit tricky.

So I have eight different steps of the walk in here as I walk through.

And then I have eight different jump stations.

Now I didn't do a lot work on the bodies for the jumping and

they're not actually very good.

For the game, because they're not smooth enough,

I should probably have used more than seven for the jumping phase and eight for

the walking phase to make it a little bit smoother.

And you know, if I had had more time,

I wouldn't have used these generic animation templates.

What I would have done is actually drawn my own

gnome character like we did the head.

But in order to get the tutorial out the door,

we leverage some existing animation templates for that.

All right, so those are my assets that I want to put in the game, so

I've got those all together.

The next thing we're going to do is we're going to build our level.

So our level is going to be the initial, the platform that we work with,

and we're going to use the scene editor to do this.

So let's build our level and we're going to set up the basic physics and

we're going to add the camera.

But in order to do that we have to move our assets into our game.

So let's go back to our Xcode here.

Close out my preview.

going to make my Xcode take up half the screen so

I have some space in which to move things over.

I'm going to go to my assets folder.

Here's the spaceship icon that came with the template, I'm going to go ahead and

delete that.

And I am going to create a couple things.

One thing I'm going to do is create a new Sprite atlas.

And that is one of these compressed texture maps so

that you can have your animations loaded very quickly by the graphics engine.

Let me go ahead and take my gnome walk animations and drop them into

the Sprite data, and the gnome jump and drop them into the Sprite data as well.

Get rid of that blank Sprite and

then in addition to those guys, I'm going to put these assets in here.

And all this part of that animation template, the heads of the mushrooms,

the caps of the mushrooms, and then the stalks of the mushrooms as well.

Great.

And then the last thing I'm going to do is I'm going to add my sounds

to my environment.

Drop those in.

Nope, that's not the last thing.

Last thing is going to be to add the background.

Okay, so now all my assets are in the game and now let's go ahead and

build that level.

The level is built in the SpriteKit scene editor.

So what we have got here is this grey box which reflects really nothing right now.

That yellow line is the outline of the view that the player is going to

see on the device.

And the first thing that I'm going to do is I'm just going to add a color sprite

which is going to hold the background.

We'll put that in the middle, and we'll give it a texture of the background image.

And that'll fill up more than the screen, which is fine,

because we actually want that screen to move over the top of the background.

But I'm going to align it so that the screen is lined up,

you start at the bottom left.

So everything starts at the bottom left of this world.

Okay and I can zoom out a little bit and improve that.

For the background, there isn't any physics engine.

So down here under physics definition, we're going to have body type none.

The only tricky thing I'm going to do is I'm going to set the z position equal to

minus one.

So that as we layer these graphics on top of each other,

the background will be in the back.

Actually I'll make it minus two just so I have a little bit of space to work with.

Okay, the next thing that I want do is I want to add the mushrooms to my scene.

So let's see if we can add four mushrooms and

we'll just do it one at a time, two, three, four.

Those are going to be the stalks, and let's go ahead and

add the stalks down here by selecting stalk 4,

and then selecting stalk 3,

selecting stalk 2, selecting stalk 1.

Now, for the purposes of game play,

I actually want them to kind of increase in size.

So lets go ahead and rearrange them so that they get larger as we go on.

And then I am going to put them at the bottom of the screen so

it looks like everything is anchored on the bottom of our screen.

Great.

Well, this keep climbing up.

Then we'll add some caps to the mushroom,

one, two, three, four.

And we'll fill out the textures with the mushroom caps.

So we'll go ahead and take head one,

and we'll do head two, and

we will do head three, then finally head four.

All right.

Let's see.

How do we like that so far?

So far so good.

One thing that I did in the last game is I had the character set up

it would interact with the mushroom stalks.

I think actually maybe I'll just kind of keep it that way.

And let's move this over here.

I kind of like it visually a little bit better like this.

Let's lower the mushroom cap down so it looks like it's attached to the stalk.

Let's see, let's bring that one over.

All right. See maybe if we'll do this.

[INAUDIBLE] wide mushroom.

But we gotta be able to jump onto it.

So let's swap these.

Okay.

So far so good.

Pretty happy with that.

And the last mushroom we'll put there.

All right, and let's move this over just a little bit.

Move this over.

All right, so now what I've done is I've built the level that I want the character

to interact with.

So far so good.

All right, now let's add a sprite for the character, the gnome character,

we're going to add that there.

And we'll that add as a texture, we'll just have that be the gnome, not in

the jump position, but we'll have it be the gnome in the walk position, step one.

Okay great.

Right, lift him off just a little bit so when you first start the animation here,

he'll drop.

And okay, what else do we want to do?

Let's add, let's create a new particle emitter so

that there's something that the gnome is trying to get to at the other end.

We'll do that under File > New > File, and

we'll look for a particle system, but we want it in iOS.

And we want it to be, where do we keep it?

Here we go.

Sprite kit particle file.

That's what we want.

And we'll base it on a magic template.

A little bit different than what we had before,

we'll keep it in our folder with the rest of it.

And here's our editor for magic, and do we like that?

I actually kind of want it to have, it would be a little bit more focused and

be centered.

There we go.

I like that.

And I want them to have slightly longer, slightly longer lifetime.

See if we can get it to have parameters that we like.

Sort of a live editor, that's good.

Angle, speed, range, acceleration, life time.

I want a little less particles coming out.

And I want the lifetime to be a little bit longer than that, let's see.

There we go. I guess that's all right.

I don't totally like the color.

I'd rather have something a little bit bluer, maybe like that.

Okay.

That's good. That'll have to work.

All right, so now I'm going to go back to my scene kit editor.

And I am going to add up here, in this side,

I'm going to add my particle emitter.

There we go, a basic particle emitter.

We'll throw it up there on top of the mushroom, and

we will attach it to, let's see, did we name our particle filter?

Let's give this guy a name.

Say, call it Magic.

Good.

Go back to our game scene.

And now we want,

you gotta select it again.

And, let's see, where's the magic in here.

Here we go.

Nope, now you know what I want to do, sorry.

I don't want to make it from scratch, I just deleted it.

I want to drag and drop the particle into the game scene where I wanted.

Gosh, okay.

Zoom out, so I can see the spot where I want it, then drag and

drop the particle into the scene where I want it, great.

Okay.

All right, that's good, we haven't set up any physics for this world yet, so

let's start with the character.

We know that the character should be effected by physics,

and so we're going to set his body,

the edge of his body equal to the alpha mask associated with the PNG.

And what that means is that it is going to use the graphic file itself to identify

where the outlines of this character are, so

that I'm a figure out how to collide with other things in the environment.

I don't want him to rotate, but I do want him to be dynamic and

I want him to be affected by gravity.

So that's good.

And now I'm going to select each of the, all of the mushroom caps together.

I'm going to give them a physics body type which is the alpha mask.

Great, so they'll be correct like that.

They're not dynamic.

They're not going to move, they're not going to rotate,

they're not affected by gravity.

And I actually kind of want them to have a little more friction than otherwise, but

I want them to be a little bit on the bouncy side.

So I'll make them bouncy with a little bit of friction.

And then the last thing we'll do is we'll add the mushroom.

Actually, the mushroom caps in this case aren't going to be really important

to the physics because they're not really reachable.

But we'll go ahead and, for completeness, set their physics engine as well.

They're not dynamic, they can't rotate, they're not affected by gravity.

And I want all of them, let's see, I want all of the mushroom caps to be in front.

So I'm going to give them a z layer of one, and

I want our character to also be at a z level of one.

So that as we layer things, it's going to be the character,

the mushroom caps on top of the stalks, on top of the background.

And then just to make sure that everything's working okay,

I can move the character out of the original position and hit animate.

And see that, it's good because we're going to put the boundary

in our environment through code, so it's okay that he fell out.

Let's put him back to where he'll drop onto the edges of the boundary.

And I didn't really like the way our magic was in a big square,

that didn't transfer for some reason.

Let's animate the magic again.

Okay, there we go, I like that a little bit better.

Okay.

So we built our level, we set up our basic physics, and now we need to add a camera.

Adding this camera to our level is an important part

of making this technique work, if we want the camera to follow the character.

So we're going to go ahead and come down here and

add a camera object to our screen.

And the way we're going to work with this in code, it's really important that

the camera is lined up to the bottom left of the screen at the initial point,

because we're going to use that initial point to help us

to set boundaries that are constraints.

Okay, let's give that camera a name, call it Main Camera.

Let's give our character a name, we'll call him Character.

And then the only other thing I want to do is I want to take our scene and

I want to set the camera for the scene.

What I did is I selected the scene and this is an important point.

I want to say that the camera that we used in this scene

should be the main camera that I just defined.

Okay, pretty good to go.

All right,

that takes us to all the work that we're going to do outside of our code.

And so we're now, the next step is to set up a world boundary and

start working within the code.

So let's do that next.

[MUSIC]

Side Scrolling Tutorial Part 1

iOS Project: Transreality Game

与讲师见面