Pop the Lock! (Part 1 : SpriteKit : Swift in Xcode) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

hey what's going on everybody today I'm
going to show you how to do pick the
lock with sprite kit using Swift with
Xcode so let's go ahead and get started
alright so first thing I'm going to do
is open up Xcode 6 now I am using Xcode
6 although Xcode 7 is out I am
downloading Xcode 7 at the moment so in
this I hope to demonstrate the
differences between Swift and Swift 2
now I also did program this in the Xcode
7 beta so you should be good if you're
following along in Xcode 7 or Xcode 6 if
there are any changes I'll be sure to
address that in part 2 of this tutorial
let's go over here create a new Xcode
project and this will be a game click
Next our product name I'm just going to
call this picker lock you can of course
call this whatever you want our language
will be set to swift enter game
technology will be sprite kit and our
devices will be universal click Next and
create now let's go ahead and make this
a bit bigger and let's go ahead and
create our characters so I use
Pixelmator to create my characters but
you can use of whatever you want let's
say create a new image I'm going to make
the image a 1000 by 1000 image this will
be the circle that you see on the game
so 1000 by 1000 click OK then I'm going
to take in a licks lips shape I'm not
going to go through too many of the
steps to create graphics you can of
course do that all by yourself and
you'll figure out how to do it so now I
have my circle right here like so I'm
going to change the stroke to bigger
like that and that should be good and
then I'm going to also delete the fill
now let's go ahead and delete the
background and I'm going to say file
export and this will be a PNG PNG I'm
just going to export this as my circle
you can of course call this whatever you
want now let's go ahead and say file new
and this will be our person so the width
of this person will be equal to 200 and
the height of it will be equal to 50 now
you can make these shapes bigger or
smaller if you want we actually program
eclis change the size of them so it's
okay so right over here we have this
person I'm just going to click and drag
a rounded rectangular shape right onto
it like so and then I'm going to delete
the stroke color add the fill color and
I'm going to delete the background layer
that I have created I'm going to say
file
X
and I also want to make sure that this
is a PNG or else you will get the white
background now let's go ahead and say
next and export this as our person the
naming of these files are pretty
important as you actually use them in
the programming itself now let's go
ahead take these two images that we
created and just drag them into our
project file now inside of this project
file you can go ahead and I'm just going
to head over to my project and minimize
that
so now inside of my project right here
I'm going to go over to my images deck
see assets as you can see right here and
right inside of this I'm just going to
take these two images and put that right
inside of there so now we have our
circle and our person inside of our
images XC assets now let's head over to
our game scene dot Swift and inside of
this I'm just going to delete everything
that's inside of my did move to view and
also everything that's inside of my
touches began now first thing we want to
do in this case is create our people so
in this case I'm going to save our
circle we're gonna make this equal to an
S case bright node open parentheses
close parentheses then I'm also gonna go
down here and I'm gonna save our person
will be equal to an S case bright node
open parentheses close parentheses as
well now inside of the did move to view
this is where I'm going to set up the
circle and the person for real and so
I'm going to say if circle will be equal
to and I'm going to make this equal to
our SK sprite node open parentheses and
this will be an image named open
quotation mark close quotation mark and
this will be our circle image that we
created inside of our images XE assets
now we also need to set the size so I'm
going to say circle dot size will be
equal to a CG size open parentheses I'm
going to give this a width of 300 and a
height of 300 like so now we need to set
the position of our circle so I'm going
to say Circle dot position will be equal
to a CG point and then open parenthesis
and our x value will be equal to AC g
rect and get mid X and essentially we're
grabbing the center x value from our
self dot frame which essentially is just
our view so now we are grabbing the x
value perfectly and then we can also go
into our Y value and say cg rekt get mid
Y like so and this we're gonna type in
self dot frame
so now we have it perfectly centered on
our scene and then after this I'm going
to add it to the scene so I'm gonna say
self dot add a child circle like so now
if we were to build and run this so as
you can see we have the circle in the
center like so and now let's go ahead
and add the person so I'm gonna go in
here and I'm gonna say person will be
equal to an SK sprite node open
parenthesis and this will be an image
named open quotation mark close
quotation mark and this will be our
person close that off and I'm also gonna
say person dot size and we're gonna make
this equal to a CG size open parenthesis
with a width of 40 and a height of 7 you
can of course change this to whatever
you want now let's go down here I'm
going to set the position of it so I'm
gonna say person dot position will be
equal to a CG point open parenthesis and
this will be an X value of our self dot
frame dot width divided by two and then
I down here our Y value will be our self
dot frame dot height divided by two as
well and now let's add this on to our
scene so I'm gonna say self dot add
child and this will be adding the child
of our person now let's build and run
and as you'll see we have a perfectly
position in the center of our scene but
we want it right up here so in order to
do this let's head over to our Y value
and right after this / - we're just
gonna say plus 112 now you can of course
adjust this number I will probably
adjust the number if it's wrong but plus
112 and that should get it somewhere on
the center there now let's go ahead and
rotate this before we adjust any further
so I'm gonna say person dot Z rotation
we're gonna make this equal to 3.14 or
essentially we use radians inside of
programming so 3.14 divided by 2 would
be equal to a 90-degree angle so we're
going to say 3.14 divided by 2 and build
and run and now we have this like so now
you can of course change this so this
let's say this is 122 and that's pretty
much perfectly positioned I'm gonna
bring it down slightly more and now we
have that perfectly positioned on our
scene so let's head back over here to
our project and now we want this person
to follow a path around that circle now
there are other ways to use this but I
prefer the way of using a UI
see a path so let's go right up here and
I save our path will be equal to a UI
bezzie a path open parentheses close
parentheses like so and now to make this
person follow this path let's head over
to our touches began and right inside of
here
we first want to create a variable so
let's go up here to the top here I'm
gonna save our game started we're gonna
make this equal to a bool value like so
so now we can tell whether the game has
started or not so if the touches begin
when the game hasn't started we can say
if the game started is equal equal to
false so the game has not started so
this is the first time we're pressing it
then we want to first do this and then
after this we can say else if the game
started is equal equal to true then we
can run this other stuff now what do we
want to happen as if the game started is
equal equal to false
great question we're gonna go right down
here and create a new functions this
function will be called move clock wise
open parentheses close parentheses so
it's going to move clockwise if this
function is called open curly braket
close curly bracket now we also need to
create a sunken function in within the
which that it will move counterclockwise
so we're gonna just call this function
move counterclockwise like so now what
do we want to happen when it moves
clockwise so let's head back over to our
project real quick and I'm just gonna
try explaining this now if you're
familiar with trigonometry in order to
calculate the position of our person we
need to get the DX value or the Delta X
value and the Delta Y value and then we
need to divide the Delta Y value divided
by the Delta X value so this all really
makes sense once we put it into practice
but essentially this dy divided by DX is
going to give us the Radian at which the
person is already on the circle so let's
head back over to our project right now
and let's go over to the move clockwise
so we're going to say VAR DX or the
Delta X will be equal to and we're gonna
make this equal to our person dot
position dot X minus our self dot frame
dot width divided by two for our dy
value we're gonna set this equal to
var and I'm just going to copy and paste
our D X so our VAR d Y value will be
equal to var D
why for our person deposition dot - why
- our self dot frame dot height like so
/ - so now we have all of this working
and right down here we're going to
calculate the Radian at which it is on
the circle right down around here so
we're gonna say var Radian will be equal
to and we're gonna make this equal to an
atan so essentially arc tan and we're
going to arc tan these two variables
that we have these two variables will be
dy and DX now you want to make sure that
they're in the specific order of dy
first and dy DX next or else you're
gonna get some funky things going on now
let's go ahead and create a path B
according to where this person is
positioned so we can save our path will
be equal to and we're gonna make this
equal to a you I busy a path open
parentheses and this will be an arc
Center our arc Center will be equal to a
CG point so just type in CG point open
parenthesis our x value will be equal to
our self framed width divided by 2 and
our Y value will be our self dot framed
height divided by 2 so now we are taking
so essentially we just put the center in
the middle right here and then we're
going to build a circle around it so now
let's go over to the radius now the
radius should be equal to 120 now I'm
putting 120 because that is where a
person dot position Y value is so we're
essentially creating a circle right
around where our Y value for a person is
now we can go down here we're going to
say our start angle will be equal to our
rad or the Radian that we created and
then our end angle will be equal to rad
rad or the Radian plus ACG float value
for our pi so I'm going to say cg float
m underscore tie and then we're going to
multiply that by 4 so that we can get a
complete circle now I did try this with
3.14 times 2 which essentially would you
think would do the same thing but this
is the only way that I've found that
actually creates it in a perfect way so
we can say radian + cg Flo M underscore
PI times for clockwise we're going to
set this equal to true so it's basically
going to create this path in a clockwise
direction it really doesn't matter
how that is done now let's make some
person follow this path so I'm going to
say let follow and then we're gonna make
this equal to an SK action dot follow
path and you want to make sure that you
did the one with path offset orient to
path and you could do the one where it
says time but I like speed a little bit
better now for the path that we follow
and actually this should be not a VAR
path we're actually just editing the
path that we created up here so our path
will be equal to a UI Bizzy a path like
so so right down here we're going to say
let follow equal SK action to follow
path and we're going to follow the path
that we just created dot cg path so our
core graphics path that is created via
that path that we created hope that made
sense as offset we're going to set this
equal to false we don't want the person
to be where the path originates from
oriented path we'll set this equal to
true as we wanted to turn as it's going
around the circle and our speed we're
gonna set this equal to 200 of course
you can change this to whatever you want
now let's go down here and I'm just
going to say person dot run action this
will be an SK action dot repeat action
forever so we're gonna repeat this
action that we just created follow for
ever and now this function right now is
actually not being called so let's head
over to our touches began I'm just going
to type this right into our game started
equals equals false so just say move
clockwise and now if we were to build
and run this you can press on the screen
and it automatically moves
counterclockwise so yeah if you want
this to actually properly follow it in a
clockwise direction you need to go down
here to person dot run action and right
after repeat action forever you need to
go down here and to save dot reverse
action or reversed action so let's build
and run this and now it's going to be
the exact reverse of that action that we
just created so now it's going to move
in a clockwise direction
now we need to move this in a
counterclockwise direction as well so
let's just go ahead and copy everything
that we have inside of our move
clockwise and just paste that right
inside of our move counterclockwise
direction
then all we need to change is person dot
run action and then just delete this
part right there now one thing we need
to do right now is to tell whether it's
moving clockwise
let's go up here and I'm gonna create a
new variable so right up here I'm gonna
save our moving clock clockwise I'm
gonna make this equal to a bool value
open parentheses close parentheses so
this will allow us to tell whether it's
moving clockwise or not so right up here
inside of the game started we can see
that it is moving clockwise so alongside
inside of this game started equals
equals false we want to say moving
clockwise and we're gonna set this equal
to true so it is moving clockwise now if
the game has started we already know
that it is moving clockwise so we're
gonna go right inside of here and we're
gonna say if moving clockwise is equal
equal to true then we want to run this
stuff in here so if it's moving
clockwise then we want to reverse the
direction and say move counterclockwise
and we also want to say moving clockwise
and we're gonna set this equal to false
and now we want to do the exact opposite
that we just did there and to say else
if our moving clockwise is equal to
equal to false open curly braket close
curly bracket then inside of this we can
say move clockwise so now it's going to
move clockwise if it's already moving
counterclockwise then we're going to say
moving clockwise and we're gonna set
this equal to true we also forgot to add
right inside of this first self if
statement inside of our touches began we
want to say game started and Rina set
this equal to true so the game has
started so now we want to focus on this
else if statement down here now let's
build and run this and now we can click
on the scene it starts clockwise then we
can click again and it goes in the
opposite direction like so and you can
just keep on going thank you all so much
for watching if you enjoyed this
tutorial be sure to hit that like button
down below and if you want to see more
tutorials like this room in the future
be sure to subscribe if you want to
support the channel even further you can
head over to patreon calm but either way
thanks again and I will see you next
you