언리얼엔진 UI 무료강의 3

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

오늘은 저번 시간에 만든 버튼을 클릭하면 해당 카메라의 시점으로 멋지게 바뀌는 애니메이션 기능을 만들어보겠습니다. WBP_Main을 실행합니다. 그래프 창에서 Event Construct를 검색해 클릭합니다.(이미 그래프 창에 해당 이벤트가 있을 수 있습니다.) 그리고 Get All Actors Of Class를 검색해 클릭합니다. 그다음 클래스 선택 > BP_Camera를 검색해 클릭합니다. 그다음 For Each Loop를 검색해 클릭하고 아래 그림과 같이 선을 연결시켜 줍니다. 그리고 Array Element를 드래그 앤 드롭해 변수로 승격을 클릭합니다. 변수 이름을 BP_Cam으로 변경합니다. 아래 그림에서 빨간색 네모 안에 있는 버튼을 우클릭합니다. 그리고 배열로 변경합니다. 아래 그림과 같은 ..

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

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

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

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