1. 레이아웃 생성 및 설정 캔버스의 하위 요소로 빈 오브젝트인 max와 그 하위 오브젝트인 popup을 만든다. max와 popup에 Vertical Layout Group 컴포넌트를 추가한다. max - 만들고 있는 팝업의 최대 크기를 결정하기 위해 생성 최대 영역의 크기를 보기 위해 임시로 이미지 삽입 Child Alignment를 Middle Center로 맞춘다. → 팝업 텍스트 가운데 정렬 Control Child Size Width/Height를 체크한다. 하위 요소에 의해서 사이즈가 결정되도록 함. → 텍스트의 길이에 따라 팝업창의 길이를 조절하기 위함 Child Force Expand Width/Height 체크를 해제 PopUp 하위 요소로 팝업 배경을 위한 Image UI(BackGr..

해당 포스팅은 Layout과 Layout Controller의 개념을 알고 있다는 전제로 하는 설명이기 때문에 아래 링크에서 Layout Controller에 대한 개념을 보시는 것을 추천드립니다. [Unity 3D] UI 레이아웃 개념과 컨트롤러(Layout Controller) 기초 정리 Layout Controller 오브젝트를 일정한 규칙에 따라 배치하는 것 Inspector : 디버그(Debug) 모드 Min Width : 최소한의 너비 Min Height : 최소한의 높이 Preferred Width : 선호되는 너비 Preferred Height : 선호되는 높이 howudong.tistory.com 더보기 Layout Element Layout Controller 안에 있는 UI 요소들이 ..

Layout Controller 오브젝트를 일정한 규칙에 따라 배치하는 것 Inspector : 디버그(Debug) 모드 Min Width : 최소한의 너비 Min Height : 최소한의 높이 Preferred Width : 선호되는 너비 Preferred Height : 선호되는 높이 Flexible Width : 너비가 늘어나는가? Flexible Height : 높이가 늘어나는가? Layout Component 사용하기 색이 다른 이미지 UI 4개를 만들어두고 빈 오브젝트 layout의 하위 오브젝트로 설정 Horizontal Layout Group Vertical Layout Group도 속성이 똑같음. layout 오브젝트에 Horizontal Layout Group 컴포넌트를 추가 위와 같이..

Draw Call(Batches) Batches(Draw Call) : CPU가 GPU에게 렌더링 할 항목(텍스처)들을 미리 알려주는 것 어떤 값을 넘겨주냐에 따라서 Draw Call이 결정 Draw Call 관리가 중요한 이유 Draw Call이 쌓일수록 전체적인 성능이 급격히 저하 모바일은 최대 100개 이하의 Draw Call을 유지해야 함 Draw Call을 줄이기 위해 Packing을 사용 Packing Sprite를 하나로 묶는 것 원하는 텍스처들을 가지고 있는 텍스처 뭉치를 만드는 것 Packing 원리 텍스처 하나를 Draw Call을 보냄 하나의 Draw Call 안에서 두 개의 스프라이트를 Render CPU가 GPU에게 텍스쳐를 요청하는 명령을 한 번만 처리할 수 있게 만듦 → 여러 ..

9 Slice 이미지를 9조각으로 나누어 영역별로 사이즈를 조절하는 테크닉 Image Type Image 컴포넌트 속성 중 Image Type에서 사용 Sliced와 Tiled에서 사용 9 Slice가 되어있지 않으면 Sliced와 Tiled 사용 불가능 9 Slice 사용 Project에 이미지 원본 파일을 클릭 Inspector에서 Sprite Editor 클릭 아래와 같이 초록색 선으로 9개의 네모 영역을 만든 후, 우측 상단에 Apply 경고 문구가 사라진 것을 확인할 수 있다. 9 Slice를 하면 뭐가 다를까? 그림으로 보는 것이 가장 빠르다. 왼쪽은 Sliced 적용 / 오른쪽은 Simple 이미지이다. Simple은 크기가 바뀔 때마다 전체 이미지 비율이 그에 상응하여 바뀐다. Sliced..

RectTransform UI 한정에서 사용해서 컴포넌트 Transform을 상속받음 Transform의 속성/기능 사용 가능 UI는 모두 Transform 대신 RectTransform임 RectTransform 속성 UI 좌표계는 스크린과 다르게 한가운데가 (0,0,0)으로 시작 이는 Anchors(앵커)의 디폴트 값이 (0,0,0)이기 때문 → 앵커 값을 변경하면 포지션 값이 달라진다. 포지션은 Pivot(피벗)과 Anchor(앵커)의 영향을 받는다. Rotation, Scale - Transfrom과 같음. 단, Scale에 Z는 존재하지 않음 Pivot(피벗) Rect Transform의 Position은 Anchor을 원점으로 잡고 가운데 Pivot까지의 거리를 측정하여 UI를 배치 Ancho..

Image Canvas Renderer : 상위 Canvas의 UI 요소라는 뜻 Source Image 화면에 나타날 이미지 Sprite 형식의 텍스쳐 타입(Texture Type)만 넣을 수 있음 다른 타입은 넣을 수 없다. Raycast Target 버튼 클릭 같은 터치 이벤트가 해당 UI에 의해 가려질 수 있는가를 설정 뒤에 있는 버튼이 앞에 Image에 가려져 있다고 가정 Raycast Target 체크 → Raycast가 이미지 통과 못함(버튼 클릭 안됨) Raycast Traget 체크 X → Raycast 이미지 통과(버튼 클릭) Image Type Simple : Sprite를 Rect 크기에 따라 그대로 넣는다. Sliced : 스프라이트를 9개의 영역으로 나누어 각자 다른 방식으로 리사..

UI UI Component를 생성하면 Canvas, EventSystem도 같이 생성됨 UI 가 화면에 나타나기까지의 과정 3D 렌더링 시스템에서 Vertex(정점)가 Vertex Buffer에 들어감 Vertex Buffer : 렌더링에 사용할 Vertex를 모아놓은 버퍼 Vertex(정점) : 3D 모델링의 가장 기본 단위 정점들이 도형(Polygon)을 이루게 됨 Polygon들이 모여 하나의 모델을 이루게 됨 Canvas 스크린과 매칭되는 UI 출력 영역(도화지) Vertex Buffer가 위치하는 곳 UI가 Canvas의 자식요소여야 볼 수 있음 UI들의 Vertex(정점)들은 사실상 UI가 아닌 Canvas에 저장됨 Canvas Render Mode Screen Space - Overlay ..