Create an Epic Multiplayer Game in Scratch 🐱 Step-by-Step Tutorial!

foreign scratchers do you want to code an online cloud game in scratch perhaps even a massive multiplayer game with anything from two to over a hundred players well then you've come to the right place because I can show you how we can upgrade almost any scratch game to be a multiplayer game conceptually we just need each player to share their players position and cost you details because if we know where they are then we can display them in our game too in these tutorials we'll learn step by ste

p how to create this fully backpackable Cloud engine that can be easily dropped into all your games and yes we'll cover Cloud variables data encoding buffering for smooth movement and of course how players join and leave our games so buckle up smash that like button and let our crazy fun journey into multiplayer coding begin guys let's get scratching but hold on are you a new scratcher you can check right here on your profile page sadly until you're invited to full scratcher status you won't be

able to play or create Cloud games but before you start to panic all you need to do is share a few projects love and comment on my uh other people's projects and very soon you'll find an invite appears right here on your profiles page okay great let's start a new project in this first episode we are going to cover the basics of cloud variables how they work and perhaps more importantly how they don't work so if we create a new variable Cloud one you'll notice we have the option to create this as

a cloud variable stored on the server and this is where the magic happens by storing a value on the Cloud Server every scratcher looking at your project will share the same value when we first create one of these we get a warning it reads please note cloud vowables only support numbers not letters or symbols and so we meet our first limitation Cloud variable rule number one you can't write letters and symbols to a cloud variable and that is a real pain Our Lives will be so much easier if we cou

ld stuff text into these things but that would be open to abuse so we are where we are numbers only okay shall we see the cloud variable in action when this Sprite clicked change the cloud variable by one a simple enough test just click the cat and we see Cloud 1 increases as expected but to test this properly we need to see the value changing on another scratches screen right that's the whole point well you could get the help of another scratcher to load up your project but for Simplicity we ca

n actually test this all ourselves without even sharing the project which is great news because who wants to share an unfinished game make sure the project is saved and then switch to the project page and move that web browser to one side of the screen next we need to duplicate the current tab I did that by right clicking but you otherwise could just create a tab and find your project in the normal way it doesn't really matter and then I pull the new tab away from this browser window and drop it

to the right okay this is looking good but both projects agree that cloud one has a value of three now when I click on the cat again the value changes to 4 but this time also changes to 4 in our second window two wonderful this is what cloud variables do they share their value with everyone else almost instantly but not quite instantly in fact it takes around one tenth of a second for the value to transfer from window 1 to window 2. a lag of around 100 milliseconds and yes you can click either

cat and the update Works in both directions now there's only so much fun you can have clicking cats how can we go from this to this well let's start small say we have the scratch cat follow the mouse pointer and try to get the second window to mirror these movements now that would be cool when flag clicked Loop forever go to Mouse pointer we know Cloud variables can share a single number with another scratch project and a sprite's position is made up of two numbers given by an X position and a y

position reporter block so why not create a second Cloud variable Cloud 2 and don't forget to check that cloud variable option and now we can set Cloud 1 to this Sprites X position and the Cloud 2 to the Y position nice running the project clearly shows both Cloud 1 and Cloud 2 updating okay since these values will be shared with window 2 we just need a second script to reposition the Sprite using these shared values when two key pressed this allows us to indicate which window is number two sto

p other scripts in Sprite this ensures window 2 won't be running these left-hand scripts instead we Loop forever setting the X position to the value shared with us in Cloud 1. and the same for y position but with cloud 2. nice we have to test this once again ensuring the project is saved then see project page and duplicate the tab if however you left the window open which often I do then make sure to reload that page otherwise the project will be out of date and may lead to confusion if things d

on't work as expected okay here we go both projects are running but I haven't pressed the number two key yet to proceed first click into the right hand window to ensure it has focus and then press the two key boom my cat just flew over to the right why did it do this well it's because the cap on my left screen is positioned to the right and this window is now copying its movements to here now let's bring my mouse back to the left and look the X and Y positions of the first bright are shared allo

wing us to reposition the second Sprite to match the first one this is basically how multiplayer games are coded in scratch but wait do you notice something a bit off the right hand window seems to be mimicking the movements of the left window that's great but it's far from smooth Houston we have a problem upon closer inspection you'll see that the movement occurs in steps only horizontal left and right or vertical up and down it's quite peculiar isn't it well I did mention that cloud variables

have their limitations and we're witnessing some of them right before our eyes the first limitation is this Cloud variable rule number two scratch weights a tenth of a second between sending Cloud updates in other words no matter how quickly you update Cloud variables scratch will only send them at a maximum rate of 10 per second unfortunately this rule also applies when we set two Cloud variables together in our case the X and Y positions resulting in one change being sent before the other and

thus the Sprite moves horizontally then vertically instead of a smooth diagonal line ah there is no way around this restriction so the only way to share our X and Y values at once is to combine them and send them using a single Cloud variable instead well how about we just join these two values together for example an x value of 176 joined with a Y value of 40 would come out as one seven six forty well that worked but now we Face the challenge of not being able to distinguish where one number en

ds and the next one starts the problem is we can't insert a separator character because of cloud rule number one which states that you cannot store letters and symbols in a cloud variable so here is an idea let's record the length of the first number three before the number itself and we'll do the same for the second number two then we can join all the information together to give our encoded string value has that helped us yes because to extract the numbers back out again we simply look at the

first digit which is a three then we read out the next three digits which gives us one seven six that is our x value the following digit is a two and then we read the next two digits and we obtain forty as our y value clever stuff let's code this up create a new variable named encoded string for this Sprite only and make sure to set it to an empty value now we'll create a custom block to let us add individual numbers to this encoded string name it write number with a number input of Val short fo

r value and another label of two encoded string right number Val to encoded string perfect make sure to run without screen refresh so it runs nice and fast so after clearing the encoded string variable let's try writing the number one to the encoder string yes this will want to be the X position of the Sprite going forward but always start off simple now to code up that custom block create another variable also called Val for this Sprite only and set Val to the input Val clicking the script abov

e will set Val to 1 as expected now the reason we're using another variable for vowel is to safeguard against fractional values like say a hundred point five this would really mess up our encoding so we'll pop in a rounding operator to remove the issue before it occurs great so then we simply set encoded string to the join to itself encoded string and OK two more things so another join the length of the variable vowel not the pink one but the orange one we just rounded and then the value itself

a length of 1 and the number one should come out as 1 1 11. pop that on the end of the encoded string and this custom block is done we can test it by clicking the above script again and encoded string is indeed 11. well how about we write a second number two click not a problem one digit the number two and a longer number three four five click we see three digits followed correctly by three four five great now the next step is to retrieve these numbers from the encoded string which is known as d

ecoding the key to this is to keep track of our current position in the encoded string as we start from left and progress across to accomplish this we'll introduce a new variable named encoded index idx for short specific to this Sprite this variable will serve as our tracker we'll initialize the encoded index available to one indicating the starting position as the first digit of the encoded string next let's create a custom block responsible for decoding each number we'll name it Val equals re

ad number from encoded string apologies for the lengthy name but it accurately describes the Block's purpose remember to set the block to run without screen refresh for Optimal Performance to facilitate testing let's plug in the code right away assuming the encoded string variable begins 1 1 1 2 for the initial read we aim to retrieve the number one for the length and another one for the value itself first let's ensure that the valve variable is empty at start next we'll retrieve the value of th

e current letter in the encoded string which will be 1 as expected just remember the current position is given by the encoded index variable right so we can agree that this Returns the number of digits that we need to read in to get the full value so how about we use a repeat block for that exact number currently we will repeat only once but for longer numbers it will repeat around as many times as there are digits we need the next digit so let's immediately change encoded index by 1. and now le

tter encoded index of encoded string will give us the next digit in the encoded string we'll want to append this digit to the Val variable by setting Val to the join of vowel and this next digit this repeat Loop will then do its job looping around adding digits to Val the only thing left to do is to ensure that we increment encoded index by one more at the end so we are positioned to read the next number from the encoded string well this is exciting we can now test if we can correctly decode the

se numbers click this script and confirm that we obtain the first value which is one nice there it is in the vowel variable to get the next one we simply need to run a read Number Block on its own click Splendid there's our number two and with one more click we get three four five it perfectly matches the order and value of our encoded numbers great with this we can encode and retrieve our numbers however we mustn't forget that the screen positions of Sprites can often go negative if we try to e

ncode a negative number like negative 10 then oh dear 3-10 that will definitely fail Cloud rule number one as it's not a valid number somehow we need to encode negative numbers without using the negative symbol well since no numbers will begin with a zero and the negative symbol always appears at the start of a number how about we simply replace the negative symbol with a zero instead so negative 10 will become zero ten and we can identify it as a negative number because it starts with a zero ah

a well let's code that up into our right number script we first check for negative numbers if the value Val is less than zero we'll use a set vowel block joining a zero digit on the left and we need to be careful to remove that negative sign from Val so we'll use the absolute value abs of Val simple enough click the test script and see how our negative 10 now becomes 0 1 0. of course preceded by 3 as it is three digits long including that new zero and that's cool because it passes the cloud rule

test the same goes for negative 20. no negatives in sight next up then we need to decode these values currently if we read out the first encoded negative number we get back 0 10 in the variable vowel it should have been negative 10. so all we need to do is watch for the leading zero and then convert that number to a negative resulting in negative 10. we'll add this script to the bottom of the Define read number script if if first letter letter one of vowel is equal to zero then we set Val to be

negative Val or in other words subtract Val from zero let's quickly test it and yes now we are getting back negative 10 just as we hoped click on the next read number block and out pops negative 20. this is great news it means we now have fully functioning encoding and decoding scripts wow finally we can put these two good use remember why we are doing this oh yes our Cloud Player was moving in steps because cloudwall 2 says we shouldn't update more than one Cloud available at a time well no pr

oblem now we can encode both the X and Y petitions into a single value so back to our original game Loop We Begin by setting the encoded string variable to empty and then using our right custom block to encode first the X position and then the Y position of this Sprite after that all we need to do is set Cloud 1 to the encoded string super that sorts out player one and the cloud available will make its way over to player 2's computer which is running this script all we need to do now is decode t

he values out of it Begin by setting encoded string to the new value from the cloud one then set encoded index to 1. to start decoding from the very first letter now we use our read custom block to get the first value out of the encoded string this is an X position so immediately set the x position to vowel then we can do the same again read a value and this time set y position to Val excellent because that my friends is all there is to it to test this out make sure the project is saved and then

get those two browser tabs side by side remembering to reload the right hand page if you kept it open all this time now with both projects running I'll click into the right window and press the two key gotta remember to do that when my mouse is over the left hand window the cat in the right window follows my emotions but how much better is this we can move the player diagonally and the cloud player doesn't glitch sideways at all nope no stepping to be seen also the lag between my left movement

and my right movement is surprisingly small if you got this far then you can be pretty tough with yourselves it's super cool but we are far from perfect yet you will notice the movement on player 2 screen is more choppy than on the first screen this is because Cloud rule number two also states that we can't update a cloud variable faster than every one tenth of a second so even though we are only updating One Cloud available now we are still updating it at a rate of 30 times a second the rule is

that scratch will only send 10 changes per second Max so two of every three animation frames we are sending are skipped this is far from ideal and is not the smooth gameplay action we might expect from a top class Network game so how do we fix this in the next episode of this exciting series we will learn how movement buffers and data streams can smooth out player motion making our games look Top Notch but in the process we'll also begin to expand our Cloud engine to take advantage of my latest

massive multiplayer online techniques as seen in my MMO Minecraft and my MMO platformer projects these can easily handle vast numbers of players and are seriously a lot of fun the great thing about these is that they also make joining and leaving a game way more robust than my previous Cloud engines and support testing on that single unshared project a huge bonus for us scratch Developers well I hope you enjoyed this video if you did then please please smash that like button under the video did

you click it and if you don't want to miss the next exciting episode and guys it's going to be so cool then make sure you subscribe to this Channel and that you've clicked that Bell icon to be notified lastly if you are interested in supporting this channel further then you can join my channel membership there are some cool perks and even the option to get access to the scratch projects that go along with each episode that's so cool that just leads me to say thank you for watching I hope you ha

ve a great week ahead and scratch on guys [Music]