모바일 가상 조이스틱 구현하기 | 유니티

유니티 엔진에서 모바일 게임에서 사용할 수 있는 가상 조이스틱(Virtual Joystick)을 구현하는 방법을 알아봅시다.
영상에서 사용되는 조이스틱 리소스를 다운로드 받을 수 있는 링크입니다.
drive.google.com/file/d/1FEja...
영상에서 사용되는 TPS 구현 예제 패키지를 다운로드 받을 수 있는 링크입니다.
drive.google.com/file/d/1fy_S...
완성 예제 링크 : drive.google.com/file/d/1iyZY...
타임라인
0:00 인트로
0:07 조이스틱 설명
1:04 리소스 다운로드
1:19 조이스틱 UI 이미지 배치
1:44 가상 조이스틱 기능 구현 시작
1:54 조이스틱 터치 입력 구현
3:15 레버 이미지 움직임 구현
4:42 레버가 조이스틱 영역을 벗어나지 않게 움직임 제한하기
6:21 조작 기능 구현
9:30 TPS 캐릭터 조작 기능 패키지 임포트
10:04 캐릭터 컨트롤러와 조이스틱은 연결해 이동기능 추가하기
11:36 카메라 회전 조이스틱 추가하기(듀얼 조이스틱)
13:35 조이스틱 민감도 조절 기능 추가하기
[유니티 어필리에이트 프로그램]
아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.
- 유니티 에셋스토어 : prf.hn/l/vJl41D5
- 유니티 플러스 : prf.hn/l/wLNyJZG
- 유니티 프로 : prf.hn/l/qXOybmp
[투네이션]
toon.at/donate/63773521276146...
[Patreon]
/ wergamedevchan
#유니티강좌 #가상조이스틱 #게임만들기

[@user-no8xp5vo9f]

와... 화면 멈춤, 0.25배 재생 등 반복하다보니 어느새 완성이 되었네요 정말 제게 유용한 영상이었습니다!!!!! 감사합니다!!!!

[@wergia]

사륜안을 개안하시면 언제든 완성을...

[@yayongee]

좀 다른 질문인거같기도한데, 유니티로 우박피하기 초간단 게임을 따라하기처럼 pc에서 만들어봤는데요.. pc에서는 좌우 방향키로 움직이는걸로 코딩했었는데, 이걸 안드로이드로 빌드해보니, 핸폰에서는 움직이는걸 어떻게 바꿔줘야될지 궁금해서요.. pc에서 처음했던 방향키를 삭제하고 모바일에 맞춰서? 새로 어떻게 만들어야되는건가요.. 아직 프로그램 지식이 거의없어 이런부분부터 막힙니다;

[@wergia]

여러가지 방법이 있을 수 있습니다. 1. 조이스틱 만들어서 좌우로 움직이기 2. 화면 좌우로 나눠서 터치가 들어온 방향으로 움직이기 3. 모바일의 자이로 센서 값을 받아서 기울어진 방향으로 움직이기

[@user-tf5qd3ws6f]

최고세요!! 잘응용하겠습니다.

[@user-wo4lf7uz8o]

강의내용 쩔었다.. 굿굿 도움이 많이 됩니다

[@solomon-ge9gn]

2D로 게임을 만드려고 하는데 조이스틱과 캐릭터간에 이동방식을 구현하려고 하는데 어려움이 있어서 영상에서는 카메라가 바라보는 방향으로 이동하게끔 하지만 조이스틱을 사용하여 이동하게할수있는 다른방법이 있을까요?

[@wergia]

2D 게임에서는 조이스틱이 주는 벡터를 character.transform.position += moveInput; 이런식으로 위치에 더해주면 됩니다.

[@devSSEM]

좋은 강의 감사합니다!

[@wergia]

도움이 되셨으면 좋겠습니다!

[@user-ce7nv2gy7h]

정말 유익한자료 감사합니다. 다음에 기회가되면 캐릭터 옷바꾸기 올려주시면 감사하겠습니다!!

[@wergia]

계획중에 있는 내용이죠 ㅎㅎ

[@user-fq1zq2tw3g]

잘 보고갑니다!!^^

[@nowons100]

베르님 좋은 강의 잘 보고 있는데요. 코딩에서 코딩 넘어갈때 너무 빨라서 따라가기 힘들때가 종종 있습니다. 조금만 천천히 진행해 주시면 고맙겠습니다~~

[@wergia]

다들 일시정지해놓고 보신다고 해서 ㅎㅎ

[@user-kv1mu7ow5s]

유익한 내용 잘 보고 갑니다~

[@wergia]

봐주셔서 감사합니다!

[@일림서이]

알찬 내용 잘보고 갑니다

[@wergia]

봐주셔서 감사합니다!

[@user-zi7kk1lg1b]

2:13 제가 C++만 해놔서 잘 모르는데 인터페이스는 추상 메소드로만 이루어진 추상 클래스인가요? Abstract class 라고 하던데 이는 C++에서는 순수 가상 함수의 개념으로 알고있어요. 반드시 자식클래스에서 오버라이딩 해주어야 하는 메소드.

[@wergia]

C#에서도 추상 클래스 개념은 있습니다. class에 abstract 키워드를 사용하는게 그것이죠. 추상 클래스가 자식 클래스에게 순수 가상 함수의 구현을 강제하는 것처럼 인터페이스도 그 인터페이스를 상속 받는 클래스에게 자신이 가진 인터페이스 함수의 구현을 강제하는 행동 양식 자체는 같습니다. 하지만 추상 클래스의 경우에는 순수 가상 함수 이외에도 일반 함수, 멤버 변수 등을 상속시켜줄 수 있는 것에 비해 인터페이스는 빈 인터페이스만 상속시켜주고 구현을 강제합니다. 한마디로 인터페이스는 "나를 상속받는 클래스는 이런 함수들을 반드시 구현해야해"라는 개념인거죠. 그리고 다중 상속을 지원하지 않는 C# 특성상 하나의 클래스는 여러 개의 클래스나, 추상 클래스를 상속받을 수 없습니다. 다만 인터페이스의 경우에는 여러 개를 상속받을 수 있죠. 그래서 영상에서의 DragHandler처럼 변수 없이 행동 양식으로만 정의되는 인터페이스를 필요한 것만 골라서 상속받을 수 있도록 하는 겁니다.

[@user-zi7kk1lg1b]

@@wergia 인터페이스란 참 신기하군요! 정성 답변 감사합니다.

[@user-tb6tv3ij7f]

그냥 애니메이션없이 움직이는 (캡슐오브제트가 그냥 바닥에 붙어 움직이게끔)오브젝트생성했는데 만약 애니메이션없이 움직이게 하고 싶으면 어느부분을 어떻게 고쳐야하나요? 1인칭으로 할거에요

[@wergia]

딱히 크게 수정할 부분은 없고 애니메이션 부분만 제외하시면 됩니다.

[@sang_rainwoo1229]

유익한 내용 너무 감사합니다. 저도 영상을 무작정 따라하기도 하며 이해 해보려고 하고있습니다만 PC에서는 문제없이 정상적으로 동작합니다. 모바일로 넘어가서 apk 설치 후 조이스틱을 조종하려고 하면 오른쪽 대각선 윗 방향으로 움직여서 확인해 보니 앵커를 설정한 쪽으로 조이스틱을 끌어야 정상 범위로 움직이더라구요! 이 문제점은 어떻게 해결해야 할까요?

[@wergia]

음.... 제가 만든 버전에서는 어떤 문제인지 짐작이 잘 안되네요. 가능하시다면 [e-mail]으로 프로젝트를 보내주시면 제가 빌드해서 테스트해보고 어떤 문제인지 분석해볼게요!

[@buger815]

윗분과 같은 현상이 일어납니다, pc및 remote에선 정상작동하나 apk로 빌드하고 실행시 커서가 1시방향으로 치우치는 버그가 있습니다

[@potg6154]

감사합니다

[@bluerex8668]

한가지 질문 드려도 되겠습니까? 앵커위치하고 스크립트까지 완벽하게 따라해보았는데 정작 조이스틱을 움직이면 마우스 포인터의 오른쪽 위로 멀게 날아다니는 현상이 있습니다. 무엇이 잘못된건가요?

[@wergia]

조이스틱 이미지를 움직이게 만드는 코드 부분은 직접 봐야 원인은 확인할 수 있을 것 같아요!

[@solomon-ge9gn]

@@wergia 윗분하고 같은현상이 납니다...

[@wergia]

@@solomon-ge9gn 대부분 앵커와 스크립트 문제인데 [e-mail]으로 프로젝트 패키지 뽑아서 보내주시면 분석해보고 답변을 드릴 수 있을 것 같습니다

[@user-hd5dv1ig9c]

@@wergia 저도 똑같은 증상인데 어떻게 해결하셨나요??ㅠ

[@user-dl1ge1zb2v]

@@user-hd5dv1ig9c joystick에 pivot을 0.5 , 0.5 로 설정하시면 됩니다.

[@user-ms7ug1rn6v]

5:55 에 var iputVector = inputPos.magnitude < leverRange? inputPos : inputPos.normalized * leverRange; 저 부분에서 < 와 ? 그리고 : 이것이 어떤 의미로 사용되는지 알 수 있을까요??

[@wergia]

< 이 기호는 크기를 비교하는 겁니다. a < b 식에서 a가 b 보다 작으면 true(참)를 결과로 내어놓고 a가 b보다 크면 false(거짓)을 결과로 내어놓습니다. 이런 종류의 연산으로 a < b(a가 b보다 작다), a > b(a가 b보다 크다), a = b(a가 b보다 크거나 같다), a == b(a와 b는 같다), a != b(a와 b는 다르다) 가 있습니다. 식의 조건을 만족하면 true, 만족하지 않으면 false 입니다. 그리고 ?(물음표) 와 :(콜론)은 한 세트로 동작하는 연산자로 프로그래밍에서는 삼항 연산자라고 부릅니다. (식) ? (참일때 결과값) : (거짓일때 결과값) 형식으로 동작하며 식의 내용이 참이면 참일때 결과값을 주고 거짓이면 거짓일 때의 결과값을 주는 것입니다.

[@user-ms7ug1rn6v]

@@wergia 이해했습니다 !감사합니다ㅎㅎ!

[@user-qx4kq5lf1z]

2:11 제가 이렇게 치면 오류로 빨간색 줄이 안쳐지는데 어떤것을 세팅해야하는게 있는것인가요? 그리고 앞에것만(예:ID)쳐도 바로 입력되는데 그런건 어떻게 하는건가요?

[@wergia]

음 비주얼 스튜디오를 쓰시나요? 다른 키워드들도 전부 자동완성이 안된다면 유니티 엔진과 비주얼 스튜디오가 연결이 안된 것일 확률이 높네요. 유니티 에디터의 상단 메뉴 바에서 [Edit > Preferences] 항목을 선택해서 Preferences 뷰를 엽니다. 그리고 왼쪽 목록에서 External Tools를 선택합니다. 거기서 External Script Editor 항목이 Open by file external로 되어 있다면 Visual Studio를 선택해주시면 될 것 같습니다. 영상으로도 보실 수 있습니다! : kzbin.info/www/bejne/kIPWiZVnh9lsaZo

[@user-qx4kq5lf1z]

@@wergia 감사합니다!!해결됬어요!!!! ㅠㅠㅠ

[@mrbinggrae5954]

오웃 베르님 유투브도 하셨구나 구글에 검색하면 항상 나오는 베르님 ㅋㅋ

[@wergia]

제 자랑거리죠 ㅎㅎ

[@user-ql4cw6fh7z]

좋은 내용 잘보고 갑니다~~ 캔버스 UI 스케일 모드를 scale with screen size로 변경 하면 오른쪽 조이스틱이 제대로 작동하지가 않고 레버가 한쪽으로 치우쳐서 작동되는데 어떻게 해결하면 좋을까요?ㅠㅠ

[@wergia]

화면 크기가 바뀌면서 들어오는 입력 위치와 조이스틱이 가지는 AnchoredPosition 위치가 일치하지 않아서 발생하는 문제네요. Joystick.cs에 [SerializeField] private Canvas mainCanvas; 이렇게 캔버스 변수를 선언해서 넣어주고 private void ControlJoystickLever(PointerEventData eventData) { var scaledAnchoredPosition = rectTransform.anchoredPosition * mainCanvas.transform.localScale.x; var inputPos = eventData.position - scaledAnchoredPosition; var inputVector = inputPos.magnitude < leverRange ? inputPos : inputPos.normalized * leverRange; lever.anchoredPosition = inputVector; inputDirection = inputVector / leverRange; } 조이스틱 위치를 정해줄때 rectTransform.anchoredPostion을 그대로 쓰지 말고 캔버스의 크기랑 곱해서 사용하면 해결됩니다!

[@user-ql4cw6fh7z]

@@wergia 정성스런 댓글 감사합니다!!!

[@user-nk6lq8je5u]

@@wergia 감사합니다

[@user-vl9hg6io6o]

유익한 강의 감사합니다.!! 혹시 카메라 회전을 조이스틱 대신 화면 드래그로 구현하고 싶은데 어떻게 하면 좋을까요??

[@wergia]

드래그로 카메라 방향을 전환하려면 드래그하는 방향과 크기를 구해서 카메라의 회전 값에 넣어주면 됩니다.

[@조폐]

캐릭터가 이제 잘 움직이는데 지형을 통과 하네요.. 터레인에 Terrain collider 적용해놨습니다.. 그리고 캐릭터에 콜라이더 ,리지드 바디 지정을 해놨는데도 잘 안되네요 어떤 방법으로 해야 될까요?

[@wergia]

콜라이더가 트리거로 지정되어 있거나 그런건 아닐까요?

[@user-zc7yj6jl2h]

2d 플레이어 카메라 추적 이동하는 영상도있을까여?

[@hayoungsong3601]

안녕하세요 좋은 영상 감사합니다. 이거 참고해서 조이스틱 만들고 있는데 4:37에서 레버 프로퍼티가 밑에 안 나오네요ㅠㅠ 그대로 따라했는데 혹시 무슨 문제가 있는 걸까요?ㅠㅠ

[@wergia]

레버 프로퍼티를 선언할때 [SerializeField] 어트리뷰트를 붙였는지 확인해보세요. 프로퍼티를 인스펙터 뷰에 공개하려면 프로퍼티를 public으로 선언하던지 [SerializeField] 어트리뷰트를 붙여줘야합니다.

[@hayoungsong3601]

@@wergia 오 완전 감사합니다 역시 제가 문제였어요ㅎㅎ 그리고 제가 캐릭터 이동하는거를 제가 따로 임포트한 캐릭터로 하고싶은데 TPS 코드를 가져와서 해도 이상 없을까요? 캐릭터에 카메라를 달아서 그 조이스틱 이동에 따라 캐릭터의 카메라 시점도 변화하게 하고싶어서요

[@wergia]

@@hayoungsong3601 조금만 손보시면 충분히 가능할겁니다!

[@조폐]

TPS캐릭터에 적용을 시켰는데 제자리에서만 움직이네요 ㅠㅠ 왜 이러는 걸까요? 그리고 캔버스 스케일에서 ui sacle mode를 화면에 맞춰서 하면 래버가 좀 다르게 움직이네요 ㅠ

[@wergia]

UI 앵커 설정을 확인해보세요.

[@조폐]

@@wergia 혹시 Assertion failed on expression: 'CompareApproximately(SqrMagnitude(result), 1.0F)' UnityEngine.Quaternion:Euler (single,single,single) 이 오류는 어떤 오류인가요 ㅠㅠ??

[@strong_YS]

조이스틱 이미지 대신에 3d 오브젝트로 가상조이스틱을 대체할 수 있을까요 ??

[@wergia]

가능합니다.

[@user-sw4kc8zw1o]

1:05 영상 시작 ㅋㅋㅋ

[@user-ll8mq6fc6s]

영상 아주 잘 보고있습니다! 혹시 완성된 소스코드도 공유 가능할까요? ㅠㅠ

[@wergia]

완성 예제 링크 추가했습니다.

[@user-ll8mq6fc6s]

감사합니다 ^^

[@user-zc7yj6jl2h]

혹시 모바일 왼쪽하단에 가상 스킬 터치 버튼 ? 만드는 영상도있을까요?

[@wergia]

가상 스킬 버튼 같은 경우는 그냥 버튼만 만들어서 캐릭터와 연동해주면 되는 간단한 기능이라 따로 강좌를 만들지는 않았습니다. 어떤 내용이 필요하신지 알려주시면 목록에 올려볼게요!

[@user-hiasen]

리소스 다운할려고 git허브 들어가면 없다고 뜨는데ㅠㅠ

[@wergia]

링크 수정했습니다! 알려주셔서 감사합니다!

[@user-do8il2vx4z]

스마트폰 모바일 조이스틱좀 개발해 주시면 안 될까요? ㅠ 시중에 판매하는 조이스틱들은 오류가 너무 많아서 비싼 가격에 구입을 해도 너무 잘 고장나고 조이스틱이 드래그 범위를 너무 많이 벗어나서 섬세한 컨트롤이 힘듭니다 정말 조이스틱을 개발해 주셨으면 합니다 부탁드립니다 ㅠ

[@wergia]

제가 직접 만들어 드리긴 어렵고... 직접 만들어 보시는게 어떨까요?

[@user-qx4kq5lf1z]

캐릭터랑 연결을 했는데 조이스틱을 움직여도 캐릭터가 안 움직여요. 어떤것이 잘못된걸까요?

[@wergia]

게임을 실행했을 때 뜨는 에러같은게 있나요?

[@user-qx4kq5lf1z]

@@wergia 아니요

[@wergia]

따로 표시되는 에러 같은게 있나요?

[@user-qx4kq5lf1z]

@@wergia 앗 해결됬습니다ㅎㅎ 해결 해주시려고 도와주셔서 감사합니다!

[@user-vm9cc6bn4v]

조이스틱이 아래방향만 빼고 반원만큼만 돌아가게 하고 싶으면 어떻게 해요?

[@wergia]

조이스틱의 y값을 0 밑으로 내려가지 못하도록 제한하면 될 것 같습니다.

[@user-vm9cc6bn4v]

@@wergia아 그러네요 감사합니다!

[@zeroapple]

어디선가 본 내용인가 싶었는데 똑같은 블로그였네

[@wergia]

ㅎㅎ 그게 바로 접니다

[@user-ir6xd7im2f]

조이스틱이 게임을 시작하면 보이지가 않아요 ㅠㅠ

[@wergia]

어떤 방식으로 보이지 않나요? 빌드했을 때만 안보이는 건가요? 아니면 에디터에서 게임 시작 후에 사라지는 건가요? 화면에서 사라졌을 때 하이어라키 뷰에는 남아있나요?

[@user-ir6xd7im2f]

@@wergia 아 해결 됬어요 ㅎㅎ 감사합니다

[@user-ir6xd7im2f]

@@wergia게임을 실행하면 UI이미지의 위치와 크기가 다르게 나와요 ㅠㅠ

[@wergia]

@@user-ir6xd7im2f 처음 배치나 앵커 설정은 영상과 똑같이 하셨나요?

[@user-ir6xd7im2f]

@@wergia다른건 다 똑같이 했는데 위치가 이상해서 이미지를 움직였더니 그러네용... 그리고 조이스틱은 UI이미지로 했어요