[Intro] Hello fellow Scratchers,
Do your games need a little more snazzing up? I’m Griffpatch and today we are looking at some neat
graphical effects that can really take your game to the next level. By combining Scratch’s effect
blocks and the Pen extension we can transforming a flat boring screen, lifting the foreground away
from the background with a stylish outline and shadow. Wow, what a difference! And this works
on any costume, vector or bitmap, and even looks good on text, yeah it just makes things pop!
Now we could recreate this effect by hand in the paint editor, but doing so is quite time
consuming, and fiddly. What’s more if you want to change your level at a later date, then you have
to re-do all your hard work all over again. So in this tutorial I’m going to show you how
we can replicate this effect using only simple costumes, and a bit of funky Scratch code! So,
what are we waiting for – let’s get Scratching! [The Brightness Effect Block]
We’ll begin a new project, and since Scratchy is waiting here on the stage to greet us,
let’s focus some attention on him first :D. Make him nice and big by setting his size to 250.
Many of you will already have played with the Effect blocks found under the Looks category,
but for those that haven’t, we will begin with the “set color effect to” block. Make sure to
use the set block, not the change block for this. Now change the dropdown to read “brightness”. So,
this starts on a brightness of 0, but if you click this you’ll find that this has no effect
on Scratch Cat at all. That’s because a brightness of 0 means no change. So,
we can try 50. Click the block and Scratch Cat becomes 50% brighter.
So things get interesting when we whap this right up to 100, full brightness
(again click the block). And lo, Scratch cat appears to have disappeared! However, this is
not quite the case. They have actually become pure white. That’s really useful if you ever
want to flash the sprite white for any reason. But equally interesting therefore is if we go
the other way, a brightness of -50 makes our cat 50% darker than normal… and -100
gives us a completely black silhouette of Scratch Cat now. Really useful.
Another useful effect I use a lot is the Ghost effect. I’ll set this to 90,
and when combined with the brightness effect then Scratch cat becomes an almost completely
see through silhouette. Perfect for recreating a drop shadow effect!
All we need to do is bring back the original cat costume and overlay it on top.
Well, to get back the original costume we simply use the “clear graphic effects” block.
One click and it’s all back to normal... but also, gone is our shadow.
Ok, so we need both visible at once, so what options do we have? Either we could create a
clone of this sprite, or we could (as we are about to do) use costume stamping.
[The Pen Extension & Costume Stamping] For this we need to enable a Scratch Extension.
Click into the Extensions box at the bottom left of the Scratch window.
Now select the “Pen” extension. Nice. Now we have a whole new category of Scratch Blocks
to play with. But for this tutorial, we are mainly interested in the Stamp block here.
If we click the stamp block, then drag scratch cat, you can see it has happily
left a copy of itself behind on the stage. This we can repeat as many times as we’d like,
and it’s important to note, these are not clones, and the stamped copies are
not draggable or moveable in the slightest. At least not without clearing them and re-stamping.
If we go full screen, you’ll also see that the stamped costumes, unlike clones, are not quite
as high resolution. The edges are a pixelly (that is made up of small jagged squares). Sadly there’s
nothing we can do about this at present, it’s just how the pen drawing and stamping canvas works.
Anyhow, it still does a good enough job. So bring in the last new block we will
be looking at, the erase all block. Clicking this block does what it says,
and it erases everything that has been drawn or stamped on the pen canvas.
[Stamping a Shadow] Ok. Let’s try and make a shadow from this.
Position the cat where the shadow wants to be. Apply the brightness effect. Apply the ghost
effect. Then we stamp the costume just as it is. Nice, so we can move the sprite up… Ooh,
there’s the stamped shadow. We just need to clear the graphical effects to bring back
our official sprite, there they are! And pop them where we want them to finish up. Yay,
there we have a very respectable stamped shadow. So, having done it by hand, let’s make it
official and turn this into a script. When green flag clicked, erase all.
Now I’m going to use a custom block to represent the next steps. Name it “Stamp Shadow”.
We might as well make use of it right away under the erase all block.
So we set the brightness to -100, and set the ghost to 90.
Next up we need to think about how to position the shadow. We want it to be below the current sprite,
so why not use a change y by, say -20. That will move us downwards. Then we’re free
to stamp the shadow on the pen canvas. To get us back to where we were before,
we can simply change y by 20 again (the opposite of the -20 we did above).
Lastly, clear the graphic effects to finish off. That’s it. So we can test this now by first moving
the cat sprite. And then clicking the green flag. Yay, the shadow followed us! Success. And very
useful indeed! [Funky striped backdrop]
One thing that is not obvious thus far is how cool the shadow can look on a more funky background.
For this we will need to click into the stage Backdrop and bring up the backdrops editor.
I’ll start by creating a filled rectangle to cover the entire stage…
Hmm, perhaps a little less intense blue! 😊 And then in a slightly lighter shade of blue,
Make some long rectangles, perhaps rotate them a tad, and then duplicate them in a pattern across
the screen (With the select tool, you can hold the alt key down while dragging to make copes quickly,
or just use copy and paste if you prefer).
Great – So look at this. How cool does that look now? And see how the shadow really does have
that see-through effect. That’s what really makes this lift off the page so to speak.
Ok, click back into the main sprite now, and I just want to add that the ghost number of 90 here…
You can change that to be anything between 0 and 100, and the result is the shadow will be heavier
or lighter. See how much darker 80 is? For a shadow, I will keep this on 90…
[Shadows on Levels] I think you’ll agree, that looks great
for a sprite like scratch cat, but next up I want to show you how it can also enhance your Scratch
games by giving depth to your level designs. We can click into the costume editor,
and start drawing a new costume. This is to be the level of a game,
so I’m using filled rectangles to create clean solid areas for the ceiling, walls and floor.
Now, I’m not seeing the entire costume on the stage because I left the size on 250 from earlier.
We’d better reset that to 100, and position it at an x and y of 0.
Ok, so I’ll also add a small floating platform here for effect.
Nice, this is done. And it was so quick to put together. But man, without texture or outlines
it looks really flat on the stage doesn’t it. Although it’s fun that Scratch Cat’s
shadow is still there hehe. Ok, we click the green flag – And voila!
The level is transformed by the addition of our drop shadow. You can see it around the ceiling
and the floating platform. That’s cool. [Outlines around sprites]
But, it’s still not quite as good as it could be. We really would benefit from giving the edge of
the level a nice crisp outline to separate it from the background. So… easy right?
We just select all the level shapes in the costume editor, and give them an outline.
Well, yes… and no. There’s this small problem that each shape receives its own distinct outline.
What we want is the whole level to be treated as a single object,
and surround that with the black outline. Sadly, that is not quite so easy. We could
spend lots of time hand crafting the levels from one object using the shaping tool…
That is often my preferred method. Or, we could use the trick I used in Appel,
and duplicate all the costumes, one with a border and the other without, only showing the bordered
ones on a layer behind the non-bordered ones. But today, we are experimenting with Pen solutions…
So I’ll remove the objects’ outlines, and let’s see what we can do!
[Outlining a sprite using the Pen] Click into the main sprite code. And
let’s duplicate the script from our Stamp Shadow custom block.
And what I want us to do is remove the ghost effect completely. Without the ghosting effect,
this script now has the effect of drawing a fully black shadow.
Yep, there you go. So, why is this useful? Well, let us continue and it’ll become clearer. Click
the green flag to reset, and then let me reduce how far this second script moves the sprite.
It’s currently at -20, so bring it right back to just -3, and then positive 3 to balance it out.
So, if we click the script again. Ah, now then do you see what we are doing? We’ve created a black
outline underneath the entire level. Of course, it only hugs the underside of the level at present,
but perhaps we can do more about that. Without resetting the project, change the
first change y to use a positive 3, and the second to be negative 3. This way the sprite
will be moved up first instead of down. If I run that script then the result is
rather cool. The top of the level has now been sandwiched by another black line.
This is really promising. Now you should get the big picture. If we do this in all directions,
then we’ll end up with a perfect black outline round all the edges, not just the top and bottom.
To make the process easier, we’ll rework the script to loop around in a circle,
stamping each edge as it goes. But if we are to be rotating the
sprite in a circle, we’d best set the rotation mode first to “don’t rotate”. Otherwise our
costume will point in all sorts of directions and the stamping won’t look right at all!
Next we set the brightness… all the edges will be the same.
And here we go, wrap the rest of the blocks in our repeat loop. I’m going to pick the number 8,
as that will cover both the basic four directions up, right, down and left,
plus the additional diagonals in between too. Now we should move the clear graphics effects
to outside this repeat loop so it doesn’t reset until our drawing is finished.
So, what next – Well previously we used “change y” to move the sprite, but since we want to
move in different directions, I’m going to switch this for a “move in steps” block.
And we move forward by the same 3 steps as before. Let’s switch both these change y’s for move is
steps. The last one of course moving by -3. Right, all we need to do is now rotate our
direction ready to stamp the next edge. We turn right (that is, clockwise) by 45
degrees (8 x 45’s adds up to 360, a full circle). And that is it – but to let us see this in action,
I’m going to temporarily add a wait 1 second at the bottom of the loop…
Click the green flag to reset the project, and then click our new script!
Oooh black – oh it’s ok, that got me for a moment, yes. So did you see the black
silhouette moving around before it finished and showed us the original costume in the centre?
Let me play that again for you. Do watch to see it moving around in a small circle.
Did you see it?
Well, the finished result is great. A perfect outline indeed!
And what a different it makes to the scene 😊 There’s no need for this to be slowed down though,
so remove the wait, and let’s test it again. Green flag, and click the script.
That was faster, but… still not fast enough. We really don’t want
to see this flicker black at all. Luckily we can fix that. We just need
our friend, run without screen refresh. For that we must make a new custom block.
Name it “Stamp Outline”, and yes – tick “run without screen refresh”. This will allow our
repeat loop to run without treating it as an animation. It’ll just draw instantly.
Attach it to our outlining script. And then we’ll complete the project by dropping the outline block
to just before we then draw the shadow. [Success]
So does that make it all run super-fast? To make testing easier I’ll add a key press to erase all.
Now I can go full screen, and click space to erase all our effects.
Oh wow… doesn’t the level look so flat again! You forget!
And now, click the green flag – And POW, the whole level pops out at you,
I’m so pleased with that. And yes, it draw really, really quickly. No problems there.
So how about we try this with something completely different.
I’ll just make a new costume… oh wow, got to say, even this black level with a shadow gives me all
sorts of ideas for a cool looking game :D Anyway, Drawing something more organic…
less rectangular.
And run that. Ok, yeah, but it doesn’t look so great with this bright background… Hold on,
Ah, better…
But perhaps a little too bright in the foreground now.
There… Well, I don’t know, but it’s still pretty cool and might give you all sorts of ideas right!
And it works on all sorts of things, text, levels, Shapes, and of course Scratch Cat…
But, all this is leading towards the next episode of our classic scratch platformer where I will be
using this technique to upgrade the visuals before adding in collectables, keys and working doors! So
excited for that. If you want to try this code out in your platformer, then just backpack the
scripts and drop them into the level sprite. You can trigger them off the change scene event rather
than the green flag. Simple as that! [Outro]
Well I hope you’ve enjoyed this episode. I’ve created a studio on Scratch for you to share your
creations in, and I’m dead excited to see what you come up with. Just be as creative as you can
and have fun, it could be a cool scene, or a game, doesn’t matter – I can’t wait to see them!
If you liked this video, then please do smash the like button, and you want to see more,
then subscribe to the channel and you won’t miss out on the next exciting tutorial.
Until next time then, have a great week ahead, and Scratch on guys! :D