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 initialization
void Start () {
testSlider = GetComponent<UISlider…

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 함수를 만듭니다.



 버튼 오브젝트에 ButtonTest 컴포넌트를 추가합니다.



 인스펙터에서 추가한 ButtonTest 컴포넌트를 UI…

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

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를 설명할 때 사용한 이미지가 쭉쭉 늘어나서 표현된 것임을 알 수 있습니다.



 다음에는 역시나 스프라이트 타입중에 하나인 Tiled Sprite에 대해 정리…

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만 생성됩니다.



 예전 버전은 보지 못해 확실치 않지만 아래 그림과 같이 UI Root에 UI…

Unity3D Facebook SDK for iOS Integration 5. 친구에게 자랑하기

이미지
2013년 11월에 했던것을 잊어먹고 있다가 이제야 정리하네요. 유니티3D iOS 페이스북 친구 목록 얻기 및 친구에게 초대 요청하기를 정리했었습니다. 이번에는 친구에게 자랑하기를 정리해봅니다.


 먼저 iOS 플러그인 소스입니다.

// iOSFacebookPlugin.h
- (void) requestBrag:(NSString*)strTitle              caption:(NSString*)strCaption          description:(NSString*)strDescription              picture:(NSString*)strPicture;
// iOSFacebookPlugin.mm
extern"C"
{ ... void iOSRequestBrag(constchar* pszTitle, constchar* pszCaption, constchar* pszDescription, constchar* pszPicture)     {         NSString* strTitle = [NSString stringWithUTF8String:pszTitle];         NSString* strCaption = [NSString stringWithUTF8String:pszCaption];         NSString* strDescription = [NSString stringWithUTF8String:pszDescription];         NSString* strPicture = [NSString stringWithUTF8String:pszPicture];         [[iOSFacebookPlugin sharediOSFacebookPlugin] requestBrag:strTitle                                                          caption:strCaption                                                 …

Unity3D Error while importing package: Couldn't decompress package

Error while importing package: Couldn't decompress package

 유니티3D에 Custom Package를 임포트하는데 위와 같은 에러가 발생했습니다. 패키지가 들어있는 폴더가 한글이 포함되어 있어서 생겼던 이슈였습니다. 한글이 아닌 다른 폴더에 옮기고 다시 임포트 해주면 됩니다. 역시 개발과 관련된 것은 영문이 기본이죠.

Trello 리서치

이미지
일정관리용 웹서비스인 트렐로(Trello)를 리서치 해봤습니다. 직접 사용해보진 않고 리서치를 통해 얻은 정보를 정리해본 것입니다.

 사실 트렐로가 무엇인지? 무엇을 할 수 있는지는 아래 영상을 보면 도움이 됩니다.



 영상을 보시면 아시겠지만 기존에 화이트보드에 포스트잇을 붙여가면서 했던 일정과 업무분담과 같은 이슈 관리를 온라인 서비스로 옮겨 놓은 협업 도구가 트렐로라고 보면 맞겠네요. 장, 단점을 간단히 정리해보면,


장점
PC와 각종 모바일 디바이스 지원.구글 계정과의 연동으로 가입 및 로그인이 쉽다.UI가 쉽고 직관적이다. 그래서 개발자가 아닌 분들과의 협업도 가능하다.개발(프로그램, 디자인, 아트) 관련 뿐 아니라 일상생활이나 기타 다른 직종에서도 사용가능한 범용성무료 단점
범용성 때문에 오히려 보드와 리스트 또는 스토리 카드추가, 라벨 지정등에 대한 초반이나 지속적인 고민이 필요.프로젝트가 커지거나 여러 프로젝트를 진행 시 누적되는 리스트와 카드 관리에 대한 이슈.
 단점이라고 적은것은 굳이 단점이라기 보다는 활용할 수 있는 방법이 여러가지인 범용적 특성 때문에 생기는 어쩔수 없는 이슈정도로 보면 될 듯합니다.

 참고할만한 포스트
Trello로 효율적으로 협업하기트렐로를 소개합니다Trello를 사용하자단순하면서도 효과적인 협업도구 Trello를 소개합니다트렐로 초보를 위한 따라하기 샘플

Unity3D A prefab somehow lost its way out of its asset file.

이미지
A prefab somehow lost its way out of its asset file. Ignoring it. Save your scene and next time you launch the editor it will be gone.

 유니티3D에서 위와 같은 이슈가 발생했습니다. 무시하고 신 저장한 후 다시 에디터를 실행하면 된다는 것 같은데, 아마 다음에는 아래와 같은 이슈가 발생한 듯합니다.

Component MonoBehaviour could not be loaded when loading game object. Cleaning up!

 Console에서 에러를 클릭하면 문제가 발생하고 있는 것을 Project창에서 보여줍니다. 전 아래 그림과 같이 PlayerShot이라는 프리팹안에 MoveScript 컴포넌트가 인스펙터에서 다른 컴포넌트처럼 붙어 있지 않고 좀 다른 모양새로 붙어있더군요. 링크가 깨진 듯 합니다.



 Remove Component해준 후 다시 Add Component 해주니 이상이 없네요.