유니티: NGUI 2.7 튜토리얼&샘플

Sample_NGUI.zip

0. 필요한 파일

파일명	예시 경로
NGUI 2.0.7c (free version) [#]	(해당사항 없음)
유니티(5.3.1f1)	(설치 기본경로)

Just note that in order to use it for professional purposes you must fall under the same conditions as Unity Free: “free version may not be licensed by a commercial entity with annual gross revenues (based on fiscal year) in excess of US$100,000, or by an educational, non-profit or government entity with an annual budget of over US$100,000.”

* 해석한게 맞다면, 2.7 무료버전의 경우 유니티 프리버전과 같은 라이센스 정책이라고 합니다.

[#링크]

1. NGUI 설치

2. 카메라

1) 생성

NGUI - Open the UI Wizard

지금상태로는 Scene에서 편집한 내용중 일부를 Game window(Ctrl+2)에서 볼수 없습니다.

패널내 스프라이트들의 Depth가 음수인 경우 Clipping Planes>Near를 0이하로 하면 Game window에도 출력이 됩니다.

* 캡쳐상 bg_common, blind는 제가 추가한것이라 UI 최초생성시에는 없는겁니다.

그리고 인스펙터에서 Tag를 MainCamera로 설정해줍니다.

입문시 봤던 튜토리얼의 경우,

씬 생성시 기본제공하는 카메라를 지우라길래 그에 따랐지만 

적지 않은 튜토리얼이나 개발자 게시판을 보면 카메라는 2개 존재하는게 일반적이라고 하는글도 있어서 이 부분은 case by case같습니다.

3. UI 구성

1) Maker

① Atlas maker

SkyBaby의 살아가는 그 이유 ! :: [Unity3D] Atlas Maker로 Atlas 이미지 만들기 (NGUI)

에러: NGUI altas 알파영역 노이즈

② Font

> NGUI에서 사용할 Bitmap Font 제작 (BM Font Maker) : 네이버 블로그

> Think Different :: [Unity3D] NGUI와 BMFont를 이용한 데미지(숫자) 폰트 만들기

③ 기타

> 보금자리 :: [ NGUI ] ScrollView 만들기

> 씬관리

   File - Build Settings에서 씬을 드래그 앤 드랍등으로 등록시킵니다.

   불필요해진 씬은 파일과 해당 메뉴에서 삭제해주면 됩니다.

4. 입력 처리

* 예시로 사용한 제어 스크립트는 Panel에 붙인 상태입니다.

* 카메라의 인스펙터에서 Tag를 MainCamera로 설정해줘야 합니다.

1) 인스펙터

2) 스크립트(C#)

... ... ...
void Update () 
{
    if (Input.GetMouseButtonDown(0))
    {
        DoClick();
    }
}
 
private void DoClick()
{
    string colliderName = null;
 
    Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition);
    RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector2.zero);
 
    if (hit.collider != null)
    {//Box Collider 2D
        colliderName = hit.collider.name;
        //Debug.Log("DoClick, hit.collider.name=" + colliderName);
    }
    else if (UICamera.lastHit.collider != null)
    {//레이캐스트가 먹통일 경우. [인스펙터==Box Collider]
        colliderName = UICamera.lastHit.collider.name;
    }
    
    if (colliderName == "btn_menu0")
    {
        Destroy(gameObject);
        Application.LoadLevel("Scene_B");
    }
    else if (colliderName == "btn_menu1")
    {
        //
    }
    else if (colliderName == "btn_quit")
    {
        Application.Quit();
    }
}
... ... ...

5. 오브젝트 접근 및 제어

* 예시로 사용한 제어 스크립트는 Panel에 붙인 상태입니다.

* Scene_B에서 UI Grid를 이용한 예제입니다.

1) 화면 리사이즈

using UnityEngine;
using System.Collections;
 
public class BaseHandler : MonoBehaviour
{
    //================================================================================
    //  PROTECTED, SYS
    //================================================================================
    protected virtual void Start()
    {
        UIRoot root = GameObject.Find("NGUI_ROOT").GetComponent<UIRoot>();
        root.automatic = true;
        root.manualHeight = 480;
        root.minimumHeight = 480;
        root.maximumHeight = 1440;//2560 x 1440
 
        //RESIZE.
        float perx = 1920.0f / Screen.width;
        float pery = 1080.0f / Screen.height;
        //카메라
        //Camera camera = GameObject.Find("NGUI_Camera").GetComponent<Camera>();
        Debug.Log(this.transform.parent.name);
        Debug.Log(this.transform.parent.transform.parent.name);
        Camera camera = this.transform.parent.transform.parent.GetComponent<Camera>();
        camera.orthographicSize = (perx > pery) ? perx : pery;
    }
}

2) 씬 핸들러

using UnityEngine;
using System.Collections;
 
public class ScneneB_Handler : BaseHandler
{
    protected override void Start()
    {
        base.Start();
        
        UIGrid grid = this.transform.Find("UI_Grid").GetComponent<UIGrid>();
        //UIGrid grid = GameObject.Find("UI_Grid").GetComponent<UIGrid>();
        
        for (int idx = 0; idx<10; idx++)
        {
            GameObject listChild = Resources.Load("Prefabs/UI_Listchild") as GameObject;
            
            int tmp = idx+1;
            listChild.transform.FindChild("idx").GetComponent<UILabel>().text = tmp.ToString();
            tmp = Random.Range(0, 100);
            listChild.transform.FindChild("content").GetComponent<UILabel>().text = "random_num="+tmp.ToString();
 
            NGUITools.AddChild(grid.gameObject, listChild);
        }
    }
 
    void Update () 
    {
        if (Input.GetKeyDown(KeyCode.Escape))
        {
            DoBack();
        }
        else if (Input.GetKey(KeyCode.Escape))
        {
            DoBack();
        }
        else if (Input.GetMouseButtonDown(0))
        {
            DoClick();
        }
    }
    
    private void DoBack()
    {
        Destroy(gameObject);
        Application.LoadLevel("Scene_main");
    }
    
    private void DoClick()
    {
        string colliderName = null;
 
        Vector2 worldPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        RaycastHit2D hit = Physics2D.Raycast(worldPoint, Vector2.zero);
 
        if (hit.collider != null)
        {//Box Collider 2D
            colliderName = hit.collider.name;
            //Debug.Log("DoClick, hit.collider.name=" + colliderName);
        }
        else if (UICamera.lastHit.collider != null)
        {//레이캐스트가 먹통일 경우.
            colliderName = UICamera.lastHit.collider.name;
        }
        
        if (colliderName == "sample_author")
        {
            Application.OpenURL("http://analog-green.tistory.com/");
        }
    }
}

Panel 제어 스크립트 붙인 이유이기도 합니다.

NGUITools.AddChild사용이나 오브젝트 접근시 무난한 위치이기 때문입니다.

6. 애니메이션

1) 단일 스프라이트 애니메이션

유니티 NGUI 버튼 애니메이션 만들기 : 네이버 블로그

유니티 애니메이션 만들고 재생하기~!

NGUI – POPUP 애니메이션 효과주기 // TweenScale방식

2) 그외

03. Live2D 실습 강좌 - Live2D Cubism 2 한글매뉴얼

기타. 참조자료

스마트아카데미 :: APP 개발 온라인 강좌 제4강 [4-5.2.1] - NGUI 구성

[Unity3d] 카메라 2개 동시에 보기 :: JENEMIA

기타. 변경이력

일자	변경이력
2016-04-09	초안
2017-06-26	애니메이션 항목추가.