Cloud Game Tutorial | Part 5 | Smooth Movement

hello fellow scratchers i'm griff patch and welcome to the fifth video in a series creating a cloud game in scratch you fed up with a jittery movement in the cloud games and want to finally get things playing smoothly well don't go anywhere because today is your lucky day we probably all know by now that scratch runs at 30 frames per second which means if we move our cat around the level he will update his position 30 times every second this also means that we must match this rate in our cloud data transmission if we want smooth gameplay for all our players the problem is scratch forces a maximum update rate of 10 frames a second for cloud data that would be one cloud update for every three screen updates and that is why in our previous episodes the other player's movement was still so dissatisfyingly jittery there are a number of ways we can attempt to tackle this problem to simply smooth out the two out of the three missing frames but to be honest one simple approach has consistently worked far better than all others for me and that is to implement a simple buffered transmission stream this luckily sounds far more complex than it really is at present we only send the position of the player every tenth of a second losing the other two in between frame positions all together but no need instead we can record the positions as they occur into a list this is called buffering and then when we send the cloud data we send the whole buffer all three recorded frames in one update this way no data is lost and the receiving scripts will be able to decode the buffer and play back the movements exactly as they occurred without any guesswork to make the movement look any less realistic so we begin in the player sprite let's create a new custom block called player tick markers run without screen refresh remove the go to mouse pointer block into the new custom block and make sure it's called from the same place it used to be let's also tidy up the send cloud data custom block rather than having the if check before calling into the send cloud data let's move it inside the custom block and reverse the logic to stop the script if we haven't yet connected to the cloud we know this when our player hash player number is less than one stopping this script inside a custom block with this stop this script only stops this custom block from running and will continue running any scripts that call the custom block so in other coding languages this might be thought of as a return statement now all this talk of scratch only allowing updates of cloud variables every three frames but griff patch this project is seemingly updating them every frame is it not well yes it is but scratch is just ignoring two out of every three updates so let's take control of situation add a new variable make it for this sprite only and name it cloud timer drag in change cloud timer by 1 and place it in the send cloud data custom block and then if cloud timer is less than 3 then we again stop this script right after the if we can set the cloud timer back to zero this has the effect of now only running the code below the if on the third of every three frames perfect next we need to create the position buffer add a new list ensuring we mark it for this sprite only that is very important and name the list buffer add the exposition and y position of the player to the new buffer list and insert the blocks before the cloud timer check we need to make sure we are recording these every frame it's very good practice to add a delete all block for any list that you intend to start empty and add it to the setup phase of your project okay let's take a moment to give this project a quick run click the green flag and move your mouse around we should be seeing the buffer list quickly filling up with values as the positions of the mouse get recorded frame by frame into the buffer great so the next step is to better send this data to the cloud if you look at the scripts that currently construct the cloud data to be sent you can see that we are sending the following structured data username time x position and y position the four values that we're writing out now we're going to modify this to be sending all three buffered positions now username time x position 1 and y position 1 x position 2 and y position 2 and x position 3 and y position 3. to do this we add a repeat loop in place of the right x and y position blocks this loop will repeat for the length of the buffer list as we want it to send all the items that are in the list inside this loop we first write item one of the buffer list and then immediately afterwards delete the first item so this is the effect of writing out the first second third line after line of this list until there's none left in it because our send cloud data custom block now contains a repeat loop it is worth checking that it is marked as run without screen refresh otherwise we might have the whole project lagging out on this new repeat loop okay let's run the project we can see that the buffer list now begins to fill up but then on the third frame it empties as expected awesome but we are not done yet as we haven't scripted the opponent's sprite to handle this new updated cloud variable data structure click on the opponent's sprite now and we'll fix that right away to be able to decode and play back the position of each opponent player from the new cloud data structure we will again make use of a buffering list from within the opponent's sprite we create a new list now ensuring it's for this sprite only and name it again buffer this way each opponent clone will have its own personal list we again delete all the content of the list in the setup custom block right at the start now we need to modify our tick custom block separate off the begin decode stack from the bottom of the custom block and again split it just before we set the x position of the opponent's sprite now the top part of these scripts is used to decode the player name and prepare the first exposition of the opponent because we only actually need to decode the player's name when the cloud variable has changed we can move the script up into the else of the if block above remember this if checks to see if the cloud variable has changed since we last looked at it next add a repeat until value equals blank within the repeat add value to buffer and a value equals read from encoded custom block so what does this do look at the structure we are reading from again the first read gets the player's name the second gets the time although we simply don't make use of this right now the third read gets the first x position if there is one and otherwise the value will be set to nothing all the remaining values in the cloud variable are x and y position value pairs so we've created a repeat loop that goes around until there is nothing left to read each time around we add the current value from the buffer list and then read another value and around we go again filling up the buffer until all items are read so the buffer list is now filled now we need to play back the positions in the buffer to move the opponent's sprite around at the bottom of the tick custom block we check if the length of buffer is greater than zero if so then there is data buffered ready for playback so set the exposition to item 1 of the buffer this will be the first x position then immediately delete item 1 as we have no more use for it next set the y position again to item 1 of buffer remember that we just deleted the previous item one so item one is now what would have been item two a moment ago which is the y position and again delete item one and that's that each time we run through this tick receiver in the opponent sprite we are checking for new cloud updates if there are any we're adding them to the sprites buffer and we play back a single tick of the buffered positions always the top one in the list because that is the first one put into the buffer list and therefore the oldest we have to all want to play them back in the same order they were recorded okay hold on to your mice because it's time to give this a try i'll do what i usually do and open two web browsers side by side the right one is in incognito mode but you can also use a different browser profile or any way that you want to do this and i log into scratch with a different scratch account also note that they both have to be of scratcher status new scratcher statuses just won't work with cloud data yet oh um so something has gone wrong here this is not working as expected but don't panic let's quickly analyze what's going wrong see how slowly all the movement is in my mind i've already have a suspicion as to the cause if we go back to the opponent's sprite and the tick custom block remember i specifically mentioned to check the custom block in the player sprite that it was now running without screen refresh well we have the same problem here i didn't remember to tell you to do the same in the opponent sprite now we have fallen to the same problem this tick block must run and finish within one scratch run cycle but the repeat loop inside the custom block doesn't allow for that not without the run without screen refresh so let's try this again opening the two windows and making sure to reload the right-hand browser so that the project will be updated with our latest changes and oh wow do you see what i am seeing we did it finally after all these episodes we have got smooth player movement over scratches cloud variables compare this to the movement we had just four episodes ago and well we're simply worlds apart now i want to invite some scratch friends online to test this new update with me but to be honest four players is not going to be enough let's quickly up the maximum player count to eight to do this click on the player sprite and set the max players to eight at the start here then under the set cloud custom block we're going to extend the if clause to include players five to eight as follows now create four new variables ensuring you mark them all as cloud variables and name them p5 p6 p7 and p8 all as cloud variables update the cloud block to use each variable against its corresponding player number now switch to the opponent sprite and we'll extend the value equals cloud custom block to also declare player 5 through 8. ensure your scripts look just like mine this amount of nested ifs could start to get a little tricky to put together so do be careful excellent now it's time to play i've just sent out a request to some of my friends so i'll wait and see if they join now aha and here we go some people are joining this is great they're just moving around and watching see how smooth they are and what they're up to yeah look at this they're all moving around really nicely some people aren't moving their mouse obviously but that's not the fault of the project here we go boinging around really good yep this is working great and it works fine with with lots more players and we play as we got here is it six seven i'm not sure right there you have it a smooth cloud experience with auto joining auto disconnecting and finally smooth player movement via this new buffered transmission stream where we go from here is up to you i do expect to do at least one more in the series where i shall show you how to incorporate these scripts into say a platformer just in case anyone's having trouble making the leap between the tutorials i provide so thanks for watching please like the video remember to subscribe to my channel to catch future videos and leave a comment say hi and share your ideas and any projects you've been able to create following these tutorials until next time then scratch on