CRAZY COOL JOYSTICKS 🎮 - How to make your Scratch Games Mobile Friendly

Do you want to make your games mobile friendly, learn how to code an awesome reusable mobile joystick (thumbstick) by following this tutorial and you'll be playing your Scratch Games on your phone or tablet in no time!
Scratch works great with mouse and keyboard, but showing off your hard work to a friend on your mobile can be really frustrating unless you have the best mobile controls. That's where this tutorial will help! Once coded you can backpack the controller script and drop it into all your favorite games!
My tutorials are for all budding game & software developers using Code Blocks. Scratch On guys!
🚀 Boost Your Creativity with Griffpatch
The Griffpatch Academy will take you from "Gamer to Game Creator"
Learn more at 👉 griffpatch.academy 👈
😺 Scratch was developed by the Lifelong Kindergarten Group at the MIT Media Lab. See scratch.mit.edu
👀 NEW Multi Touch Joystick Tutorial !!! - • Impossible "Multi-Touc...
🐱 Scratch Studio for this tutorial - scratch.mit.edu/studios/31206...
👀 Quick and Fun Tutorials - • Quick and Fun Scratch ...
⭐ Projects Featured in this video
Click and Jump [ A Platformer ] - scratch.mit.edu/projects/6327...
Slither.io v1.10 #games #all #game #trending #s - scratch.mit.edu/projects/6426...
Potatoid Invasion v1.3 - scratch.mit.edu/projects/5547...
Scratch Fly | Mega Game | #Games #Trending # - scratch.mit.edu/projects/6291...
Snowy town - teeeeeeen - Unshared - scratch.mit.edu/users/teeeeeeen/
-------------Video Chapters-------------
0:00 Intro
1:00 Costumes
2:50 Coding the Joystick Base
3:20 Code Control Stick
5:22 Release back to Centre
6:58 Stick Direction and Power
9:02 Constrained Distance of Travel
12:21 Using the Thumb Stick in a Game
13:45 Thumb Stick Activation Area
17:45 Stick X & Stick Y
20:36 Using the STICK X & Y variables in game
22:14 Bigger Stick for Small Screens
23:31 Backpack to other Games!
24:14 Snowy Town by teeeeeeen
26:15 Click and Jump by ManGold-658
27:52 Highway Madness! by Games_Central
28:50 Slither.io v1.5 by SlordWas Taken
30:03 Potatoid Invasion by Kube_Komix
32:24 Outro

[@griffpatch]

New Multi Touch Tutorial - kzbin.info/www/bejne/mXqUnpeMi9t2jbs 🔥🔥🔥 Early Access / Channel membership - www.youtube.com/@griffpatch/join Scratch Studio for this tutorial - scratch.mit.edu/studios/31206995/comments Quick and Fun Tutorials - kzbin.info/aero/PLy4zsTUHwGJKByTn_qV76oTpEYGczqEb_

[@kevinoutofcontext]

LETS GO

[@NotRealChatGPT]

how do you get the guy and the flags?

[@DUMB_PERSON_NEAR_ME]

@@NotRealChatGPT griffpatch have the membership future

[@morganisapro6]

how do you make the joystick only go left and right?

[@elijah44gd79]

@@morganisapro6 just make the player change x by stick x

[@thecyanghost1889]

I always love how goofy yet entertaining your videos are! while I doubt I'll make a mobile game, this is still helpful

[@quickshark9536]

When you made it to where you could only use the joystick by clicking on it WITHOUT “when this sprite clicked”, it actually helped me with something completely unrelated. I was making a mobile keyboard for a Morse Code translator, but had tons of buttons that I wanted to keep on one sprite. Thank goodness I saw this before finishing the code for a whole control-button system. This channel has taught me many ways to avoid big messes. Thanks a lot!

[@griffpatch]

That's excellent news, exactly what I hope

[@immegamewer33457._]

O

[@Ninad145]

@@immegamewer33457._ Spider man go away from home

[@braysonrosenberg4940]

Hey Griffpatch! I just wanted to say thank you so much. Im currently making a game and you have really helped me with these tutorials. In fact, i would be completly lost on how to even properly code the PHYSICS ENGINE without you. So yea, keep up the good work, and thank you again! :)

[@chiroyce]

I loved the section where you implemented it in others' games, much fun! :)

[@BuzzyBee13]

Chiroyce, what are you doing here?

[@izaanhafid]

@@BuzzyBee13 LOL

[@maplario4366]

Woah, Chiroyce!

[@BuzzyBee13]

@Samfitzgamer, what are you doing here?

[@BuzzyBee13]

@Samfitzgamer Hehe, ok I'll stop. But watch Twishorts to see where I get it.

[@lamegamertime]

Personally I think if you are using a joystick for a platformer, it’s best to use a square joystick. That way it is easier to run and jump, as the corner where both are possible is larger. Though it would be even better if Scratch had some kind of multi-touch capability… It might make things more difficult to code, but it would be easier to play when you can press a separate button for jumping as for running.

[@griffpatch]

You are very right! I think just the same thing. Although, by using joystick > 0.5 you actually end up with just such a design in reality :) - And yeah - Scratch should support multi touch somehow!!!

[@pluto42069]

@@griffpatch i agree :DD

[@BOLT_THUNDERSPHERE]

I also agree

[@16.7mtiletheplanet5]

@@BOLT_THUNDERSPHERE Agree:D

[@user-qb4jn2rf2m]

How

[@CreativeGrow69]

Never stop scratching there are only a few scratch tutorial makers and you are one of the best sadly I don’t know where you get your sprite designs from but that’s not your fault it’s mine for not learning. Keep it up!

[@DrAlphys2]

I actually had to shorten the scripts, but got the same results !! Well done Griffpatch!!

[@smth35]

The same effect could also be achieved by using the "set mode to draggable" block, and "if " then limit the stick, and "if not ", then reset the stick.

[@griffpatch]

That is a good idea, but it would be too tricky to ensure the user actually clicked on the stick to start moving it

[@adrianroqen3743]

@Zi Zoy Nacho Maybe that works too.

[@smth35]

@@griffpatch moving the stick would be needed only to limit it or reset its position. The "set drag mode [draggable]" block from the sensing category does the work of moving the sprite/clone while it is held. Also i realised while writing this that the only difference is you have to move the stick every time you press it, instead of just pressing the area of the stick

[@joshieree3036]

@@griffpatch nice

[@chivixta]

That’s what I was thinking this video would be about-

[@Resseguie]

I love it! I just added a version of this to my Rocket Canyon game (and submitted it to your studio). But I also experimented with only turning on the joystick once they click on the screen so it doesn't get in the way of the game if playing on the computer. Thanks again for a great tutorial (and worth waiting for)!

[@griffpatch]

Very cool, I have a small update to make it even better, but that will have to wait

[@zachcapricorn3512]

For the changing size, maybe add a icon and make it 100 for regular size and 200 for big size or something

[@Kadyboo5]

​@@griffpatch CHECK YOUR MESSAGES

[@markeisha9213]

Thank you so much!!! I was making an game where you use your keyboard but I realised I could not test the game on the go. I came across this and tought it was perfect for me as it is easy to understand. It also works very well.

[@keanjosephquizon2575]

Griff, I literally love your vids i get so much more knowledge just by copying them or actually making them thanks so much for getting my code skills up! and also by the way when I was doing the part 3:49 mine actually appeared the thumb stick bc I was doing it in a copy of my game so I can add it on my actually game

[@rocky707]

Thank you so much! I combined this with my platformer game that I am making with your tutorials and it works so well! You are amazing :D (Also, 1000th comment?)

[@anilkumarvelayudhanpillai2651]

Just Added the joystick in my classic platformer and tested it with my mobile device! It turned out so well, So smooth and easy to use! Thank you griffpatch! You never fail to amaze me!

[@griffpatch]

Great to hear!

[@cristianospohr69]

@@griffpatch i agree. also, there is some kind of Pc = mobile type of the mobile controls [5 keys, 3 moving keys[left,down,right], 2 jumping keys [space,up].]

[@sparkbark7640]

This worked great! I put it into my 2d top view style game and was surprised at how easy it was to code. thank you!

[@King-cobra-creations]

This is the first vid of your channel I've seen and it instantly earned a subscribe from me👍 good job and keep creating amazing vids

[@SalchiGames_]

I love how griffpatch sounds more and more excited in every video he makes. Great tutorial!

[@griffpatch]

lol :D

[@_unearthed]

:D

[@nathanaelchia7167]

@@griffpatch :P😛

[@AidanGamesYT]

@@griffpatch for this lemon only

[@KezKaz]

@@griffpatch ah, this lemon only

[@artsygirlforlife]

I have always wanted to learn how to do this, especially with the growing amount of people on mobile devices. This is really helpful!

[@schlzawg]

its cool because everything can be easily customized in the joystick, the look of the base, stick, shape of the base too

[@fungus0713]

Thank you, it really help me improve, long time ago, I very been trying to do the same as yous but it never worked, thank you, after watching your video, I could do more programing

[@zachcapricorn3512]

For the going to center thing, use this: Go into 1 sprite then use the go to block to select the sprite, then move the sprite into the Control Stick sprite and tada.

[@Farleigh1050]

For a lot of games, on the cat sprite use a ‘set rotation style left-right’ block inside the forever loop, but not in the ‘if Stick Power > 0’ block.

[@astonlifts08]

love the little animations they really help explain the programming! thanks griffpatch! love u

[@BusinessMonkeys1]

I love how enthusiastic griffpatch is with each video! Also helpful how he explains everything making it easy to make quick tweaks. I was wondering how to do it for your recent scratch RPG series? The movement didn’t seem to work the same for the player. 😢

[@huckjeffrey5057]

Technoblade never dies

[@rishavarya4966]

Who else likes how enthusiastic griffpatch is always makes every second of the vid interesting and fun

[@creativezone590]

yeh

[@wolfgangr.3268]

He's the Bob Ross of Scratch coding.

[@RyteoyGamingCommunity]

he is the wrost

[@handyperalta9654]

@@RyteoyGamingCommunity you this is wrost

[@wh0sV4N]

@@RyteoyGamingCommunity correction YOUR THE WORST*

[@thelegoreaper]

This really helped! Ive always failed at joysticks!

[@thepenguin_1]

same lol

[@sheluhhvy4572]

the problem is the small circle moving out of the big one

[@Jerraf2p0]

Same

[@danielfeng3991]

Same :)

[@jilljohn2638]

✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓

[@kodingwithkumud4398]

Love it! Could you tell me what platform you use to add text and edit your videos? It’ll really help!

[@Codey-Quack]

This Saved me in a Rougelike game im making on scratch where the only thing you need to play is a Mouse, No Keyboard Required. and i was Really struggling with the movement, i did have a method that make a movement block that made it go from movement mode to interact mode but whenever u went to press it the player would move towards the button.

[@joshieree3036]

You don't have to use the MYSELF variable. You can use a scratch bug. Drag a GO TO block into a different sprite, select Control Stick, drag the block into Control Stick.

[@1ksdavidcksdavidc970]

I got interrupted as I was typing and part of the code I mentioned is missing. I reads "go to x position of control stick, y position of control stick", which is what is in the project I mentioned. BUT, doing it myself now I realize that the project I got that from must have done it by exploiting the "different sprite" trick, so it amounts to the same thing. I guess it's another alternative, though I still wonder how they compare in efficiency. Note, you also need it in the "distance to myself" block. the myself variable is easier to code, but you have to worry about if the sprite name changes.

[@BlastingBricks2023]

Crazy cool... you are undoubtedly the BEST scratcher in scratch! I haven't shared a project with a joystick but I will certainly do it soon!

[@BLACKER_SCREEN]

At 20:80 I left the Set STICK X and Y out and it still worked. I think this is because you are multiplying the X and Y by Stick power and when you let go is is set to 0 so its multiplying Stick X and Y by 0 (making it 0). Thank you so much for your tutorial's they have help me start coding on scratch and understanding it.

[@tEmMiEyAyAyA]

20:80?

[@imnot_here9856]

WOW this helps alot! and thank you! ❤️👍

[@Qoride]

This is perfect! I was just implementing mobile support to my game and I was having trouble with movement. Do you think you can create a tutorial on optimization to reduce project size and make things run faster? (reducing imported file sizes, smart coding, etc. My game runs at around 31 FPS on PC and 20 FPS on my phone but I still have a lot of content to add)

[@maikeru5187]

Scratch runs at 30 FPs, so that's the highest it can run.

[@Qoride]

@@maikeru5187 oh thanks, I didn't know that, that was helpful

[@ee-gamer3398]

Oh, yes, yes, yes! The perfect tutorial for a joystick! I'm excited for this one, as I've always been working on mastering my joystick code! Thank you so much again, griffpatch!

[@jikill7586]

You should’ve probably tested this in a top-down game, as that’s one of the best uses of the joystick. any other game you should opt for a simple 3 button setup, left right and up.

[@OperacaoEpa]

My most popular project on scratch is Dan Adventures, and it was based on the great platformer tutorial from griffpatch! Thank you so much.

[@LILGroovyAdam2099]

I can’t believe your probably one of the only you tubers who is big and uploads consistently I have watched you for u years and you have tought me so much thank you!!!!!keep grinding and doing your thing brotha!!!!

[@TtEL]

I went to the Scratch homepage and saw that you were following "Crazy Cool Joysticks" and thought, "Oh, I guess he posted a video of that." Sure enough, here it is. I can't use Scratch on my iPod because there is no Apple app, and the website is too big. What a great series. Finally, a break from raycasting!

[@bendymivn3784]

6:57 what I find it interesting: you can replace it with glide (0.1) secs to ( myself variable) instead of go to, which makes it looks better for me

[@XavierGG-og6vc]

Best scratch tutorial, understand easily and specific explanation, keep up the good work

[@webaccount284]

Hey griffpatch, I think it would be cool if for your next series after 3d raycasting would be a renewed version of your old series, How to make a cloud game. It would be nice with your current editing and microphone!

[@thenewkoopanetwork7016]

Griffpatch: this function is relatively simple also Griffpatch: Explains quantum physics and the relative law of black holes in under 40 seconds.

[@superyoutubeguy5999]

Lol

[@rayyanrahman8115]

I didn’t get it lol

[@masterwaregaming489]

@@rayyanrahman8115 lol

[@JuanGamer0202]

The only problem for mobile gamers is for action games since scratch can only register one touch per time, bcs it was supossed to be running on a pc with only one mouse cursor, with means that if the game have buttons to jump or shoot you will need to realese the joystick to press them. I already played games like this and i need to say you must be very carefull and have very fast reaction time XD

[@elijah44gd79]

he has a multi-touch tutorial now

[@trizzle6053]

I’m working on a scratch platform we but I’m on mobile making it so this tutorial really helps also I’m using your platform tutorial videos it really helps thx

[@Yeetyok]

This is great! I am looking forward to another tutorial like creating an inventory with draggable items.

[@onyxtautuhi3473]

Wow, I used a completely different technique for a joystick and this is so much more flexible than mine. Mine is so stiff.

[@luckyfunky1178]

Amaizing tutorial, it explains every thing slowly and makes every one understand

[@Specising]

Super now I can put this thing on the platformer game you put into the tutorial (not appel) but the other if I wanna play on mobile thx

[@quneptune]

instead of using variable 6:48 you can use the join block like this [ *join* _control stick_ *with* _blank_ ] (you just don't type anything in the blank and delete the pre existing space) edit sorry if this is annoying i just hate making new variables unless its necessary

[@Wondercool923]

Same

[@griffpatch]

Yes, I often do that, but I was thinking since we had to use it over and over a variable would be better

[@shabanabaig9068]

yeah CUP

[@AshtonDavies_]

Yeah it's not that hard to type it out every time.

[@nadeemabbasaqib4026]

uosh?!?!?

[@bluedemonanimsalt9738]

keep the tutorials up and it helps A LOT of people like me! :)

[@jaydenliu2011]

hi griffpatch i have a question. how would you implement a joystick that works like what you taught us, but instead of using if blocks, we use a key x variable(like in your classic platformer tutorial)

[@KatOnMelon]

Thank you so much for this tutorial! youre the person who inspired me and got me started!

[@slooshified_]

7:53 i believe theres an alternative way on making it turn 180 degrees.. using join blocks.. basically you use the join block to point toward the negative of the variable

[@qwertyuiop.lkjhgfdsa]

would that work if it was already a negative direction

[@tevmonkey7243]

Thank you so much for this tutorial! i made a game but people wanted it to be mobile too so this helps a lot.

[@sophiegarcia2006]

thank you so much i was doing a basketball game i was looking for this now i found so thank you i subscribed to you and liked the video

[@yesimhairy]

I think you should do things in other people's code more often, I find this really entertaining for some reason 😅

[@RidyDaBidy95]

True....

[@AshtonDavies_]

That would be funny.

[@adrianroqen3743]

Same

[@Speed-TV]

A tip is that if you want the joystick to always stay in the front no matter what, you can put the go to front layer in a forever loop.

[@HACKERDinhlamnguyen-VN-UK-USA]

You can replace that IF block (if stick x > 0,5 then change x by stick x * 6; if stick x < -0,5 then change x by stick x * 6) to this (if abs of stick x > 0.5 then change x by stick x * 6) Apply it for stick y.

[@real_ninjaz1255]

18:48 He Started A Science Class

[@scratchsuperpower386]

17:21 u can devide the size by 2 and u need to be in the radius of the base to use the joystick and i think it works well!

[@coolswag352]

sorry but *you*

[@scratchsuperpower386]

@@coolswag352 ?wym

[@simplylou8631]

@@scratchsuperpower386 you said “u” instead of “you”

[@scratchsuperpower386]

@@simplylou8631 ye ik it is easier

[@CommanderAka]

5:06 you can add a “set drag mode to not draggable” so you can test the project with no full screen.

[@griffpatch]

Sadly not... That only applies to full screen mode. There is a scratch addon extension that supports that feature though.

[@lumpstergash2380]

I tried that with my 3D backrooms game and I dragged the actual entity sprite

[@asanthimendis]

You are always so energetic! These guides help me a lot!!!!! Thanks you!

[@Jesus...Christ]

your videos are very helpful! thank you

[@AshtonDavies_]

Griffpatch, you can actually get the control stick position option in another sprite and then drag the block to the stick sprite instead of using a variable.

[@DoxxTheMathGeek]

He did it in one of the Tile Scrolling Plattformer Video.

[@darrickhans9478]

@@DoxxTheMathGeek And also shiftclicklearn did that.

[@1080GBA]

@@darrickhans9478 did you join his discord?

[@1080GBA]

@@DoxxTheMathGeek and in raycasting pt 5

[@darrickhans9478]

@@1080GBA No.

[@victorius2975]

somehow you've again made a undercomplicated script that functions the same as a 500 block long script. Wondering if you could attempt Binary Space Partitioning though. That'd mean you could make a true 3d engine. And you can also add actual up&down movement without the image weirdly shifting. That'd probably make the project run far too slow but a full on 3d engine will being able to have many old gems to be ported over to scratch. I know that you've attempted something similar a long time ago but this could be a chance to remake it but extremely easy to port over like the stick and have many extra things like textures and shading.

[@platinumapartmentownersass9164]

This will be great for my RPG project. Thank you so much for this tutorial.

[@pe_games]

Easy tutorial, thanks Griffpath! 👏👏👏

[@Farleigh1050]

Scratch: *no you can’t return to base sprite* Also scratch: lets us add a variable in the ‘go to’ block which we can set to the base

[@LouisKieu]

Man this was amazing! I tried to code a clone snake out of it but I am probably one of the worst scratchers so I don't know how to make the clones and get them to go to the last position of each one.

[@janetcupp467]

It's really lacking in mobile friendly, I'm so glad to see this💗

[@dubsisthegoat48]

Your tutorials are the best :D I also like how you added the joystick in other scratchers games :)

[@griffpatch]

Thanks! 😃

[@creepersaur]

I loved this one, I didn't even realize that there was a simpler way to make a joystick! Can you please make a tutorial on how to make your own scratch extensions?

[@Delph4]

Thank you for this tutorial. It helped me in my work a lot.

[@Speed-TV]

Thank you for making this tutorial so the mobile joystick can become more popular, I am tired of those terrible mobile controls where you have to hold a specific section of the screen and stuff.

[@destructoGB]

Hey griffpatch can you tell the scratch team to make scratch multi touch? Thanks.

[@lspectroniztar]

15:01 I ticked the run without screen refresh box lol. What I did was I seperated the script from the repeat until block, and placed the Drag Stick block inside the repeat, just in case, 'cuz it seems SOOOOOO much smarter.

[@kalbskinder]

Wow that is some crazy but complex code. Thank you for the great tutorial. Am i allowed to use this exact same code in my Mario PC/Mobile game? (With credits of corse)

[@faisal2o14]

2 sec later ROBLOX IN SCRATCH FOR MOGILE

[@Arvanplayz]

Yea its a roblox moving stick😂😂😂😂

[@Really101yak]

Mogile

[@rstudios123]

You miss spelled

[@IkaraPopsicle]

I hope not

[@diehardvn1]

2 secs? G’arn m8 r u rekt? No wey you mak gam 3D les tan 2 secs

[@nia_plays2606]

bro My Kaitty is fast??🤣🤣

[@tamon2020]

Thanks Griffpatch! I'm make a new game but I need joystick but you helped me!

[@xandoog]

This is great really useful your tutorials are awesome

[@xxstrawberryteaxxmonsterhi4455]

I love how he just starter Tallinn att licorice. I love this guy’s way to talk

[@gneu1527]

I like how the cat said `meow` when he said he will keep it.

[@PunbloxAnimations]

thank you very much! tomorrow is my birthday and i need something to play with my cousin so i decided to make an game instead of downloading a game, and i am making an online game with mobile friendly because my cousin only have a phone, thank you!

[@alexandern.9666]

you dont have to add a variable called myself, you can make a new sprite drag the go to random position block click the dropdown and say your joystick's name, then drag it into the joystick sprite itself and it will stay that way. then drag it over the wait until and it works like gold

[@WeLoveScratchCat]

This was basically a stick power vs max stick showdown. I love it!

[@user-yf7sj6wk1y]

thank you griffpatch so much !!

[@Arvanplayz]

Thank you i got 1.30$ and 68 people downloaded my game in 1 day!

[@drawvsmanbackupraichu103ba7]

wow griffpatch this is a lot of effort you put in your videos thanks

[@Onetaro]

It will be helpful! I will now use your skills in my work. Thank you :D

[@supermariokingdom-official8975]

I have a faster option for the problem where there's not the sprite shown in the list ( go to"... "block) . If that can help you of course.... You select the Cat sprite, you pick a go to " " block and you choose your Joystick sprite. Last you drag this block to the joystick sprite and voilà! Hope we'll be helpful to you.

[@GregEleven]

I always play your scratch games and I have always loved them!

[@godofwar4695]

Thank you for your efforts I wish you success in the future

[@dracolegend8523]

I’m working on the RPG on my ipad and my chrome book so for testing I needed the joystick TYSM for the amazing tutorials.

[@griffpatch]

No problem I'm glad to have been of help, scratch on

[@DoxleyYT]

Thanks! This is really helpful! 😄

[@Banana_Berry_Bandit]

Hi Griffpatch! I want to know if I can do wall collisions with the joysticks.

[@FaidoPlays]

Amazing tutorial. I will say however, it can get really laggy when using the custom blocks. So you can just drag it in the if, if not block.

[@spiritsk88]

Hi! I have a suggestion for a tutorial: How to make efficient RecyclerView in Scratch! It would make UI's super neat and people who are making OS's would love it.

[@muhammadmuzammelhaque671]

or for the lemonoid game, a small direction to aim and exceed threshold to shoot

[@natthananla-orphunphol4395]

Thank you for sharing this. This VDO help me a lot to create new scratch project.