Impossible "Multi-Touch" Joysticks!!! 👉📱👈 Mobile Friendly Scratch Coding Tutorial

Key Takeaways

hello fellow scratchers everyone knows multi-touch joysticks are not possible in scratch right well that's what I thought until a scratcher named Alexandra Darion shared with me a clever trick that simply blew me away yes here I am scratching on my phone left thumb on a thumb stick and simultaneously able to click with my right thumb what witchcraft is this I kid you not this is native scratch can you imagine the possibilities whether you want to move and jump or move and shoot or perform those impossible ceiling crouches in apple well that is exactly what we've been waiting for want to know how this works then keep watching first we'll explain the basics and then we'll build a working backpackable multi-touch joystick of your own all ready to drop into your best games so cool the best way to explain this Wizardry is to look at exactly how scratch handles mobile clicks and drags this little script will do the job it just continually moves the cat Sprite to the mouse pointer and says whether the mouse button is down with true or false otherwise if I tap the screen with my finger scratch treats this as a mouse click true and Scratchy follows my finger wherever it may go take my finger off the screen and Scratchy says false well that is all as we would expect but here comes a problem a second touch on the screen neither change es the cat's position or affects the mouse down state it still reports true as it did before so the second touch was completely undetectable bummer but wait this is weird having released the second touch I can keep dragging the cat around but the cat is reporting false even though our first finger never left the screen it appears scratch only reports the last change of any touch whether pressing or releasing in which case yes from now on as long as we keep holding the first finger to the screen we can measure the movements of the first touch with a mouse X and Y and the clicking of the screen with the mouse down it's that simple that's not to say there aren't still a few hurdles to make this work smoothly like how to deal with that pesky first failed click and how to detect when the player releases our thumb stick but honestly these little problems are what makes coding really fun guys enough talk already let's get scratching oh no there's a most dangerous and horrible looking Chasm here and we need to get scratch cat across in safety so we need some control mechanism make a new Sprite naming it stick we are going to Define both keyboard and touching controls all in one place to make our life simpler when green flag clicked go to front this is more important than you might imagine the Sprite at the front will begin running its script RPS first so if we want our keyboard and mobile controls to not lag a frame behind the action then we need this to run as soon as possible now we'll repeat forever okay we need a variable stick X for all Sprites we'll detect the use of the keyboard first but don't fear the mobile controls are coming momentarily so stick around and we set stick X to key right pressed subtract key left pressed if we run the project you can see that this already reports as one for right and minus one for left zero for nothing being pressed at all that is funky but what if we want more key combinations like the wd2 well no problem we just place the right key check in an or block along with a test for the D key but gosh the length of this script is getting quickly out of hand so let's break the maths up using a set block followed by a change by block first we set stick x to the right hand key values and then we change the same stick X by the negative value of the left hand key presses yeah that wants to be an or too for the left Arrow or the a key great does that make sense I hope so because now we do the same for stick y make sure to create that for all Sprites too and we want to set stick y to the up Arrow or W key and change stick y by the down arrow or S key perfect time to give that a test just to confirm that stick X and stick y variables are reporting ones zeros and minus ones as appropriate for all the arrow keys and the W ASD key combinations that we wanted cool so just one more stick variable to add and that is the awesome stick button for all Sprites and oh boy this is the one we are so excited to have in a mobile compatible control scheme use an if else checking for whether the space key is pressed then if it's not pressed we'll start there set the stick button to zero it's not pressed but if it's pressed then interestingly perhaps drop in a change stick button by one right now if we run the game you'll find holding down the space key causes the stick button to go crazy when our game is fleshed out a little more this will increase by one every game frame but at the present there's nothing to stop it changing as fast as it likes which is very fast indeed great we have a basic keyboard control scheme before we add Mobile support let's link this up to control our scratch cat so in the scratch cat Sprite when flag clicked position the player at the starting position then in a forever Loop change their X position by 8 multiplied by our stick X variable left or right and in the same way change y by six multiplied by stick y so they will travel a little slower up and down that's why it's six rather than eight give that a test Splendid that works great and on a side note see how stick button is now increasing much slower I told you that would happen right how about we hook this up to make a jump when green flag clicked forever and we simply wait until stick button is equal to one if we used a greater than zero then the cat would keep jumping over and over but by saying equals one it will only jump the first time the key is held down then switch to a jumping costume repeat 10 times changing y by 10 to jump upwards and then back to costume one repeating 10 times back down again with a change y by -10 cool give that another go jump jump jump jump oh boy this game will be on trending in no time but enough what about the Mobile touch good point click back into this stick Sprite and let's do this this is all keyboard code let's Shuffle it off into a custom block naming it keyboard controls run without screen refresh and move everything inside the forever Loop into this new Define block next up we'll draw our joystick base costume a black circle holding shift while drawing to keep it a perfect circle and we want it around 100 by 100 pixels wide or just a little over is fine the great thing about sizing to 100 pixels is that when we size the costume to 100% in the code it will be 100 pixels wide and if it was 50% it will be 50 pixels wide that makes working with sizes much easier then using the selection tool snap the shape to the middle of the costume canvas that's really important perfect if you want to decorate it further then be my guest I'm going to name this costume bass next drag it on the stage to where you want it to sit bottom left is generally a good fit now before we begin looping let's set the stick up correctly the thumb stick is a little big for my taste at present so size it to 80% and use a set ghost effect to as much as 80% to fade it nicely out so as it's not too distracting yeah I like that now in that forever Loop will'll position the stick Sprite with a goto XY and then drop in a switch costume 2 base perfect okay we'll need to know the range of movement our stick has from the center to the edge so make a new variable for this named range for this Sprite only and we'll set range to the Sprite size reporter divided by 2 five now dividing by two would take us right to the very edge but we want to stop the stick just a little bit before that so 2 and a half it is join the scripts backup and we are ready to talk about touch interactions so until someone actually touches the screen we want to allow the previous keyboard controls to function therefore we'll repeat until the mouse is down and until is we'll keep running the keyboard controls block if we give that a test you'll find the keyboard controls are still working fine great but this mouse down check alone doesn't guarantee this was a fresh click or touch event we need to ensure the mouse wasn't already down beforehand so duplicate that repeat until block and change the first one to repeat until the mouse is not down better that means the second repeat will always detect a fresh new click next up we don't want to activate the stick if we are not clicking somewhere nearby so check if the distance from this Sprite to the mouse pointer is less than the size of the Sprite and then make a new custom block for this naming it stick activated and do we run without screen refresh no no we do not leave it unchecked because we are expecting this gript to run until we finish moving the thumb stick around definitely longer than one game tick cool drop that into the last if now I'll just reposition these scripts so that we can see the main script and the stick activated script together there we go so to begin with the stick will stay active until we release the mouse button repeat until not Mouse down and while it is active we set stick X to and we want the distance between the mouse pointer and the middle of the sticks Sprite so that's Mouse X subtract X position the position of our Sprite but ah heads up that distance can be a large number and we really want it to have a range from -1 to one like our keyboard joystick did so we have to divide the Distance by and here we go our range variable cool do the same for the stick y with the mouse y subtract y position that's still divided by range and hrah because that is surprisingly the basis for a Simple Touch stick control smash the green flag and check this out I can click and drag on the base control and our cap moves perfectly in sync with our directions it also has the benefit of being analog that is we can request press slow or fast movements rather than the keyboards either on or off digital approach which by the way still works very well while I'm not using the mouse which is awesome because our scratchcat player Sprite only needs to look at stick X and Y and yet both arrow keys was WD and touch control systems are cated for man that's cool what a Time Saver now we do have one problem we can still drag our Mouse way off the base area and this causes our stick X and Y to exceed the intended minus one to one limit no problem if greater than and we'll use the ABS value of stick X this means the absolute value of and it simply flips any negative numbers to positive ones and we check whether that's greater than one and that will therefore be true for numbers less than negative 1 as well now to set stick X back to one or minor 1 we divide stick X by the ABS of stick X you see any number divided by itself is one but since we have an ABS here little trick negative numbers end up as negative one instead which is exactly what we want perfect let's do this again for stick y stick y stick Y and stick y giving that another test and yeah that's what we wanted stick X and Y are maxing out at one this is great for platform games but a little different from my crazy cool joysticks tutorial which is still around if you want to see it where we limited the movement to a circle each has their pros and cons and we can do either now this part is almost done and I'm desperate to get on to the multi-touch but just before we do have you noticed that when we first touch the stick it's really hard to begin dead center and as a consequence our player starts moving around right away this can be very frustrating and can lead to you losing a life in a real game so watch this drop a go-to mouse pointer at the top of this stick activated script and now when we run the project the first touch teleports the stick base to our Mouse pointer and thus we always begin dead center this prevents any undesired movement and now that is funky and literally a lifesaver on most mobile cool because we can now finally look at adding that multi-touch support oh yeah to make sure we know what scripts do what pull out all the stick movement code and make a new custom block to house it in name it detect stick movement and this time we can run without screen refresh yeah drop it back in the forever Loop and now make another new block this time named detect stick button crazy drop it in right after the stick movement Block in the same Loop so basically we need an if else and we'll be looking for the mouse down state and when it's not down in the else we set stick button to zero and just like for the keyboard version when the mouse is down we change stick button by one but this isn't going to work is it because if we run the project the first click to use our stick also triggers a mouse down jump oh man this is our first problem well then we must ignore the first click and not jump we can do this with a variable latch set stick button to the empty value as soon as the stick is activated but before the repeat Loop begins this empty value is our latch value then in the detect stick button script we want to wait until the latch is removed by releasing the mouse and setting stick button to zero here therefore don't set button to one until stick button is not an empty value but don't Yes you heard me correctly I have made a mistake while recording this works as equal to zero but really it should be greater than the empty value otherwise it will stop at one and the change will never increase any further let's give this a test and this time I'm going to switch to testing on my mobile phone you can see My Touch is highlighted as little white circles well the initial click of the stick no longer triggers a false jump but as soon as we tap the screen with a second touch all that happens is the first touch ends and we are no longer registering a usable joystick quite the step backwards really the reason of course is that when the second touch ends our Mouse down also ends even though one finger is still touching the screen only the last touch or release updates the mouse down reporter so we no longer use the mouse down here and instead we repeat until the distance to the mouse pointer is greater than and we'll use a size multiplied by 1.5 I want an even larger active drag zone around the stick before it deactivates right this might feel a little odd to begin with but let's see this in action I'll try to hold our cat still and then tap with my second finger and as expected the second touch just unlatches the stick button to zero without a jump click again and we jump and we can keep jumping with more touches this is amazing look at me go I really didn't think this would be possible in Native scratch wow but there are problems if I just let go of the left stick scratch doesn't notice and it keeps on assuming the stick is held in the same position to cancel it we need to click on the screen again or drag the joystick far out of its active Zone feels weird at first but you soon get used to it and the point is we have actually done it this is now a fully working backpackable multi-touch joystick and once your fingers are on the screen it's just so easy to control it's just lacking a whole lot of Polish like a visual stick to move around and a clickable button but one little snag before we do have you noticed how tricky it is to keep the player still in the past we could just release the stick but now we need to keep contact so we really need a so-called Dead Zone in the Middle where no movement occurs this can either be done in the stick script or in the player scripts so your choice really I'm going to do it right in my player before we change X by wrap that in an if and check that the absolute the ABS of stick X is greater than some low threshold say 0.3 the same can be done for stick y right smash that green flag The Dead Zone gives us a little more confidence that we can keep our players still without having to lift our finger off the screen nice job to top it off we can then stuff a pointing Direction into the change X and set direction to stick X as long as we've set the direction mode of scratchy to Left Right only that is and then this will let them face the way they moved well they will be pleased and so am I that looks World better oh wait I do believe I have a problem I'm seeing my cat begin bouncing up and down over and over again when I hold down the button as far as I was aware this should never occur due to the cat only jumping when stick button was equal to one but as you can see my stick button is equal to one and that is wrong yet that was down to that previous bug remember where I should have checked that stick button was greater than the empty value otherwise this change stick button only runs once and never increases greater than one test that again and few bug squashed a jump is now only triggered by the first click but for the icing on the cake we'll now give our multi-touch stick a facelift for we are missing that iconic dragable central control stick in the costume editor duplicate Bas naming it Base active and then click back into the first base costume and add a new white circle making it much smaller than the first and snap it again to the center I think that looks pretty good don't you but so that we can drag the middle around on screen duplicate this costume again and delete the outer circles entirely this costume will now name stick so when we run the project we start with a comb fine stick costume so now as the stick is activated we must separate the stick from the base using a clone after going to the mouse pointer switch to the stick costume and create a clone of myself so with the Clone made we switch our main Sprites costume back to the Base active costume the one without the stick join the scripts back together however because we are generating a clone we must also ensure we did delete that clone when the drag is finished for that we'll end with a broadcast and the new message deactivate stick and it will be very simple when I receive deactivate stick delete this clone now to get the Clone moving along with our touches when I start as a clone I will ensure this is the stick by saying if costume name equals stick we start by going forward by one layer all clones begin behind the original Sprite and we want this stick to be in front of the base then set ghost effect to zero so that the drag stick is nice and bright a forever loop at least until the Clone is deleted and now we want to set the thumb stick's position to the same as the base we need a trick to get scratch to do this click into the player Sprite temporarily and now drag in a new goto stick block this we then proceed to drop back into the sticks Sprite we can get rid of this one then back in our stick scripts we can pop that block into our waiting forever Loop nice next we simply need to offset this by stick X and stick y using our change X and change y by blocks just remember to multiply stick X by range to reflect the full movement the same applies to stick y cool smash the green flag and you should find that activating the stick produces a bright white handle that we can move freely around and yet it's constrained to the stick base perfect so then the last upgrade We'll add is a nice multi-touch button with a helpful click to activate message to let people know what to do next back in the costume editor then duplicate The Base active costume and right in white click to two and with another text element activate I do it in two parts so that I can Center a line each one independently finally I'll add a little arrow pointing down at the button to draw attention to it give the costume a name I'm calling mine ready okay back in the code we need the stick activated script and where we were already creating the stick clone we are now going to also switch costume to ready and again create a clone make sure to drop these in before switching costume to stick order is often more important than you might imagine and this will ensure the stick will still go in front of the bass Sprite cool then we need to look at the when I start his clone block next we already handled the stick clone here so the button clone will be handled below this if and we want to position this button on the right hand over here drop in a gotoxy block and we'll flip the X position with a negative value to a positive one 174 in my case that should be enough for us to already run the project and check out the basic positioning the new button only appears when we click down on the stick like so and oh that looks good yeah and then when we release the joystick it disappears again this is good because it helps the player to understand how this button is to be used so now we want to change the costume once the button is activated so so wait until the mouse is not down not Mouse down and switch to the Base active costume that's the one without a stick in the Middle testing again and you can see that the first click now clears the click to activate message wow not much more to do than that but perhaps having the button darken as we click it would be nice so forever if else checking if Mouse down then set ghost effect to 255 otherwise set ghost effect to 75 or 80 okay let's do this run the project again this time on my phone so that you can see how it finally looks left them on the stick and the click to activate message appears so click that button and it activates and then we can click again to jump oh yes that is so cool I'm loving how it looks and it works just so well what more is there to say except how about we try backpacking the stick Sprite and adding it to our classic platformer game so here we go dropping it right in and we need to click the player Sprite and find the Define controls left and right script here are the left and right arrow key press blocks and we'll pull these out and simply replace them with our stick X variable the check below is looking for when the key is not pressed but we really need one of those Dead Zone checks for this joystick so use the ABS value of keyx and check that it's less than 0.3 that replaces the key equals z next find the Define control up and down I'm going to replace the key up check here with a check for stick button greater than zero if you like you could use an or here and also check for the stick yal 1 for jumping with the up Arrow key anyhow I think that is enough to give this a try let's do this on my phone again and I have to say this game feels a lot more natural with this new control scheme let's see if I can make it through the level wow I cannot wait to see the projects you guys add this control stick to as always there's a studio Linked In the description under the video so submit your best projects there and we can all have a lot of fun trying them out on our mobile devices so cool as I finish I'd really appreciate it if you would smash that like button to show you enjoyed this video also if you haven't yet subscribed do so now so as not to miss my next exciting video as always there's also the chance to join my channel membership a huge shout out to my latest patreon member Thor scratcher wonderful to have you on board as a channel member you get access to all sorts of perks from Channel emoji priority replies to comments early access to my videos and even the scratch projects themselves plus you get to support this channel which is just so awesome thank you all so much and that is it for today so have a great week ahead and scratch on guys [Music] [Music]