언리얼엔진 UI 3

[UI/UX] 건축 시각화 인터랙티브 UI 제작 - 5

오늘은 카메라 관련 UI 버튼을 제작해 보겠습니다. 지난 강의에서 만들었는 WMP_Main 위젯을 실행하겠습니다. 디자이너 모드에서 팔레트 > 버튼을 검색해 원하는 위치에 배치합니다. 그리고 팔레트 > 텍스트를 검색해 버튼 위에 드래그 앤 드롭합니다. 그리고 디테일 창에서 텍스트를 "CAM1"로 변경합니다. 그다음 생성한 버튼을 클릭한 후 디테일 창을 아래 그림과 같이 변경합니다. - 변수 이름 변경 : Button_cam1 - 콘텐츠 크기에 맞춤 체크 (해당 버튼의 크기를 텍스트 크기에 맞춰주는 기능) 위에 설명한 방법으로 동일하게 이름만 바꿔서 "CAM2 버튼"을 만들어 봅시다. 성공하셨다면, Button_Hello 버튼을 삭제하고 컴파일 저장. 이때 아래 그림과 같은 오류가 생긴다면 그래프 창으로 ..

[UI/UX] 건축 시각화 인터랙티브 UI 제작 - 4

오늘은 카메라 화면 전환을 멋지게 하는 방법에 대해서 배워보겠습니다. 우선 블루프린트를 사용해 카메라를 제작하겠습니다. Blueprints 폴더에서 우클릭 후 블루프린트 클래스를 클릭 액터 선택 후 이름을 BP_Camera 로 설정 생성된 블루프린트를 실행해 봅시다. 왼쪽 +추가 버튼을 눌러 시네 카메라 컴포넌트를 찾아 클릭합니다. 그리고 변수 + 버튼을 눌러 인티저 변수를 하나 생성합니다. (이 변수를 활용해 카메라 번호를 지정할 예정입니다.)\ 변수 이름은 CameraNum 으로 설정합니다. 변수를 생성한 뒤 생성한 변수 오른쪽의 눈 버튼을 활성화 합니다. (이 버튼의 의미는 생성한 블루프린트를 레벨에 배치했을 때 디테일 창에 해당 변수를 변경할 수 있도록 만들어줍니다. 이 버튼을 누르지 않으면 다음..

[UI/UX] 건축 시각화 인터랙티브 UI 제작 - 3

UI를 화면에 배치하는 방법과 클릭했을 때 Hello가 출력되도록 만들어보겠습니다. 저번 강의에서 만든 BP_Hud를 실행해 보겠습니다. 우클릭으로 "Create Widget"을 찾아 클릭합니다. 그리고 클래스 선택 > WBP_Main(전 강의에서 만든 위젯 블루프린트)를 선택한 후 노드를 BeginPlay와 연결 Create Widget 노드의 오른쪽에 배치되어있는 Return Value를 드래그 앤 드롭 후 검색창에 Add ViewPort를 찾아 클릭 컴파일과 저장 후 에디터를 실행하면 화면에 생성한 UI가 나타납니다. (만약 나타나지 않는다면, 저번 강의를 다시 참고해서 빠진것이 없는지 확인하시기 바랍니다.) 이제 나타난 버튼을 클릭하면 "Hello"를 출력하도록 만들어보겠습니다. 지난 강의 때 만..