Circular Shooting! (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 circular
shooting with swift in Xcode using
sprite kit so let's go ahead and get
started alright so first thing we need
to do is open up Xcode and create a new
Xcode project this will be a game click
Next the product name I'm just going to
call mine shooter and although you can
call this whatever you want our language
will be set to swift and our devices
will be set to iPhone and our game
technology will be sprite kit not same
kit as that is 3d click Next and create
and now let's make this a bit bigger and
we're going to head right into the game
scene dot Swift now inside of here I'm
going to delete my label that I have in
my did move to view and then I also have
inside of my touches began we have the
four touch in touches and the let
location equal touch that location and
note we're going to keep that and delete
the rest of the sprites that we have
right here so delete that so I guess
let's head over to Pixelmator or
basically whatever editing software you
use Adobe Illustrator but I prefer
Pixelmator for simple tasks like this so
I'm just going to say create new image
and this is going to be a width of 300
and a height of 300 although you can
make this a bit larger if you want I'm
just going to keep it as 300 by 300
click OK
and the reason you might want it to be a
bigger pixel density is if you're
programming it for the iPad because then
you want a really pixel dense image so
that you can have everything shown
properly and not pixelated on the
display so now let's hop right into here
and I'm going to add a circle this is
only gonna take a second so if you're
not using Pixelmator then don't worry
about it but I'm basically making a
circle and then I'm going to take out
the background and now I have this
circle I'm going to file export and this
is going to be a PNG make sure it's a
PNG that way you don't have just a
square whereas if you exported it as a
JPEG it would just give you a square
white box now you need to click PNG just
so that you keep that ball shape so now
click Next and we're going to export
this as a ball that's the name of our
file now click export and replace so now
we have this ball that I created it's
just on the desktop here so I'm going to
go back over to my shooter Xcode project
and make it a bit smaller and inside of
our shooter Xcode
we want to go over to images XE assets
and we're going to click and drag this
ball into the images XE assets right
here now inside of this ball if you
wanted to create two different images
one that has 300 by 300 or and then you
wanted 600 by 600 and then one that had
900 by 900 you would click and drag all
three of those images inside of your
ball here and then it would
automatically figure out which device
the person is using and use the image of
the ball accordingly so if we were using
the pixel dense iPad we would go 3x
otherwise we're going to go with 2 X or
1x hopefully you get the gist of it now
let's head back over to our game seemed
up swift and inside of this we're going
to go to our did move to view so now I'm
gonna make this bigger again and inside
of our game scene dot Swift and I'm just
gonna make and I'm just gonna make this
a bit bigger again now inside of our
game scene dot Swift first of all I want
to create the person who was shooting
the balls now in this case I'm going to
have a bigger ball shooting the littler
balls so I'm going to go right above the
did move to view and create the main
ball so I'm going to save our main ball
will be equal to and this is going to be
an S case bright node open parenthesis
and this is going to be an image named
open open quotation mark close quotation
mark ball and this ball that you see
right here is actually going to be on
our images XE assets as you can see it
is named ball so let's head back over to
our game teasing dot Swift and I'm just
going to say in the case we did move to
view we want to create our main ball so
we're going to say the main ball dot
size will equal and we're going to make
this equal to a CG size with a width of
100 and a height of 100 so basically
this main ball is now going to be a size
of 100 pixels by 100 pixels now we want
to set the position for this ball and
I'm just going to say main ball dot
position equals and we're going to say
CG point open parenthesis and this is
going to be an x value of frame dot
width divided by 2 so it's grabbing the
center position of our x position and
then we have the Y value which will be
our frame dot
right / - so this is going to place it
right in the middle of our scene and now
we need to add this main ball on to our
scene so we're gonna say self dot add
child and this is going to be our main
ball now if we were to build and run
this all you would see is our main ball
so as you can see we have our main ball
right here now when I click nothing
happens right now because we haven't
programmed anything to shoot out of the
main ball so let's go ahead and do this
so inside of our touches began right
instead of this four touch in touches
and let location we want to create
another ball and this ball is going to
shoot out of the main ball that we have
so I'm going to save our small ball and
this is going to be equal to an S case
sprite note open parentheses and this is
going to be an image named open
quotation mark close quotation mark and
inside of this we're going to have the
image named ball so now we just created
the sprite now we need to set the
position for our sprite so I'm going to
say small ball dot position will be
equal to and we're actually going to
make this equal to the position of our
main ball so we're just gonna say main
ball position and now we need to create
the size of our small balls so I'm going
to say small ball dot size will be equal
to a CG size of our width will be just
13 and our height will be equal to 30
and now in order for us to get the small
ball to shoot out of the main ball we
need to say small ball dot physics body
will be equal to an SK physics body open
parenthesis and this is going to be a
circle of radius and we're going to
actually take the small ball dot size
dot width divided by 2 so we are
dividing the small ball dot size over
those 30 pixels of width and dividing
that by 2 and making a circle out of
that radius and next thing we need to do
I'm going to say small ball physics body
dot affected by gravity now you might
want this you might not I like it
because it's just adds a kind of physics
and it makes a game harder so you can
say it's not affected by gravity equals
true or if you just wanted to shoot
pretty much straight you want to say
false and now we need to add this to our
scene so we're going to say self dot add
child and this is going to be small ball
so if we were to build and run this
right now you will see that our F ball
will be affected by grass
so if I click right now it adds the ball
onto our scene like so but as you can
see it's not following the position of
my map or basically the position of my
touch so I need to go over to the Xcode
project now in order for us to actually
hit the place in which we need to go we
actually need to create a vector so this
takes a little bit of math but it's okay
it's a really easy so we need to say var
and this is going to be the X direction
so I'm going to say DX will be equal to
a cg float so it doesn't need to be a
perfect number open parenthesis and this
is going to be our location dot X minus
the main ball dot position dot X so
we're basically taking the difference
between the location X and the main ball
position X so we're subtracting those
together and then we're going to make a
vector out of this to find the perfect
place at which we should launch our ball
so we need to find the y direction now
and to save R and D Y will be equal to
and this is going to be equal to AC G
float and this will be location dot y -
the main ball position dot y and now we
need to find the magnitude of our vector
so we're going to say let magnitude do
equal so if you haven't studied how to
calculate the magnitude of a vector it's
actually very simple you basically take
the square root of DX squared or the x
squared plus y squared so we're going to
say square root or sq RT open
parenthesis and this is going to be our
DX times DX minus the dy times dy and
close those parentheses and now we're
going to take the X direction and the y
direction and divide that by our
magnitude so we're going to say DX
divided by equals magnitude so at DX /
equals magnitude so divided by magnitude
and then dy divided by equals magnitude
like so and now we're going to take this
vector that we created and turn it into
a CG vector so we're going to say it let
vector equal a CG vector open
parenthesis and this is going to be a DX
so our DX value or a direction of X
value if we will actually be equal to
16.0 x DX so the 16 basically means how
hard of an impulse would you like to
have so if it was a 3 it would be kind
of a very small impulse and if it was a
16 it would be a high impulse so now we
need to change the dy value equal to 16
point 0 times dy you want to make sure
those two numbers are the same or else
you'll get wonky gameplay and now we
need to go down here and we're going to
say small and ball dot dot physics body
dot apply impulse so we're going to
apply the impulse of this vector that we
just created and I just realized I made
a mistake here this should be let
magnitude equal the square root of DX
times DX plus not minus dy times dy so
let's build and run and now as you can
see I can click and there I have my ball
shooting out now if you want a stronger
force you would need to change the DX
value to let's say 30 in this case and
the dy value will be equal to 30 as well
now let's build and run and now if I
shoot there is my vault coming out now
if I didn't want gravity to affect this
I can say gravity affected equals false
and if I were to build and run this you
will see my ball shooting out like that
not affected by gravity 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 from me in the
future be sure to subscribe anyway I
will see you in the next one