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]
um
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
and cpu arrow start y then
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
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
then we can broadcast this then inside of the gray arrows
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
and i'll call the first one direction and the second one
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
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
and then let's duplicate this and for the up arrow
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
to like a u for up then as we have the up
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
so i searched up the tempo of the that we will be using
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
and now we don't actually want the to play when we click the green flag
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
inside of the rest so pretty much this block is similar to
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
so let's go to variables and create new list
new list
and i'll call this something like player
arrow
directions or durs for short and then
let's create another
let's create another and i'll call this player arrow delay
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
let's drag the switch to cpu block
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
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
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
player sequence number of player directions
directions
and put it inside of the first value for
add
add and let's right click duplicate and also
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
a down with 0.5 beats and another left with 0.5 beats
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]
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]