[Intro] Hello Fellow Purple Scratchers!
You’ve all seen & played these awesome Online Scratch Games – And who hasn’t wanted
to make their own? – Well today that dreams comes true, as we take our powerful “Cloud
Player sprite” developed over the last 3 episodes of this series, and drop it in to
our own game! You can choose any game you like, but for today I‘ll show you, step
by step, how we can add it to our classic platformer games. Instantly transforming them
into online platformers supporting 100 players and up!
Due to popular demand, I’ve opened an official Scratch Studio for the series (linked under
the video), and it’s already filling up with your crazy awesome MMO projects – Very
cool! So when you have something fun to share, do visit the studio and ask a curator to have
your project added too! I can not wait to play them!
[Purple] Ok, wow, let’s just address the purple elephant
in the room. Yes, Purple is the new Blue, and love it or hate it, I think this colour
scheme is here to stay 😊 [Backpacking The Cloud Player Sprite]
And so, my friends, we load up our completed episode 3 Cloud purples… I mean projects.
We’re going to get it backpack ready. All our important, and backpackable scripts
are already in the “Cloud Player” sprite. And, here they are.
And to make them work with our projects, we just need a few scripts to be present in our
main game sprite. To be specific, that would be;
a “broadcast to Cloud – Setup”. And then in a game loop, the add position
x & y to MY VALES, and a broadcast to “Cloud – Tick”.
That’s not much right, and to make it even easier to remember, we can drag this small
block of code into the Cloud Player sprite too.
Okay, great – So these scripts will now be included in our backpackable sprite, so
- open your backpack now and drop the entire “Cloud Player” sprite in there!
[Adding the Cloud Player sprite to the Classic Platformer]
Excellent, time to dig out our old classic platformer projects! – I hope you can find
them :D I love this platforming game engine because
it has so many cool features, and is real easy to extend and make any number of cool
games with. And now, we’ll make it cloud play compatible!
The least that we want to achieve is to bring other players into the game. They should move
around, animate just like our player, and move from screen to screen.
So, we’ll begin, as we always do, by saving… Oops, watch out the File menu has moved position!
Saving as a new copy, because this is… Oh, this is going well! Please try again Okay
- Saving as a new copy, for this is the Cloud Enabled Scratch Platformer! Oh yeah! :D
Step 1, Open our backpacks, and Drag in the “Cloud Player” Sprite.
I’m going to move mine up to the top of the sprite list for convenience as I like
it next to the main player sprite. Okay – So notice along with our Cloud Player
sprite, Scratch has also helpfully brought in the Cloud Variables and other required
lists… Or at least that’s what we are led to believe… Sadly, although these cloud
variables look the part, they are imposters! They’re fake, and they don’t work at all!
You can tell their fake because even after reloading, the project doesn’t show as being
cloud enabled on the project page. [Fixing Fake Cloud Variables]
So – to fix this we must remove and re add each of these cloud variables.
But hold on there!!! We have to be careful because, well watch this… If I delete “CLOUD
1” from my project, Scratch also deletes the variable from my scripts! This is terrible
and will cause us all sorts of problems. So, let me undo that with Ctrl-Z.
The way to safely do this is to click into the Stage sprite.
And now, delete all of the CLOUD variables 1 through 8.
And then, click to create a new variable, (Oh my, this purple and blue is a little clashy!),
and we add “CLOUD 1”, back into our project, remembering to mark it as a Cloud variable.
Brill. And of course, do the same for CLOUD 2, 3,
4, 5, 6, 7 and CLOUD 8. All cloud variables. As long as you delete and create them from
the stage, none of the other sprite’s variables get messed up, and everything will work as
expected. [Enabling Cloud Play]
Great! Hide all them variable reporters, and find those orphaned game loop scripts we prepared
a moment ago. These are the ones we want to copy into the main player sprite, so drag
them over now. And the fun begins! Click into the Player
sprite, and lets see where these new scripts should go.
Well, the initial broadcast to setup the cloud scripts should only run once. So drop that
under the when green flag clicked, but before we launch the main menu.
This leaves us with the scripts that record the players position and a broadcast to run
the cloud scripts. These will need to go into the main game loop…
So bring them down… Here’s our “Game Loop”. As you can see we already have a
forever loop here, so we can transfer our script over to the existing one. We just want
to ensure we broadcast “Cloud – Tick” after moving the player, but before that “Tick
– Last”. [Testing the Cloud Platformer Game]
Splendid – That’s the initial integration complete! And so – It’s Testing Time!
Make sure the project is saved, and from the project page, size the window to the left
side of the screen. Then duplicate the tab, and pop it over to the right.
Okay – Running the left project… Good… And the right project… Cool… WOW!! Oh
my, hath my Scratch cat just swelled in size? Yeah, so there was a large cat sat in front
of me, but my actual player is still displaying as usual. But look over to the other project
and you’ll notice the large 2nd player is moving around following my actions. This is
actually really cool – That’s all we coded the multiplayer sprite to be able to do.
[Costume, Direction] If we want extra functionality, like player
animations, and direction of movement (which obviously, we do), then we have a little bit
of extra work to do. But don’t worry, it’s surprisingly easy.
At present we only send a players x & y position through the cloud, we just need to add to
this the player’s costume, and direction too.
Add to MY VALUES, the costume number. And Again the sprites direction.
Simple… Drop that in after adding the x & y position.
Indeed, these two properties of a sprite are so commonly needed in a multiplayer game,
we might consider adding them to the backpackable sprite itself for next time. I’ll just copy
these blocks… And clicking into the cloud player sprite,
paste them in, adding them to the orphaned mini script here just like we do in the real
player sprite now. Next, scroll over to the define “Player
Clone Tick” script. And then down to the bottom. This is where
the cloud players receive the messages that we just sent. At present, just expecting an
x & y position, but of course we also now will receive a costume number and a direction.
So duplicate the bottom 4 blocks, and we’ll start by reading in a new value.
And “switch costume to”, that “val” variable we just decoded.
Then we read in the next value, this should be the direction.
So point in direction, again using the decoded “val” variable.
Awesome, just tidy that up, and drop those scripts after the others.
We’ve read in all 4 values and updated the sprite accordingly, so I think we can give
that another test! Don’t forget to save, and then reload the
right hand window to get the latest scripts, and then… smash those green flags.
Ha ha – Oh no – Did we miss something, this looks exactly the same? Well no – not
exactly. The second player is now animating… kind-of, and they do change direction, only
they flip upside down lol. Both completely explainable. Firstly, flipping
upside down, that’s a classic case of not having set the direction mode to left/right.
And as for the consume animation looking wrong. Well, the player sprite has all these costumes,
but… the cloud player sprite… Just has these two! That’s never going to work. We
need them to share the exact same set of costumes. [Synching up the player sprite costumes]
So, start by removing all the costumes from the cloud player sprite… Well, we can’t
remove the 1st, so instead, name it “DELETE ME” for later.
Then click back into he 1st sprite. And we’ll begin dragging each costume one at a time
into the Cloud Player sprite. I find it easiest if I could them off as I go, so as not to
copy the same one twice, or miss one. Costume 3, 4, 5.
Then scroll down, and continue with 6, 7, 8… you get the picture…
And yes, we even copy with hitbox costumes. Not because they’ll get used in the cloud
sprite, but just because keeping the costume numbers the same is super important, and that
makes it easier. Oh hello Guy :D – You didn’t want to be
left out did ya! So, The last costume was costume number 36.
So when we now click into the Cloud Player sprite,
You should find there are 37 costumes! Yes, that’s one more, because we still need to
scroll up, and delete that left over “DELETE ME” costume. And, feel free to just double
check the costumes numbers all match up, and if they do, then splendid! We can give that
another test to confirm the animations are now playing back correctly. Not forgetting
to reload that right hand project. Here we go then! – And… Scratch-tastic
:D We have some gorgeous running animations now. This proves that the costumes were all
copied correctly between sprites. [Orientation and Size]
Two issues then remain, turning upside down, and our oversized cat sprite.
No problem, click into the cloud player sprite, and into the direction dialog. Then switch
the mode from “all around”, to “left right”.
And then, if we check the size of the original player sprite… It’s set to 40. So back
in the cloud sprite, also set size to 40 to match.
And Save again – This is going to be good! I’ve reloaded the right-hand project and
that is beautiful – Finally the player is moving, animating and turning just like they
are on the first screen. That is so neat. [Players changing Scenes / Rooms]
So are we done? – Well almost. Look what happens when a player moves from one screen
to the next? Oh dear – All the players remain on the same screen with you! It looks so weird
seeing them floating around on non-existent platforms!
To fix this we must only display cloud player clones when they are on the same scene number
as the main player. That’s this SCENE # variable down here.
So that will need adding to the growing list of variables sent over the cloud!
Back into the “Player” sprite then, and that Game Loop receiver.
We’ll pop in one more Add to list block, Adding in the current player’s “SCENE
#” variable, as the 5th item added to the list.
And then, in the “Cloud Player” sprite. Find that “Player Clone Tick” script.
And scroll to the bottom. We need to read in the 5th value, the cloud
players scene number. And using an IF ELSE, check if that value
is equal to the main player’s SCENE # variable. Great, because if it is, then this clone is
on the same scene, and we can “Show” this sprite. Otherwise, let’s just “Hide”
it. Sounds simple enough right? Shall we give
it a try?
So here we are on screen one, and both players and visible. So I’ll wander onto screen
2… Oh man!?! Now this is not what I was hoping
for – The 2nd player should be hidden now, but instead we are toggling between hidden
and visible erratically. This is most certainly a bug in my script. What did I miss.
[Bug Fixing Scene Changes] So I’m showing and hiding down here, but
tell you what, scroll up further… And ah! Okay, there’s another show block up here.
This triggers when reading in a new cloud value and is no longer required if we are
controlling the visibly lower down. Remove that, but make sure to leave in the hide block
here for when players time out after leaving the game.
RIGHT!!! I’m feeling good about this, so we’ll give it another try.
Walking to scene 2… Brilliant, the 2nd player is correctly hidden. Then coming back into
Scene 1, there they are just where we left them.
So this is really cool, But you know what, this scene switching is still not quit perfect.
You might note the cloud players still hanging around on a previous scene as we change over.,
and that bugs me something rotten! And after a bit of faffing around I got to
the bottom of it. To tighten things up, we need to simply keep
track of scene each player clone was last seen on, and then when we change scene, ensure
we quickly update the visibility to match. So scroll down, and make a new variable, naming
it “clone scene #”, making sure to create it for “this sprite only”, so that each
clone can have their own scene number recorded. Then after reading in the last val, that’s
the scene number, we “Set clone scene #” to “val”.
Then, for clarity, replace this val with the new “clone scene #” variable.
Right if you had a dig into the player code, you’ll find that the last broadcast in our
loop is tick last. This one checks for the player moving off a scene, and if they do,
we broadcast About to change scene, followed by the actual “Change Scene” event.
We’ll use this to clean up the player clones. So back in the Cloud Player sprite; When I
receive “Change Scene”. And then to ensure we don’t mess with the
clone factory; Check “if player # > the empty value”.
And if it is, then hoorah, just duplicate the IF ELSE script we made a moment ago, to
correct the visibility of any clones as the scene switches over.
And if all is well, we should now have pretty perfect scene changing at last!
Let’s see… Switching scene now… Did it work… I think so… Hold on… Checking
it out in slow motion… By Jove I think we got it! What a relief ha…
As you can tell, sometimes these scripts need a little tweaking to get the most out of them.
Up until now I’d only used them on Scrolling games, so the scene changing was a little
new to me. But we got there in the end! [And we’re done]
And so that’s it – We have cloud enabled the classic platformer.
What you do next is up to you! As I mentioned earlier, I’ve opened a Scratch Studio for
your finished projects – And they don’t need to be from the classic platformer, I’d
be even more excited to see what other projects you are able to cloud enable using these scripts!
If there’s any other concepts you’d like covering, like displaying “Players Usernames”
above their heads? Or how to fire projectiles that everyone can see?
Then drop me a comment under this video letting me know what you’d find most helpful!
But that’s all we’ve got time for today – If you enjoyed the video, please smash
that like button, and if you haven’t already, remember to subscribe to the channel, checking
the bell icon, so ensure you get notified as soon as my next exciting video lands!
But until next time, I hope you have a great week ahead, and Scratch on Guys!
Fade to purple… Goodbye!!!