 So you know how to get a sprite pointing in the direction of nothing. Easy peasy, right? Do you know how to do it using trigonometry? If not, that's exactly what we're going to be doing in this tutorial We're going to be building an enemy turret so it can eventually fire some missiles at our rocket ship to make its life a little bit more difficult We'll be revisiting a tan in the process. What's more? So I'm going to share with you an advanced animation technique called blending and it's going to make our tracking motion of the Turret look super realistic. So let's get this moving in just a sec Hey, what's up crew? It's the surfing scratcher here teacher-surfer programmer And I help curious people just like you along on their learning journeys through video tutorials If you just jump into this tutorial check out the starter project down the bottom all the cards in the top right hand corner right now We've got our spaceship flying around the screen and we need to create an enemy for the enemy We're going to create a turret. We're going to paint a sprite It's like the circle tool hold down the shift key on your keyboard to draw a nice even circle Gonna zoom in a little bit grab the arrow selection tool drag it down to the center. There you go It's snap lock. We're going to change the X in the way of the turret to zero zero and you can see it's quite large So you might need to resize it press the old key to keep that nice Circular shape going get the size that you want might need to zoom in a little bit gonna copy it paste it on top Reduce the size put it back in the center. We're just going to change the color of it Let's make it a little bit darker cool Now grab the rectangle tool and draw a rectangle Now you don't want this to be in the center at the left edge of the cannon to be in the center And then trying to line the center vertically as well. Okay, that looks a little bit funky on the screen I'm going to sandwich the cannon between these two circles just by moving it backwards. There we go Looks a little bit long. So I'm just gonna resize it there great And there's our turret now just rename it to turret make sure that your turret is pointing in the west direction So then when we change the direction of it to zero degrees it is pointing north This is to align it with our rocket ships direction Just in the code blocks of the turret now when you initialize it click the green flag Set the x and y position and just get it to point in the direction of zero and grab out a forever loop When we move our spaceship around the screen, we want our turret to point in its direction And there's a really easy block to do that motion blocks point in direction of the rocket ship So now when we move the ship around the screen the turret is directly pointing it But that's the easy way and you're not here for the easy way You're here to learn about trigonometry and some advanced animation effects. So let's go explore that I'd like you to make a new block and call it rotate turret instead of point towards You want to rotate turret and we can get rid of that point towards now We're going to be using a couple of variables to help us out with this So create a variable call it target angle grab out a set variable block and change it to target angle Now i'm just back over here in the rocket ship sprite And we can use the same a 10 function that we used in the previous tutorial for our turret So i'm just going to grab our logic here and place it directly on the turret Now i'm back inside the turret sprite and there is our block of code for an explanation of how this works Check out the card in the top right hand corner right now However, we need to modify it. So instead of the x and y velocity We need the x and y position of the rocket ship The reason is because you're going to be drawing a triangle from the turret to the position of the ship So this point is the x and y of the ship in the sensing category drop down the reporter block with two drop down menus We're looking at the rocket ship. We want the x position of the rocket ship We also want the y position of the rocket ship where it says x velocity put in the x position Where it says y velocity put in the y position and that's what the block looks like Now insert that whole code block into the variable now We want to point in the direction of that target angle now when we move our ship around the screen Our turret is mimicking that point in direction block. Boom. Currently our turret is like fixed to our rocket ship That's not what would happen in real life. It would be lagging a little bit behind it So if you're looking for a challenge, i'll show you how to do that first things first I'm going to clear off all these variables on the screen and leave the one that has target angle. There we go Currently we're pointing in the direction immediately of the target angle We want something like a lagging angle. So go ahead and create a variable called lagging angle And we're going to be setting the lagging angle We're going to jump across the sketchbook now to give you some visual intuition of how this works Over here in sketchbook. We've got our x axis going across. We've got our y axis going up and down We've also got our turret and our spaceship We've also got a little test angle that we've got here and this green line That's referring to our variable of our target angle. We're just going to make our target angle 100 degrees That's represented here by our little yellow circle segment You can see our turret is currently pointing north and that is at zero degrees and this pinkish line It refers to our lagging angle and our lagging angle is currently zero degrees And we want our lagging angle to do something that you're seeing on the screen right now So starting off with quite big movements and then those angle movements reducing in size until we land at 100 degrees To help us do this We're going to be leveraging the power of percentages to help us visualize this I've just got a percentage bar starting at zero degrees going all the way up to 100 We're just going to piggyback the values on the x axis to help us out All right, our turret is at zero degrees and let's think about this little segment here first We know that it's a slice of a full 100 degree rotation So why don't we just make an arbitrary number and say this is a 10 Slice of the current target angle to get the 10 percent of the target angle in scratch We just to get that target angle and multiply it by one tenth and that's going to come out to 10 Here on our percentage bar 10 is just equal to here So saying when x is equal to 10 that just means 10 degrees So I'm going to color in that segment to represent 10 percent of our target angle Now we could repeat this for 10 times until our lagging angle is equal to 100 degrees So we'd have 10 slices of animation But notice how they're all the same width and here the widths get smaller and smaller So this is just part of our solution to set the lagging angle This 10 percent is going to be the same every single time But look we've got this whole 90 percent to play with now We know if this little segment here is 10 degrees Well, the rest of this is going to be 90 degrees because 10 plus 90 is equal to 100 So now we know that 10 percent of the target angle is just equal to this segment right here 10 degrees So we're just to race this out now. We know that 10 percent plus 90 percent is equal to 100 percent So we're going to leverage that we're going to take out 10 percent We're going to add it To something that's going to be 90 percent which is just nine tenths And the thing that we're going to take 90 percent of is the current value of the lagging angle So we can just take 90 percent of the current value of lagging angle and the scratch That's going to look like this This is probably not making a whole lot of sense yet But let's step through each of these segments and see what the values would be Let's start when lagging value is equal to zero degrees down here lagging value, which is zero degrees times 0.9 Well, that's just going to equal zero and zero plus 10 percent of the target angle We know to start with it's just going to be 10 percent That's always going to be 10 percent for a hundred degree angle So this first segment refers to lagging values first value of 10 Okay, so let's work out this second segment now So the current value of lagging value Well, that's now 10, isn't it because this is what the current value is We want to take 90 percent of it So we just multiply it by 0.9 and that's going to come out to 9 and just to show you that on the character there 10 times 0.9 Is equal to 9 and we know that this business down here is always going to be equal to 10 So this is just 10 plus 9 So our second value is going to be 19 and see how we've only added 9 We haven't added 10 to show that on our percentage bar down here I'm just going to draw a line that is just a little bit before 20 and I've just colored that in We know that's 9 degrees because 10 plus 9 is 19 Okay, let's do one more and we're going to look at this segment here Remember this line is referring to this whole rotation now So the current value is 19 So we want 19 times 0.9 going to need the calculator for that one It's equal to 17.1 and again we take our 10 and we add it to 17.1 You can certainly do that one now we're at 27.1 degrees Notice that each time we're adding a little bit less 27 on our percentage bar is somewhere around here And now I'm just going to color that in and this segment is equal to 8.1 degrees And when we add them all together, we're at 27.1 degrees Now this will just continue until lagging angle becomes the same as the target angle What will those values be? Well, what's 100 times 0.9 or 90 percent of 100? Well, that's just 90 and 10 plus 90 is equal to 100 degrees And so down here, this is our final block that we'll use in scratch So let's head there now Let's first create our percentages target angle get 10 percent of that Then let's get 90 percent of lagging angle We're going to add those two together We're going to stick that inside lagging angle And instead of pointing in the direction of target angle, we want the lagging angle So you can see now when we move our ship around the screen Our turret follows it and it's just slightly behind it If you wanted it to be even slower Then you would say lower 10 percent to 5 percent of the target angle And then you'd increase lagging angle to 95 percent You have to make sure that these values, the 0.1 and the 9 always add to 1 So everything's all well in our game until our ship moves from north to south and south north Over on the left side of the screen, something funky really happens with our turret As I move the rocket from south to north, check out the values of these variables You can see that it went from a quite a high number to now a negative number So what's going on here is that as our spaceship goes from north to south It's crossing over a border It's going from negative 90 to 270 And when it does that, it wants to make a full clockwise rotation of 360 degrees Which would happen to our turret There we go, our turret has just fully rotated The opposite is true when we go from south to north We're going from quite a high value of 270 to negative 90 when we cross the border So we're taking away 360 degrees Which would happen to the turret There we go The way to solve this is to force the value of lagging angle when we make that cross To help us out we're going to need a new variable Call it last angle We're going to set last angle to the target angle directly after we set target angle So what this will do while we're calculating the next target angle We'll know the last angle that it was So we're creating a boundary between the two known angles And we can do something like this If our last angle is greater than a number really close to 270 And our target angle is less than a number that's really close to negative 90 But not smaller than it Then we know we've just gone from south to north And when we do that we want to take away a full 360 degree rotation from lagging angle So let's change lagging angle by negative 360 And before we do the other one let's just test it out So we're going to take this if block and insert it between where we set the target angle and last angle Now I'm just going to get our ship headed south again And our turret did its funky little animation And when we go north it crosses the boundary beautifully I just duplicated that if block and we need to change it a little bit First thing we can do the nice easy one is just take away the negative symbol Because we're going to be adding 360 degrees And we just want to switch these two variables around Change last angle to target angle And where it says target angle change it to last angle So target angle is now greater than 267 And last angle is less than negative 87 And just for cleanliness we could switch these out So when we're north and we're going south change our lagging angle by 360 Slip that directly under that previous statement I'll get rid of these comments and let's test it out Our rocket ship now moves through that boundary And our turret is animating beautifully All right you made it well done congratulations And good on you for persevering with these tutorials They're not easy but you're sticking with it and I know you can do it So currently our rocket ship can just kind of drive straight through our turret And that's probably not what we want So we're going to create a health bar and some damage when we collide with our turret And we're going to be doing a little bit of collision detection as well And investigating the sign and cause trig functions So I'll catch you in that tutorial Congrats on making it through this tutorial And I hope it bolstered your understanding of percentages along the way We're edging episodes close to the halfway point of this series But we've still got a whole heap more to get through Find some value then be sure to smash that like button And hey I'd love to see how you're getting on with this project So drop me a comment down in the section below And if you're feeling up for it also share a link to your project I'd love to see how you're tweaking it to your style But until next time I'm off to go find a wave I'll catch you in the next one