Awesome Cloud Clones!!! - Multiplayer Scratch Tutorial #3

foreign scratchers welcome back to the wonderful world of online multiplayer scratch games and I'm so excited because in this third episode in the series all our hard work finally comes together we'll be using clones to bring the cloud players to life and yes supporting from two to over 100 players in game at the same time and those move re buffers from episode 2 will ensure everyone is moving as smooth and Pixel Perfect as possible what's this uh you've gone blank are you still there and now I often get asked how we can know when players leave our Cloud games well perhaps I just gave you a clue drop me a comment under the video if you think you know and we can compare strategies as we cover this and much more in today's video so let's open up our episode two projects and before we begin to code here's a really Speedy recap of what we've done so far in our player Sprite we move the player around with the mouse now recording their X and Y positions in the my values list over a number of frames while doing this we broadcast Cloud tick this is received in the cloud player Sprite and then into the send my cloud data script this code only runs once every fourth frame to ensure we don't exceed the cloud sending limit now we encode our Cloud message beginning with the player's unique ID a large random number that only our player uses followed by the rest of the data values from the AI values list of X and Y positions for the previous four frames of motion and Bam we set the cloud variable these updates are also picked up by everyone playing our scratch game we are only checking the first Cloud available Cloud 1 at present we compare it to our stored copy to check if it has changed if not there's nothing more to do but otherwise we begin to decode it the first number we read out is of course the sending player's unique ID now of course it's possible that we sent this message so we ignore our own IDs right away then either it's a new player one with a uid not in our playlist in which case we add them to our list or we saw them before and either way we ensure we also store the cloud data against the correct Row in the player list that's our data dictionary Splendid did all that make sense I hope so and this got us pretty far but the next step is so much more exciting we want to move from funky yet slightly boring scratch lists too awesome and Visually appealing Cloud Player Sprites all moving around on the screen together oh yes without further Ado then make sure to save the project as a new copy for this is episode three guys let's get scratching the first thing we want to do is make our Cloud players visible we already have an item in our player uid list for every player that joins our game the next step is to create a corresponding Sprite clone for each player too we already hid the original cloud player Sprite for this will act as a clone Factory creating visual clones one for each player that is added to our player list and so they remain identifiable will give each clone a player item number player hash matching their list item number as for the Clone Factory we'll just keep their player hash blank so beginning in the cloud player Sprite find the Define process Cloud item script and scroll down to where we just added a new player to the players list and if we create a clone of this Sprite immediately after setting the player hash then the new clone will be created with its player hash already set to the appropriate new list item number excellent then right at the bottom to keep our clone Factory identifiable we must set player hash back to the empty value now this won't affect the Clone we just created only the Clone Factory okay scroll over to the when I receive Cloud tick script we now have a problem with this when I receive block when we broadcast this message not only will it run on this Sprite but also on every clone that we just created so in effect it can run many many times per tick we should guard against this if player hash is greater than the empty value that's true for any of the Clones then we'll want to do player clone stuff like moving around the screen make a new custom block for that named player clone tick and we'll let it run without screen refresh okay and make use of it right away before stopping this script the Clones don't want to run any of the scripts below this only the single original clone Factory Sprite will go down that code path now perfecto let's take that Define player clone tick script into some free space each player clone will run this script individually and we want it to take the encoded cloud data and use it to move the Sprite around the screen as it happens when we created this clone we did so having just read the player uid out of their encoded string therefore we can continue where we left off and read out the very next pair of X and Y position values read number from encoded string into the valve variable and then set X position to the new value vowel do the same again for the Y value read number interval and set y position again to Val and I love that it's so straightforward and when we come around again after the next screen refresh we'll read out the next pair of X and Y values and that will continue to play back the animation one frame at a time but this encoded string is not boundless only containing four pairs of data so once we reach the end we'll need to feed it more data to keep our player moving smoothly and that is where our player data list comes in with luck while we were playing back the last animation from the buffer The Next Movement buffer will have arrived over the cloud and have been popped into the corresponding player data list ready for us to pick it up now so when we've reached the end of the encoded string if encoded index is greater than the length of encoded string make a new custom block named get next data packet and we'll run without screen refresh okay we'll code that up in a second first what happens when we get the next data packet but we haven't received any more data yet over the cloud if encoded string is equal to the empty value in that case there's nothing we can do except wait so stop this script and we'll try again the next game tick the whys off we go again right get the next data packet so we need to fetch it from the player data list set the encoded string to item of player data and at item number given by our player hash variable cool and I didn't mention this before but since we don't want to ever read the same value out of this list again we'll blank it out in the list using a replace item play a hash of player data and stuff in the blank value so the encoder string is set we should also set encoded index to the number two ready to begin reading from the second character after that initial C that we joined on the front do you remember that and the last step now read in the first encoded number that will be the sending player's unique ID we can simply skip over that for now as it gets us ready to read out the X and Y position values next and then off we go again the smooth playback can continue it's a beautifully clean process and I'm excited to test it out only hold on I just remembered we haven't yet made our clones visible so drop a show block here triggering as soon as we have successfully reading the second packet of data okay this is it we need two windows side by side and you'll notice the window I left open for testing on the right is still showing the old project I need to reload that one hold on to your scratch cats and here we go starting the right hand project first and there's my cat and then the left window oh yes are you seeing this we finally have two cats visible in a single project at once and as I move my cat around look how smoothly the motion is playing back on screen two very cool how about if we switch over to the second window oops a little glitch there but we are pushing scratches Cloud servers pretty hard and things are quickly back again pretty sweet right and I can switch back and forth without any issues whatsoever let's level this up how about three players okay not bad not bad at all the motion is still smooth with a few glitches now and then but don't forget we are still running this on a single Cloud variable so what would this be like if we upgraded the project to use say eight Cloud variables at a time now that would be eight times more bandwidth for the players to communicate over find the cloud setup script this is where we record the original value of the first Cloud variable let's duplicate that eight times over ready to support eight Cloud variables just make sure not to lose those two blocks off the bottom now we already have a Cloud 2 variable left over from episode one so drop it in as the second item added to the list make Cloud three as a cloud variable and then we do the same for cloud four Cloud five six seven and finally Cloud eight all as Cloud variables then drag each one in to be added to the list in the order one two eight this ensures we know the starting value of each Cloud variable next we need to observe each Cloud variable watching for changes of value and that's handled in our Cloud tick script down here process Cloud item one so again duplicate that block eight times over and then we switch to use cloud variables 1 2 3 4 5 6 7 and 8. and then set the corresponding Cloud item numbers down the left again matching it in one through eight Splendid that handles the reading in of changes from all of our eight Cloud variables but there's no point in doing any of this if we don't actually make use of these other variables look down here in the send my cloud data script yeah we're only ever setting Cloud one but we are faced with a choice how do we pick which Cloud variables to use now do we assign each player a random variable when we join the game or perhaps we switch every time we send a value or do we try to pick the least used Cloud variable over time is that even possible man well that's some complicated stuff but you don't have to worry the simplest method is probably the best and that is to switch every time so make a new variable to keep track of our choice name it my channel and keep it for all Sprites then set it to a pick random from one to the length of cloud values that should be eight right now okay move the set Cloud one out of the way for now we have eight choices of variables to set it may seem easiest to make eight if blocks and we could but instead we're going to use the binary chop technique to only require three if checks by splitting the problem in half over and over again to each a goal faster if my channel is less than five that splits the 8 channels in half from one to four and five to eight then we can narrow it down further with another if my channel is less than three that splits the one to four as one to two and three to four one more time then if my channel is less than two and hurray we have channel one so set Cloud one to encoded string in here otherwise it was channel two so set Cloud 2 to encoded string this pattern must continue duplicate the innermost if and check if my channel is less than four if so we set Cloud 3 to encoder string else set Cloud four now the biggest duplication of all the completed my channel is lesson 3 script down into the empty else branch and we can now see a pattern so simply set the right hand Cloud variables five six seven and eight in that order and then we notice that these are both less than seven five is less than six and for the other choice seven is less than eight job done and with that it's high time we gave it a test we should make all our Cloud variables visible so we can confirm they're all getting set if any are not now changing value then you'll have to go back and confirm that you got all those if conditions correct looking good here though every cloud variable has changed so I am confident to progress on and test this across the cloud bring back the second window I'm making sure of course that you save the project and reloaded that second browser window and now let's see what we've got okay yes it's looking pretty much the same but that is a good thing all we've done is make the engine eight times more capable and stable and that is a great thing if we are really wanting to support 20 50 100 players right now with three players again and we already are able to observe the benefits of extra Cloud bandwidth in the form of fewer dropouts in glitches yeah this engine is really coming together now so what else is left the natural progression is to next talk about what happens when a player leaves the game player clicks the stop button or closes their browser window and yet every other player continues to see the player 3 in their game just no longer moving around not only that but we are also no longer getting any Cloud variable updates from that player so how do we detect that they've left how about this we keep a record of how long it has been since each player sent us a cloud update and after a short period without any contact we can be pretty sure that they've left the game how simple is that this should be a cinch to code up in the cloud player Sprite find the player clone tick script make a new variable named inactive for this Sprite only that's important as each clone will need to keep track of their own inactivity and then every time we look for the new cloud data but don't find any we change inactive by one with no activity this will grow by 30 ticks every second so if inactive is greater than 150 that will be five seconds we want to remove them from this game and you may find this a little surprising we don't delete the Clone only hide them instead and we scrub their unique ID out of the player list the reason each clone has a player hash that matches their item number in the player list if we were to delete an item then that link gets all skewed and things will go very wrong disaster so we don't do that so just scrub out the player uid by replacing item player hash of player uid with the blank value and hide this player clone out of sight out of mind lastly down here when we do receive data from the player we can set inactive back down to zero it is now active perfect it's testing time remember to save the project and reload the second window the first test is to check that both our players are visible and not becoming inactive when they shouldn't check then I stop the right window and this is the Moment of Truth the second player is still visible in the top left corner of the window and they are not they have left the game haha that is awesome take a look in the player uid list and confirm that their uid has been blanked out too that worked a treat but hold on what happens if I restart player 2's project the answer is the first player slot stays empty and a brand new slot is added for the rejoining player now I mean that does work okay but it's not very efficient and we will hit problems after enough players leave and rejoin eventually using up all 300 of the Clones that we have at our disposal so instead how about we get players to reuse the expired empty slots as they join our game guys let's get recycling find the process Cloud item script and scroll down to where we are adding the new players here instead of instantly adding new rows let's check for those empty slots duplicate the set player hash block and drop it in before we add rows to the player list but this time we are looking for empty items in the list the blank value then using an if else if player hash is again zero then nope there were no empty slots so go ahead and add that new row after all but if player hash is greater than zero then we did find a free slot so this time don't create a new clone and simply replace player hash of and not play data but the player uids and replace it with Val as that still holds the unique ID of the joining player at this point and then the Clone player should pick up the new data packet and spring back to life vanderbar we have to test this right away save and reload the second window and smash those green flags straight away I'll stop player 2's game and wait for them to leave yep there they go now we have an empty game slot so will it get reused when we rejoin yes they do that is so smart clone recycling for the win we can of course push this a little harder and try the same test with many more players at once to make this more fun to watch let's change the my player script to cause the cat to dance in small circles we only go to the mouse pointer when the mouse button is down then always move forward by five and turn clockwise by 10. this will take us in those small circles switch the direction mode to don't rotate for the time being as direction will be covered in the next episode finally to distinguish our player from all the others why not set their color effect to 20. nice okay let's do this save and reload all the project Windows here I'm using four now and it's easy to see which player is mine on each screen and the movement makes it more obvious which players are having Network glitches pretty sweet so far I'm enjoying their hypnotic dance I'll stop one player and they are removed from the other windows after five seconds then rejoining yeah it's instant and now the blank slot is recycled so that is good next I'm stopping all but one player and there are three empty player slots and as I rejoin the player slots get refilled and the gameplay resumes that works great so who's ready to begin plugging this into our own games I know I am and in the next video I'll show you exactly how it's done so please drop me a comment under this video to let me know what game types you'd like to see covered first I'm planning to show it off in a platformer a top-down game maybe the raycaster and perhaps some kind of shooter game too what do you guys suggest anyhow we have reached the end of this episode I do hope you're enjoying this series if so please do smash that like button and if you haven't already subscribe to the channel ticking that Bell icon so you get notified as soon as the next episode lands but until then thanks for watching have a great week ahead and scratch on guys [Music]

Channel: griffpatch

Views: 71,845

Keywords: block coding, cloud variables, coding for kids, griffpatch, how to make a multiplayer game in scratch, online scratch, online scratch game, online scratch games, scratch, scratch 3, scratch cloud, scratch cloud game, scratch cloud game tutorial, scratch coding, scratch coding tutorial, scratch game, scratch game tutorial, scratch games, scratch mmo, scratch multiplayer, scratch programming, scratch tutorial, scratch tutorial game, scratch tutorials, scratch clones

Id: -nmSTdBXwwY

Length: 22min 10sec (1330 seconds)

Published: Sat Jun 24 2023