[Intro] Hello fellow Lemons!!! Welcome to another
mix it up Monday tutorial - I’m griffpatch, and today we are going to start a little project
based loosely around the classic game Asteroids, but well… far more over the top. As you
can see, Lemons have achieved interstellar capability and are attempting to take over
the universe. To tackle such a scenario we obviously need to fight back with rapid fire
lemon busting lasers! So, what’s the coolest thing we’ll learn while making this game?
That would be how to handle loads of rapidly moving projectile clones and enemies, and
how to robustly handle the collisions between them. As a bonus we’ll also tack on some
cool special effects including damage flashes, explosion flashes and the much sort-after
camera shake! Today we are covering the basic player design,
movement and shooting of laser projectiles towards the mouse. I’m also interested to
know how many times I can say the word lemon in one episode – lemon lemon lemon!!! Were
you counting? Ok let’s get Scratching! [The Player Sprite]
We’ll begin with the player’s spaceship sprite. I’ll politely discard my pal Scratch
Cat, and create a new sprite in its place. We need to draw a ship that faces right (that’s
the direction we almost always need to make sprites face to begin with, and I often forget
and end up drawing it facing up!). We can use a rectangle, holding shift as we draw
it to keep it perfectly square, then switching to the shape tool, select one corner node
and click delete to make a perfect triangle. Now using the selection tool again, I can
rotate the triangle, but again holding the shift key while dragging so as to rotate by
exactly 45 degrees. Ok, next trick, grab the top resize node and hold down Alt as you drag
down, this resizes the object around the middle – very useful. Next I drag the triangle
until it snaps to the centre of the canvas. It’s important to do this so that the ship
will rotate beautifully around it’s middle point. But then once centred, I then drag
it to the right a little while holding down the shift key. This lets me move it without
it being allowed to move up or down so it stays snapped to the middle in the vertical.
And there’s more tricks yet, Hold down the Alt key again and then left click and drag
the triangle to create a perfect duplicate… but while still dragging now hold down the
shift key, and pow the shape is snapping to stay lined up with the previous shape. I’ll
colour it lemon yellow, this ship is already looking cool! I think I’ll drop the border
thickness down a touch. Right, I didn’t name this sprite, so let’s
name it Player now. Next, we can make the background nice and
dark by switching to the Stage. I’ll convert it to bitmap, and fill he entire screen with
a colour that is almost, but not quite black. [Player Movement]
Ok, back to the Player sprite, and let’s fill in some code.
It’s going to be a basic game loop this time. We’ll set it up with a when green
flag clicked, bring the player to the front of all the other sprites, and go to the centre
of the screen. We’ll want our ship to have smooth movement,
so we’ll need to keep track of it momentum, that is speed. Make two new variables named
“speed x”, for this sprite only, and “speed y”, also for this sprite only. And we’ll
be very good and set them both to 0 before the game gets going. Always good to reset
your variables like this at the start of the game.
Now for the game loop, bring in a forever loop.
So what shall we do first, how about left and right movement. We can do this so many
ways, but the pattern is always similar. I’m going to make a new custom block, naming it
move x, adding a numeric input “joystick x”. People ask why I use so many of these
custom blocks. The truth is we don’t always need to, but one huge advantage is that they
break up your code into nice chunks, and give each chunk a nice name. That can be a life
saver when you come back to a project later and want to find something. It’s just so
much more readable. We’ll use the “move x” block right away,
and I’m going to use the same key pressed trick we did in some of the other tutorials
of putting the key pressed blocks inside a subtract operator like this. Either we can
have right arrow pressed subtract left arrow pressed… or, as I’m going to do now, key
D pressed subtract key A pressed. This beautiful little trick will give us -1
for left, 0 for no movement, and 1 for right. That’s really useful.
Ok – So the joystick x input here will now, as we just said, be -1 for left, and 1 for
right. Let’s use this to change the player’s speed x variable, specifically by 0.9 multiplied
by joystick x. The 0.9 here is the players acceleration, feel free to create a variable
to hold that value if you prefer, but I’m just being quick today.
Next up, we set speed x (yeah, not change this time), to 0.9 multiplied by speed x.
This is not the same 0.9, this one is for air resistance to slow the player back down.
With the speed variable now updated, we can change x by the speed x to get the player
moving on the stage. Let’s give it a quick test, Run the project
and press the left and right keys (whichever you assigned). That’s a nice feel – cool.
We can do the same for up and down. Make a new custom block, move y with an input
of joystick y. This code will be just the same as for the left and right. Change speed
y by 0.9 multiplied by joystick y. set speed y to 0.9 * speed y. and
finally change y by speed y. We can pop the new “move y” block into
the forever loop, and pass in key w (or up) subtract key s (or down).
Let’s test that again to check we have full movement now, yeah beautiful. All we need
now is to rotate to point towards the mouse cursor.
This is going to be quite a fast paced game, so I’m not going to limit the speed of turning,
so it’s really easy, just drop in a point towards mouse pointer and we’re done.
Yeah… I like that a lot. [The Laser Sprite]
Now we are facing the right direction, we need to be able to fire those lemon bursting
lasers! Make a new sprite, naming is Laser. We can start by zooming in and drawing a long
rectangle, remembering to snap it to the centre of the canvas again. I think a fill colour
of white, but with a lemon yellow outline looks neat. Next I’ll round the ends of
the laser beam with the shape tool. Just click to create new nodes on the top, bottom and
mid right edges like this. Now we can click on the corner nodes and press the delete key
to remove them leaving a not half bad rounded end. Do the same for the left end.
To finish it off, I’m making the border a but thicker, size 2, and now to ensure the
laser is drawn correctly I’m going to draw a completely transparent rectangle around
the entire shape… This is not crucial, but it helps to ensure the laser’s edges are
nice and crisp and don’t get cut off weirdly. I’m sure that Scratch bug will get fixed
one day. [Laser Code]
Ok, Let’s put some scripts together. Beginning with the initialising scripts.
When green flag clicked, hide. The laser only wants to be visible when cloned, the original
sprite should be hidden, and in fact will never be used as a laser sprite at all. This
is common practice in Scratch, in fact if you do try to use the main sprite you can
get into trouble because unlike all the clone sprites, the delete clone will not work on
the main sprite… that can be lead to bugs where one bullet suddenly appears on screen
and won’t disappear like the others! So yeah, hide the main laser sprite.
We’re going to hang all our game loops off a “when I start as a clone” hat blocks.
This is very convenient for less complex games like this one. As soon as the laser sprite
is cloned, position it at the Player sprite’s location. We are going to want to send it
flying out in the direction the player is facing. To match the players direction we
use a point in direction block (yeah, don’t use the point towards player that wouldn’t
work, we could have used the point towards mouse… that would surely work as we are
at present always facing towards the mouse… but, that may not always be the case if we
change things around, so…) point in direction, and then find the “of” block in the sensing
category, and switch the sprite name to be Player. Now you can select direction of Player.
Neat. Ok, we need to show the cloned laser sprite,
and then we’ll begin a repeat until loop, repeating until the laser is touching the
edge of the stage. Within the repeat drop in a move block, and
I’ll change it to be 11 steps. The bigger the number the faster the laser will travel,
so have a play with that. This loop will finish then once we hit the
edge of the stage, so then delete this clone to remove it from the game.
[Firing the laser] That all sounds good – We just need a way
to trigger the laser to fire. Now we may be temped to use a when space key pressed hat
block. Then we simply can create clone of self. Now which of you know why this is not
such a great idea? … Let’s give it a test. I can press space, and a single laser fires
out. On first inspection this is working very nicely. So, the cloning and laser movement
scripts are great. But… because I have scratch addons installed I can see how many clones
are being used as I launch each laser. LOOK AT THAT! How is it possible that I’m using
all 300 clones at once with so few lasers showing up on screen? Any ideas? Ok let me
explain. This is a super common bug for Scratchers who are new to using clones. Look back at
where we added the create clone block. Here it is. Whenever the space key is pressed we
create a clone of ourselves. Seems harmless, until you consider that this is being triggered
on the laser sprite. Now tell me, how many laser sprites are there at once? Well there’s
one sprite to begin with, but as soon as I press space, we clone the sprite and then
there are two laser sprites. So, when I then press space again to fire the next bullet,
not just one laser sprite will trigger a space press script, but two. And both sprites (the
original and the clone) will both create new bullet clones. Of course because the clone
creating script places the new bullets at the player, all these new bullets appear on
top of each other so we only see 1 even though there are 2. So, that makes 4 bullet sprites
even though we’ve only pressed space twice. Ok now, so can you guess what happens it I
press space a 3rd time? You guessed it 4 bullets becomes 8 bullets. Then 16, 32, 64, 128, 256.
It doesn’t take long before all the clones are used up! Disaster, because we’ll need
to keep all those clones available for all those lemons!
So, the mistake we made was to have a key pressed on a sprite that is being cloned.
Always remember if a sprite is cloned that all the clones will be receiving the key press
event. Ok, much easier to trigger the clone event from the player sprite instead. Make
sure to delete this “when space key pressed” hat block.
[Triggering lasers the right way] Click into the player sprite.
We’ll make a new custom block named “Shoot”, and we’ll use it right after pointing towards
the mouse pointer down here. Now I don’t want to trigger off the when key pressed because
I don’t fancy the player having to mash the space key that much. Instead I want a
steady stream of lasers to fire as the space key is held down.
Add in an IF space key pressed OR mouse down – we might as well allow the mouse to fire
too. And then we’ll use the create clone of, and switch it to clone the Laser sprite.
Great, shall we give that another test – Mash that green flag!
Oh man yes – yes look at that, that’s insane firepower! The lemons don’t stand
a chance against that ha-ha. Yeah, so I think we need to reign that back
in a touch, limit the rate of fire. Make a new variable to keep track of this, naming
it “fire rate” for this sprite only. We need an IF ELSE block, and check if the
fire rate variable is larger than 0. Oh, move the key pressed check in to the else side.
We only want to allow firing of the laser when fire rate has decreased to 0. So yeah,
if fire rate > 0 then change fire rate by -1, then after creating a new laser, set the
fire rate to, umm 10. This will now not allow the laser to fire again until it was decreased
back down to 0. Let’s give that a test…
Oh gosh that feels slow. A regular pulse of 3 laser blasts per second… That could work
for early levels perhaps, but it’s not going to be a match for the number of lemons I have
in mind! No, I am counting on there being quite a lot of lemons indeed!
Perhaps let’s try setting fire rate to 1. Ok – that’s nice… It’s perhaps a little
quick? But, I kind-a like it – It’s a nice compromise and I’m feeling it will
give us perhaps some chance at warding off even a somewhat excitable lemon invasion.
Right guys – This is the end of part 1 of this tutorial. If you want any game assets
then I’ve included a link to a Scratch project in the info under the video. I think you should
take the time to have fun and make the spaceship costume yourself, but there’s also some
cool sound effects for you to grab in there so have fun!
The next episode will build on this tutorial and we’ll finally get those lemons into
the game… lots and lots of lemons yay! And that is where the fun really begins.
But I hope you’ve enjoyed this video thus far, please do smash the like button, and
don’t forget to subscribe to the channel to avoid missing my next exciting video! Thank
you so much to my new channel members! Joining the membership is a huge deal because simply
put, more support translates to me being able to make more videos, it’s that simple. That’s
right, You can help make this channel awesome! Oh, and there are some fantastic perks up
for grabs too, so check that out. Thanks for watching, and Scratch on guys!