Hello fellow Scratchers!!!
– And welcome to the Scratch Jr Challenge!
– Yes apparently this is a thing; where Scratcher’s forgo the comparative power
of Scratch, and attempting to recreate the ever popular Flappy Bird, in Scratch’s little
baby brother, Scratch Jr…
and here are a few examples…
The question people have been asking is, if Griffpatch used Scratch Jr…
lol – Could he do any better?
Well!
– Challenge Accepted!!!
[Flappy Bird Backdrop] So flappy bird, not the most complex game,
and I’m thinking, if I can make the graphics look good, then the game will follow.
So what do we have…
The sprites on the left, scripts below…
The main game stage… and the backdrop at the top perhaps?
Yeah, it’s a little different to Scratch 3 for sure.
The lack of colour choices in the palette is a tiny bit worrying, but lets see how this
plays out!
Flappy is played portrait, so these guides will help me keep within the game bounds.
And, a few more guides for the road, bushes, and clouds.
Now, mostly with ovals, lets draw those clouds – I quite enjoy using that fill tool, pop
pop pop, ha.
Very cloud like – love it.
The buildings are going to be more fiddly – Rectangles this time, and from many hours
of pain, I learnt a neat trick, that shapes positioned on top of other shapes can be manipulated
as a group.
So if I stamp clone this whole rectangle…
whoops…
Not the cloud, umm..
There!
That makes like so much easier!
You’ve no idea!
So, the grassy hills…
Many more ovals I guess!
Just gotta remember to draw these from back to front.
Another lesson learnt is that it is really difficult to change the order later on!
So get it right first time, or else!!!
Hide the bottom of the hill ovals using a filled rectangle – And then layer on more
ovals…
And that final rectangle – Yeah!
This is looking surprisingly good!
Don’t you think?
[Scrolling Background] All this is will be static, without movement,
but the floor area down here want’s to scroll.
Sounds simple enough – How hard can it be?
I’ll use a new sprite, just like in Scratch, And draw out the floor.
We want that nice diagonal stripe pattern across the top, so I’ll have to hand draw
that using lines…
Only!
Scratch Jr. is doing it’s darndest to get in the way, joining up the lines where I don’t
want…
Oh man!!!
Grr…
Now it’s done something really naughty.
Filled the outline of the shape behind?
I didn’t even know you could do that with this tool…
Oh well, we can always learn something new from our mistakes!
😊. Anyhow, change of plan, I’ll use the clone
tool…
And I’ll space them our more!
// moments later Good enough.
Just touching them up with some filled rectangle highlights and shadows.
<< Back to stage Ah – ok – so the sprite costumes are apparently
only half the width of the stage?
That’s unfortunate – I guess I’ll need two of these sprites to fill the entire floor.
[Block Coding in Scratch Jr] But before that, let’s make it scroll!
Do we have a when green flag clicked block?
Ah, there’s the little beauty 😊 – What a reassuring sight!
And we’ll move left, yep – But wait… what are the units?
Is it pixels?
Try 20.
And smash that green flag!
Wow – I didn’t see that coming!
“That” is not a Scratch Move block…
It functions more like a glide block.
AND, it wraps around!
And stops exactly where it began?
Very curious!
I need a moment to understand this, hold on!
// moments later Ok, I found a clue.
We can turn on a helpful grid view, and this reveals the stage is exactly 20 grid cells
wide – The exact amount I happened to pick to move by!
Hold on, that’s really restrictive!
Scratch has 480 possible x positions, and Scratch junior is limited to 20?
Gosh…
Urrr…
Is this game actually possible?
[Cloning?
– I don’t think so] Right – I need two floor sprites to cover
the entire screen width.
Is there a clone block?
I wish!
Lol – We just have to create a new sprite…
Luckily we can chose to copy the costume from a previous instance.
Don’t ask me why they look blank…
That confused me no end too!
Oh what?
Somethings gone wrong, The costume is way off centre – and has issues…
One nice thing is that we can easily copy code scripts between sprites – Good job
too, because we need them!
So, this one goes on the left…
And… hold on, hold on!!
The diagonal stripes are reversed??
What is going on!!!
// moments later Ok, so it turns out when you move a sprite
left or right, it flips to face the direction it moved!
There’s no way to turn that off, but not to worry because both grounds ‘will’ eventually
move the same way.
I thought I was going mad!
[Looping Background] Cool – So I need this floor movement to
loop forever.
Hmm, no forever loop…
Ah-ha, yes… this looks like the bee’s knees!
Perfecto!
– Well, Almost…
There’s a gap!
Let me just…
Uuh this editor!!!
No stretch…
// few minutes later Yes!
I got it – And I’m thinking, this will look great as soon as we add in some filled
side bar blanker sprites to cover the edges of the screen.
Sizing up, and there!
We need another for the opposite side…
But, I’m having trouble getting it into position…
Grr…
It’s because it’s flipped after I moved it again!
Oh I didn’t learn from my mistake!
There << WOW!!!>>
- This is marvellous – There’s nothing wrong with this at all, 10 points for Griffpatch!
And it only look a couple of hours to get to this point!
Ha.
[The Flappy Bird] Now to tackle the “Flappy Bird” themselves!
Please don’t end up looking cursed!!!
Et-Voila!
Not so shabby, all things considered.
So on the title screen of this game, flappy wants to just hover up and down a little – at
present they are looking more like a bird torpedo!
Problem is, we’re limited to those grid squares of movement – I’ll try the smallest
up and down movement possible, forever.
Ummmm…
Yeah – That’s janky – We can’t move less, but perhaps if we could slow the motion
down?
Is that possible…
// look in categories Ah, what’s this?
A speed block?
Slow, medium and fast I presume…
Switching to medium, and this is somewhat better…
The transition is a tad harsh, but… beggars can’t be choosers!
[Jump Button] And I am most pleased with the overall look
thus far.
Next up we need to detect user input, clicking to start the game, and to activate a jump.
The best we can do is have an onscreen button to tap on.
For convenience it can be added as part of the right hand blanker sprite.
Great – so when the button is first pressed I’m going to switch to a brand new scene
to keep our coding as clean as possible.
Scratch Jr’s Scenes are not at all the same as Scratch 3, as no sprites are shared between
them.
So, we have to copy both the scene backdrop, and every sprite, one at a time from the first
scene, like so.
[Flappy Bird Pipes] Ok!
– This looks good.
Now to introduce the bane of Flappy birds life…
Those pesky pipes!
Something like this.
To see if it’s the right size…?
Not bad, just a small change, and I think we are on to a winner!
It’ll look great when we shade it in!
// gap Wow!
Ridiculously time consuming, and intensely satisfying 😊 – Just like flappy burb.
For the lower tube, I guess I just rotate…
Oh no!
Not like that, Just copy it, and… there.
Now I’m a bit worried about making a mistake adjusting these costumes, so I’ll make a
copy now.
Wha…?
Hold on, what’s that mysterious dot…
Is it a smudge on my monitor?
I can’t select it, or delete it…
And yet, weird of weirdnesses, if I draw around it…
I can move it WITH my square?
What?
Never mind, I’ll sort it later…
Noooo!!!
Now the end of my pipe is messed up.
For goodness sake, come on :/ Fine, delete that, and clone again…
Seriously?!?
This is not rocket science guys…
There!
One complete pipe.
Complete with cursed pixel – I know…
“Out of sight, out of mind” 😊 – Perfect.
The pipes will begin over to the right, eventually behind these side panels.
When the flag is clicked, umm, is that right?
There’s no when scene starts option, so I’m guessing we use this still?
Pause…
For some number, not sure if that’s seconds…
Then repeatedly loop the pipes movement.
A little setup though, I think I want to quickly make sure the pipe is visible, and then at
the normal pace, move the pipe across the screen to the left, like this…
OH NO!!!!
I don’t believe it!!!
The costume has flipped, again… WHY Scratch Jr…
Why would you do this to me!
Now I’ve got to switch the whole pipe around the other way…
What a waste of time!
// 5 minutes later Ok!
– So moving 20 grid squares to the left for a complete circuit.
Hmm, you know, all that change of speed was overkill, we can do without it.
// Watch That’s nice.
I’ll just up that to 99 repeats, and pop in an extra wait 20 so the same pipes doesn’t
show up again too quickly.
[Duplicate Pipes] Now to spice things up, we need more pipes
at different heights.
A new sprite, copied from the latest costume.
Copy the scripts, Size Up, and position.
But, change the initial delay so the this pipe appears a little later on.
Finding the best time is a matter of trial and error…
// Moments later And there – 17 appears to work well 😊
Just going to nudge the costume upwards…
And that cursed pixel…
Hey look at this!
– Beautiful!
And there’s just enough gap to fit in one more pair of pipes.
Obviously, we could go on and on making even more pipes with a longer delay across the
board, but for now this will do fine.
[Pipes behind everything else] So, to get these pipes behind the floor sprites,
just hold down on a sprite to bring it to the front…
And the side bars too…
Smash the green flag!
– Yes!, yes…
No!
Oh the second floor sprite!
This is a pain, to bring it to the front I’ll need to see behind this side bar…
there we go, and reset things, careful does it!
And look at this!?!
Can you believe this is Scratch Jr.?
[Jump to Start the Game] Getting exciting now – But truly the fun
is just beginning – We want to activate a jump when the player clicks the jump button.
When the right blanker sprite, including the button, is clicked, broadcast a message – no
names here – Just colours, so I’ll pick a very flappy “yellow”.
Then in the bird sprite…
Woh-there…! hold on, I’ve made a blunder!
I’m coding the game scripts in the 1st scene?
Pants, how did that happen.
I thought I’d added the pipes only to the 2nd scene.
Ok… so quick fix up – Finish coping those missing sprites, the side bars, and then reserve
the scene order…
And we’re good as new.
This first scene has no pipes.
And when the jump button is clicked, we actually just change to scene 2 – Game on!
We can see this in action.
No pipes are coming in Scene 1, and clicking jump… bring it on!
We are in the game!
Brilliant.
I don’t like that tacky black line!
Is that in the backdrop?
Be gone you guide line!
[Flappy Bird Script] So this is it… we must get flappy bird jumping.
It should be simple…
But, I’m rather dreading it due to the limited Scratch blocks available.
We trigger off the yellow jump event.
Hold the phone…
do mine eyes deceive me, or does Scratch Jr have a JUMP block?
Umm…
Wow?
Initially this looks good – Can it be faster?
Yes, much better…
But – There is a problem.
The jump curve is great, but the motion stops abruptly at the same height it began…
We need it to continue downwards.
Like this perhaps?
Nope – Perhaps faster?
Ok, better – But still not perfect, and as it turns out, using this block leads to
a whole world of pain when more jumps are strung together, so what else is possible?
How about we build the movement by hand.
Fast, upwards 2 squares.
This still looks to slow for me… but this is the fastest we can set it?
The only thing I can think to do is try using two scripts at once both moving up at once…
Is that possible?
Yes!!!
Yes it is!
And by only moving one block in the second move, the movement starts fast and then slows
down a touch, so that is real neat.
[And down we go again] To finish the jump, we might try pausing,
just for 1, and then at a medium pace, begin back down… before at full pace once more
drop right downwards to the ground.
So how does that look…
Yeah, it’s not at smooth as the jump block… but, it is under our control…
Man, I can tell this game is going to be really tough to play!
Ha, it would be game over for me all the time!
Let me just play around with the jump script a little more…
Without the second jump…
Oh no, that is awful – Put that back in.
And just confirming the built in jump isn’t better after all …?
Nope…
It really isn’t…
I’m thinking perhaps I should try removing the wait at the top of the jump arc?
Oh wait, I need to put back the second jump script…
Okay!
– Now this is something…
Yeah – Yeah!
I think this is it.
[Angle the bird] So, before we add the final collision detection,
and I prove just how bad at this game I actually am, I’d love to get the bird to tilt upwards
as they jump.
YESSS – Oh magical…
Oh this..
Oh…
Oh no!!
Laughs – This is actually hilarious, this has gone horribly wrong, but I love it.
I did worry this might happen because we don’t have a way to reset the direction of the bird
with each jump action.
Scratch Jr can only rotate by, not point in direction, and if we jump again before the
first jump has ended…
the rotation is compounded!
It’s strangely odd, but you know what – I rather like it – Quirky!
If you want to know if I came up with a solution to the problem, then actually yes – We can
get around it, but only by having two flappy birds, each at different angles that we hide
and show as they jump.
Works a treat if you really want to get things as close to real as possible.
[Final Collisions] So, the final stretch now – Collisions.
Super easy – When this sprite collides with another – You can’t ask what it collided
with – So everything except the stage backdrop is a possible collision here.
Then, we stop all the scripts in this bird sprite!
Then we’ll use a broadcast message to stop the other sprites too.
Red for game over!
And do it as quick as we can too.
A quick test…
Flying straight into a pipe!
Good – The bird has stopped.
Now to stop everything else!
Pipes first, when red event is triggered, stop all the scripts.
The same for all three pipe sprites too.
Testing again…
Yeah-ohhh – I forgot about the scrolling ground.
Drop the script into those two sprites too…
And…
Yeah!!!
Ok, now we are in business!
Wow - This is so good!
I’m sure it’s not just me, but I can’t help but notice the bird continued moving
one frame (or more) after the collision, that’s a bit of a shame.
And try as I might, there doesn’t appear to be a fix for this.
I know what I’d do in Scratch 3!, But in Scratch Jr. with timings and movement, our
hands are tied.
And so, all that’s left is to trigger a reset to the starting screen ready to try
the game again.
We’ll wait for 3, and then, go on to the next scene… which I assume, will loop us
back to scene 1.
Let’s see…
And yes, it surely does.
[Outro] Wow…
Guys…
So what do you think?
It sure was fun trying to push Scratch Jr’s boundaries.
Some people say Scratch is not a real programming language, and that it’s really limited.
But man, just set them to using Scratch Jr for a day, when they emerge they will be ready
to embrace scratch with open arms!
Seriously, Scratch 3 is simply fantastic.
Still this game is actually pretty good, and I think I’m starting to get the hang of
it – At last!
It does make me wonder…
Just how much further could we take this flappy bird game.
Do you think it is possible to make a score counter?
I mean we don’t have variables do we…
But…
I have had some ideas that might be fun to try out one day!
So, if you enjoyed this bit of fun, please do smash the like button now, and subscribe
to the channel so as not to miss my next exciting tutorial.
Until next time then, have a great week ahead, and Scratch on Guys!