유니티 마우스 커서 이미지 바꾸기 (Cursor.SetCursor, 커스텀 커서 hotspot)

 

유니티에서 마우스 커서 이미지는 Cursor.SetCursor 한 줄로 바꿉니다. 커서로 쓸 Texture2D 와 클릭 끝점(hotspot)을 넣으면 됩니다.

 

Cursor.SetCursor(cursor_texture, Vector2.zero, CursorMode.Auto);   // 기본 커서로 되돌릴 때는 texture 자리에 null

 

RPG 게임에서 몬스터 위에 마우스를 올리면 칼 모양으로, 상자 위에 올리면 손 모양으로 마우스 포인터가 바뀌는 것을 자주 볼 수 있는데요. 커서 하나만 바뀌어도 "여기는 누를 수 있다" 는 것이 바로 전달됩니다. 이 블로그의 예전 글 「유니티 마우스 커서, 이미지 마우스 따라다니게 하기」 에서는 진짜 커서를 숨기고 UI 이미지를 마우스 위치로 옮겼습니다. 이번 글은 Unity 의 Cursor API 로 운영체제 커서 자체의 이미지를 바꾸는 방법입니다. 이번 예시에서는 캐릭터 위에 마우스를 올렸을 때 커스텀 커서로 바꾸고, 벗어나면 기본 커서로 되돌려 보겠습니다.

 

C# (UNITY 3D)

 

1. 커서 이미지 준비 (Texture Type: Cursor)

 

배경이 투명한 PNG 를 Project 창에 넣고, Inspector 의 Texture Type 을 Cursor 로 바꾼 뒤 Apply 를 누릅니다. Unity 문서는 커서로 쓰는 텍스처를 가져오기 설정에서 커서로 표시하라고 하고, Cursor.SetCursor 문서는 Read/Write 를 켜거나 기본 커서 가져오기 설정을 쓰라고 적고 있습니다. 코드로 만든 텍스처를 커서로 쓸 때는 RGBA32 형식에 Alpha is Transparency 를 켜고 밉맵이 없어야 합니다.

 

2. hotspot — 마우스 포인터의 끝점

 

hotspot 은 커서 이미지 안에서 실제로 클릭이 일어나는 점입니다. 좌표는 이미지 왼쪽 위가 (0, 0) 이고, x 는 오른쪽, y 는 아래쪽으로 커지는 픽셀 값입니다. 화살표처럼 끝이 왼쪽 위 모서리에 있는 커서는 Vector2.zero, 32×32 조준점처럼 가운데를 찍는 커서는 new Vector2(16, 16) 입니다. 값은 이미지 크기 안에 있어야 합니다. 아래 그림이 이 좌표를 나타낸 것입니다.

 

 

3. 캐릭터 위에서 마우스 커서 바꾸기 (OnMouseEnter)

 

캐릭터처럼 씬에 있는 오브젝트에 붙이는 스크립트입니다. OnMouseEnter · OnMouseExit 는 Collider 에 마우스가 들어오고 나갈 때 불리기 때문에, 오브젝트에 Collider(2D 라면 Collider2D)가 있어야 합니다. Ignore Raycast 레이어에 있는 오브젝트에서는 불리지 않습니다.

 

using UnityEngine;

//CodeFinder 코드파인더
//From https://codefinder.janndk.com/
public class CursorHover : MonoBehaviour
{
    public Texture2D cursor_texture;                    // Texture Type 을 Cursor 로 바꾼 이미지
    public Vector2 cursor_hotspot = Vector2.zero;       // 이미지 왼쪽 위에서 잰 클릭 끝점(픽셀)
    public CursorMode cursor_mode = CursorMode.Auto;

    void OnMouseEnter()
    {
        Set_Cursor();
    }

    void OnMouseExit()
    {
        Reset_Cursor();
    }

    void OnDisable()
    {
        Reset_Cursor();   // 마우스가 올라간 채로 오브젝트가 꺼져도 바뀐 커서가 남지 않게
    }

    void Set_Cursor()
    {
        Cursor.SetCursor(cursor_texture, cursor_hotspot, cursor_mode);
    }

    void Reset_Cursor()
    {
        Cursor.SetCursor(null, Vector2.zero, CursorMode.Auto);   // null 이면 기본 커서
    }
}

 

스크립트를 캐릭터에 붙이고 cursor_texture 칸에 커서 이미지를, cursor_hotspot 에 끝점 좌표를 넣습니다. 에디터에서는 Play 중인 Game 창 안에서만 커스텀 커서가 보이고, Inspector 나 Scene 창 위에서는 원래 커서 그대로입니다.

이 글의 두 스크립트(CursorHover · UICursorHover)는 Unity 6000.3.14f1 · 6000.6.3f1 에서 컴파일 오류 없이 들어가고, 커서를 바꾸고 되돌리는 함수가 예외 없이 도는 것을 확인했습니다.

 

변수(variable)
cursor_texture(Texture2D) : 바꿀 커서 이미지
cursor_hotspot(Vector2) : 커서 이미지 안의 클릭 끝점
cursor_mode(CursorMode) : 하드웨어 · 소프트웨어 커서 선택

 

함수(function)
Set_Cursor : 커스텀 커서로 바꿉니다.
Reset_Cursor : 기본 커서로 되돌립니다.

 

4. UI 버튼 위에서 마우스 포인터 바꾸기 (IPointerEnterHandler)

 

버튼 · 이미지 같은 UI 에는 Collider 가 없으니 EventSystem 의 포인터 이벤트를 씁니다. 씬에 EventSystem 이 있어야 하고, 붙이는 UI 의 Raycast Target 이 켜져 있어야 합니다.

 

using UnityEngine;
using UnityEngine.EventSystems;

//CodeFinder 코드파인더
//From https://codefinder.janndk.com/
public class UICursorHover : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    public Texture2D cursor_texture;
    public Vector2 cursor_hotspot = Vector2.zero;

    public void OnPointerEnter(PointerEventData eventData)
    {
        Cursor.SetCursor(cursor_texture, cursor_hotspot, CursorMode.Auto);
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        Cursor.SetCursor(null, Vector2.zero, CursorMode.Auto);
    }
}

 

5. CursorMode.Auto 와 ForceSoftware · 기본 커서로 되돌리기

 

 

CursorMode.Auto 는 하드웨어 커서를 지원하는 Windows · macOS · Linux 에서 하드웨어 커서를 쓰고, 지원하지 않는 플랫폼에서는 소프트웨어 커서로 대신합니다. ForceSoftware 는 언제나 소프트웨어 커서를 씁니다. 특별한 이유가 없다면 Auto 를 씁니다. 기본 커서로 돌아갈 때는 texture 자리에 null 을 넣어 Cursor.SetCursor(null, Vector2.zero, CursorMode.Auto) 를 부릅니다.

 

6. 게임 전체 커스텀 커서는 Player Settings 에서

 

마우스 커서를 처음부터 끝까지 하나로 바꾸고 싶다면 코드 없이 Edit > Project Settings > Player 의 Default Cursor 에 텍스처를 넣고, Cursor Hotspot 에 끝점 좌표를 적습니다. 커서를 숨기는 Cursor.visible = false 와, 커서를 화면 가운데에 묶는 Cursor.lockState = CursorLockMode.Locked 도 같은 Cursor 클래스에 있습니다. 1인칭 슈팅처럼 커서 없이 시점을 돌리는 게임에서 씁니다.

 

7. 커서 이미지가 이상할 때 — 자주 하는 실수

 

1. 커서가 흐릿하거나 너무 크게 나옴
커서용 그림을 크게 그려 두면 운영체제 커서 크기에 맞춰지면서 흐려 보일 수 있습니다. 처음부터 32×32 처럼 작은 크기로 그리고, 가져오기 설정에서 Compression 을 None, 픽셀 그림이라면 Filter Mode 를 Point 로 두면 원래 모양에 가깝게 보입니다. 하드웨어 커서가 실제로 몇 픽셀까지 그대로 나오는지는 운영체제마다 다르니 빌드해서 확인합니다.

 

2. 클릭 위치가 커서 끝과 어긋남
hotspot 을 (0, 0) 그대로 두고 조준점이나 손가락 커서를 쓰면, 그림 끝이 아니라 이미지 왼쪽 위 모서리가 클릭됩니다. y 는 아래로 커지므로 손가락 끝이 위쪽에 있다면 y 는 작은 값입니다. Unity 화면 좌표(아래가 0)와 반대라 헷갈리기 쉽습니다.

 

3. 바꾼 커서가 원래대로 돌아오지 않음
OnMouseExit 에서 되돌리지 않았거나, 마우스가 올라간 채로 오브젝트가 꺼진 경우입니다. CursorHover 예시처럼 OnDisable 에서도 null 로 되돌려 둡니다(UI 버튼 쪽도 꺼질 수 있다면 같은 줄을 더합니다). 커서를 바꾸는 오브젝트가 여럿이면 이 줄이 다른 오브젝트가 바꾼 커서까지 되돌릴 수 있으니, 그럴 땐 한 곳에서 커서를 관리하는 편이 낫습니다.

 

4. 모바일에서는 커서가 보이지 않음
터치 화면에는 마우스 커서가 없습니다. Unity 문서 기준으로 안드로이드는 7.0 이상에서 마우스를 연결했을 때 커스텀 커서가 지원되고, 그보다 낮은 버전은 지원하지 않습니다. 모바일 게임이라면 커서 대신 누른 대상의 색이나 크기를 바꾸는 쪽이 맞습니다.

 

5. WebGL · 스토어 앱 빌드에서 다르게 보임
Windows 스토어 앱은 하드웨어 커서가 Player Settings 의 Default Cursor 하나뿐이고, Cursor.SetCursor 로 바꾼 커서는 소프트웨어 커서로 그려집니다. WebGL 은 Cursor 문서에 따로 적힌 내용이 없으니, 웹으로 낼 게임이라면 실제 브라우저에서 꼭 확인합니다.

 

커서 모양을 바꾸는 대신 그림이 마우스를 따라다니게 하거나, 커서 자리에 글자 · 애니메이션을 띄우고 싶다면 예전 글 「유니티 마우스 커서, 이미지 마우스 따라다니게 하기 (Mouse Position)」 의 방법이 더 자유롭습니다. 그 방법에서는 따라다니는 이미지의 Raycast Target 을 꺼야 아래 버튼이 눌립니다.

 

Cursor 동작은 Unity 공식 Scripting API 문서(Cursor.SetCursor) 와 Cursor · CursorMode · OnMouseEnter 문서를 기준으로 적었습니다.