and hello everyone welcome back to
another love 2d tutorial
so in a previous tutorial we added the
player to the game so if i were to run
this
then you'll notice we have a player and
a player has
whatever we need to be able to debug the
player so you can see the center of the
player in case something isn't quite
centered correctly and we can also see
the hitbox around the player which we
can disable at any point
cool
now once that is cool and all
it still lacks a lot
thus we are now
going to be working on this right here
a little thruster that animates
and moves up and down basically showing
you that you are basically frosting
yourself
through space
so we'll be implementing that today at
least it's not as much math or
massive blocks of code as in a previous
tutorial so no need to worry
first of all we can close this main.lua
we'll be focusing mainly on the player
cool
now i would like to add two more
attributes here to frost
first i would like to add
big
flame
and the big flame will basically
determine
when we change our flame size
we'll make that false by default
and then also flame
and then 2.0
and this will just help with the
animation of the flame where it goes
from big to smaller from small to big
so that would just help with that
so first we need to actually draw
the flame
so let's create a function for that
so right here we can say
draw
flame
thrust
now you'll notice in the code i will
give you you will see this
but i actually want you to instead of
going underscores
go camel case like this
i am not going to do this because i am
following a script and i can't really
change that script now it's a little
late
however you can still change it
why do we do this because this one here
is using camel case this here is using
camel case this here is using camel case
so we want to basically stick with
everything using camelcase except for of
course
these constants
now i've already scripted it so we have
to use this but you can still change
this to be camel case i just
accidentally messed up
but that will be a function
and it will take itself
the
fill
type
so this will basically say how we're
going to fill
the thrust on the ship because this will
basically automate a lot of the drawing
process for us
and then as well as the color
now we can actually
take this
and we can copy that
and paste it here and of course add a
comma here
and we'll get to editing this in a
second
first we want to set the color so love
dot graphics dot set color to color that
was passed in because we will change we
will draw more than just the inside of
the flame we'll also draw like the
outside of the flame so we'll need to
set the different colors and whatnot
and in here we specify the fill type
which can be either fill or line
so when we use this function it will
either draw a line or fill it for us
now this will change a little bit
so here we can say self.x
minus self the radius because this will
have to be an upside down triangle
so solve that radius
times
and it's basically going to be the same
in most regards
so 2 divided by 3 a little bit different
but still relatively the same
just instead of four divided by three
we're using two divided by three because
now the triangle tip will be at the
bottom and not the top
so you say two divided by three
times
and we can take this math.course
self.angle
and paste that there
and we can say plus
0.5
times
math
dot sin
self dot angle
now you're basically throwing a
thing on its head so don't worry too
much
and we can copy and paste that so now we
have self dot y
and instead of minus this will be
a plus
so plus and we can remove that plus
there
then it's a solved radius and this
should be times
not
that two times
2 divided by 3 then math and instead of
cos
this will be a cyan for sin
and then this will be cos
so we're swapping those two
and instead of plus it will be minus
then we can
copy these two
as we can just copy the first
and paste it here
and this
should be downwards
then it's self.x minus the radius
times and this time we want to basically
sit the flame
of the thrust
so right here
that will help with the animation this
will basically draw the flame a specific
size
we can remove this whole part for that
and in between these you can say self
dot thrust
dot flame
like that
and why did i do that let's copy that
and then here we can just replace
there we go
and this will be cos
not sin
we can then copy that and do the same
for y but yet again just invert
everything so
minus will become plus
and then we're good to go we have to
return cause to send
and then we can copy these two
and we can paste them here
now they will basically be the same
thing
but this time we just go from plus
to minus and from minus to plus
there we go that should theoretically
draw or flame thrust
but we haven't tested yet it has quite a
lot of math to draw a polygon luckily
this should be one of the last polygons
we draw not the last but one of the last
now we can go to draw
now we only want to basically show the
thrust when we are moving forward
so did we include yes we did include
frosting
so only when we move forward do we want
to
show the frosting so to do that we can
go
if self dot frosting
then
and then here we can draw everything we
need
for the flame of course
now we need to check
is it a big flame or is it a small flame
because we can have two different flames
a big one or a small one
so we can go
if not self dot thrust
dot big flame
so we're checking if it's not the big
flame so if it's the small flame
then we say self dot thrust
dot
flame
and you can find all of these
right there
and we can make that equal to
itself
minus one
divided by
love
dot timer dot get fps the get fps is
just to basically
give us a bit of animation
so in this case it will be negative 1
divided by
60
and this will just allow us to resize it
for the animation
and remember this draw will basically
also run
once every frame
so you just have to remember that as
well that's how we can get this
animation rolling
and let's leave that for there for now
and just just say self
dot or not
not dot that kevin
draw
flame thrust
first we want to say fill because we
want to fill it
and next we can draw the flame color
in this scenario you can even make the
flame color change depending on its size
that's actually a cool feature you can
add in the future but for right now i'm
just going to give it a static size or a
static color so 2 5 5
divided by 2 5 5
then
1 02
divided by 2 5 5
and then 25
divided by 2 5
and this will give us
almost red color
now if we save this
i wonder if we'll be able to run it
attempt to index field thrust a nil
value
so let's quickly just
comment this out before we continue
and as you can see we have a flame it's
not really animating
but we do have a flame and that's what
basically what we are drawing
and it only appears when we're moving
forward so when we're frosting
so that right there if frosting
cool now let's draw
the outer line of the flame before it
continues itself draw
flame thrust and instead of fill the
stop we will say line
and now you'll notice why i did it like
this
and not just put it here because we're
going to use it two times so why have
that code twice when we can have it once
and then we can set the color and this
time just to give it some variety but
usually you should stick with one type
so if you're using rgb like that then
you should keep it like that but this is
just to show you you can have multiple
so one
zero point one six and zero
now if we were to run this
you'll notice it has a little bit of an
outline
not very noticeable but it does give it
a nicer feel
cool
now we can start resizing it and making
it feel pretty cool
and here is basically where our problems
began
they should be thrust
like that so i kind of messed up the
spelling there
and if we were to just run this
you'll notice the flame just kind of
goes weird
because this resizes the flame that's
actually kind of cool
that's like a sword i like that
anyhow
so
this basically resizes it to b come
smaller
because if we're saying big flame we
want it to become the bigger flame
now to make that happen we can go here
and say
if self dot thrust dot
flame is less than 1.5 so if the size
has gone to smaller than 1.5
then
self.thrust dot big flame because we
want to make it start giving the big
flame why do i constantly did i misspell
this somewhere no
frost there we go
and then
big flame
equal false so basically once we reach a
certain size we want to start growing
the flame so we're making big big flame
equal to false
i mean true not false
because we want to start changing the
big flame or to the big thing so it can
start becoming bigger so now if we start
flying
you'll notice at some point it stops
shrinking because we're not calling that
anymore to make it continue shrinking
because of this right here because we
only run this if this right here is
false in this scenario it's true and by
default it's false
now we need to do the opposite
to get this to grow again
so we can say
else
and there shouldn't be no colon this
isn't python
and now inside of this else we can copy
this
just paste it there
and now instead
of going minus 1 to decrease it we
should plus 1 to increase it and
remember we're dividing it by 60 so it
stays small because
1 divided by 60 is pretty small if we go
here
and one divided by 60
there you go so it will basically
increase with this amount
of course you could put a specific value
in here but this will also make it grows
shrink depending on the fps
not the best way to do this i would
recommend instead using dt
but we can maybe try that later
and in here instead of 1.5 it should be
2.5 and then false
so once it's size reaches 2.5 and it
should be more not less than
then we should turn this to false and it
should start doing this one again until
the flame is a specific size
the small size then we change back to
this one
and we're doing that toggling with this
right here
setting to true or false and in here
we're checking if it's true or false and
executing depending on the size
or depending on if it's true or false
now if i were to run this
you can see it now grows and shrinks
now you can make it grow and shrink less
it's up to you how much you wanted to
grow and shrink
to me i think that's a nice amount to
grow and shrink but you know everyone's
eye will be different and feel different
about it
now one thing i also want to do because
that bothers me quite a lot
when we move this ship
like this and it goes off screen
i can't get it back
unfortunately it is now gone forever i
don't know how to turn that ship around
and get it back the right way so
what we should do is we should implement
something to fix that
now to do that let's go all the way down
to right underneath this and we can say
if
self.x
plus self
dot radius
is less than zero
so self.x plus the radius
so let's actually open up my drawing app
here because this i can explain pretty
simple math
so here's self.x
right here in the center of the circle
now the radius
would be from this part to this
so let's actually draw a bitter circle
so here we go
and then there now the radius would be
from here to here
and you might be wondering why i'm
drawing a circle
the reason for that is
as you can see the collision detection
it's a circle this also allows us
to get this right here
now if we say plus it's going to add
these and give us this position right
here so let me actually mark down the
red this position right here
now when this position
goes off screen
so if this point right there
goes to behind this here so off the
screen speed where we can't see this at
all anymore
we want to make the ship
come out from this side so now it's
going to come back here so the ship will
start flying here imagine this is the
ship
because the ship's radius
no longer on the x-axis can be seen so
we can just as well bring the ship in
if you want to make it more complex and
you think you have the guts to do that
you can make the ship start getting
drawn
once it has reached halfway or even make
the ship gets get drawn immediately once
it reaches in here but that's some math
i do not want to bring into this video
anyhow
so let's do that
so i can say
if all right wait where is it f7 so self
dot x and we now have to change it
because it went away here so we now have
to make it come back here
so that will be equal
to love
dot graphics
dot get with
and we say this specifically
because remember the window
plus its width
is this part of the window so it's going
to be the end of the window
and then we add plus self dot radius
this just makes it look more natural
once we get here
because they will come in more naturally
instead of just poop appearing
but of course you can make this more
complex and make it work cooler
so let's see if that works
oh gosh that's a weird bug
anyhow here we go ready
oof
get with cannot call it
and that should be a dot my glasses
obscure my vision my bad
now if we try it
let's see
and there we go it looked normal
the reason it looked normal was because
we made it only start
appearing there once we've reached
with the radius so it will add a radius
to it and then it will appear so look
more natural but of course if you were
to remove this
then it wouldn't look as natural it
would just kind of plop into view so if
we go here
pop
it looks natural but it still pops into
view so it's not like it's animated or
anything it's just
pop
so it's not the same
anyhow so there's self.radius
now we need to make it do the same for
all of the sides so we did this side but
we need to do this side as well
so we can just say
else if
and we can specify self
dot x
minus
self dot radius
we're minusing this time
because
here we have our ship and here's the
port
now we're minusing the x so it's going
to go here
so this is where we're checking now
and now we're going to check once it
goes out of the screen here
if this part is no longer in the screen
that we can see so in the window it's
going to start appearing here the ship
will start flying here again
so it's the same thing but this time we
check for this side instead of this side
and we check for this side specifically
where it comes in here instead of the
other way around
with this map i highly recommend playing
with it because believe me it can boost
your understanding of a lot if you play
with it
and since we know this gives us the end
of the window
we can just go if it's more than this
and now we can just copy this self.x
and actually we don't even need to we
can just say self dot
dot x
is equal
to
negative
self dot radius
because here we added the radius
but now it should be zero
minus the radius so you could say
zero minus out the radius but that
wouldn't make a lot of sense since by
default negative radius would be so if
you say 0 minus 30 that will give you
minus 30. but if you just said minus 30
it will still give you -30
anyhow so now we should be able to go
with both screen so if i go here or both
sides
there we go there we go this side there
we go
so that's pretty neat
we can do the same for y by just copying
and pasting
and then transforming all of this to y
instead of x
we can still add the radius because now
the radius will add it downwards and
upwards instead of left and right
and instead of get with we now have to
say
get height
and this will basically do everything
for us now we go here
bloop
now i can turn it around
now we can't go off the screen which is
nice
because we don't want to go off the
screen we want to keep coming back
and that is all for today's tutorial
i hope you all understood
and that you will be following along
with the next tutorial we will be doing
something even cooler
we'll be adding more states to the game
so just like with the previous game we
made but this time it's going to be more
complex
much more scalable method
and yeah
thank you for watching
i hope you understood
and i will see you all again in the next
love 2d tutorial
so
you