Mobile Joystick 2D Top-Down Game - Easy Unity Tutorial

In this unity tutorial, you'll learn how to make a joystick touch control for our player movement in a 2d top-down game.
Touch control is an important component for mobile games. We will first add our joystick UI into the game and add a C# script to it. The script allows the joystick to move to the position of the user touch and return back to its original position when user are no longer touching on the screen.
Lastly, we will add another C# script for our player. The script allows our player to move when the user drags on the joystick and It will stop moving when the user is no longer touching on the joystick.
➤Kenny Onscreen Controls: www.kenney.nl/assets/onscreen...
Timestamps:
0:00 Intro
0:21 Joystick UI Setup
1:13 Rigidbody2D Setup
1:32 Joystick Scripting
4:30 Player Scripting
5:20 Conclusion
#Hooson #Unity3D
Play my first mobile game: Bot Attack - 2D Top-down shooter
➤Google Play: play.google.com/store/apps/de...
➤App Store: Coming soon
➤Follow my Instagram: / hoosontech

[@hoosontech]

Hi guys! I hope this video help! I have a tutorial on 2D Top Down Player Movement! Do check it out if you're making a PC game! kzbin.info/www/bejne/bZfHmJ6qmq5-f6M

[@kesisgiyatsu4883]

Such a clean tut! You are awesome!

[@magbabakal708]

Literally the only guide that worked for me. Thanks man!

[@ElCurios]

After more than a year still helpful, thanks!

[@victormr1601]

Very well explained, clean and concise, thanks buddy

[@Terra_Blade]

there was NO explanation of what tf he is doing.

[@dogusipeksac]

dude this tutorial awesome like you :D

[@keremaslan1988]

Hi, thank you for this great tutorial but i have a problem. My joystick doesn't scale with screen size although my canvas is set to scale with screen size. What should i do?

[@XtrminatR7]

This guy is goated 🐐🐐

[@tatarin_nbg]

Thank you a lot, you sawed my game!

[@vanching4414]

Thank u for the tutorial!

[@abdullahmuneeb4658]

THANK U SOOOOOO MUCHHHHH!!!! I AM INDEBTED TO U, IT WORKS ABSOLUTLEY WONDERFULLY!!!

[@YapGD]

So hard but... Thanks broo, you safe my life LOL

[@jessestone117]

Really great video

[@orkun441]

nice videos and channel! subscribed :)

[@95mcqueen5]

Awesome, thanks a lot

[@alyzabautista8223]

NICE NICE. I'LL TRY IT TODAY FOR MY PROJECT AND IT REALLY SOLVED MY PROBLEM. THANKYOUSOMUCH😍🤗

[@Karoserigames]

awesome tutorial

[@riccardodanielli4965]

Hi, nice quick and simple tutorial thanks, I have a question, do you know how I can do it so that with the movement of the player you can also rotate the player?

[@minhtrong4963]

Thank u so much bro.

[@mikeybeets3093]

Thank you for this tutorial- I’m having trouble when trying to add my joystick assets to the Source Image slot. It seems as though it’s not compatible. They’re png files. Does that make a difference?

[@alyzabautista8223]

THANK YOU ANG GALING🎉👏

[@marcustan6184]

Solid brother

[@qosku]

Good Tutorial!!! funciona muy bien por si hay gente de habla hispana.

[@DAMKEON]

감사합니다. 11시간 약 5트만에 성공했습니다 . thank you bro your video so lovely thanks

[@juan8lebron]

Thank you. Like 👍

[@kamikaze8625]

Very good video.

[@nicolaeadrian8077]

Thank you !

[@0RedTree0]

I have a question - when I go to "play" after writing the script and hooking it up as seen in the video, the joystick keeps disappearing when I click and drag. I notice the joystick image and joystick BG image changes pos Z for some reason even though the movement joystick does not. What did I do wrong?

[@itsdamu]

please please help me. The event system will not work for me i have tried over 50 tutorials with joysticks and none work. It all works fine no compiling errors but when i click play i cannot move the joystick around at all and it does not go to where i click and like i said it doesnt spin in a circles or anything. please help im at a complete loss

[@kingclassic2231]

can you PLEASE make a video about how to add a second joystick that will do player shoot?

[@user-vn7bg7nj8l]

I have a question. If my character transitions to a new scene, how can I save the joystick so that it continues to work normally in the new game scene?

[@abdallahmehrez4816]

very helpful

[@unluckyyooo6598]

Does anyone know why does my JoystickBackground appears above my mousepoint instead of "around" the mousepoint? so the joystick will always be on the bottom of the background image.

[@lolyx-pf9nh]

Thx so much pls make More Videos

[@rafcon9141]

if anyone is using multitouch and also has the panel that parents the object covering half of the screen, in my case the right part, you will see that when you try it out and touch first the part of the screen that the panel doesnt cover and then holding you touch the one with the panel, you will see that the joystick moves to a position right in the middle of your fingers, because Input.mousePostion does the averege of all Inputs, so what you need is to get Input.touches which is the array of all touches and then figure out how to get the right finger.id by sorting the positions of each input inside the array, either by X or Y (depends in what part of the screen you want the joystick to be), then you will be able to tell which touch is more to the right, left, up or down, again depends of what you want, and you can set your joystick position to that touch position we just distinguished from the others, because that is the one we wanted. It might sound hard if you dont understand where the problem is. Anyway I'll share the code for you to try if you had the same issue I did. This is the solution I came up with. maybe I over thought and the problem was much easier to resolve, if that please let me know hahahaha using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class Joystick : MonoBehaviour { // Start is called before the first frame update public GameObject joystick; public GameObject joystickBG; public Vector2 joystickVec; private Vector2 joystickTouchPos; private Vector2 joystickOriginalPos; private float joystickRadius; public float radius = 4; void Start() { joystickOriginalPos = joystickBG.transform.position; joystickRadius = joystickBG.GetComponent().sizeDelta.y / radius; } public void PointerDown() { int i = Input.touches.Length;; if (i == 1) { joystick.transform.position = Input.mousePosition; joystickBG.transform.position = Input.mousePosition; joystickTouchPos = Input.mousePosition; } else { int id = SortArray(); joystick.transform.position = Input.touches[id].position; joystickBG.transform.position = Input.touches[id].position; joystickTouchPos = Input.touches[id].position; } } private int SortArray() { Touch[] inputlist = Input.touches; float[] listpositioninputX = new float[inputlist.Length]; int id = 0; for (int i = 0; i < inputlist.Length; i++) { listpositioninputX[i] = inputlist[i].position.x; } Comparison compare = new Comparison((numero1, numero2) => numero1.CompareTo(numero2)); Array.Sort(listpositioninputX, compare); for (int i = 0; i < inputlist.Length; i++) { if (listpositioninputX[0] == inputlist[i].position.x) { return id = inputlist[i].fingerId; } } return id; } public void Drag(BaseEventData baseEventData) { PointerEventData pointerEventData = baseEventData as PointerEventData; Vector2 dragPos = pointerEventData.position; joystickVec = (dragPos - joystickTouchPos).normalized; float joystickDist = Vector2.Distance(dragPos, joystickTouchPos); if (joystickDist < joystickRadius) { joystick.transform.position = joystickTouchPos + joystickVec * joystickDist; } else { joystick.transform.position = joystickTouchPos + joystickVec * joystickRadius; } } public void PointerUp() { joystickVec = Vector2.zero; joystick.transform.position = joystickOriginalPos; joystickBG.transform.position = joystickOriginalPos; } }

[@allanagibson9914]

OMG THANK YOU

[@EIvinL]

Can you make a video that show how to move a 2d character with buttons?

[@monicardoso724]

Thank you for your channel. How do you add animation to player script for touch screen?

[@dendymaulana8909]

have you found the solution?

[@darshanchaudhari2865]

very nice .....

[@JCruzPorcel0]

Hey, nice video! how to limit the screen so that it can only be used in the lower left square?

[@hoosontech]

You can scale your panel size smaller! In the tutorial, my "Movement Joystick" game object has a panel that covers the entire screen. So if you want the joystick to be used only at the bottom half of the screen, simply resize the panel smaller so that it only covers the bottom half of the screen!

[@user-tt1tv4qz2o]

im new to c# how to add animation for character where is the horizontal and vertical here

[@tiranbaghdasaryan243]

Cool👍

[@mohitguher]

how can i change rotation with given output from the movementjoystick.joystickVec;

[@curiositytube5924]

Hey Thats amazing! 60 subs and 1217 views! How'd you do it?!

[@gamebzee]

bro i got a error .says that the type or namespace called 'MovementJoystick' could not be found.what do i do now?

[@hakimimdnoor5634]

any idea why my joystick go to bottom left and not center of joystick bg?

[@faiazbinnesar2937]

Very helpful video! I want to move my character just left and right, Can you help me with that?

[@phinion3995]

I think the easiest way to create two buttons for left and right and assign the move script function of player to the on click of the button

[@mnm__studios]

please make a joystick tutorial for 3D games

[@JoseCruz-qs1pw]

Thanks, I would like you to make a tutorial but to make it work with the new input system. Or maybe you can guide me to adapt this to the new system.

[@johncarlosmontejo1162]

Yes, I also want to see this with the new input system

[@boombastic1324]

Hello pls someone help i have a error saying “The name joystickTouchPos does not exist” in movement joystick script

[@pistrantho]

Please upload more, i want to help small dev cuz i want to be a dev too

[@christiansotelohallarsis727]

Thank u and godbless po

[@catezachamane]

tysm

[@donutercz]

Hey... i have problem... when i try to use the joystick its just disaapears, but i can see when im moving with it that its positions updates. Dont you know how to fix that?

[@z.6377]

did u fix it?

[@PoweR-wk8yw]

Thanks

[@tejaskutal2922]

Will you make a video with animation

[@Im-a-cool-cuber]

once ive downloaded the sprites i dont know how to get them in unity

[@BrickShot-LEGO-builds]

This is for mobile games right? (Android/IOS)???

[@snobbleDobble]

Why do no option appear (and two scripts) when i drag the movement script and player script into the character

[@LitoMike]

same

[@waflicek]

Hi, how can I can click on buttons with this joystick if I want to return for menu for example? thanks

[@BLK_Blaze]

looking for the same answer xD

[@blueempoleon6507]

Help! I'm trying to put some animation on my character but the the transition is not working. The conditions are correct, "if speed is greater than 0.01" but it just stays idle.

[@_dimitrisbr]

still need help?

[@thefrogsheart7670]

@@_dimitrisbr i need help with the fact that the joystick images dont show up when i click but it works as intended, the weird thing is that it shows if i release my finger but disappear when i click anywhere lmao wtf

[@Arteka81]

How can i add the down and up walking animation

[@ImGheorghe]

thanks

[@comevodepetista345]

someone could explain me why my joystick don't appears on my play mode? and that's not cuz the pos Z, the z position of all objects on my scene is zero

[@hoosontech]

Hi! I think you need to anchor your joystick UI correctly. Check on your joystick UI's Rect Transform, make sure the anchor point for your joystick UI is anchored to the bottom of the screen!

[@targetblastsgaming202]

i want to rotate my player what can i do

[@bartoszzap2106]

How to rotate with this joystick?

[@Briezelta]

anyone know why mine doesnt return to its orginal position?

[@bluestepstudios]

u should have gave us the code file it says im missing something but i cant find it

[@twikin3577]

3:49 it says "Can't add script component ‘MovementJoystick’ because the script class cannot be found. Make sure that there are no compile errors and that the file name and class name match" Please help

[@nathanael9522]

I am having the same issue, also I used notepad to edit and make the script. I am not sure if that is why I am having the issue. Another reason for that issue in the line "public class MovementJoystick : MonoBehaviour". Make sure the public class is called "MovementJoystick" because it is case sensitive

[@nathanael9522]

Yoo i figured it out, it was because two words i accidentally capitalized when they shouldnt have been. That fixed it for me

[@twikin3577]

@@nathanael9522 i dont exaxtly remember it its long time ago but i think i just had different name of file in Unity and in that script, 2 hours of smashing my head to wall and 2 seconds to solve it😂

[@Centicc]

How do you fix this??? Ive been redoing the same code for a while and never found a solution. Pls help

[@twikin3577]

@@Centicc make sure your script in unity has the same name as the class

[@user-jm4gh3lo6r]

Can somebody send script from joystick pls :/ When i touch it it just disapears

[@khuongtunha2365]

How to limit player's range of movement?

[@nexoknechthd619]

How can I animate the character?

[@user-ft9sj6rn7b]

Nice, but problem is that i can't add two of them

[@oncenabong2758]

line 20 in player script error CS1061: 'MovementJoystick' does not contain a definition for 'y' and no accessible extension method 'y' accepting a first argument of type 'MovementJoystick' could be found (are you missing a using directive or an assembly reference?)

[@ralphjohncandolita6224]

Why won't my player move?? I've done everything that's in the video. What else am i missing?? Thank you

[@ThatTartToter]

Are you sure you added the rigidbody2D and the Player script to the Player object in the Hierarchy?

[@mnm__studios]

make the same tutorial for 3D game pls

[@the_sophile]

Can you share the code?

[@dreamloggames978]

man, please make it using bolt

[@amirmohammadyazdani6929]

Dude, Thanks for video, BUT where is the source code !?

[@chermainehoo214]

MORE VIDS PLS

[@rink369]

hi

[@devsack]

I have an 32-bit computer with 8GB RAM I'm behind in all of the projects and your knowledge , I just given up today 😔 Can anyone let me suggest what to do if I have an 32-bit computer with 32-bit Unity🥺

[@jbefteam]

not working!😡😡😡😡😡

[@vipeyboii]

If you still want help, I can try to assist you

[@BLK_Blaze]

@@vipeyboiidid you find a way for click UI buttons with this joystick system?

[@vipeyboii]

@@BLK_Blaze no I ended up using Unity's new input system to make a mobile joystick much easier

[@astheatic]

if you want that the player looks at the direction he is moving replace your player script with this code (dont forget to change script name) using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayerScript : MonoBehaviour { public JoystickScript joystickScript; public float speed; private Rigidbody2D rb; // Start is called before the first frame update void Start() { rb = GetComponent(); } private void FixedUpdate() { if(joystickScript.joystickVec.y != 0) { rb.velocity = new Vector2(joystickScript.joystickVec.x * speed, joystickScript.joystickVec.y * speed); //character looks at the direction he is moving transform.rotation = Quaternion.LookRotation(Vector3.forward, joystickScript.joystickVec); } else { rb.velocity = Vector2.zero; } } }

[@mohitguher]

thank you!

[@Dark-mn3db]

Thank you!