d r t w i n

완성된 작업을 Eclipse와 연동하여 안드로이드용 앱으로 만드는 방법을 알아봅니다. 그전에 Canvas의 옵션 중 Canvas Scaler를 조정하여 모바일에서 정확히 Resize 될 수 있도록 조정해야 합니다. Player Setting 창에서 아이콘 및 Bundle Identifier 정보를 ...

각 Panel에 위치하고 있는 Button을 클릭할 경우, 특정한 Panel로 이동하도록 하기 위해서 함수를 Public으로 선언한 후 Button에서 On Click 하는 경우, 해당 함수를 실행하도록 해줍니다. 인트로 화면의 경우는 자동으로 3초간 대기하고 있다가 다른 패널로 ...

완성된 각각의 Panel이 원활히 네비게이션 되게 하려면 Script를 통해서 이를 구현합니다. 새로운 스크립트 화일을 만들고 모든 Panel를 변수로 등록해줍니다. 그리고 Start 함수에서, 처음 실행시 인트로UI 패널이 노출되도록 해줍니다. 다운로드 : Unity_GUI...

지도와 같이 상하좌우로 이미지를 드래그 하는 경우는 Scroll Rect를 활용하면 됩니다. 먼저 빈 Object를 하나 만들어서 Scroll Rect를 탑재하여 주고 Content 항목에 이미지를 연결시켜줍니다. Movement Type은 Clamp로 설정해야 이미지의 빈 부분이 노출되지...

앞서의 경우와 동일한 방법으로 서브페이지에 들어가는 버튼의 배경 영역은 Sliced 이미지를 만들어서 가로,세로 폭을 조정해주는 형태로 레이아웃을 구성합니다. 동일한 방법으로 나머지 페이지를 만들되 버튼이 필요한 부분만 조정해서 구성하면 수월하고 신...

메인화면을 구성하는 Panel 중 상단과 하단의 GNB를 분리하여 제작합니다. 아래와 같이 상단GNB 영역은 세로폭이 작기 때문에 이에 적합한 크기로 제작합니다. 그렇지 않은 경우 다른 Panel을 가리게 되어 문제를 발생시킬 수 있습니다. 버튼의 경우는 이미지...

화면에 배치된 UI 요소들은 먼저 Pivot과 Position을 셋팅해두는 것이 절대적으로 필요합니다. 아래와 같은 Anchor preset에서 Shift와 Alt 키를 눌러서 이를 설정할 수 있습니다. 여러 Image들을 배치하고 Align을 조정함으로서 아래와 같은 인트로 화면을 완...

UI 작업을 위해서 1개 이상의 Canvas가 반드시 필요합니다. 또 실제 화면을 여러개 만들어두기 위해서는 Panel로 만들면서 관리해가는 것이 좋습니다. 인트로 화면을 위한 Panel를 하나 만들고 바탕화면의 조건을 셋팅해둡니다. 또 Sliced 이미지를 통해 가변...

아무리 작은 크기라고 해도 여러 개의 이미지를 빈번히 불러들이고 사용하는 경우, CPU는 부하가 걸리게 되며 이는 최적화와는 거리가 먼 상황이 되고 맙니다. 따라서 여러 개의 이미지는 큰 하나의 정방형 이미지로 합치는 형태로 만들어서 유니티가 단 1개의...

유니티에서 새로운 프로젝트 생성 시 2D로 설정하면 Import 되는 모든 이미지가 Sprite(2D and UI) 형식으로 설정됩니다. 이 형태로는 Scene에서 바로 사용할 수 있게 됩니다 반면 일반적인 Texture로 설정되는 경우는 재질 등으로 사용할 수 있지만 바로 Scen...

본 동영상은 Unity3D 5.0 버전으로 만들어졌습니다. 따라서 동영상 강의를 그대로 따라해보기 위해서는 반드시 5.0 버전을 설치해야 합니다. UX디자인 프로세스를 통해 얻은 결과물인 프로토타입의 러프시안을 Graphic User Interface의 결과물로 구현했다면, ...