Public

[Unity\] On-Screen Stick 으로 모바일 조이스틱 구현하기

김치킨. 2025. 12. 20. 19:53

모바일 게임을 개발할 때 가장 먼저 부딪히는 난관 중 하나는 바로 이동 컨트롤입니다. 과거에는 Joystick Pack 같은 외부 에셋을 다운로드하거나, UI 터치 좌표를 계산하는 복잡한 코드를 직접 짜야 했습니다.

하지만 유니티의 New Input System이 등장하면서, 이제는 On-Screen Stick 컴포넌트 하나로 아주 손쉽게 가상 조이스틱을 구현할 수 있게 되었습니다.

오늘은 유니티 공식 기능을 활용해 깔끔하고 반응성 좋은 모바일 조이스틱을 만드는 방법을 알아보겠습니다.


1. 사전 준비 (Package 설치)

가장 먼저 프로젝트에 Input System 패키지가 설치되어 있어야 합니다.

  1. Window > Package Manager를 엽니다.
  2. Packages를 Unity Registry로 변경합니다.
  3. Input System을 검색하여 Install 합니다.
  4. (설치 후 에디터가 재시작될 수 있습니다. 경고창이 뜨면 'Yes'를 눌러주세요.)

2. UI 구성하기 (비주얼 만들기)

조이스틱은 눈에 보여야 하니 UI 이미지가 필요합니다.

  1. Hierarchy 창에서 우클릭 > UI > Canvas를 생성합니다. (Canvas Scaler는 Scale With Screen Size로 설정하는 것을 추천합니다.)
  2. Canvas 아래에 Empty Object를 만들고 이름을 Joystick이라고 짓습니다. (위치 잡기 용도)
  3. Joystick 아래에 Image를 만들고 Background라고 합니다. (조이스틱 배경 원)
  4. Background 아래에 Image를 만들고 Handle이라고 합니다. (움직이는 손잡이)

Tip: Background는 조금 크게, Handle은 그보다 작게 사이즈를 조절하고, 앵커(Anchor)를 활용하여 화면 좌측 하단에 적절히 배치하세요.


3. On-Screen Stick 컴포넌트 추가

이제 마법을 부릴 차례입니다. 실제로 움직이는 Handle 오브젝트에 기능을 부여합니다.

  1. Hierarchy에서 Handle 이미지를 선택합니다.
  2. Inspector에서 Add Component > On-Screen Stick을 검색해 추가합니다.
  3. Movement Range를 조절합니다. (보통 50~100 사이가 적당합니다. Handle이 배경을 벗어나지 않게 설정하세요.)

4. Input Action 연결하기 (핵심!)

On-Screen Stick의 원리는 "화면의 터치 입력을 마치 게임패드의 스틱 입력인 것처럼 속여서 Input System에 전달하는 것"입니다.

1) Control Path 설정

Handle 오브젝트의 On-Screen Stick 컴포넌트로 돌아가서 Control Path를 설정합니다.

  • Control Path: Gamepad > Left Stick

2) Input Actions 생성 및 연결

  1. Project 창에서 우클릭 > Create > Input Actions를 생성합니다. (이름 예시: GameControls)
  2. 생성된 에셋을 더블 클릭하여 편집 창을 엽니다.
  3. Action을 하나 만들고 이름을 Move라고 짓습니다.
  4. Action TypeValue, Control TypeVector 2로 설정합니다.
  5. Move 아래의 Binding(No Binding)을 지우고, +를 눌러 Add Binding을 선택합니다.
  6. Binding의 Path를 Gamepad > Left Stick으로 설정합니다.

중요: On-Screen Stick 컴포넌트에서 설정한 Path와 Input Action의 Binding Path가 반드시 일치해야 작동합니다!

이제 Input System이 모바일 화면의 터치 조작을 게임패드의 왼쪽 스틱 입력으로 인식하게 됩니다. 기존에 게임패드 지원이 구현되어 있다면 코드를 수정할 필요 없이 즉시 작동합니다.


5. 캐릭터 움직이기 (스크립트 작성)

이제 입력값을 받아 캐릭터를 움직이는 간단한 스크립트를 작성해 봅시다.

using UnityEngine;
using UnityEngine.InputSystem; // 네임스페이스 필수

public class PlayerController : MonoBehaviour
{
    public float moveSpeed = 5f;
    private Vector2 moveInput;
    private Rigidbody2D rb;

    // Input Action 레퍼런스 (인스펙터에서 할당 필요)
    public InputActionReference moveAction;

    void Awake()
    {
        rb = GetComponent<Rigidbody2D>();
    }

    void OnEnable()
    {
        // 액션 활성화
        moveAction.action.Enable();
    }

    void OnDisable()
    {
        moveAction.action.Disable();
    }

    void Update()
    {
        // 입력값 읽어오기
        moveInput = moveAction.action.ReadValue<Vector2>();
    }

    void FixedUpdate()
    {
        // 물리 이동 처리
        rb.velocity = moveInput * moveSpeed;
    }
}

마무리 설정

플레이어 캐릭터에 위 스크립트를 추가합니다.

인스펙터의 Move Action 빈칸에, 아까 만든 Input Action Asset(GameControls) 내부의 Move 액션을 드래그해서 넣어줍니다.

게임을 실행하고 마우스(또는 터치)로 UI 핸들을 움직여 보세요!


마치며: 왜 On-Screen Stick인가?

직접 터치 좌표를 계산하는 방식(IDragHandler 등)도 좋지만, On-Screen Stick을 사용하면 다음과 같은 장점이 있습니다.

  1. 통합 관리: PC(키보드/패드)와 모바일(터치) 입력을 Input System 하나로 통합하여 관리할 수 있습니다.
  2. 간편함: 복잡한 UI 좌표 계산 로직을 작성할 필요가 없습니다.
  3. 유연함: 나중에 물리 컨트롤러(Xbox 패드 등)를 연결해도 별도의 코드 수정 없이 그대로 호환됩니다.

이제 복잡한 구현은 엔진에 맡기고, 여러분은 더 재미있는 콘텐츠를 만드는 데 집중하세요! 🕹️`
```