'NGUI'에 해당되는 글 10건

  1. 2016/09/22 글뻥 NGUI Mobile Button UX 구현하기
  2. 2015/08/28 글뻥 NGUI에 Font 적용하기_Packed Font
  3. 2015/06/29 글뻥 NGUI 한글 입력이 제대로 안될때 (2)
  4. 2014/04/20 글뻥 NGUI 3.5 버전에서 Scroll 구현
  5. 2013/01/27 글뻥 초간단 NGUI - Plus2
  6. 2013/01/27 글뻥 초간단 NGUI - Plus1
  7. 2013/01/06 글뻥 초간단 NGUI - 4
  8. 2013/01/06 글뻥 초간단 NGUI - 3
  9. 2013/01/06 글뻥 초간단 NGUI - 2
  10. 2013/01/04 글뻥 초간단 NGUI - 1 (3)

많은 인디 개발자 또는 프로개발자 조차도 모바일 UX를 지키지 않고 그냥 개발하고 있어 안타깝더군요.

PC 마우스 UX의 경우는

- Hover In / Out
- Click
- Double Click 

이렇게 이벤트를 먹이지만, 

모바일의 경우는 
- Pressed 
- Unpressed 로

- Press 됐을때 버튼을 확대하고
- 만약 사용자가 버튼 영역을 벗어나서 손을 떼면 원상복귀되면서 명령이 취소됩니다.
- 만약 사용자가 버튼 영역을 벗어나지 않고 손을 떼면 원상복귀되면서 명령이 실행됩니다.

일전에 작성했던 이벤트 통합하기로 구현하였으니 참고하시고 다음 소스를 보시면 이해가 쉬우실거 같네요.

참고 링크 : http://www.wolfpack.pe.kr/909


먼저 버튼을 2개 만들어 놓으시고 이벤트 통합용 스크립트는 다음과 같습니다.

using UnityEngine;
using System.Collections;
using UnityEngine.SceneManagement;

public class UIManager_Intro : MonoBehaviour {

    const float workTerm = 0.2f;

    public static UIManager_Intro instance;
    public void Awake()
    {
        UIManager_Intro.instance = this;
     }

     private void SetScaleUp(GameObject _obj, bool isPressed)
     {
         if (isPressed)
         {
             iTween.ScaleTo(_obj, new Vector3(1.1f, 1.1f, 1.1f), workTerm);
         }
         else
         { 
             iTween.ScaleTo(_obj, new Vector3(1f, 1f, 1f), workTerm);
         }
     }

     private bool DetectHoverSameObject(GameObject _obj)
     {
         RaycastHit hit;
         Ray ray = NGUITools.FindCameraForLayer(_obj.layer).ScreenPointToRay(Input.mousePosition);
         if (Physics.Raycast(ray, out hit, Mathf.Infinity))
         {
             return (hit.collider.gameObject == _obj);
         }
         return false;
     }

     public void Button1_OnPress(GameObject _obj, bool isPressed)
     {
         SetScaleUp(_obj, isPressed);
         if (!isPressed && DetectHoverSameObject(_obj)) StartCoroutine(LoadingScene("usingAnchor"));
    }
 
    public void Button2_OnPress(GameObject _obj, bool isPressed)
     {
         SetScaleUp(_obj, isPressed);
         if (!isPressed && DetectHoverSameObject(_obj)) StartCoroutine(LoadingScene("inputField"));
     }

     IEnumerator LoadingScene(string _sceneName)
     {
         yield return new WaitForSeconds(workTerm);
         SceneManager.LoadScene(_sceneName);
     }
}


버튼1에만 우선 적용합니다. 스크립트는 다음과 같습니다. 
using UnityEngine;
using System.Collections;

public class Behavior_Button1 : MonoBehaviour {

    void Start () {
        UIEventListener.Get(gameObject).onPress += UIManager_Intro.instance.Button1_OnPress;
    }
}



결과 1. 마우스를 클릭하여 Press 시뮬레이팅
사용자 삽입 이미지
결과2. 취소 (드레그하여 다른곳에서 손 뗌)
사용자 삽입 이미지
결과 3. 명령실행 (원상복귀후 다른씬으로 이동)
사용자 삽입 이미지


2016/09/22 09:23 2016/09/22 09:23
BMFONT로 Font를 뽑으면 데이터가 커진하고 믿겠지만, RGBA 4개 채널에 폰트데이터를 넣으면 용량이 매우 작아진다.
단적인 예로 우리가 흔히 쓰는 나눔폰트나 Noto 폰트의 경우 각각 용량이 4M, 15~16M에 달한다.

* 나눔폰트 용량
사용자 삽입 이미지
* Google Noto sans CJK Kor 
사용자 삽입 이미지

그런데, Packed Font로 뽑으면...
사용자 삽입 이미지
1024*1024 텍스쳐 한장으로 딸랑 782KB 이다. 
(주의 : 유니티에 Import 하는순간 True Color Texture는 1024에서 4M가 소요된다. 하지만, 512라면 1M에 불과해진다. 폰트사이즈 32정도면 512에 떨어지니 실망하지 말자)
특히, Font 파일을 앱속에 탑재함으로써 발생하는 기타 여러 잡다한 문제도 없고 형좋고 매부 좋고, 암튼 사용하는 방법에 대해 알아보자.

먼저, BM Font 설치하고 한글 파일을 다운로드받자.

- BMFONT : http://www.angelcode.com/products/bmfont/
- 한글텍스트파일 : http://www.wolfpack.pe.kr/attachment/1142498515.txt

이제 BM Font를 실행하고 다음과 같이 설정한다.
* 자세한 BM Font 사용법은 http://www.wolfpack.pe.kr/806 

1. 폰트 셋팅에서 Size를 62정도 입력했을때 1024사이즈에서 공간이 남았었다. (Super Sampling을 켜서 폰트가 이쁘게 나오게 하자.)
사용자 삽입 이미지
2. 익스포트 옵션에서 Bit Depth를 32로 변경하고 "Pack chars in multiple channels" 옵션을 켜자.
사용자 삽입 이미지
3. 이제 익스포트하고 Unity3d로 옮겨 놓자.
사용자 삽입 이미지
4. Texture Import 옵션을 다음과 같이 Advance로 바꾼후 변경하자.
사용자 삽입 이미지
5. NGUI Font Maker를 열어서 폰트를 만든다.
사용자 삽입 이미지
6. 파일이 생성된 모습. 하지만, 하나 더 남았다.
사용자 삽입 이미지
7. NotoFont 메터리얼을 Inspector 창에서 확인하면 쉐이더가 "Unlit/Transparent Colored"로 되어 있을텐데 이걸 "Unlit/Transparent Packed"로 변경해야 한다.
사용자 삽입 이미지
8. 적용결과
사용자 삽입 이미지

* 물론 Dynamic Font로 적용하면 편하다! 하지만, Texture Resize 될때 종종 스냅드래곤을 채용한 핸드폰에서 폰트가 사라지거나 별별 문제가 다 발생하고 그거 잡는 시간에 BMFont로 뽑는게 더 빠르다.
* Packed Font는 외곽 효과라던가... 이팩트 먹이기가 다음과 같이 잘 안된다. 
사용자 삽입 이미지


2015/08/28 17:11 2015/08/28 17:11
아오~ 개고생을 했군요.
모바일에서는 잘입력되는데 PC등의 플랫폼으로 되어 있을때, IME 문제로 인해 입력한 한글이 제대로 입력이 안될때 사용하시기 바랍니다.

Case 1. 한글이 입력이 안되고 계속 한글자만 나올때...
UIInput.cs 파일의 710번째 줄에 보시면...

"if (string.IsNullOrEmpty(ime) && !string.IsNullOrEmpty(Input.inputString))"
이라고 된 부분을 

if (!string.IsNullOrEmpty(Input.inputString))

으로 고쳐주세요.

원본 : http://www.tasharen.com/forum/index.ph ··· msg38990Case 2. 한글의 마지막 글자가 짤릴때... (다른곳에 클릭하는 등의 이벤트)
UIInput.cs 파일에서 OnDeselectEvent 찾아서 value = label.text; 추가

 protected void OnDeselectEvent ()
 {
 if (mDoInit) Init();

 if (label != null) label.overflowEllipsis = mEllipsis;

 if (label != null && NGUITools.GetActive(this))
 {
 value = label.text; //추가
 mValue = value;
#if MOBILE
 if (mKeyboard != null)
 {
 mWaitForKeyboard = false;
 mKeyboard.active = false;
 mKeyboard = null;
 }
#endif
 if (string.IsNullOrEmpty(mValue))
 {
 label.text = mDefaultText;
 label.color = mDefaultColor;
 }
 else label.text = mValue;

 Input.imeCompositionMode = IMECompositionMode.Auto;
 RestoreLabelPivot();
 }

 selection = null;
 UpdateLabel();
 }
2015/06/29 01:15 2015/06/29 01:15
TAG ,
일전에 NGUI 관련해서는 기초적인 내용부터 강좌한 적이 있어서 기초 내용은 생략합니다.
최근 버전업데이트된 NGUI를 사용하다보니 Scroll부분의 Script 파일명이나 방법들이 바뀌어 있어서 이렇게 포스팅합니다.

우선 사용되는 스크립트는 다음과 같습니다.
- 빨간색 : Panel
- 파란색 : Grid
- 녹색 : Item
사용자 삽입 이미지
생소하다면 생소하겠지만... 예전강좌에서 다룬 부분이므로 참고 이미지만 넣고 넘어가겠습니다.
사용자 삽입 이미지
이제 Panel 부분의 Script설정입니다.
사용자 삽입 이미지
Grid 부분은 다음과 같이 설정합니다.
사용자 삽입 이미지
마지막으로 아이템부분입니다.
사용자 삽입 이미지
바뀐부분에 대해 예전 강좌로 잘 안되시는 분들은 참고하세요 =)
2014/04/20 17:54 2014/04/20 17:54
*본 강좌는 www.unitystudy.net에 게재되고 있으며, 링고게임즈의 재산입니다. 무단 불펌을 혀용하지 않습니다.
사용자 삽입 이미지


집에 터덜 터덜 와서는 C4D 가지고 모델링 연습해보다가... (아웅~ 짜증입니다.)
강좌마저 올려 놓고 자려고 또 열었습니다. T_T
사용자 삽입 이미지

암튼 마지막 NGUI 강좌로 서버에서 이미지 받아 오는 겁니다. =)
아시죠? UI Tool으로 새로운 UI Root 만드시는거... (자세한 설명은 생략합니다.)
사용자 삽입 이미지

위젯툴에서 Simple Texture를 만들어 줍니다.
사용자 삽입 이미지

그럼 이렇게 변하면서...
사용자 삽입 이미지

Game화면에는 아무런 변화가 생기지 않습니다.
사용자 삽입 이미지

이제 만만한 이미지를 하나 Import합니다.
사용자 삽입 이미지

방금 Import한 images.jpg파일을 클릭한뒤 마우스 우클릭하여 Material을 만듭니다.
사용자 삽입 이미지

아래와 같이 Material이 생성되었으면...
사용자 삽입 이미지

Material의 inspector 창에서 아까 Import한 images.jpg를 넣어줍니다.
사용자 삽입 이미지
* 주의점은 Shader를 Until/Texture로 설정하여 광이 없이도 랜더링이 원래 색으로 되도록 설정했습니다.
마지막으로 Simple Texture를 클릭해서 방금 설정한 Material을 할당합니다.
사용자 삽입 이미지

여기까지 끝나시면 아무일 없던 Game창이 변화됩니다.
사용자 삽입 이미지

이제 우리의 코딩질 시작!
다음과 같이 DownloadImg.cs 파일을 만들고...
사용자 삽입 이미지

코딩입니다. =) (효과음은 두다다다다~~~ 또는 CTRL+C, CTRL+V)
using UnityEngine;
using System.Collections;

public class DownloadImg : MonoBehaviour {
   //Material을 Asign합니다.
    public Material tmpTexture;

// Use this for initialization
void Start () {
        //아시죠? 코루틴!
        StartCoroutine(Init());
}

// Update is called once per frame
    IEnumerator Init()
    {
        //URL을 유니티의 점프하는 남자로 했습니다. =)
        string url = "http://www.unity3d.com/promo/unity4/images/jumping-man.png";
        //웹서버를 연결합니다.
        WWW www = new WWW(url);
        //데이터 수신이 끝날때까지 대기합니다.
        yield return www;
        //메터리얼의 메인Texture를 다운로드 받은 Texture로 변경합니다.
        tmpTexture.mainTexture = www.texture;
    }
}
이제 만들어진 소스를 Simple Texture에 Attach시켜 주세요.
사용자 삽입 이미지

플레이 버튼을 누르면~~~ (짜잔~~)
사용자 삽입 이미지

이것으로 NGUI의 기초강좌 +  알파가 모두 끝난것 같아요.
하시는 게임 대박나시길 바랍니다. =)
또 다른 분야의 강좌로 뵙길 기원합니다. 꾸뻑~
2013/01/27 23:51 2013/01/27 23:51
TAG ,
*본 강좌는 www.unitystudy.net에 게재되고 있으며, 링고게임즈의 재산입니다. 무단 불펌을 혀용하지 않습니다.

지난번 강좌 마친뒤로 NGUI는 강좌를 마감하려 했습니다만...
"이호민"님의 낚시질에 낚여서 파닥거리며 강좌 1~2개를 더하기로 했어요.
(유니티 코리아 입사하시려면 낚시를 잘하셔야 합니다. ㅋㅋㅋ)
* 월척이구나~~~
사용자 삽입 이미지

오늘 급하게 결정한거라 딱히 뭐할까? 고민하다가 NGUI쓰시면서 부딪히는 가장 큰 문제가 Object와 NGUI간의 Position을 Match시키는 것 아닐까? 하는 생각에 급히 글을 써보기로 했습니다.
먼저 Unity의 카메라 좌표구조를 한번 흩어 보겠습니다.
첫째는 월드좌표입니다. 우리가 알고 있는 "왼손좌표계"입니다.
사용자 삽입 이미지
두번째는 스크린좌표입니다.
사용자 삽입 이미지

세번째는 뷰포트(Viewport)좌표입니다.
사용자 삽입 이미지
스크린좌표와 유사하면서도 다른 좌표계를 가지고 있습니다.
정확한 개념은 다음의 그림을 보시면 조금 이해될 것 같네요. (물론 유니티와 좌표축이 다릅니다.)
사용자 삽입 이미지
조금 감이 오시나요? 카메라를 저 눈이라고 생각하시면 될듯 싶습니다.
오늘은 여기서 부터 출발해보죠.
우리가 사용하는 WorldToScreenPoint같은 Vector3를 Vector2로 어떻게 내부적으로 변환하고 있을까요?
이득우님께서는 아마도 정확히 알고 계시겠지만, 카메라에 착~ 달라 붙어 있는 저 ViewPort를 통해서 Screen좌표로 전환하는게 아닐까?하는 추정을 하고 있습니다.
(예를 들어 camera.WorldToScreenPoint(transform.position)을 하면 Y축이 반전되어 출력됩니다. 현재의 제 지식으로는 이러한 현상을 봤을때, World좌표<->Viewport좌표<->Screen좌표로 변환되지 않을까? 하는 생각이 들어요.)
암튼 이런게 있다는 것과 뭔가 가상세계의 좌표를 2D로 변환하려면 Viewport라는 녀석을 거치면 편하다는 걸 알게되었으니 이걸 이용해 World좌표의 Object를 따라다니는 Label을 하나 만들어 보죠.
암튼 UI Root를 추가해서 (물론 2D GUI 레이어로...) 다음과 같이 만들었습니다.
사용자 삽입 이미지

그리고 Cube를 하나 추가 했고... (어두우시면 Camera에 Light를 하나 넣으시길...)
사용자 삽입 이미지

그리고 1강에서 했었던 Label을 위젯툴을 사용해 생성합니다.
사용자 삽입 이미지

다음과 같이 됐다면 잘 된 겁니다. (여기서는 NGUI가 가지고 있는 폰트를 사용했습니다.)
사용자 삽입 이미지

이제 Scene에디트에서 Cube를 움직여 보겠습니다.
(Cube의 좌표는 x 2, y -1, z 0입니다. 카메라의 좌표는 x 0, y 0, z -5)
사용자 삽입 이미지

이제 코딩질~!
사용자 삽입 이미지

위와 같이 FollowText를 하나 만들고 다음과 같이 코딩을 합니다.
using UnityEngine;
using System.Collections;
public class FollowText : MonoBehaviour {

   //큐브를 할당할 녀석입니다.
    public GameObject target;

// Update is called once per frame
void Update () {
        //월드좌표의 카메라객체입니다.
        Camera worldCam = NGUITools.FindCameraForLayer(target.layer);
        //GUI객체의 카메라 객체입니다.
        Camera guiCam = NGUITools.FindCameraForLayer(gameObject.layer);

        //타겟의 포지션을 월드좌표에서 ViewPort좌표로 변환하고 다시 ViewPort좌표를 NGUI월드좌표로 변환합니다.
        Vector3 pos = guiCam.ViewportToWorldPoint(worldCam.WorldToViewportPoint(target.transform.position));
        //Z는 0으로...
        pos.z = 0f;

        //Label의 좌표를 설정합니다.
        transform.position = pos;
}
}
이제 다음과 같이 Label에 Attach하고 Cube를 할당합니다.
사용자 삽입 이미지

이제 플레이~~~
사용자 삽입 이미지

사용자 삽입 이미지

이리 저리 움직여보시면 될 듯 싶네요.
몇가지 조합하시면 이런게 가능합니다. =)
사용자 삽입 이미지
그럼~ 오늘은 여기까지 =)
수고하세욤~!
2013/01/27 23:39 2013/01/27 23:39
TAG ,
내친김에 써보는 하일라이트 마지막 NGUI 강좌입니다.(이럴때 들리는게 두둥~!)
아마도 이까지 진행하시고 나면 NGUI에 대한 자심감 + 별거없다는 사실을 깨달으시고 나머지 부분은 Facebook으로 요청주시거나 댓글이 달리면 그 때 고민해보겠습니다.
(모든 노하우를 다 공개하고 싶지만... Free버전의 기능상 한계라는 핑계로...)
* 열분들은 그냥 쳐묵쳐묵하신 다음에 잘 소화를~ ㅋㅋ
사용자 삽입 이미지

이번에는 3강의 결과물을 잘 관찰해야 문제를 풀수 있습니다.
(관찰을 하라고 하면 보통은 "내가 기대하는 일이 일어나길 바라면서 쳐다 봅니다." 인간은 원래 그런 동물입니다. 그냥 봅시다.)
사용자 삽입 이미지

위와 같은 등수를 만들때 템플릿은 그대로 인데 "아이디"와 "점수"만 다르다는 사실을 눈치 챘을 겁니다.
따라서, NGUI의 Label을 사용하면 쉽게 구현할 수 있다는 사실을 눈치 챌 수 있습니다.
두번째 관찰사항은 NGUI의 하이라키 구조입니다.
사용자 삽입 이미지

Panel -> Grid -> Sprite 순서로만 들어가면 우케든 스크롤이 된다는 사실을 알았습니다. 이제부터 쉽게 가보죠.
우선 Sprite와 Label은 같은 레벨로 Label을 Sprite 하위에 넣거나 반대로 넣는건 막혀있습니다.
그래서 Sprite와 Label을 싸줄 Package가 필요합니다. 즉, 빈 게임오브젝트죠!
3강에서 했듯이 GameObject > Create Empty 로 빈 게임오브젝트를 하나 만들고 Item이라는 이름으로 변경한후 Drag & Drop해둡니다. (Scale이나 Position Reset 잊지 마세요!!)
사용자 삽입 이미지

Sprite를 Item밑으로 Drag&Drop합니다.
사용자 삽입 이미지
이제 1강에서 보았던 Widget 메뉴에서 Label을 추가합니다.
사용자 삽입 이미지

화면에 이렇게 보이시면 잘 따라하신 겁니다.
사용자 삽입 이미지
* Label의 위치가 잘 안보여서 Position Y를 조금 조정했습니다.
이제 Item을 잡고 Project창의 임의의 폴더에 Drag&Drop해서 Prefab으로 생성합니다.
사용자 삽입 이미지

하이라키에서는 더 이상 Item이 필요없으니 삭제!
사용자 삽입 이미지

이제 코딩질입니다.
"AddItem"이라는 이름의 CS파일을 하나 생성하시고 아래와 같이 넣습니다.
using UnityEngine;
using System.Collections;
public class AddItem : MonoBehaviour {
    public GameObject Item;
// Use this for initialization
void Start () {
           InitItem();
}


    void InitItem()
    {
        //모두 10개의 Item을 생성합니다.
        for (int i = 0; i < 10; i++)
        {
            //일단 생성합니다. 무조건...
            GameObject obj = Instantiate(Item, new Vector3(0f, 0f, 0f), Quaternion.identity) as GameObject;
            //생성된 GameObject의 부모가 누구인지 명확히 알려줍니다. (내가 니 애비다!!)
            obj.transform.parent = this.transform;
            //NGUI는 자동이 너무많이 짜증나니 수동으로 Scale을 조정해줍니다.
            obj.transform.localScale = new Vector3(1f, 1f, 1f);
            //Label에 i값을 넣습니다.
            obj.GetComponentInChildren<UILabel>().text = i.ToString();
        }
       //Prefab을 생성한 이후에 Position이 모두 같아서 겹쳐지므로 Reposition시키도록 합니다.
        GetComponent<UIGrid>().Reposition();
    }
}

이제 Grid로 Attach시킵니다. (Item Prefab도 Drag&Drop!)
사용자 삽입 이미지
이제 실행하면...
사용자 삽입 이미지

위와 같이 TEXT는 변경되어 있고 하이라키에서도...
사용자 삽입 이미지

이렇게 아이템이 들어가 있네요!
여기서 마치기 아쉬우니 2강에서 했던 OnClick 이벤트 코드를 조금 손봐서 Item Prefab 밑에 있는 Sprite에 넣어보면...
using UnityEngine;
using System.Collections;

public class ShowBye : MonoBehaviour {

    void OnClick()
    {
        string Label = this.transform.parent.GetComponentInChildren<UILabel>().text;
        Debug.Log(string.Format("안녕하세요? {0}번 입니다.", Label));
    }
}
사용자 삽입 이미지
진짜 끄읏~~~~
뭐하세요? 이제 삽질하러 가셔야죠~ ㅋ
사용자 삽입 이미지
* 본 강좌의 저작권은 링고게임즈에 있습니다.
출처없는 불펌은 법대로 할겁니다.
2013/01/06 12:46 2013/01/06 12:46
안녕하세요? 자고 일어나 아침에 하는일이... 또 강좌질입니다. ㅋㅋㅋ
* 다음 이미지는 마노비기의 여해적입니다. 강좌의 예제로 쓸겁니다. =)
사용자 삽입 이미지
오늘 새벽에 예고한 바와 같이 스프라이트 스크롤 한번 구현해보겠습니다.
1,2강에서 신물나게 클릭했던 "NGUI"에 "Create a New UI" 아시죠? (모르시면 다시 1, 2강으로...)
사용자 삽입 이미지

마찬가지로 Layer는 2DGUI로 설정합니다.
사용자 삽입 이미지

이제부터 중요합니다.
하이라키에서 "Panel"을 클릭한채로 메뉴의 Component > NGUI > Interaction > Draggable Panel 을 차례대로 눌러주세요.
사용자 삽입 이미지

그럼 Panel의 Inspector가 아래와 같이 바뀔 겁니다.
사용자 삽입 이미지

우선 여기까지 진행하신후에 빈 껍데기 GameObject를 만듭니다.
(방법은 GameObject에 "Create Empty"누르시면 됩니당...)
사용자 삽입 이미지

Grid라는 이름으로 변경후의 모습입니다.
사용자 삽입 이미지
이제 Panel 아래로 이동시켜 주세요.
Layer와 Position, Scale은 초기화 시켜주시는걸 잊지마십시오.
(카메라가 서로 달라서 초기화 안시켜놓으면 나중에 사이즈 문제등을 겪게 됩니다. T_T)
사용자 삽입 이미지
이제 다시 Component > NGUI > Interaction > Grid 클릭.
사용자 삽입 이미지
Inspector에서 제대로 들어갔는지 확인합니다.
거의다 왔습니다. (NGUI는 쉽다니깐염 ㅋㅋ)
마지막으로 Grid안에 들어갈 Item을 만들어야 겠죠? 마노비기의 여해적 캐릭터를 다운받았습니다.
(님 고소. 이런거 하지 맙시당... 상업적 이용도 아닌데... ㅡㅡ;;)
첨부파일로 다운로드 받을 수 있구요.
다음과 같이 Import 하신다음에
사용자 삽입 이미지

Atlas를 Item이라는 이름으로 만듭니다. (이건 2강)
사용자 삽입 이미지

아래와 같이 됐다면 잘 하신겁니다.
사용자 삽입 이미지
Atlas를 만들었으니 Widget으로 Sprite로 만들차례입니다.
사용자 삽입 이미지

Grid안으로 잘 들어갔는지 확인 해주세요.
사용자 삽입 이미지
다시 Component > NGUI > Interaction > Drag Panel Contents 클릭!
사용자 삽입 이미지

다음과 같이 Item을 클릭했을 때 변경되어야 합니다.
사용자 삽입 이미지

그리고 Drag하는 Event가 먹혀야 하니 NGUI > Attach a Collider 클릭
사용자 삽입 이미지

그리고 나서 Sprite Component에 있는 Collider와 Transform의 Scale을 200으로 조정합니다.
사용자 삽입 이미지

이제 실행해보면서 Drag해보면 지멋대로 움직이는 Sprite를 볼 수 있습니다. =)
사용자 삽입 이미지

우리가 원하는건 횡으로 (X축)으로 움직이는 스크롤이기때문에 (혹은 Y축으로...) 다음과 같이 Panel설정을 변경해줍니다.
사용자 삽입 이미지

다시 실행해보면 X축으로만 움직이는 해적을 보실 수 있을 겁니다.
이제 해야할 일은 Sprite를 복제해서 많이 만드는 겁니다!
사용자 삽입 이미지

대략 5개쯤 복제한 뒤에 실행해보면...
사용자 삽입 이미지

사용자 삽입 이미지

이번에는 코드가 안들어 갔습니다.
다음회에는 이걸 응용해서 Dynamic하게 Item을 추가하는 걸 해보겠습니다.
* 긴급패치!!!!!
위의 그림에서 Collider를 200으로 설정했습니다만, 잠이 덜깬 Miss입니다.
사용자 삽입 이미지

위와 같이 1로 설정하셔도 됩니다.
* 본 강좌의 저작권은 링고게임즈에 있습니다.
출처없는 불펌은 법대로 할겁니다.
2013/01/06 12:10 2013/01/06 12:10
오늘도 늦은 야근에 몸을 질질질 끌고 집에 와서는 한다는게 NGUI 강의입니다.


아참. 혹시 이 글을 보시는 분중에 3D Modling / Animation 하시고, 스타트업의 저희 팀에 합류하고 싶으신 분은 vicviper@live.co.kr로 "너네는 앞으로 뭘 만들거냐?"고 물어봐주세요! 연락 부탁드립니다. 디자이너 구해요.... 급여는 별로 못드려요... 경력 쌓으실 신입환영입니다. 근무지는 분당서현이예요... 이렇게 구인광고 드립... ㅋㅋ
사용자 삽입 이미지

오늘은 어제에 이은 NGUI 버튼입니다.
약간의 script가 들어가니 참고하시고요... NGUI메뉴에서 "Create a New UI" 클릭!
그리고 1강과 같이 2D GUI Layer 설정.
사용자 삽입 이미지


요렇게 바뀐다면 1강을 잘 들으신겁니다.
이제 심플하게 버튼을 만들어 보죠. 이미지는 첨부파일 다운로드 해주세요!
간단하게 3개의 PNG파일이 있을겁니다.
이 녀석들을 새로 폴더를 하나 만드신후에 Drag&Drop으로 넣어둡니다.
사용자 삽입 이미지

Import가 끝났다면 이제 다시 NGUI 메뉴에서 "Atlas 어쩌구하는 녀석을 불러옵니다."
사용자 삽입 이미지

다음과 같이 불러오는데 성공하셨다면 "참 잘하셨어요~!" =)
사용자 삽입 이미지
위의 창은 그대로 두시고, 아까 import한 png 파일 3개를 클릭합니다.
사용자 삽입 이미지

맨 위에 녀석을 클릭한뒤에 Shift키를 누른채로 마지막 녀석을 클릭하면 3개 모두 선택이 가능하겠죠?
그럼 위와 같이 자동으로 파일이름이 들어갑니다. (오~ 똑똑이..)
이름을 바꿔준 후에 "Create"버튼을 클릭하시면 다음과 같이 변합니다. (진짭니다.)
사용자 삽입 이미지

Texture Size는 256*256으로 잘 생성된 것 같군요.
이제 생성된 Atlas를 확인해봅시다. 아주 간단히 마우스로 콕콕 찔러보는 센스.
사용자 삽입 이미지

중요한건 Atlas가 만들어질때 이렇게 3개의 이미지라면 모든 공간을 제대로 활용하지 못하고 이렇게 구멍이 있는채로 나온다는 겁니다. 항상 Atlas를 만들때는 되도록 텍스쳐의 사이즈를 고려해서 만들기 바랍니다.
사용자 삽입 이미지

이제 또 다시 NGUI 메뉴에서 "Create a Widget"을 클릭하시고
사용자 삽입 이미지

Widget 메뉴에서 다음과 같이 설정합니다.
사용자 삽입 이미지
("Button"은 1개의 이미지만 사용하는데 비해 "Image Button"은 3개의 이미지를 사용합니다. )
마지막으로 "Add to"를 클릭하면...
사용자 삽입 이미지

많이 지저분한 녀석이 나옵니다.
이제 실행!
사용자 삽입 이미지

마우스를 올려보고, 클릭도 해보시면서 자랑스러운 버튼 작동을 확인해보세요!
사용자 삽입 이미지

그리고 명색이 버튼인데 글자 정도는 올라가줘야 하지 않을까요? 이번에는 "GO"라는 글자를 1회차에서 만든 Font를 활용해서 적용해 보겠습니다.
방금 만드신 Button을 삭제하신후에 다시 "Widget"메뉴를 눌러서 다음과 같이 Font를 설정해준뒤 똑같이 "Add to"를 눌러줍니다.
사용자 삽입 이미지
네이버가 이럴때는 너무 고맙습니다. =)
아까와는 다르게 Image Button이라는 글자가 들어가는 군요! =)
사용자 삽입 이미지
하이라키에서 보면 아까와는 다르게 Label이 추가된게 보이실 겁니다.
사용자 삽입 이미지

다음과 같이 한번 Inspector창에서 장난을!
사용자 삽입 이미지

그럼 다음과 같이 변경 되는걸 보실 수 있을 거예요.
사용자 삽입 이미지

이제 항상 이바닥의 전통인 머리 쥐나게 하는 모드로 돌입합니다.
버튼을 만드는건 NGUI가 해주지만, 버튼을 작동시키는건 여러분들의 몫이니까요.
기본적으로 NGUI는 Collider로 작동됩니다. 그렇죠! 물리입니다. =)
사용자 삽입 이미지

위의 이미지를 보시면 Box Collider라는 녀석이 떠억~ 자리를 잡고 있습죠.
이 녀석에게 어떤 이벤트가 생기면... (아마도 내부구조는 잘 모르겠지만, Raycast가 가장 유력한 범인이 아닐까 싶습니다만...) 이벤트 메시지를 올려주는 메커니즘으로 작동합니다.
이 이벤트를 미리 약속해뒀는데, 다음과 같은 메소드에 알고리즘을 넣어 주셔야 합니다.
사용자 삽입 이미지

영어 울렁증이 있으시겠지만... 찬찬히 (우웩~) 살펴보다보면... OnClick이라는 메소드가 보이네요!
이제 아무생각없이 코딩질...
스크립트명을 Click이라는 이름으로 했습니다.
사용자 삽입 이미지

이 녀석을 열어서 담과 같이 코딩해보죠.
using UnityEngine;
using System.Collections;

public class Click : MonoBehaviour {

    void OnClick()
    {
        Debug.Log("어서와~ 버튼은 처음이지?");
    }

}
코드를 드레그해서 넣고...
사용자 삽입 이미지
실행하면 요롷고롬 됩니다. =)
사용자 삽입 이미지

윈도우에서나 가능한 매직입죠... 네네~
이상... 지뢀같은 한글지원땜시 iOS 버전도 윈도우에서 코딩해서 최종 빌드만 MAC에서 돌리는 글뻥이었습니다.
담에는 NGUI가 자랑하는 스크롤 버튼을 만들어 보겠습니다. =)
이런겁니다. =)
사용자 삽입 이미지
* 본 강좌의 저작권은 링고게임즈에 있습니다.
출처없는 불펌은 법대로 할겁니다.
2013/01/06 12:02 2013/01/06 12:02
안녕하세요? 글뻥입니다.
(이득우님께 잡혀서 열심히 하라는 일은 안하고 강좌 올리는... ㅋㅋ)
연일 강추위 건강 유의하시기 바라며, http://www.unitystudy.net에 올린 글을 옮겨서 올려봅니다.
먼저 NGUI를 사시기 전에 (꽤 비싸죠... ㅋ) Free 버전으로 초간단 NGUI 강좌를 진행해 보겠습니다.
사용자 삽입 이미지
(어서와~ NGUI는 처음이지?)
다운로드는
http://forum.unity3d.com/threads/124032-NGUI-Free-Edition
여기서 받을 수 있구요. NGUI 로고 클릭하면 unitypackage 다운로드 가능합니다.
그럼 import하고 시작!
사용자 삽입 이미지
import가 완료되면 메뉴에 NGUI라는 넘이 생기고 그걸 클릭하면 이제 모든 준비가 완료됩죠. 네네
사용자 삽입 이미지

영어 울렁증이 올라오지만 꾸욱 참고 가장 많이 쓰는 기능들만 간단히 살펴봅시다.
가장 많이 궁금해 하시는 부분이 바로 한글 출력일텐데요.
이것 부터 짚고 넘어가죠.
우리의 공짜주의에 입각해서 네이버의 나눔폰트를 사용하겠습니다.
http://hangeul.naver.com/font
폰트 설치후 BMFONT라는 녀석을 다운 받아야 하는데욤. 이녀석은...
http://www.angelcode.com/products/bmfont/
여기서 다운로드 가능합니다.
그리고도...
아직 다 준비가 안됐습니다.
Font파일중에 한글만 뽑아낼 녀석이 필요하니까요. 많이 사용하는 한글만 뽑아낸 txt파일이 필요합니다.
첨부파일로 저희쪽에서 사용하는 한글 파일을 드리지요. (서비스 확실하게...)
드디어 모든 준비가 끝났습니다.
사용자 삽입 이미지

일전에도 설명드렸듯이... 이바닥이 원래 이럽니다.
쉽다고 해놓고 뒷통수 치기... 이런게 뭐..
암튼... 이제 BMFont를 실행합니다.
사용자 삽입 이미지
이렇게 생긴 녀석이 뜰텐데요.
Option에서 폰트설정을 다음과 같이 해줍니다.
사용자 삽입 이미지

폰트를 25폰트 이상 올릴 수도 있겠지만.. 나중에 용량관리하시며 정신건강에 해로 울 수도 있사오니... 걍 25폰트로 뽑습니다. 이렇게 뽑으면 딱 1024x1024 사이즈의 텍스쳐에 들어갈 수 있죠.
Option에서 Export Option을 클릭하고 다음과 같이 1024x1024, Alpha값이 있는 흰색, text에 png로 뽑아냅니다.
사용자 삽입 이미지

이제부터 진짜입니다.
첨부된 KS1001.txt파일을 읽어 들입니다. "Edit"에서 Select char from file로 읽을 수 있죠.
사용자 삽입 이미지

그럼 아래와 같이 txt파일에 있는 폰트만 highlight됩니다.
사용자 삽입 이미지

이제 제대로 출력되는지 Option메뉴에서 Visualize를 클릭해서 확인합니다.
아래와 같이 1024x1024 사이즈에 한장에 들어오면 잘 따라오신겁니다.
사용자 삽입 이미지

마지막으로 Export합니다.
Option에서 "Save..."어쩌구 된넘을 누르면 끝.
사용자 삽입 이미지

Export된 파일중에 "fnt"확장자를 "txt"로 고쳐줍시다.
사용자 삽입 이미지

사용자 삽입 이미지

위와 같이 고쳐주시면 한글 사용할 준비가 정말... 진짜 완료되었습니다.
사용자 삽입 이미지

위와 같이 Font폴더를 만들고, 아까 변경해준 이름의 파일을 Drag&Drop해서 Unity로 Import 시킵니다.
NGUI메뉴에서 Font Maker를 클릭해, 다음의 화면을 호출하도록 합시다.
사용자 삽입 이미지

Font Data에는 ".txt"파일을 나머지 texture에는 아까 생성한 ".png"를 Drag&Drop으로 넣어줍니다.
그럼 다음과 같이 알수 없는 욕을 해대면서 UI가 변경될 겁니다.
사용자 삽입 이미지

이럴때 Fuc* u를 날려주는 Sense... 이제 X 먹으라고 빨간색 버튼 눌러주면...
다음과 같이 폰트 Atlas가 생성됩니다.
사용자 삽입 이미지

(한글 한번 쓰기 디따 힘들군요. T_T)
드디어~~ 진짜.. NGUI 강좌들어갑니다.
사용자 삽입 이미지

NGUI 메뉴에서 "Create a New UI"를 누르고 Layer를 하나 추가합니다.
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

(쓸데없는 고퀄로 차례로 이미지를 보여드렸슴돠... ㅡㅡ;;)
이제 과감히 버튼 클릭!
사용자 삽입 이미지

그럼 다음과 같이 하이라키가 변경되는게 보이실 겁니다.
사용자 삽입 이미지

이제 다시 NGUI 메뉴에서 Create a Widget 버튼을 눌러줍니다. 살포시...
사용자 삽입 이미지

위젯 툴에서 Label로 변경하고 "Add to" 버튼을 클릭!
사용자 삽입 이미지

갑작이 화면이 바뀌면서... New Label이라는 메시지가 보입니다.
사용자 삽입 이미지

인스펙터 메뉴에서 설정을 변경하면...
사용자 삽입 이미지
사용자 삽입 이미지

변경 완료!
오늘은 간단히 Label을 한글로 사용하는걸 봤습니다.
담 강좌는 버튼한번 해볼까요?
사용자 삽입 이미지
* 본 강좌의 저작권은 링고게임즈에 있습니다.
출처없는 불펌은 법대로 할겁니다.
KS1001 파일입니다.
2013/01/04 21:31 2013/01/04 21:31