[Intro] Hello Fellow Scratchers! – Welcome back
to part 2 of our Particle simulation tutorial, and just in time for new year right? So we can expect
some epic new year firework shows I bet ya! – Last episode we put together some absolutely
beautiful particle effects using clones and pen – There’s a link to the video in the top right
of the screen if you need to catch up! Today’s episode is all about collisions,
how particles collide and bounce off their surroundings,
and how to add sound too :D – Boom!!! Oh yeah 😊 – This is going to look, and sound, so good!
Guys – I’m super excited to get going, so load up your projects from where we left off in the last
episode, and let’s get Scratching! [Draw a simple Level]
We’ll begin by creating a quick scene for our particles to bounce around in. Don’t do
this in the backdrop though, instead create a new sprite, naming it “Level”. We do this
because Touching Sprite sensing blocks are much faster than the touching colour blocks. Oh yeah,
make sure not to fill the background with any colour, leave that transparent. Any actual
backdrop artwork can remain in the actual backdrop costume behind everything else.
Ok, position the Level sprite at x 0, y 0 to ensure it’s correctly centred on the stage,
and then, marvel at our project’s beauty 😊 Pretty good – You’ll note the particles
are disappearing behind the Level sprite, Sprites always are drawn in front of pen.
For generic fireworks, this might actually be what you want, but when included in games,
we much more likely want the particles to bounce around when they collide with the scenery.
[Particle Collisions with Level] Click into he Particles sprite, and find
the “when I start as clone” script. This contains each particles movement in a forever loop. And
right at the bottom, we already delete each particle that touches the edge of the screen.
Well then, we can duplicate that touching check, and also check for touching Level.
Give that a test… and hmm, well *laughs*, there’s not much to see as the particles were already
hidden behind so we can’t tell if that worked… So instead of deleting the particles at
this point, let’s bounce them back upwards into the air.
First we must remember out particle is currently colliding with the Level…
so we need to move it back out first. We’ll simply reverse the last movement
in the y direction. Change y by,
with a subtract, subtracting the speed y variable.
And then, we want to take the speed y, reverse it to bounce back upwards, but also… reduce the speed
a little so each bounce is smaller than the last. Set speed y to, speed y (itself), multiplied by
-0.4. You can play around with that number to experiment with the bounciness of the particles!
Perfect – Shall we give this a test? Smash the green flag!
Oh yeah, I’m loving this! Each particle is bouncing back, and
then settling on the ground. Wow that was easy! The only problem is that after our 300 particles
are spawned, we run out of clones and the fun stops. Until, we reset the project of course.
[De-spawning inactive particles] What we are going to need to do is
de-spawn a particle when it stops bouncing and settles on the ground. That is,
when the bounce speed becomes really small. So, after we have detected a collision, we pop in
a second IF. Checking if the abs of “speed y”, the speed after the bounce, is now less than 2 then.
(The abs ensures we are looking for speed y values between -2 and 2).
And yeah, then we delete this clone. Nice, let’s test this baby out! Dropping
some particles… And wow yeah, we still get the nice bounce, but then the clones
are quickly deleted and so… we are free to keep dropping more particles and the fun
continues! Brilliant – That does look sweet. Ok, so this may look like it would be enough
for most situations, but there is a small problem, have you noticed it?
Our particles collide nicely with the ground, but watch when they hit a vertical wall…
they just disappear! We don’t have any horizontal wall bouncing implemented.
[Horizontal Collisions] Well! Usually when I code
collisions like this, I move the sprite in the x direction, test for collisions,
and resolve them right way if they do, before then moving and checking in the y direction…
But, because we needed to move in the x & y together to draw our particle trail, this method
of collisions detection was not possible. So instead, we are going to do this
a bit in reverse! Yes, we’ve already
moved in the x & y directions, and detected a collision here. But we don’t know whether this
collision was caused by the x movement, or the y movement. Let’s see if we can work that out.
Start by separating off the set speed y and following scripts.
Then after we moved our particle backwards to the previous y position,
we use an IF ELSE block, and check again to see if we are still colliding with the level.
Now, if we are not colliding, (that’s the else branch),
then we know it must have been the y movement that caused the collision,
so drop the old vertical bouncing script in that else branch.
But… if we are still colliding… then for sure we have bounced in the x direction instead…
We’d better put the y movement back again, change y position by “speed y”. And then,
undo the x movement instead. Change x by, subtract, “speed x”.
And then we can set our horizontal bounce by setting speed x,
to speed x, multiplied by, and this time -0.7 as I want the bounce to be more bouncy for these.
[Diagonal Bounce] Right! So this script will of course be going
back in here, but hold on right there… we have one more collision case we have not counted for.
What if both the x & y movements cause a collision… This is a corner case, literally.
Yeah, we need one more IF check, are we still colliding after moving in the x direction?
If we are, then, crazily, we have to re-undo our y movement, change y by negative speed y.
And then copy our original vertical bouncing code again from down here, to right under the
change y. This way we are now bouncing in both directions after a corner collision.
Finally, we can pop this finished script into the awaiting IF then.
Wow – I hope you were able to follow that! It’s was all getting a bit scripty wasn’t it!
And it’s prime time that we smashed our green flags, and tested them out.
Oh yeah, looking good. Do you see those cool horizontal wall bounces? That sure is nice.
And, I do enjoy dropping these particles from different heights – watching how they interact
with the walls and floor. [Sound Effects]
But silent explosions…? That’ll never catch on… To make this truly awesome – We’ll
need to add some sound effects. What can we find in the default
Scratch Sound library? A boom? Oh no that’s no good… Umm… Explosion… Nope,
nothing there. “Pop”, or Squish Pop perhaps? Oh gosh *laughs* really? Go on then. Let’s do this!
We should start the sound at the same time we create the clones. In the create particle script.
Drop in a start sound right at the top. Make sure not to use the play sound and
wait because otherwise the particles won’t be cloned until the sound finishes playing!
Here we go – Oh my, this really… oh my no, this isn’t good! Don’t hold down the mouse
button otherwise we get a hideous machine gun style raspberry sound! That’s because
we are starting the sound afresh every screen refresh, that’s 30 times a second. And when
you start the same sound, Scratch always stops the previous sound first. This leads
to a machine gun effect until you release the mouse and the sound is allowed to complete.
What we’ll do to stop this, is, Under the when Flag clicked,
duplicate the wait until, and have the first wait, wait for the mouse to “not” be down instead. This
means we only trigger the explosion when the mouse changes from being not pressed, to being pressed,
not all the time it is held down. And, to balance things out,
we’ll up the number of particles in each explosion, from 10, up to 100! Cool.
Pound that green flag, and let rip! Oh man, what have we created :D – I
think I love it, but I’m not quite sure ha! It certainly looks cool – Just a shame Scratch
doesn’t have some better firework sounds. [Sourcing Better Sound Effects]
But not all is lost – The internet is a wonderful resource and we are bound to be
able to find some more appropriate sounds. For example, I quite like the website “mixkit.co”.
You can search for various sound categories like “Fireworks”. Then we get a few paid premium
sounds, but under these are some very cool free samples too. If you can’t access this site, don’t
worry, I’ve created an asset project on my tutor account containing these sounds, and there’s a
link to that in the description under this video. What I’m looking for is a clean sound, a bang,
that fades out uninterrupted by other sounds. Of course we can always cut off the start of
the sample, so it’s often the last part of the sound that we’ll keep… Ah, this one – I really
like the sharp snap explosion at the end. Let’s download “Fast whistle firework”. You
can just ignore that popup, the sound will download. Great – So back into Scratch.
[Editing Sounds in Scratch Sounds Tab] Then, in the sounds tab of the particle sprite,
import a new sound, and select the “fast whistle” mp3 file.
If you’ve used my asset project, then you can just use the backpack to drop the sound
effect sprite into this project, and drag each sound into the projectile sprite one at a time.
Before we can use the imported sound, we need to edit it to
be just the part of the sound we needed. Play the sound first, and you can see the
actual snap, bang sound in represented by the second large peak in the wave sample.
So, click and drag to select everything from before that peak, and then click delete.
Test that out to make sure it’s what we wanted… Yeah nice!
And then give it a better name, bang. Right then! Clean up, and then we can
go back to coding. Switch the start sound to use the new “bang” sample…
Oh guys… Now that is what I’m talking about! How cool is that, it makes such a difference
having the right sound for the job, and it’s surprisingly addictive clicking
around the screen and hearing that beautiful crisp snap of an explosion.
[Spark sounds] Now this may be asking a bit much,
but do you think we could add some kind of tinkle as the sparks bounce off the ground?
I searched around for a potential sound, and the best I could find is under the “Sparkle” category,
within a sound named “Laser gun impact destruction”. Listen to this…
and… there! That last little spark sound. I love it!
Download that sample. And now, back in Scratch,
Upload the sound (unless you brought them in from my asset project of course).
Then, delete everything except that last spark of the sample. You may need to cut a little more
off than you think… We want to have the sound begin as quickly as possible so any delay left
before the actual sound begins must be trimmed off. You can always undo if you cut too much.
Finally, rename the sound, “sparkle” [Playing the spark sounds]
So, this sound wants to be heard whenever a spark collides with the Level.
That would be within the “when I start as clone” forever loop.
Under the first IF touching Level. Start sound sparkle.
Ok – Let’s go! Are you ready… Boom… And yeah – it’s not just you, that really didn’t sound
good did it. We just get this annoying uniform machine gun of tinkle sounds,
and it’s not at all convincing. Perhaps we need to just
play the sound less often. We could limit the sound to just
floor bounces, by moving that start sound block down to just under the delete clone block here.
Yeah, nope that’s really no different. In which case, we could try limiting
the sound to only the larger bounces. Surround the start sound with an IF, and
using a greater than operator, check if the abs of “speed y” is greater than, I don’t know, try 10.
Ohkay…! I don’t hear anything, that was obviously too much, try 3…
Right, the sound is back… And yep, we have less impacts… I think… But the sound is
still too uniformly repetitive. [Multiple Sample Variations]
I think the real issue is that we need a mixture of sounds,
and the sounds should overlap a little, not just restarting like that machine gun style issue.
The way we do this, is within the sound editor, add a 1 on the end of the sparkle sound’s name.
Then before doing anything more, make the sound a lot quieter, perhaps 5 clicks of the soft button.
Next, we duplicate the sound. It’ll automatically be named sparkle2 which
is nice. And then we’ll change this second sound by clicking the ‘faster’ button.
Duplicate again, and make that even faster! The next duplicate,
we’ll try making a bit softer. And perhaps one more, slower,
and quieter… Great that should do. Back into the code.
So where we are starting the sparkle sound, we’ll need a join block.
On the left we’ll write “sparkle” – That must match the sentence case of out sample exactly,
all lowercase for me. Then on the right,
we join this with a random number between 1 and 5, matching our 5 possible sounds.
We can click that and see the different names being listed, cool right!
So drop that into the start sound
block, and we should be good to test. Here goes nothing!
Oh yeah, fantastic – That is much improved. The variance in sound is what carries it I think.
Just to note the sound on this screen grab is not as good as the actual sounds you’ll
hear in Scratch – I think the audio conversion and compression has messed up the really high
frequencies somehow so sorry about that. What I will do is just make each of the sparkle
samples a little softer overall… [Glittering]
Ok, gosh – That is really as much as I was intending to show you today.
As an added thought, have you notices how often explosive light effects glitter as
they fall? We can simulate that too with a small tweak – You may prefer not to do this.
But see what you think – Just surround our “pen down” block in an IF,
and check if random 1 to 10 is > 3.
That will cause us to only paint a random 6 out of 10 particles each screen draw… That gives the
whole thing a random glittering shimmer effect. [Explode Upwards]
Another tweak that is cool, is to make our explosions have a small
upwards momentum as they begin. Under the create particle script,
after setting the particles speed, change speed y by an extra 6 upwards.
This then powers our explosions upwards as we click.
[Random Explosion Overview] Well, as I wrap up today,
I just wanted to give a quick overview of the changes I made to create this scene.
Obviously I added a simple gradient to the backdrop, and filled the Level in black.
Then, in the scripts, I split the main green flag script into 4. One just sets the default
variables, but the next 3, they are almost the same, each one creates a forever loop,
and waiting a random amount of time before launching an explosion. The reason this is
cool is that it creates a kind of firework show that feels more authentically timed, with gaps and
rushes of explosions that all add to the fun. You’ll note I have this “find space” custom
block – This is to avoid creating explosions overlapping the level.
I have added a medium sized circle costume that is a spacer to ensure there is room
around the explosion to make it look good. The find space block switches to this costume,
and repeatedly moves the costume around until it is not touching
either the level, or the edge of the screen. Only then does it hide again, and continue.
And that’s pretty much it… The particles are then created at the x & y position we just found.
I added a 3rd input to this block only to allow each explosion to use a different
sample so they could overlap nicely. I also, used some random Ifs to create 1
of 3 different types of explosion. From small, to large, and a special circular explosion too
for fun. [Outro]
So, I hope that just shows you some of the fun you can have playing around with this! Please do
submit your projects to the Scratch studio linked in the description, I can’t wait to see them!
If you enjoyed watching this tutorial, please do smash the like button, I’d really appreciate
it! And subscribe to the channel so as not to miss the next exciting episode.
But that’s the end of this tutorial, I look forward to seeing you again soon.
Thanks for watching, have a great week ahead, and Scratch on Guys!