스마트아카데미

APP 개발 온라인 강좌 제8강 [8-7]-WebToon UI 만들기(Panel Scroll, Panel View)

알 수 없는 사용자 — Wed, 23 Jul 2014 11:26:36 +0900

(9) ‘Panel’ Scroll 방향 설정

앞서서 설정한 것을 플레이 해서 이미지를 움직여보면 상하뿐만이 아니라 좌우로도 이미지가 움직이는 것을 확인할 수 있었습니다.

[그림 8-14]

WebToon은 상하로만 드래그가 일어나야 하므로, ‘Panel’ 오브젝트를 클릭해서 UIDraggable panel (Script)컴포넌트를 통해서 이를 수정해보겠습니다.

UIDraggable panel (Script)컴포넌트를 보면 Scale이라는 항목이 있습니다.

이 항목을 열어서 보면, X, Y, Z 값이 1, 1, 1로 들어있는 것을 볼 수 있습니다.

여기서의 Scale은 일반적으로 생각하는 사이즈가 아니라, X, Y, Z 축 방향으로 스크롤이 일어날지 말지를 On/Off 해주는 기능이라고 생각하면 됩니다.

즉, 현재 만들고 있는 WebToon UI예제에서는 상하로만 스크롤이 가능하도록 Y만 1로 해둔 채, 다른 값은 모두 0으로 변경시켜줍니다.

[그림 8-15]

그리고 플레이 버튼을 눌러서 이미지를 드래그하면서 움직여보면, 상하로만 이미지가 스크롤 되는 것을 볼 수 있습니다.

(10) ‘Panel’의 View영역 설정

다음으로는 Web Toon을 볼 수 있는 영역을 설정해보겠습니다.

‘Panel’ 오브젝트를 선택하고 Inspector창에서 UIPanel (Script) 컴포넌트의 Clipping을 None 에서 Hard Clip으로 바꿔줍니다.

그리고 Cliping될 사이즈를 X = 480, Y=640으로 설정해줍니다.

[그림 8-16]

설정을 끝내고 Scene View창을 보면, 클립으로 보일 영역이 자주색 선이 보일 것입니다.

그런데, 가장 위에 있는 이미지의 윗부분이 자주색 선 안에 온전히 다 들어가있지 않고, 위로 조금 올라가있는 것을 볼 수 있습니다.

[그림 8-17]

이는 Panel의 Y좌표와 Grid의 Y좌표가 동일하게 0인 상태에서 Panel의 높이를 이미지의 원래 크기인 1024가 아니라, 640으로 클립 했기 때문에 나타나는 현상입니다.

이러한 문제를 해결하기 위해서는 Grid를 아래로 조금 내려서 자주색 선에 그림의 윗부분이 온전히 들어오도록 조정을 해주면 됩니다.

‘Grid’ 오브젝트를 선택하고 Y 포지션을 -192로 변경시켜줍니다.

[그림 8-18]

그리고 다시 Scene창을 보면 Grid의 첫번째 이미지가 클립 View영역에 윗부분부터 정상적으로 들어가 있는 모습을 볼 수 있습니다.

이제 플레이 버튼을 눌러서 이미지를 위아래로 드래깅해보시길 바랍니다.

드래깅을 하다보면 가장 윗부분에서 이미지가 더 이상 존재하지 않는 윗부분을 보려고 드래깅을 하거나, 가장 아랫부분에서 이미지가 더 이상 존재하지 않는 아랫부분을 보려고 드래깅을 하는 행동을 할 경우, 이미지가 스프링이 튀듯이 움직이며, 다시 화면 안쪽으로 들어오는 모습을 볼 수 있습니다.

이는 Clip기능이 가진 또하나의 요소로써, 이렇게 스프링이 튀듯이 들어오게 만드는 효과는 UIDraggable Panel (Script) 컴포넌트의 Drag Effect 기능에서 지원합니다.

(None, Momebtum, MomentumAndSpring 이렇게 3가지 효과가 제공되고 있으니, 하나씩 바꿔가면서 플레이해서 확인해보시길 바랍니다.)

※ Hard Clip 이외에도 Soft Clip과 Alpha Clip서 다른 Clip효과도 설정해보면서 화면이 어떻게 변하는지 테스트해보시길 바랍니다.

APP 개발 온라인 강좌 제8강 [8-5]-WebToon UI 만들기(Draggable Panel, Panel Collider 설정)

알 수 없는 사용자 — Mon, 21 Jul 2014 10:45:19 +0900

(7) Draggable Panel 설정

‘Panel’ 오브젝트를 선택하고 Inspector에 있는 Add Component 버튼을 눌러서 NGUI > Interaction > Draggable Panel을 선택하여 컴포넌트로 추가합니다.

[그림 8-11]

이로써 ‘Panel’이 드래그가 가능한 패널이 되었습니다.

(8) Panel Collider 설정

빈 오브젝트를 하나 만들어서 ‘Panel Collider’라고 오브젝트 이름을 변경시켜준 뒤에 ‘Anchor’ 오브젝트의 하위객체로 등록시켜줍니다.

그리고, Transform에서 x, y, z 포지션을 0, 0, 0으로 설정해주고, Component > Physics> Box Collider를 추가 후 x, y, z 사이즈를 480, 640, 1로 변경합니다.

‘Panel Collider’ 오브젝트의 Inspector창으로 가서 Add Component 버튼을 눌러서 NGUI > Interaction > Drag Panel Contents 를 선택해서 컴포넌트를 추가합니다.

[그림 8-12]

그리고 추가된 UIDrag Panel Contents (Script) 컴포넌트에서 Draggable Panel 칸의 [None (UIDraggable Panel)]에 ‘Panel’오브젝트를 드래그하여 집어넣습니다.

[그림 8-13]

플레이 버튼을 눌러서 Scene창과 Game창이 어떻게 보이는지 확인하고, Game창에서 마우스로 클릭 & 드래그 해보면서 이미지를 움직여봅시다.

APP 개발 온라인 강좌 제8강 [8-4]-WebToon UI 만들기(Web Toon Image 넣기)

알 수 없는 사용자 — Thu, 17 Jul 2014 10:56:44 +0900

(6) Web Toon Image 넣기

Widget Tool창을 열고 Atlas를 ‘WebToonUI’ Prefab으로 지정한 뒤에, Template을 Sprite로 지정하고 Sprite를 ‘ep_1_1’부터 ~ ‘ep_1_8’까지 Grid의 하위객체로 생성해줍니다.

[그림 8-10]

그리고 Grid오브젝트의 UIGrid (Script) 컴포넌트에서 Reposition Now버튼을 눌러서 그리드가 정상적으로 적용이 되는지 확인합니다.

APP 개발 온라인 강좌 제8강 [8-3]-WebToon UI 만들기(UI Root (2D), Grid 생성)

알 수 없는 사용자 — Mon, 14 Jul 2014 11:38:46 +0900

(4) UI Root (2D) 생성

UI Tool(상단 메뉴의 NGUI > Create a New UI를 오픈)에서 Create Your UI 버튼을 눌러서 UI Root

(2D), Camera, Anchor, Panel 오브젝트를 생성합니다.

생성된 ‘Camera’ 오브젝트의 Camera 컴포넌트에서 Clear Flags를 Solid Color로 설정합니다.

(5) Grid 생성

상단 메뉴의 Game Object > Create Empty로 빈 오브젝트를 하나 생성합니다.

생성한 빈 오브젝트를 선택하고, 이름을 Grid로 지어줍니다.

‘Grid’를 ‘Panel’의 하위 오브젝트로 넣어준 뒤에 Inspector에서 Transform의 포지션 정보를 0, 0, 0

으로 설정해줍니다.

‘Grid’오브젝트의 Inspector에서 Add Component 버튼을 눌러서 NGUI > Interaction > Grid를 선택

하여 컴포넌트로 추가합니다.

[그림 8-7]

[그림 8-8]

방금 생성한 UIGrid (Script) 컴포넌트에 대해서 간단히 살펴보겠습니다.

Arrangement

Horizontal or Vertical을 선택하여 가로축과 세로축 중, 어느 축을 우선으로 하여 그리드를 사용할

것인지 결정하는 역할을 합니다.

이미지 A, B, C가 있을 때, Horizontal을 선택하면 A, B, C 이미지가 가로로 배치가 되지만 Vertical을

선택하면 세로로 배치가 됩니다.

Max per Line

Arrangement 에서 선택한 축 방향으로 최대 몇 개의 라인을 만들 것인지를 선택합니다. 기본으로

선택되어 있는 0을 사용하면 무한대의 라인을 만들 수 있습니다.

예를 들어, 라는 5개의 이미지가 있을 때, Arrangement가 Vertical이고, Max

per Line의 값이 2라면, Vertical 방향으로 최대 2개의 라인으로 그리드를 형성하라는 의미이므로

다음과 같은 결과가 화면에 나타납니다.

Vertical(세로 방향)로 순서대로 배치를 하되 최대 라인은 2줄이므로 C와 E에서 3번째

줄을 만들지 못하고, Horizontal방향 두 번째 열로 이동된 것입니다.

Cell Width

그리드 안의 오브젝트들이 Horizontal 방향으로 얼마만큼의 격차를 두고 배치될 것인 지를 설정하는

곳입니다.

Cell Height

그리드 안의 오브젝트들이 Vertical 방향으로 얼마만큼의 격차를 두고 배치될 것인지를 설정하는 곳

입니다.

Reposition Now

그리드 기능은 값을 새로 설정한 뒤에, Scene창과 Game창에서 그 결과를 확인하려면 플레이 버튼을

눌러야만 확인이 가능한데, Reposition Now 버튼을 클릭하면 바로 갱신이 되어서 확인이 가능합니다.

Sorted

그리드 안의 오브젝트들을 Hierarchy 창 안에 있는 정렬 순서대로 Sorted 시킬 수 있습니다.

Arrangement를 Vertical로 설정하고 Cell Width를 0, Cell Height를 1024로 설정합니다. (예제에서

사용할 이미지의 Height가 1024 입니다.) 그리고 Sorted를 체크해줍니다.

[그림 8-9]

APP 개발 온라인 강좌 제8강 [8-2]-WebToon UI 만들기(Atlas 만들기)

알 수 없는 사용자 — Thu, 10 Jul 2014 15:01:41 +0900

(3) Atlas 만들기

‘NGUI Control Sample’프로젝트의 Assets 폴더 안에 Webtoon Image라는 이름으로 폴더를 생성

합니다. 그리고 앞서서 다운받았던 WebToon.zip 파일의 압축을 풀어서 Webtoon Image 폴더에

넣어줍니다.

[그림 8-2]

그리고 유니티로 다시 돌아와보면, 잠시 로딩이 일어나고, Project창의 내용이 다음과 같이 바뀐 것을

볼 수 있습니다.

[그림 8-3]

Project 창에 추가된 WebToon Image 8장을 모두 선택합니다.

그리고 상단에 있는 NGUI > Atlas Maker 메뉴를 클릭해서 Atlas Maker 창을 오픈합니다.

[그림 8-4]

Atlas Maker 창에서는 가장 최근에 작업에 사용되었던 Atlas의 이름이 적혀있는 채로 오픈

되는 경우가 많습니다.

이 때, 실수로 Create 버튼을 눌러서 기존에 있는 Atlas에 덮어쓰기 하는 사고가 일어나지

않도록 주의해야 합니다.

따라서, 먼저 SciFi Atlas라고 적혀있는 이름을 WebToonUI로 변경시켜줍니다.

[그림 8-5]

그리고 Create 버튼을 누르면, 현재 선택된 WebToon Image 8장을 포함한 ‘WebToonUI’

Atlas가 Project창에 생성된 것을 확인할 수 있습니다.

[그림 8-6]

창의인재 전형 입시설명회

알 수 없는 사용자 — Fri, 4 Jul 2014 11:58:27 +0900

>>>내용 더보기

APP 개발 온라인 강좌 제8강 [8-1]-WebToon UI 만들기

알 수 없는 사용자 — Mon, 16 Jun 2014 11:51:52 +0900

8. WebToon UI 만들기

<만들 예정인 결과물>

[그림 8-1]

이 예제를 만들기 위해서는 웹툰 이미지가 필요합니다.

이미지는 IdeaLink 홈페이지(http://www.idealink.kr)에서 Groups 메뉴의 Smart Academy Board를 클릭해서, 게시물들 중에 Web Toon Image 게시물을 안에 있는 Webtoon.zip 압축파일을 다운 받으시면 됩니다.

(1) WebToon UI 구성

1) 스크롤 화면

NGUI에서 스크롤링이 가능한 화면을 만들기 위해서는 Sprite, Button 등의 실질적인 이미지 Widget들을 모두 포함하는 Panel이 Draggable되어야 합니다.

2) 스크롤 바

Panel이 드래깅 되는 것을 제어하거나, 드래그 된 위치를 스크롤 바로 표현해야 합니다.

(2) 씬 만들기

이전 강좌에서 사용했던 ‘NGUI Control Sample’프로젝트에서 새로운 씬(File > New Scene)을 엽니다.

‘Main Camera’를 지우고 ‘WebToonUI’라는 이름으로 씬을 저장(Ctrl+S)합니다.

APP 개발 온라인 강좌 제7강 [7-3]-Drag Label 만들기(스크롤 바 만들기)

알 수 없는 사용자 — Wed, 4 Jun 2014 16:51:36 +0900

(7) 스크롤 바 만들기

Widget Tool 창에서 Template을 Scroll Bar로 두고 Anchor에 Add To 버튼을 눌러 오브젝트를 생성합니다.

[그림 7-7]

[그림 7-8]

그리고 생성한 ‘Scroll Bar’의 포지션을 X = 50, Y = 210값을 넣어 ‘Label’의 옆에 오도록 조정을 해줍니다.

다음으로는 ‘Panel’의 드래깅과 연계가 되도록 ‘Panel’을 선택해서 UIDraggable Panel (Script) 컴포넌트에 있는 Vertical Scroll Bar 기능에 Hierarchy창에 있는 ‘Scroll Bar’를 드래그해서 넣어줍니다.

[그림 7-9]

그리고 플레이 버튼을 눌러서 스크롤 바가 드래깅에 맞춰서 잘 반응을 하는지 체크해봅시다.

(8) ‘Label’ 포지션 조정

플레이를 시작했을 때, ‘Label’의 시작부분이 1부터 화면에 보이도록 ‘Label’의 포지션을 변경합니다. 이때 플레이 한 상태에서 값을 바꾸면 플레이모드에서 빠져나오면 사라지게 되니 플레이모드에서 동작을 확인하고 플레이모드를 끄고 값들을 수정합니다.

‘Label’을 선택하고 Transform에서 Y 포지션 값을 -474로 수정해줍니다.

[그림 7-10]

APP 개발 온라인 강좌 제7강 [7-2]-Drag Label 만들기(Panel설정)

알 수 없는 사용자 — Wed, 4 Jun 2014 16:25:30 +0900

(4) Draggable Panel 설정

‘Panel’오브젝트를 선택하고 Inspector에 있는 Add Component 버튼을 눌러서 NGUI > Interaction > Draggable Panel을 선택하여 컴포넌트로 추가합니다.

그리고 ‘Label’의 드래그가 세로축 방향으로만 일어나야만 하므로 Scale에서 Y의 값만 1로 놔두고, 나머지는 모두 0으로 변경해줍니다.

[그림 7-3]

(5) ‘Label’의 Drag Panel Contents 설정

이번에는 Drag를 위한 Collider 영역을 따로 생성하지 않고 ‘Label’ 자체를 클릭 & 드래그 인식이 가능하게 만들어 사용해보겠습니다.

‘Label’ 오브젝트의 Inspector창으로 가서 Add Component 버튼을 눌러서 NGUI > Interaction > Drag Panel Contents 를 선택해서 컴포넌트를 추가합니다.

생성된 UIDrag Panel Contests (Script)에서 Draggable Panel에 자동으로 설정되어 있는 ‘Panel’을 클릭해서 실제로 우리가 드래그하고자 하는 패널이 제대로 설정되어 있는 것인지 확인해봅니다.

위의 그림과 같이 자동으로 설정되어 있는 ‘Panel’을 클릭해보면 Hierarchy창에서 설정된 객체를 표시해줍니다.

[그림 7-4]

그리고 ‘Label’ 오브젝트의 Inspector창에서 Add Component를 클릭해서 Physics > Box Collider를 클릭해서 Collider 컴포넌트를 하나 추가해줍니다.

생성된 Box Collider 컴포넌트에서 Y Size를 50으로 변경해줍니다. (숫자가 50까지 줄 바꿈으로 들어갔으므로)

[그림 7-5]

설정이 끝났다면, 플레이 버튼을 눌러서 드래깅이 제대로 일어나는지 확인해봅시다.

(6) ‘Panel’의 UIPanel 컴포넌트 설정

‘Panel’오브젝트를 선택하고, Inspector창에 있는 UIPanel (Script)컴포넌트에서 Clipping을 Soft Clip으로 변경시켜줍니다. 그리고 Size를 X = 28, Y = 450으로 변경시켜준 뒤에, Softness에서 X = 1, Y = 210으로 설정해줍니다.

[그림 7-6]

APP 개발 온라인 강좌 제7강 [7-1]-Drag Label 만들기

알 수 없는 사용자 — Wed, 4 Jun 2014 14:09:14 +0900

7. Drag Label 만들기

<만들 예정인 결과물>

[그림 7-1]

(1) 씬 만들기

이전 강좌에서 사용했던 ‘NGUI Control Sample’프로젝트에서 새로운 씬(File > New Scene)을 엽니다.

‘Main Camera’를 지우고 ‘Drag Label’이라는 이름으로 씬을 저장(Ctrl+S)합니다.

(2) UI Root (2D) 생성

UI Tool(상단의 NGUI > Create a New UI 메뉴로 오픈)에서 Create Your UI 버튼을 눌러서 UI Root (2D), Camera, Anchor, Panel 오브젝트를 생성합니다.

생성된 ‘Camera’ 오브젝트의 Camera 컴포넌트에서 Clear Flags를 Solid Color로 설정합니다.

(3) Label 생성

Widget Tool에서 Atlas를 Scifi로, Font를 Scifi Font – Normal로 지정하고, Template를 Label로 지정한 뒤, Add To 버튼으로 ‘Panel’에 생성합니다.

[그림 7-2]

생성한 ‘Label’을 선택하고 UILabel (Script) 컴포넌트에서 ‘New Label’이라고 적혀있는 내용을 지우고, 숫자를 1부터 ~ 50까지, 매 숫자를 적을 때마다 엔터를 쳐서 줄을 바꿔 적어 넣습니다.

※ 숫자를 적게 적어 넣어서 화면의 Y축 범위를 넘어설 만큼 ‘Label’의 범위가 길어지지 않으면, 한 화면에 오브젝트가 모두 보여서 드래깅이 일어날 필요가 없기 때문에 드래깅이 일어날 수 없게 됩니다.