UI & Load Image
UIImage 컴포넌트
UIImage는 화면에 2D 이미지를 표시하는 기본 UI 컴포넌트입니다. Component 클래스를 상속받아 구현되어 있으며, UI 요소의 위치와 크기 정보를 관리합니다.
UI 피킹 시스템
엔진의 좌표계 구조
윈도우 좌표계(스크린 좌표계):
원점(0,0)은 윈도우의 좌측 상단
X축은 오른쪽으로, Y축은 아래쪽으로 증가
마우스 입력이 이 좌표계로 전달됨
NDC(Normalized Device Coordinates) 좌표계:
원점(0,0)은 화면 중앙
X축은 왼쪽이 -1, 오른쪽이 1
Y축은 아래쪽이 -1, 위쪽이 1
3D 렌더링에 사용되는 DirectX의 기본 좌표계
RECT 좌표계:
Windows API의 사각형 정의 구조체
left, top, right, bottom 값으로 구성
윈도우 좌표계 기준으로 작동
InputManager의 마우스 입력 처리
마우스 입력은 윈도우 좌표계에서 수집됩니다:
이 함수는 다음 단계로 동작합니다:
GetCursorPos: 전체 화면에서의 마우스 위치를 가져옴
ScreenToClient: 전체 화면 좌표를 창 기준 좌표로 변환
이 윈도우 좌표계 위치가 UI 피킹에 사용됨
NDC 좌표계 기준 UI 위치 설정
UI 요소는 NDC 좌표계를 기준으로 위치를 설정합니다:
중요한 점은 다음과 같습니다:
NDC 좌표계는 화면 중앙이 원점(0,0)
윈도우 좌표계는 좌상단이 원점(0,0)
NDC는 Y축이 위쪽이 양수, 윈도우 좌표계는 아래쪽이 양수
뷰포트 오프셋 보정을 통한 좌표계 매칭
UI 피킹의 핵심은 마우스 위치와 UI 요소의 RECT를 같은 좌표계에서 비교하는 것입니다:
이 오프셋 보정이 중요한 이유:
게임 뷰는, 전체 창에서 일정 오프셋(X: 10%, Y: 3%)을 가진 위치에 렌더링됨
마우스 위치는 전체 창 기준으로 입력되기 때문에, 게임 뷰 좌표계로 변환하려면 오프셋을 빼야 함
UI 요소의 RECT는 게임 뷰 내부 좌표계로 설정되어 있음
두 좌표계를 맞추지 않으면 마우스 클릭 위치와 실제 UI 요소 위치 간에 오차가 발생
실제 피킹 과정
Scene 클래스에서 UI 피킹은, 좌표계 보정 후 Windows API의 PtInRect 함수를 사용해 충돌을 감지합니다:
이미지 로드
드래그 드롭 감지 시스템
GUIManager는 Win32 API와 ImGui를 통해 외부 파일의 드래그 드롭을 감지합니다:
ImGui는 윈도우에 파일이 드롭됐을 때 이를 감지하고 이벤트를 발생시킵니다:
파일 형식 확인
드롭된 파일이 이미지인지 확인하는 과정:
외부 파일 처리 및 프로젝트 폴더로 복사
외부에서 드래그된 파일을 처리하는 메인 함수:
파일 복사 및 변환 프로세스
파일을 프로젝트 폴더로 복사하고 필요시 변환하는 함수:
리소스 로딩 및 엔진 등록
복사된 이미지 파일은 ResourceManager에 의해 텍스처 리소스로 로드됩니다:
텍스처 로딩 프로세스
Texture 클래스는 DirectX를 사용하여 이미지 파일을 GPU 텍스처로 로드합니다:
Scene에 이미지 생성
GUIManager는 프로젝트 창에서 이미지 파일을 씬 뷰로 드래그 드롭할 때 이미지의 비율을 유지하면서 UI 컴포넌트를 생성합니다:
이 코드는 다음 단계로 작동합니다:
드롭된 파일이 이미지인지 확인합니다.
새 GameObject와 필요한 컴포넌트(UIImage, MeshRenderer)를 생성합니다.
이미지의 원본 비율을 계산하고 이에 맞게 UI 크기를 조정합니다.
마우스 위치에 UI 요소를 배치합니다.
적절한 렌더 패스를 설정하고 씬에 GameObject를 추가합니다.
XML에 GameObject 상태를 저장합니다.
Button 컴포넌트
Button은 UIImage의 기능을 확장하여 클릭 이벤트를 처리할 수 있는 상호작용이가능한 UI 요소입니다. 함수 포인터를 저장하고 클릭 시 해당 함수를 호출합니다.
Button 이벤트 시스템
MethodRegistry 클래스를 통해 문자열 키로 함수를 등록하고 조회할 수 있는 시스템을 제공합니다:
REGISTER_MONOBEHAVIOR_METHOD 매크로
스크립트에서 함수를 등록하기 위한 매크로가 제공됩니다:
이 매크로는 클래스와 메서드 이름을 조합하여 고유한 키를 생성하고, 해당 메서드를 실행할 수 있는 함수 객체를 등록합니다.
Button에서의 이벤트 처리
Button 클래스는 이벤트 함수를 설정하고 호출하는 메서드를 제공합니다:
사용 예시
MonoBehaviour를 상속받은 스크립트에서 다음과 같이 버튼 이벤트를 등록할 수 있습니다:
Last updated