How to Make 2D Crossy Road (Swift in Xcode : Part 1) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

everybody today I'm going to show you
part 1 of how to make Crossy Road with
swift in Xcode so let's go ahead and get
started so this is what we're going to
accomplish inside of this tutorial we
have our little bird down here of course
this is only part 1 we have our little
bird down here and when you click on the
scene and he moves up and also moves
down so he's always in that part of the
scene and then you can jump it from base
to base and as you are jumping through
you can see that it's also looping these
bases through now let's go ahead and get
started go ahead and open up Xcode and
create a new Xcode project this is going
to be a single view application our
product name I am just going to call
mine cross the road like so no no okay
cross see rod is perfectly fine now
let's make this a bit bigger bigger and
we're gonna go over to our main dot
storyboard to start out with yes I am
using the main dot storyboard and that
is totally for tutorial purposes now
let's go ahead and click and drag a
uiimageview onto our scene it should
fill up the whole scene so that's good
and let's first let's take this scene
and we're gonna go to the attributes
inspector so click on this top white bar
up here so it's highlighted in blue and
we're going to go to the attributes
inspector and we're gonna change the
size to an iPhone 4.7 inch so we are
designing this app specifically for the
iPhone 4.7 inch now let's go ahead and
take this uiimageview and let's stretch
it out to the sides
so that it fills the whole scene and
then we're going to make the size of or
the height of this UI image you 50 now
this UI image view itself will be used
as our landscape so it's going to be the
little blocks that you can run on there
all it it'll either be a road or a river
or anything like that
so now we have that let's just copy and
paste that UI image view and let's put
it down by an incremental of 50 so the Y
value should now be equal to 50 so we
have 0 50 and our next if you can guess
it will be 100
like so and now you can just copy and
paste those over and over again until it
fills the whole scene so just do that
until you're all done now with these
last two UI view image views right here
we can just delete those as these will
now be our platform so now just copy and
paste that UI image view and we're going
to put that right there and we're going
to make it fill the whole scene like so
so this is going to be the part where
the bird first starts and we'll give it
a specific name called platform now this
landscape we're going to also put a few
image views we're just going to grab
four of these image views copy and paste
them and we're going to put it right
above the scene now you mean you're not
going to be able to reach above the
scene so just hold shift and put the up
arrow as you are going through to move
it up the scene now that should give it
the exact y value that we are looking
for like so and actually right before
we're done with these let's first change
the color of them so we can see them a
bit better later on in the tutorial we
will program eclis change the color home
later on but for now this is what we're
dealing with so we can take this UI
image view and we're going to change the
background of this one just to green
looks good nice pink and then you know
we'll make this one blue it doesn't
really matter and yeah okay now take
those UI image views and we're just
going to push them right back up above
the screen just so they're right off the
screen like so so now we have this four
image views right off the screen now if
we were to go into our our view
controller dot swift by just going on
over here where these two little circles
are we can open up our assistant editor
and now we're going to hook up all these
image views to our view controller oh
and lastly we need to add another image
view and this will be our player we're
going to make our player you can make it
actually whatever size you want but I am
going to make mine a 30 by 30 square
and I'm going to put it right up here
where the platform is now let's go ahead
and connect all of these up into our
view controller dot Swift so right click
or control click and drag from our
player button over to your view
controller dot Swift file we're going to
make it the connection type and outlet
and this is just going to be called
player connect and now we're going to
take this bottom uiimageview and we're
gonna right click or control click and
drag from that over here over to our
view controller that's Swift and this is
going to be an outlet again and we'll
just call this the platform connect and
lastly we want to could right click or
control click and drag from this image
view which will be the first of the
landscape and we're going to make the
connection type and outlet collection
this time because we're actually going
to collect all of the landscape inside
of this one collection our name of this
will just call this landscape connect
and now the cool thing about an outlet
connection is you can just add more to
this variable that you have right here
so this is actually going to be an array
as it as is indicated by these little
brackets right here this is going to be
an array of UI image views so you can
just click and drag and add all the
image views that are in your scene just
like so so I will be right back as soon
as I'm done doing this now the trick to
hooking this up with this the images
that are up here and actually we can
just move them down that'll make things
easier so it looks like there are these
four images right here so we were to
take those images click on our scene and
move them down let's see we grabbed all
the four images so now we can hook them
back up into our scene like so it's just
click and drag from our landscape over
to those people and UI image views that
were above our scene and now again hold
shift and we're going to push it right
up we're gonna push these image views
right above the screen again
goodbye little guys still love you all
right there we have it so now let's go
down to our viewcontroller death swift
and we're just gonna close our assistant
editor now and go straight to our
viewcontroller swift and now we're gonna
go over to down below and our view
controller dot swift we want to create a
function and this function is going to
be called move because this is going to
move everything in such a way that
Crossy Road would like it and then we
say touches began and when the touches
begin or when you touch any part of the
screen it's going to move so we're just
gonna call that function that we just
created inside of here now inside of
this function we want to say UI view so
we're going to access the UI view and
then we're going to animate any object
that we want in this UI view with a
duration delay and options so right as
soon as you see that those options that
you have right there just fill these out
with the duration being zero point two
or if you want it to be a faster faster
movement of the bird up to up to the
next layer you can make it zero point
one or whatever you want to do I'm going
to make mine zero point two the delay
I'm going to make it zero I want this to
happen as soon as this function is
called our options I'm going to say UI
view animation options dot curve linear
now you have these four options right
here
I like linear just because it's not an
ease in and out where it starts off slow
gets fast and then it goes back to slow
or even ease in where it eases in slowly
and then ends fast so now we like just
the curve linear in this case our
animations we're just going to say open
curly braket and then click enter and it
should give you that close curly bracket
and inside of these animations this is
what we want to do with the bird
basically completion we're just going to
say nil now with these animations we
want to say self dot player dot Center
equals C
point dots scent I'm sorry CG point open
parentheses and this is going to be X so
our x value will just be self dot player
dot center dot X and our Y value will be
self player dot center dot X and then
we're also going and we're I mean this
is going to be Y sorry Y and then we're
going to subtract 50 pixels from the Y
now if you're wondering why 50
sorry about that phone call alright so
now we have so if you're wondering why
50 just go to your main dot storyboard
and right up here in the top left corner
that is your zero zero origin so you
will notice as you go down the origin
actually so when you're moving down here
you increase the y-value so it's going
50 100 150 you know that's how it works
so now if we were to if we wanted to
move up the origin we would subtract
pixels that under if you understand that
so now if we were to build and run this
right now we will actually see that our
animation will be happening and our bird
will be moving and actually you will not
see it because our bird isn't able to be
seen so let's click on our uiimageview
that we have and we're just gonna change
the background now you can add your own
image just by adding an image over into
your files right over here and you just
select the image when it's there now
build and run and you will see that your
image will load alright so now that our
image has loaded if we were actually to
click on our scene you will see that ez
is now animating up the scene now one
thing you'll notice is he goes off the
scene so we don't want that to happen
let's go over to our
viewcontroller.swift
and one thing you will notice inside of
our inside of trois erode the tap that
as you tap not only are you moving
forward but the landscape is moving
backward at a slower pace too so in
order to do this type of movement you
want to just copy and paste that UI view
duration whole thing that we just
created and you want to say UI view
animate with duration and this is going
to be one second now you can make this a
bit faster if you want I'm actually
going to change that to 0.8 seconds hour
delay will we want this to happen as
soon as it happens or it will be curved
linear and our animations now we're
going to change this animation so that
it's adding actually making the player
move down so now if we were to actually
build and run this
you'll notice well first of all it's not
gonna make any sense right now but
you'll notice he's moving up and then
he's slowly moving backwards so now
inside of this moving backwards we want
our landscape to move backwards as well
so we can do this by saying a self dot
landscape or actually say for I in 0 dot
dot dot and this will be self dot
landscape dot count minus 1 now the
minus 1 is quite important because if it
was actually wasn't there it's saying
you're going out of the array I found
that this works I don't exactly know why
it works but it does you want to
subtract one from the array as you are
counting it so now this I value is just
basically any integer and as I is
changing its going through one two three
four whatever until it hits the Emmett
the landscape dot count and then as it's
going through this eye we want things to
happen so you can easily say self dot
landscape open bracket close bracket and
we're going to say eye
so now inside of these this eye we're
grabbing the certain number out of the
array of UI image views so let's say
your image view has 20 of them and we
want to access number 15 we're grabbing
it you want you would want to say the
landscape right here is equal to 15 so
that's basically the whole concept of
what this array is except we're using
eye so as it's going through I or 0
through what a hell in there however
many landscapes there are so as it's
going through that we are changing the
value right there so we can say soft
landscape I and landscape I dot center
is equal to CG point open parentheses
and we're going to make it X equal to
soft landscape dot Center
dot X and our Y value will be equal to
self dot landscape dot center dot Y and
this time we're going to add 50 pixels
so we want this to move down
oh and so this should actually be self
dot landscape and this is going to be I
again so as it's going through I that's
what it should be so a self dot
landscape Open bracket close bracket eye
center dot X and Center dot y plus 50 so
now if we were to actually build and run
this oh well we actually we don't have
anything colored but we do have the top
four colored right down here so as we
are moving through we are actually
launching on to this top pad right there
so you'll see that it's moving through
all these landscapes now let's go to our
main dot storyboard real quick and let's
just change the color of each of these
UI image views and I will be right back
as soon as I'm done with this all right
so now that we have all of these colors
colored we can see what's actually going
on here so let's go ahead and click and
we are jumping through each of these
platforms that we have now one thing
you'll notice they're all they're all
off the screen so let's go ahead and
reset all these landscapes up to the top
when it actually goes off the scene so
we want to say right down here actually
right after all this animation stuff is
done we want to say it for I in 0 dot
dot dot a self dot landscape dot to
count open open curly braket close curly
bracket we're going to say self dot
landscape and this is going to be I dot
center first of all we want to say if if
self dot landscape self dot landscape I
dot center dot to Y is greater than or
equal to and this is going to be our Y
value that we want it to be greater than
or equal to
so we'll say if it's greater than or
equal to self dot view dot center dot y
x - so this is taking the whole scene so
if it's it's greater than the whole
scene then we want things to happen so
when what do we want to happen if we
want our landscape to be set sent to the
top of the scene and we can say say this
easily by saying self dot landscape I
dot center dot Y will now be equal to
and this is going to be equal to
negative twenty five you're wondering
will I Y negative twenty five so
actually we're driving from the center
so if you just think of it this way
we're driving from the center and
negative twenty five would be right
above the screen so now hopefully that
explained it enough to you
let's build and run and as we're going
down the scene one thing you'll notice
is that we're getting a bad exemption
code all right we need to say self dot
landscape count minus one that is
correct now now that's building run now
as we are going down the scene you'll
notice that our colors are moving up so
that's good we're getting this endless
road but one thing you're also noticing
is it's cutting off a little bit too
soon so in order to stop this we know
that we need to kind of play around with
this number right here so if it's
greater than or equal to self dot view
dot center dot Y - we'll say 100 so if
the center is equal to equal to way down
there oh it actually plus 100 sorry plus
100 it's building room you can play
around with that 100 number and it'll
change it accordingly
and now hopefully that gets it Moore's
it gets it a lot smoother as you are
jumping through the scene
so that is how that is all done we will
then randomize this later on and also
I'm noticing I am actually hopping
underneath this layer right here so in
order to fix this this is actually a
glitch that's happened quite a few times
to me so let's click on this layer and
we're just going to move him back and
forth throughout the scene and then back
to the top of the scene again and
hopefully that fixed it it's done this
quite a few times they're all fixed so
now you might actually be wondering okay
well now that this is all done what do I
do next so next in part 2 we are going
to be working on actually changing these
colors accordingly and then if a color
is that color if our person lands on
that color or anything like that we are
going to either kill our person or get
us get a point so we will work on that
in part two but hopefully you enjoyed
part one in getting this animation to
move along our scene so thank you for
watching that's it for this tutorial if
you enjoyed it be sure to hit that like
button down below and if you want to see
part 2 be sure to subscribe if you want
to see more tutorials like this for me
in the future be sure to subscribe as
well if you have any suggestions for
future tutorials be sure to leave that
down in the comment section down below
and I will see you on the next one bye
be sure to subscribe if you want to see
part 2 of this tutorial be sure to
subscribe as well just subscribe that's
it
10,000 by the end of March alright
goodbye