1월, 2014의 게시물 표시

NGUI 3.x Tutorial Step7 - Slider

이미지
  NGUI 버튼을 추가하고 클릭 이벤트 핸들링 을 해봤습니다. 이번에는 슬라이더 컨트롤을 추가해보겠습니다. 이전 버튼 튜토리얼에서 만들었던 버튼은 삭제하고 시작합니다.  빈 게임오브젝트를 만들고 Slider - Horizontal이라고 이름을 지어줍니다. 그리고 이하 나오는 것들을 모두 자식으로 해줍니다.  아래와 같이 슬라이더 컨트롤의 백그라운드로 사용할 UISlicedSprite - BG라는 NGUI SlicedSprite 를 만듭니다.  방금 만든 백그라운드 스프라이트를 복제해서 아래와 같이 포그라운드용으로 설정합니다.  다음으로 슬라이더 컨트롤에 보여질 NGUI 라벨 을 아래와 같이 만들어줍니다.  슬라이드 컨트롤의 버튼을 만들기 위해 역시나 만들었던 SlicedSprite를 하나 복제해서 아래와 같이 작업해줍니다. 이때 버튼의 이벤트 처리를 위해 NGUI - Attach - Collider와 버튼의 색상 변경을 위해 Button Color 컴포넌트를 더 추가해줬습니다. Collider과 Button Color은 추가 안해줘도 슬라이더 작동에는 문제가 없습니다.    마지막으로 슬라이더 오브젝트입니다. NGUI - Attach - Slider Script를 추가해주고 이벤트 처리를 위해 Box Collider를 추가해줍니다. Appearance부분에 위에서 만들었던 하위 자식 오브젝트를 각각 바인드 시켜줍니다.  슬라이드 컨트롤의 Thumb값이 변경되는 콜백을 받기위해 UITest라는 C# 스크립트를 만들고 아래와 같이 OnValueChange 함수를 만들어줍니다. public class UITest : MonoBehaviour { UISlider testSlider; public void OnValueChange() { Debug.Log("OnValueChange " + testSlider.value); } // Use this for

NGUI 3.x Tutorial Step6 - Button

이미지
  NGUI 라벨과 다이나믹 폰트로 한글 출력 까지 해봤습니다. 이번에는 버튼 추가를 해보겠습니다.  빈 게임 오브젝트를 만들고 Button으로 이름을 지정합니다. 그리고 아래와 같이 Button 하위로 NGUI 라벨 과 Sliced 스프라이트 를 만들어줍니다.  이제 버튼에 마우스를 가져갔을 때 색상등을 변경하기 위한 UIButton과 클릭 이벤트를 처리하는데 필요한 박스 충돌체를 추가해줘야합니다. 각각 NGUI - Attach - Collider과 Button Script를 추가하면 아래와 같습니다.  이제 실행해서 마우스를 가져가면 버튼의 색이 변하고 클릭이 잘 됩니다. 그런데 저는 안되더군요. UI Root부터 그 하위 모든 UI 객체의 Layer가 모두 빈 이름의 레이어인데 반해 Button은 Default라서 문제였네요. 빈레이어를 선택할 수 없기 때문에 임시 방편으로 UI Root를 Default로 해준 후 Ctrl + Z를 눌러 Undo하시면 Button 오브젝트의 Layer도 빈 이름의 레이어로 됩니다.  정식으로 한다면 아래와 같이 Layer - Add Layer해서 User Layer에 UI 등으로 일단 레이어를 하나 추가합니다.  UI Root의 Layer를 방금 만든 레이어로 선택 후 Yes, change children을 선택 해 모두 적용합니다.  마지막으로 UI 카메라의 Unnamed 로 되어있는 Culling Mask와 Event Mask를 역시나 방금 만든 UI 레이어로 설정해줍니다.  이제 실행 후 버튼에 마우스를 가져가면 색상이 변하는 것을 확인 할 수 있습니다. 레이어라는게 있다는건 알고 있었는데 그냥 막 진행하다보니 이런 이슈가 나왔네요.  이제 버튼이 클릭되었을 때 이벤트 핸들링 처리하는것을 정리해보겠습니다. 먼저 간단히 아래와 같이 ButtonTest라는 C# 스크립트를 만들어 OnClick 함수를 만듭니다.  버튼 오브젝트에

NGUI 3.x Tutorial Step5 - Label

이미지
  NGUI로 연속된 패턴으로 렌더링되는 타일드 스프라이트 를 추가해봤습니다. 이번에는 라벨처리를 정리해보겠습니다.  계층뷰에서 UI Root를 선택하고 NGUI - Create - Label을 선택해 라벨 오브젝트를 하나 만듭니다. 아래 그림과 같이 Font는 SciFi Font - Header를 선택하고 인스펙터 텍스트 필드에 적당한 문자를 입력합니다. 타이틀바 위치로 이동하기 위해 Transform 위치값을 수정합니다.  위에서 작업한 라벨을 복제 후 아래 그림과 같이 Font와 위치, Pivot, Overflow 타입과 Dimensions을 수정합니다. 텍스트 필드는 NGUI 튜토리얼것을 그대로 가져와 봤습니다.  텍스트 필드에 [RGB Hex 색상값 코드] 문자 [-] 식으로 넣어주면 아래 그림과 같이 문자의 색상을 지정해 출력할 수 있습니다.  이제 NGUI에 한글 폰트를 적용해보겠습니다. 만약 유니티 3.x 버전이고 NGUI등의 외부 플러그인 없이 한글등의 폰트를 처리하려면 전에 정리했던 unity-sysfont 를 참고하시면 됩니다. 또한 NGUI와 비트맵 폰트 생성기인 BMFont Tool 을 활용해서도 한글 폰트를 처리할 수 있습니다. 비트맵 폰트 생성 과정은 살짝 복잡하기에 NGUI에서 Dynamic Font를 지원하므로 다이나믹 폰트 처리를 해보겠습니다.  구 NGUI에서 작업할 때 처럼 폰트 메이커로 다이나믹를 생성하려고 하니 아래와 같이 더이상 필요하지 않다네요.  그냥 TTF 폰트를 애셋에 넣어주기만 하면 끝입니다.  위에서 작업했던 라벨의 폰트를 Dynamic으로 해주고 폰트도 애셋에 추가한 나눔고딕코딩으로 해줬습니다.  문제는 인스펙터에 한글 입력이 잘 안되더군요. ksrmfㅎ 이게 '한글'을 입력하던 거였는데 ㅎ 만 입력되고 나머지는 다 영어로 입력되는 문제가 있더군요. 알고 봤더니 자음이든 모음이든 한번 입력할 때마다 한/영 전환 입력 도구가 자꾸

NGUI 3.x Tutorial Step4 - Tiled Sprite

이미지
  NGUI로 스프라이트 타입중에 하나인 Sliced 스프라이트를 추가 해봤습니다. 이번에도 스프라이트 타입중에 하나인 Tiled 스프라이트를 정리해보겠습니다.  NGUI Sprite 객체를 하나 만들고 Sprite는 Honeycomb로 Sprite Type 은 Tiled로 합니다. 나머지 인스펙터 값은 아래 그림을 참고해서 수정해줍니다.  Honeycomb 스프라이트가 연속된 패턴으로 무늬가 렌더링된 결과를 아래와 같이 확인할 수 있습니다.  다음에는 NGUI 라벨 에 대해 정리해보겠습니다. 참고 NGUI Tutorial Step 4: Tiled Sprite

Unity3D Android SQLite 사용하기

이미지
http://westwoodforever.blogspot.kr/2013/11/c-sqlite-systemdatasqlite.html System.Data.SQLite Internal compiler error. See the console log for more information. output was: Unhandled Exception: System.Reflection.ReflectionTypeLoadException: The classes in the module cannot be loaded.   at (wrapper managed-to-native) System.Reflection.Assembly:GetTypes (bool)   at System.Reflection.Assembly.GetTypes () [0x00000] in <filename unknown>:0   at Mono.CSharp.RootNamespace.ComputeNamespaces (System.Reflection.Assembly assembly, System.Type extensionType) [0x00000] in <filename unknown>:0   at Mono.CSharp.RootNamespace.ComputeNamespace (Mono.CSharp.CompilerContext ctx, System.Type extensionType) [0x00000] in <filename unknown>:0   at Mono.CSharp.GlobalRootNamespace.ComputeNamespaces (Mono.CSharp.CompilerContext ctx) [0x00000] in <filename unknown>:0   at Mono.CSharp.Driver.LoadReferences () [0x00000] in <filename unknown>:0   at Mono.CSharp.Dri

NGUI 3.x Tutorial Step3 - Sliced Sprite

이미지
  NGUI로 스프라이트를 추가 해봤습니다. 이번에는 스프라이트 타입중에 하나인 Sliced를 가지고 윈도우 창 같은 것을 만들어보겠습니다.  우선 간단히 Sliced가 뭔지 설명해보겠습니다. 일반적으로 버튼이나 단순한 백그라운드 이미지를 만든다고 했을 때 필요한 사이즈별로 만들 수 있습니다. 이렇게하면 필요한 수에 따른 디자인 작입이 필요합니다. 이와 반대로 하나의 이미지로 여러 사이즈에 대응하기 위한 방법이 Sliced인데요, 이번 포스팅에서 사용하는 아래 이미지를 보겠습니다.  15 x 15로 작은 스프라이트 이미지입니다. 점선으로 구분이 되어져 있는데 총 9군데로 나눠져 있습니다. 그래서 9-Sliced라고도 부릅니다. 가운데를 제외한 나머지 테두리 부분들이 어떠한 사이즈던간에 각 테두리를 담당하게되고 가운데는 이미지의 가운데를 담당하게 됩니다. 가운데 부분이 사이즈별로 스케일링 되서 그려지는 거죠.  장단점이 있겠죠. 적은 리소스로 여러 버튼이나 백그라운드를 커버할 수 있겠지만 역시나 커스텀 디자인된 버튼보다는 이쁘지 않다는게 있겠네요.  이제 백그라운드 SlicedSprite를 만들어보겠습니다. NGUI - Create - Sprite를 하나 만드신 후 아래 그림과 같이 Atlas는 SciFi Atlas, Sprite는 Dark로 해주고 Sprite Type은 Sliced로 해줍니다. 사이즈 수정을 위해 Dimensions에 각 500으로 설정하고 제일 밑단으로 Depth를 설정하기 위해 -1로 해줍니다.  이번에는 타이틀바 처럼 보이는 SlicedSprite를 만들어 보겠습니다. 백그라운드로 만들었던 것을 복제하시고 Sprite는 Light로 한 후 Transform Y값과 Color, Dimensions의 Y 값을 적당히 수정해줍니다.  결과는 아래와 같습니다. 백그라운드를 보면 위에 Sliced를 설명할 때 사용한 이미지가 쭉쭉 늘어나서 표현된 것임을 알 수 있습니다.  다음에는 역시나 스프라

NGUI 3.x Tutorial Step2 - Sprite

이미지
  NGUI 기본 2D UI 작업 환경 을 만들어 봤습니다. 이번에는 간단한 스프라이트를 추가해보겠습니다.  계층뷰에서 UI Root를 선택하고 아래 그림과 같이 NGUI - Create - Sprite를 클릭해서 Sprite 오브젝트를 생성합니다. 예전에는 Widget Wizard을 가지고 생성했겠죠?  생성된 스프라이트 게임오브젝트의 인스펙터를 아래 그림과 같이 수정합니다. Atlas에는 SciFi Atlas, Sprite는 Dark를 선택 후 Sprite Type은 Simple로 해줍니다. 마지막으로 위젯 속성에서 색상은 붉은색으로 설정합니다.  계층뷰에서 생성된 Sprite을 2번 복제해서 총 3개의 스프라이트 게임 오브젝트를 만듭니다.  복제한 2개의 스프라이트의 인스펙터도 아래 그림과 같이 색상을 바꿔주고 회전도 시켜봅니다. 그런데 NGUI에 있는 튜토리얼과는 스프라이트의 Depth가 다르게 보이네요.  아래 그림과 같이 스프라이트 인스펙터에서 Widget  - Depth 부분을 수정해줘야 합니다. 붉은색은 Forward를 눌러 2로 만들어주고 녹색은 1 파란색은 그대로 0으로 합니다.  그러면 아래 그림과 같이 NGUII 튜토리얼과 같게 된 것을 확인할 수 있습니다. NGUI에서는 Depth의 값이 클수록 UI 카메라에 가깝게 나중에 렌더링 됩니다.  NGUI 예전버전은 Transform 컴포넌트에서 직접 UI의 스케일을 조정했던 것 같습니다. 물론 3.0.8에서도 그레이로만 되어있지 조정은 되더군요. 그렇지만, UISprite에 있는 Widget 속성중 Dimensions 속성이 크기 조절용이므로 이것을 사용하면 될 듯합니다.  다음에는 Sprite Type중에 하나인 Sliced Sprite 에 대해 정리해보겠습니다. 참고 NGUI Tutorial Step 2: Sprite

NGUI 3.x Tutorials Step1 - Scene

이미지
 이제 유니티3D에서 많이 사용되어지고 있다는 NGUI 튜토리얼 정리도 시작해볼까 합니다. NGUI 개발사 사이트에 가보면 최신의  3.0.x와 관련된 튜토리얼 이 있지만 영상 튜토리얼뿐이고  NGUI 홈피에 글로 된 2.7.0 기준 튜토리얼 이 있지만 구버전이죠. 또한 구글링을 해보면 한국분중  아이군님의 블로그 와  icoder님의 블로그 에 이미 번역한 내용이 있긴 합니다만 역시나 2.7.0 기준의 내용들입니다. 그래서 NGUI 사이트의 2.7.0 기준 튜토리얼과 샘플을 제 나름대로 3.x에 맞게 정리해보려고 합니다. 정확히는 3.0.8 f3  3.3.2 버전입니다. NGUI 버전 명명법이 갑짜기 바뀌었네요.  정리에 앞서, 아래 그림과 같이 3.0.7부터 Deprecated 된 Widget Wizard와 같은 Legacy 기능들은 배제할 생각입니다. 또한 NGUI 몇몇 샘플과 튜토리얼을 열어보면 아직 UIAnchor 을 사용하는 것도 있던데 이것도  Deprecated된 상태라 사용하지 않는 방향으로 진행할 생각입니다.  NGUI 익스포트 하면 아래 그림과 같이 Scenes에 튜토리얼 1부터 11까지와 Example(이하 샘플)에 0 부터 13 + X가 있습니다. 먼저 튜토리얼부터 정리하고 시간이 되면 샘플도 정리해보겠습니다. 이번 포스팅은 튜토리얼 1 - Scene에 관한 내용입니다.  자 이제 튜토리얼1 Scene과 같은 결과물을 만들어 보겠습니다. 먼저 유니티에서 새로운 프로젝트를 만들거나 새로운 씬을 만들어줍니다. 그리고 아래 그림과 같이 NGUI - Create - 2D UI를 선택해줍니다.  NGUI 사이트에는 Main Camera를 삭제하라고 하지만 굳이 삭제를 안해도 됩니다. 생성된 결과도 아래 그림과 같이 다릅니다. 예전에는 UI Root - Camera - Anchor - Panel 순으로 생성이 되었지만 3.0.8에서는 깔끔하게 UI Root - Camera만 생성됩니다.  예전