CreateFrame

UMG를 만들어서 확인하는데 ScrollBox 혹은 UListview와 같은 스크롤 기능이 있는 위젯에서 갑자기 스크롤이 되지 않는 경우가 생겼다. 마우스 휠을 움직이면 스크롤이 되는데 마우스 클릭후에 움직이려니 간헐적으로는 스크롤이 되는데, 계속 스크롤이 되지 않는 현상이 발생해서 원인을 찾아봤다. 원인은 버튼이 클릭되었음을 인지 하기 위한 이벤트 처리와, 스크롤박스의 스크롤이 되기 위한 조건 응답이 충돌하기 때문이었다. Button detail에 Advanced라는 카테고리에서 Click Method, Touch Method 세팅을 알맞는 방법으로 바꾸었더니 해결됐다. 자세한 내용은 아래에.. 내가 만들고 있는 위젯은 상품의 종류를 나열해 보여줄 수 있는 리스트다. 아직 리소스도, UI 구성도 없지만..

위젯에는 Visibility 설정을 하는 곳이 있다. 위젯 하나를 클릭해서 디테일 패널을 내리다보면 Behavior 라는 카테고리 아래에 Visibility가 있을 것이다. 이름 그대로 이 위젯을 어떤 방식으로 보여주는 것인지 설정하는 곳이다. 크게는 보이는 것, 보이지 않는 것 으로 나눌 수 있지만 각 타입마다 기능이 다르다. 이걸 그냥 설명만 봤을 때는 그렇구나 하고 넘어갔는데 설정에 따라서 간혹 버그가 일어나는 경우도 있었다. 그래서 사용법과 그 예시를 조금씩 같이 적어놓으려고 한다. 참고로 코드에서는 SetVisibility라는 함수를 통해 타입을 설정할 수 있다. ESlateVisibility라는 enum타입으로 정의한다. Visibility 기능과 차이점 언리얼 코드에서 SlateWrapper..

이전 글에서 만들었던 UMG를 이제 작동하도록 만들려고 한다. 블루프린트를 일부 사용하고, 데이터 저장과 로직이 들어가야 하는 부분은 C++ 을 사용해서 작업할 예정이다. 오늘은 이 큰 Shop을 하기전에 커스텀해서 만들었던 Tab을 먼저 작업하려고 한다. Tab 의 UMG 하이어라키는 이렇게 구현되어있다. 이 Tab UMG가 할 역할은 다음과 같다. 1. Shop에서 각 탭마다 부여받는 이름과 번호가 존재한다. 2. 클릭된 Tab에 따라 다른 아이템을 보여줄 수 있도록 Clicked 된 탭이 몇 번인지 Shop UMG에 알려준다. 3. 클릭된 Tab은 On , 클릭되지 않은 Tab은 Off 상태를 유지할 것이다. 그래서 이 Tab은 데이터가 들어오면 어떤 이름을 세팅하고 현재 부여받은 내 번호가 몇 번..

지금 Sprite로 쓸만한 에셋이 없어서 엔진의 기본 세팅을 가지고 임의로 만들었다. 예쁘게 만드는 건 아트팀에서 예쁘게 해줄 것이다. 계층구조는 이렇게 했다. 이제 하나씩 뜯어보면서 코드로 연결을 해볼 예정이다. 이렇게 UI가 만들어져서 나오면 이대로 바로 연결하지 않고 기획적인 부분을 확인해보고 필요에 의해 수정되는 경우가 있다. 예를 들어서 아이템이 20개가 될지 10개가 될지 2개가 될지 모르는 상황이지만 어떤 데이터가 들어와도 우리는 유연하게 대처할 수 있는 코드를 짜야한다. 그러기 위해서는 2개 였을 때는 스크롤박스가 필요없지만 10개가 넘어가면 스크롤 박스가 필요할지도 모른다는 생각을 우선 캐치해내야한다. 나는 계층구조를 각각의 역할이 필요한 순서대로 엮었다. 첫 번째는 가장 상단의 재화 표..

앞선 포스팅에서 UMG 라는 것이 있고, UI를 디자인 할 수 있는 UUserWidget을 부모로 하는 블루프린트 만들기를 해보았다. 그리고 간략하게 팔레트에 있는 위젯을 가져다 계층구조(하이어라키)에 넣으면 중앙 디자인 미리보기에 종류에 따른 위젯들이 나타나는 것을 보았다. 거기까지는 아주 기초, 그리고 배치할 수 있다는 것을 알았으니 오늘은 조금 깊게 파고들고자 한다. 프로그래머가 아니라면 흥미 없을 수 있는 이야기다. 참고로 프로그래머도 흥미 없을 수 있다. UUserWidget을 상속받은 UMG를 열어보면 UI디자이너라는 패널에서 가장 왼쪽 상단에 Palette라는 곳이 있다. 이곳에 노출되는 위젯들은 모두 UWidget을 상속받은 위젯들이다. UWidget이란 SWidget이라는 언리얼 슬레이트..

DPI란 Dot per inch의 약자로 검색해보면 해상도 측정 단위라고 나올 것이다. 1인치 안에 몇 개의 픽셀이 존재하는가를 뜻하는데 티스토리 로고를 캡쳐해서 확대해 보았다. 네모 모양의 픽셀들이 보일것이다. 1인치에 72개의 픽셀과1인치에 108개의 픽셀이 있는 것 중에 어떤 것이 더 선명하게 보일까? 정답은 1인치에 108개의 픽셀이다. 주어진 공간에 더 세밀하게 많은 픽셀이 있으면 더 선명하게 보인다. 이때 1인치에 72개의 픽셀로 이루어지면 72dpi, 1인치에 108개의 픽셀로 이루어지면 108dpi라고 한다. 이걸 설명한 이유는 언리얼에서 제공해주는 DPI 스케일링이 무엇인지 어디다 쓰는것인지 나도 매번 헷갈리고 까먹기 때문에 적어보려고 설명했다. https://docs.unrealengi..

나는 UI 연결작업을 그다지 즐거워하지 않는다. 그게 내가 언리얼 UI를 다 알기 때문이 아니라 쉽고 단순하다가도 복잡하고 답답할 때가 많기 때문이다. 게임을 만들 때 UI를 고려하지 않을 수는 없지만, 어느정도로 중요하게 고려가 되는지 잘 모르겠다. 내가 알고 있는 내용을 하나씩 게시해보고 평소에 답답했던 부분을 혼자서 삽질해보려고 한다. 참고로 나는 프로그래머다. 구글에 UI관련 기능을 검색하거나 도움을 얻으려고 할 때마다 블루프린트로 장황하게 보여주는데, 항상 듣기로 단순한 UI 변화는 블루프린트로, 비즈니스 로직은 c++로 하는게 좋다고 들었다. 지금까지 해오던 UI작업 방식은 c++에 다 때려넣는 방법을 써왔는데 지저분하기도 하고, 언리얼에서 best practice로 뽑은 곳의 예시중 추천하는..