회원 로그인
|
|
NGUI & PlayMaker - 웹툰 앱을 만들기
인쇄
스크랩
NGUI와 PlayMaker를 이용한 웹툰 앱 만들기
 NGUI 버젼 2.0.7c와 PlayMaker 버젼 1.4로 기재되었다. |
NGUI와 PlayMaker 에셋 설치 및 웹툰 리소스 파일을 미리 임포트를 해둔 상태에서 작업을 시작한다.
1. NGUI > Create a New UI > Create Your UI 버튼(1)으로 기본 Panel 생성한다. Panel 명은 Drag Panel로 변경(2)한다.
Clipping을 Hard Clip으로 바꾸고 Size를 X 480, Y 640으로 변경한다.
2. Drag Panel에 Draggable Panel 컴포넌트 추가한다.
상하로 드래그 할 것이므로 Scale의 Y만 1로 하고 XZ는 0으로 설정한다.
3. GameObject > Create Empty로 'Drag Area' 빈 GameObject를 생성(1), Component > Physics > Box Collider를 적용(2), UIDrag Panel Contents 적용(3), 'Drag Panel'를 Draggable Panel에 적용(4)한다.
4. 사용할 웹툰 리소스를 먼저 선택(1) 후 NGUI > Atlas Maker 선택(2) 하면 Sprites가 추가된 상태로 쉽게 Atlas를 만들 수 있다.
Atlas 명을 WebToon으로 하고 Create 버튼을 클릭(3)한다.
5. 빈 GameObject를 생성 Drag Panel에 Parent 후 Transform을 설정한다.
꼭 Reset 말고 Position, Rotate, Scale은 디폴트 수치를 직접 입력해야 한다.
6. Grid에 Grid 컴포넌트를 추가한다.
Arrangement Vertical, Cell Width 0, Cell Height 1024, Sorted 체크, Hide Inactive 체크(스크롤할 때 스크롤 보임)를 해준다.
(*Cell Width, Cell Height을 웹툰 이미지 크기에 맞게 설정한다.)
7. NGUI > Create a Wedget 클릭, 프리팹 WebToon을 Atlas에 넣어주고(1), Template을 Sprite, Sprite에 ep_1_1 ~ ep_1_8(2) 모두 위젯을 만든다.(3)
| 스크롤과 드래그는 기존 방법을 사용하여 만들어주면 된다. 요약하면.. 1. 드래그 공간으로 사용할 빈 GameObject를 생성(Drag Area) 후 Box Collider 적용, Size X 480, Y 640 2. Drag Panel Contents 적용, Drag Panel Contents의 Draggable Panel에 Drag Panel을 넣는다. 3. Anchor 밑으로 Parent 한다. |
이미지 버튼을 만들어 PlayMaker에서 씬 이동을 해보자.
8. NGUI > Create a Wedget 클릭, 버튼이 들어있는 Atlas를 넣어주고 Template, Normal(디폴트 이미지), Hover(마우스 오버일 때의 이미지), Pressed(클릭했을 때의 이미지)를 넣고 Image Button을 생성한다.
생성된 Image Button의 위치와 크기를 설정한다.
9. Image Button에 Events To Playmaker FSM 컴포넌트를 추가한다.
10. PlayMaker > PlayMaker Editor 창을 열고, 상태 추가 후 click으로 이름 변경(1), 이벤트 탭(2)에서 OnClick 이벤트 추가(3)한 후
click에 OnClick Transition을 추가(4)한다.
11. 상태를 추가 후 move scene 이름 변경(1), PlayMaker > Editor Windows > Action Browser를 열어 Level의 Load Level(2)를 적용(3), FINISHED Transitin을 적용(4)한다.
12. 상태들을 연결 한다.
13. 현재 씬을 저장 후 새 씬을 만들어 아무 게임오브젝트를 생성하여 저장한다.
14. Load Level의 Level Name에 새로 만든 씬 이름을 넣어준다.
 빌드하기 전에 씬을 등록해야 한다. File > Build Settings 씬들을 드래그해서 추가한다. |
실행해 보자.
웹툰 이미지에 드래그, 스크롤로 이동이 되며, 아래 체크 버튼을 클릭하면 씬을 이동하게 된다.
(예제이므로 씬 이동하면 못 돌아 감. -ㅁ-;)
<이미지 클릭하면 게임 시작>
- webtoon.zip (327.2KB) (0)
- webtoon.unitypackage (15.4MB) (1)
댓글 0개
| 엮인글 0개
146개(6/8페이지)
| 번호 | 제목 | 글쓴이 | 조회 | 날짜 |
|---|---|---|---|---|
|
유니티 강좌 모음(영문) | 푸딩뱃살 | 60301 | 2013.08.28 12:02 |
|
|
유니티 경고, 에러 모음 (재정리 예정)
 [1+1] |
푸딩뱃살 | 71106 | 2013.08.12 00:09 |
| 44 |
[애셋] NGUI & PlayMaker - Random Button
|
푸딩뱃살 | 7391 | 2014.01.23 02:09 |
| 43 |
[애셋] PlayMaker - Random String
|
푸딩뱃살 | 5698 | 2014.01.22 03:29 |
| >> |
[애셋] NGUI & PlayMaker - 웹툰 앱을 만들기
|
푸딩뱃살 | 7083 | 2014.01.20 00:25 |
| 41 |
[애셋] NGUI를 이용한 스크롤 사용하기
|
푸딩뱃살 | 9918 | 2014.01.15 03:21 |
| 40 |
[애셋] NGUI & PlayMaker를 이용한 텍스트 이동하기
|
푸딩뱃살 | 8263 | 2014.01.15 01:07 |
| 39 |
[애셋] NGUI 기본
|
푸딩뱃살 | 7947 | 2014.01.10 03:03 |
| 38 |
[애셋] PlayMaker 기본
|
푸딩뱃살 | 7729 | 2014.01.10 01:30 |
| 37 |
[유니티] Character Controller 캐릭터 컨트롤러
|
푸딩뱃살 | 8911 | 2013.12.23 23:52 |
| 36 |
[스트립트] raycast 예제
|
푸딩뱃살 | 2235 | 2013.12.11 13:40 |
| 35 |
[유니티] unityPackage 만들기
|
푸딩뱃살 | 12045 | 2013.11.29 14:35 |
| 34 |
[유니티] Mecanim으로 애니메이션 연결
|
푸딩뱃살 | 8151 | 2013.11.28 14:12 |
| 33 | [스트립트] Class (클래스) | 푸딩뱃살 | 2772 | 2013.11.26 23:46 |
| 32 |
[참고] Unity 디컴파일 - Unity 3D Obfuscator 사용법
|
푸딩뱃살 | 4917 | 2013.11.24 16:56 |
| 31 |
[참고] Unity 3D Obfuscator
|
푸딩뱃살 | 7985 | 2013.11.24 01:10 |
| 30 |
[스트립트] GUI.Button() 예제
|
푸딩뱃살 | 4948 | 2013.11.22 00:49 |
| 29 |
[스트립트] 마우스 제어 적용 (클릭,오버,아웃)
|
푸딩뱃살 | 5784 | 2013.11.21 14:29 |
| 28 | [소셜] Unite 2013 - Connect Unity gamers across platforms with | 푸딩뱃살 | 1513 | 2013.11.19 18:49 |
| 27 | [소셜] Facebook SDK for Unity Tutorials (iOS, Android,Web) | 푸딩뱃살 | 5152 | 2013.11.19 14:28 |
| 26 | [참고] Unite Vancouver 2013 Keynote | 푸딩뱃살 | 3157 | 2013.11.13 20:42 |
| 25 |
[정보] 유니티, 2D 개발 툴 장착한 ‘유니티 4.3’ 전 세계 동시 공개
|
푸딩뱃살 | 3937 | 2013.11.13 20:26 |
