How to Make FRIDAY NIGHT FUNKIN' in Scratch (Part 1)

hello everyone this is part one of how to make friday night funkin in scratch if you don't know what friday night funkin is it's a popular rhythm game that is similar to dance dance revolution where you have to press arrow keys to match the ones on the screen in this series we are going to recreate one of the levels in the original game but you can easily change the code to make your own level as well anyways here is a preview of what we are going to make with sound [Music] [Music] um [Music] and in this video i'll start by creating the arrows that the player has to press and make it so that you can easily add and edit your own arrow patterns anyways let's get started so first off i imported some images and sounds beforehand so that i can save some time so i will be starting with all of these empty sprites but i'll be putting the link to the scratch project with all of these sprites in the description below so you can follow along so i'm actually going to delete the first backdrop and have it so that this backdrop is showing all right and now i want to show our three main characters in the game so i'm going to first go to the boyfriend sprite and then show it and let's see i'm going to first grab a winfly clicked and then i'll go to looks and grab a show and then i'm going to grab a set size 2 block and i'll make this a bit smaller so i think i'll set size to something like 55 all right and i'll move it somewhere around here so that is about x 111 and y negative 66. okay and now i'm also going to show the dad sprite so i'll show it and then i'll grab a winfly clicked then show and set size to let's say uh 50 okay maybe a bit larger so 75 all right and i'll move it somewhere around here so that is about x negative 119 and y 10 okay and oh yeah i'm also going to go into looks and make sure to switch costume to its first costume which is idol one so that's it's standing up costume and i'll do the same for the boyfriend sprite so switch costume to idol one okay and for the girlfriend sprite i'm going to go to events and grab a win flag clicked then i'll show it and i'll grab a set size 2 block and set it to something like let's try 75 percent okay maybe seventy percent all right and i'll set the x and y to something like x uh 15 and y zero okay and then i'll go to looks and switch costume to idol one and i did change the positions a bit so now the boyfriend sprite is at x 139 and y negative 80. and the dad sprite is at x negative 147 and y negative 10. all right now we want to add our gray arrows to the game which is going to be at the top of the screen so inside of the gray arrow sprite let's grab a when fly clicked then let's hide the original sprite and i'm going to just grab a set size to 100 percent and let's also grab a go-to front layer so i think this size is pretty good and now we have to create a down up left and right arrow for both the left side and the right side so to do so let's go to my blocks and i'm going to create a new block and i'll call this something like create arrows and then i'll add two number inputs so click this twice and i'll call the first one start x and the second one start y and then click ok and inside of this create arrow block we are going to create four arrows of the four different directions so first off let's go to motion and then i'm going to grab a go to xy and let's drag this start x into the x and start y into the y all right and now let's grab a point in direction block and i'll start with the left one all right so let's drag that under the go to xy and we want to create a clone of this arrow sprite so let's go to control and grab a crate clone of myself and after that we want to create another arrow to the right of this one so over here so let's go to motion and drag a change x by let's just say 50 and to create the rest of the three arrows we have to copy and paste this three times so for now let's just right click and duplicate the point in direction and copy and paste this two more times all right and instead of negative 90 for the second one let's do 180 so that's down and then for the third one let's do zero which is up and then for the fourth one let's do 90 which is the right arrow all right and let's also go to control and let's grab a winning star as a clone then let's go to looks and show okay so if i go to my blocks and drag the create arrows custom block under the wind fly clicked and put something like negative 200 and 100 as our starting x and y then as you can see we have four grey arrows but we can simplify this code a bit so i'm actually going to create a new block and i'll call this something like uh clone and then i'll add a number input and i'll call this one direction and then click ok and inside of this clone block i'm actually going to drag a point in direction create clone of myself and change x by block inside of here and we don't actually need any of these blocks so we just take them out and we can just drag this direction variable inside of the point in direction and then after that let's just drag the clone block under the go to xy in the create arrows block and then add back the directions that we had earlier so that's negative 90 and then duplicate 180 and then zero and lastly we had 90. so now if we click the green flag it should be the exact same as we had before but the code is a lot simpler all right cool so now i'm going to create a few variables that might not do much right now but will definitely help in the future so first off let's go to variables and i'll create a new variable and call this something like cpu arrow start x and then i'm going to click ok and this will be the starting x position of these gray arrows for this character right here and i'm also going to create a cpu arrow start y and i'll create another one called player arrow start x and also a player arrow start y all right so now we have these four variables and before this create arrows block i'm going to first set the cpu arrow start x to negative 200 and i'm going to set our cpu start y to 100 which is the value over here and if i drag the cpu arrow star x inside of here and cpu arrow start y inside of here then the arrows should still appear over here and now of course we also want these four arrows on the right side of the screen for the player so let's set the player arrow start x to something like uh let's try 50 and then let's set the player arrow start y to the same y position as the cpu arrow start y so that's 100 and i'm just going to duplicate this create arrows block and put it after and then i'll change these two into player arrow star x and player arrow start y alright so if you try it out then as you can see we have two sets of arrows all right cool so now i do want to move these gray arrows more to the top of the screen so let's try something like 150 for the cpu and player arrow start y and all right so i think this is a pretty good position so now we should be fine and i do want to however create one more new variable and i'll call this arrow spacing and then click okay and for this variable let's drag this inside of the change x by so over here and then uh let's go inside of our stage sprite and grab a windfly clicked and go to variables and set arrow spacing to what we had before which was 50. okay however now it seems like the arrows are not exactly spaced apart even though they change x by aerospacing so to fix this let's go to events and i'm just going to broadcast a new message and i'll call this something like start game and then click ok all right and after this when flag clicked set air spacing to 50 then we can broadcast this message and then inside of the gray arrows we can drag all of these blocks under the when i receive start game alright so now if you try it out then as you can see the arrows are correctly spaced now that we have our grey arrows now we can code the moving arrows that the player has to actually press so inside of the arrow sprite let's drag a windfly clicked and let's first hide the original sprite and then let's create a new variable and let's call this is original sprite and then make sure for this one to select for the sprite only and then click ok alright so this variable will be useful for when we want the original arrow sprite not the clones to run specific code so under the wind flag clicked let's set is original sprite to yes because this is the original sprite and then under events let's drag the when i receive start game then let's create a block for creating the arrow sequences so let's go to my blocks and create a new block and i'll call this uh play arrow sequence and then click okay and let's drag this under the when i receive start game alright so under this play arrow sequence block we are going to add all of the arrows that we want to appear slowly over time and now i actually want to create another block and let's call this something like add arrow and let's add two number inputs so click this button twice and i'll call the first one arrow direction and the second one delay length and then click ok and this block will add the individual arrows both the direction and the delay between each arrow and the next and just as a reminder how this game works is that the arrows will first show up on the cpu side or the opponent's side and then that exact same pattern will then show up on the player side or our side so first off let's go to motion and grab a go to xy block and put this under the play arrow sequence block and we want the arrows to first start on the cpu side so let's go to variables and drag our cpu arrow start x okay and now inside of the y let's make the arrows start at the bottom of the screen so let's type in negative 180 and then after that we want the arrows to spawn so under my blocks we can now add arrows under this go to xy so the first input that we have to put in is the arrow direction so i'm just going to say like l for left r for right u for up and d for down so i'm just going to type in l for now for a left arrow and then for the delay length i'm just going to put in one for now alright and now to make the code actually respond to these inputs under the add arrow block let's go to looks and grab a switch costume too and let's switch costume to the arrow direction okay and since our costume names are actually l d u and r for the error directions then i can just type in l d u or r in the first input over here but anyways now after that we do want the arrows to go to its specific position based off of the direction of the arrow so let's create a new variable and i'll call this something like arrow clone offset x and then make sure to select for the sprite only and then click ok so this variable will pretty much tell where the arrow's x position should be when it's spawned so let's go to control first and grab in if else and drag it after the switch costing to and first off we want to check if the arrow direction is equal to l or the left arrow then we want the arrow to spawn right here which is actually the cpu arrow start x so inside of variables let's just set the arrow clone offset x to zero all right now let's right click duplicate and check the down arrow which is the next one so if error direction is equal to d for down then let's set the arrow clone offset x to arrow spacing because it's going to move over here and then let's duplicate this and check for the up arrow so if it's equal to u or up then let's set it to arrow spacing times 2 which is one more to the right and then else if it's equal to r or right then let's just set it to arrow spacing times three all right so now let's make the arrows actually move and go upwards so inside of control let's grab a when i start as a clone and let's first show it and make it go to the front layer and inside of motion now we are going to change x by its arrow clone offset x so that's where this variable is used and then after that let's go to control and grab a repeat until loop and put it after the change x and let's make the arrows keep going up until it reaches the top of the screen and then disappear so let's repeat until the y position is greater than let's say 180 then let's change y by the arrow move speed and for that one let's actually create a new variable so i'm going to call this arrow move speed and then click ok and let's change y by error move speed and inside of the stage i'm going to set this arrow move speed variable so let's try something like maybe five or six so i'll just say six all right and then back inside of the air sprite let's go to control and delete this clone after the repeat until all right and now we actually have to create the clones so let's drag a crate clone myself after all of this code inside of the add arrow block and then we want to actually also set is original sprite to no just before we create the clone and then set it to yes right after and that's because we want all the clones to have is original sprite equal to no since it's a clone all right so if we try it out then as you can see we have the left arrow all right cool and if we change the l to like a u for up then as you can see we have the up arrow and now let's try the down arrow okay and let's try the right arrow and all right so now we have all four arrows however if we try something like an r and then a d so right and then down then as you can see both appear at the exact same time however we don't want that because our delay lengths are one but that's because we did not add the delay yet so let's add that right now so the easiest way to add a delay simply add a weight one seconds block and then add the delay length inside of here however that's not a really good solution to it because first of all we want the delay to match the tempo or the speed of the song and it's not that easy to do with just a weight seconds block and second of all over time this is going to be inaccurate because the scratch weight seconds block isn't exactly super accurate especially when paired with music so instead of this wait seconds block let's actually add a new block extension over here and let's add the music blocks okay so instead of wait seconds we can actually use the tempo over here which measures the speed of the song and can be easily converted to beats and we can pair this up with the scratch timer which is a much more accurate measurement of time all right so now let's go to control and to combine these let's grab a wait until block and let's go to operators and grab a greater than operator and inside of here let's grab a multiplication operator and put timer on the left side and let's grab a divided by operator put on the right side and put tempo inside of the left side of this one and divided by 60. so pretty much what we're going to do is that we are going to get the beats per minute or tempo of the song and then divided by 60 to get the beats per second and then we can compare to the actual beat number based on the timer that starts every time the arrow sequence is played and this might seem a bit confusing but it probably will make more sense as we go on but anyways let's drag this on the left side and let's wait until this is greater than let's create a new variable and let's call this beat count or the total number of beats in our arrow sequence and then click ok and wait until this is greater than the beat count all right now let's drag this right before the set is original sprite to no and then since the scratch timer automatically starts and always runs we have to reset the timer right before we add the arrows okay and then after this wait until block let's go to variables and change the beat count by the delay length all right and then lastly let's set the beat count to zero right before the go to xy so before we play the sequence and now if you try it out with the right arrow and down arrow with the delay length of one then as you can see there is a weight all right cool and now we want to make sure that the arrows are following the tempo of the song so i searched up the tempo of the song that we will be using and it's a beats per minute of 120 so let's go to music and set the tempo to 120. okay and let's drag this under the win flag clicked all right and now we don't actually want the song to play when we click the green flag instead we want the song to play when the first arrow hits the top of the screen so inside of the arrow sprite let's create a new variable and i'll call this something like is first note and then click ok and under start game let's set is first note to yes and then inside of the when i start as a clone once the clone reaches the top of the screen let's check if is first note is equal to yes then we want to play the music so let's go to events and broadcast a new message and i'll call this play music and then click ok and then after that let's set is first note to no and now we can go inside of the stage and let's drag a window receive play music then let's go to sound and i'm going to set volume 200 and then i'm going to play sound and our music all right so now if we try it out then once our first error hits [Music] then as you can hear that is our music now that we have the cpu arrow sequence working now we want to play the player sequence after each cpu sequence so inside of the arrow sprites i'm actually going to create a new block and i'll call this something like switch to cpu sequence and then i'll add a number input and call this something like delay length and then click ok and then inside of this switch to cpu sequence block i'm actually going to drag these three blocks inside of here and then i'm also going to add a rest for beats block from the music and drag this on the very top okay and then i'm going to drag the delay length inside of the rest for beats block so pretty much this block is similar to a weight seconds block however it's based off of the song's tempo so now for the player arrow sequence we have to keep track of all of the arrows that were played during the cpu sequence so let's go to variables and create a new list and i'll call this something like player arrow directions or durs for short and then let's create another new list and i'll call this player arrow delay lengths and then click okay and for these two lists let's first delete all of both under the switch to cpu sequence block i'll put it after the rest for beats block okay and then inside of the add arrow block we want to add the arrow direction to player arrow directions and also add the delay length to player arrow delay lengths alright and now under the play arrow sequence let's drag the switch to cpu sequence block right before the two at arrows and for now let's just add a zero for the delay length inside of here alright and now if we show these two lists then the cpu arrows should update these lists whenever an arrow appears and as you can see they do with the right and down arrow and the one and one for the delay lengths okay and now after the cpu sequence we want to play the player sequence so to do so let's go to events and i'll broadcast a new message let's call this something like player sequence and then click ok and this will happen after all of the arrows are added for the cpu sequence and let's drag a when i receive player sequence then let's go to sensing and let's reset timer and let's go to variables and reset the beat count and let's also go to control and make sure that only the original arrow sprite is running the code so i want to check if is original sprites is equal to yes because we don't want the clones to be writing the code then we want to go to motion and set its x position to the player arrow start x now instead of the cpu arrow star x which we did before and then after that let's grab a repeat and put it inside of the if original sprite is equal to yes then let's repeat the length of player arrow directions and we want to add the player arrows so we have to loop through these two lists and to do so we have to create a new variable let's call this a player sequence number and this will keep track of what item we are currently on in the lists and then click ok and let's set player sequence number to zero before all of this and change player sequence number by one inside of the repeat loop and then lastly go to my blocks and add arrow and then we want to add the arrow of item player sequence number of player arrow directions and put it inside of the first value for add arrow and let's right click duplicate and also add the item player sequence of player arrow delay lengths for the second value so pretty much what this does is that all of the arrows from the cpu sequence are now repeated for the player sequence all right so now if i just hide these lists so now lastly let's go inside of music and let's drag a rest four beats and put it right before the player sequence because we do want a delay after the cpu sequence and i'm going to try something like two beats for now and now if you try it out then the player sequence should play right there and to recreate the arrow patterns from the game i'm going to add a few more arrows so i'm going to duplicate this and i'm going to change this to left arrow first with a 0.5 beat delay and then a down arrow with a 1b delay and then an up arrow with a 0 beat delay because there are no arrows after this up arrow and then i'm going to rest for two beats and then play the player sequence which is all of this and then after that i'm going to add another cpu sequence so i'm going to right click and duplicate this block and i'm going to switch to cpu sequence after four beats and keep in mind that right after this broadcast player sequence this block begins to run so that's why this delay is here because we don't want the cpu sequence to play at the same time as this previous player sequence so let's try like four beats over here and then for the second cpu sequence i'm going to do a left with 0.5 beats a down with 0.5 beats and then another left with 0.5 beats and a write with zero beats and by the way i tested this all beforehand using trial and error so if you want to use a different song then you might have to test it with different beats and delays but anyways after this one i'm going to rest for 2.5 seconds and then play the player sequence alright so i'm gonna test these first two sequences out and see how they work all right so those were the first two sequences and they seem to be exactly on beat with the music alright so now i'm going to add the rest of all of the sequences for the entire song so yeah right i finished creating the player and cpu arrow sequences and before i test it out let's first animate the characters a little bit so for each of these sprites let's grab a forever loop and inside of looks let's grab the next costume block and put it inside of the frog loop and then let's go to control and grab in if and so for the boyfriend sprite there are five idol animation costumes so inside of the code let's check if the costume number is greater than the fifth costume so if cost number is greater than five then let's loop back to the first costume so let's switch costume to idol one and then inside of the music blocks let's grab a rest for beats block and then put it after the if and inside of here let's create a new variable and i'll call this something like animation wait time and then let's click ok and let's drag this inside of the rest for beats block all right and inside of the stage let's also set the animation wait time under the wind fly clicked and let's do something like 0.2 for that and now let's copy this forever loop for the two other sprites so we can just drag this and then drop this inside of these two and then i'm going to put this under the switch costume 2 block inside of the dad sprite and inside of the girlfriend sprite i'm going to drag the forever loop under the switch costume 2 and we don't actually need this if because the girlfriend sprite only has the idol costumes okay and we can test everything out with the basic idol animations and the player and cpu arrow sequences [Music] [Music] [Music] [Music] all right and that was pretty much it for our player and cpu arrow sequences that we just created and as you can see the arrows went off the screen in sync with the music anyways that's it for this tutorial if you enjoyed it then give it a thumbs up and subscribe too if you haven't already in the next tutorial i'll be making it so that you can press the arrow keys for the player and i will also add specific animations for the characters based on the arrow that was hit by the way the completed version of this project is shared on my scratch profile link is in the description below anyways that's it for this tutorial see ya [Music]

Channel: Warfame

Views: 81,643

Rating: 4.8577404 out of 5

Keywords: scratch tutorial, scratch tutorials, how to make friday night funkin in scratch, how to code friday night funkin, how to make friday night funkin, scratch 3.0 tutorial friday night funkin, fnf coding scratch, how to make fnf, warfame friday night funkin, scratch tutorial friday night funkin, how to code fnf game, friday night funkin, friday night funkin game scratch, scratch friday night funkin, scratch easy tutoriakls, scratch fnf tutorials, scratch 3.0 fnf game tutorial

Id: YFDgJpKLDqE

Length: 32min 30sec (1950 seconds)

Published: Wed Jul 07 2021