Crocodile Tears

- NGUI 버전 : 3.9.8 -

NGUI 토글버튼 제어

전 포스팅에서 NGUI 토글버튼을 사용해서 메뉴를 만들었는데, 

메뉴를 선택하고 밖으로 나갔다가 다시 들어왔을 때

이전에 선택한 것으로 되어있습니다.

다시 말해서 초기화 과정이 필요합니다.

코드 몇줄만 추가하면 되는 작업입니다.

< ToggleHandler.cs 코드 >

using UnityEngine;
using System.Collections;

public class ToggleHandler : MonoBehaviour {

    // 어떤 버튼이 활성화 되었는지 표시하기 위함.
    public UILabel m_lblMessage;

    // 토글을 제어하기 위해 선언함.
    public UIToggle[] m_arrToggles;

    void Update()
    {
        // 키로 제어하는것 추가.
        if(Input.GetKeyDown(KeyCode.Alpha1))
        {
            m_arrToggles[0].value = true;
        }

        if (Input.GetKeyDown(KeyCode.Alpha2))
        {
            m_arrToggles[1].value = true;
        }

        if (Input.GetKeyDown(KeyCode.Alpha3))
        {
            m_arrToggles[2].value = true;
        }
    }

    // 토글 버튼이 바뀔 때 발생하는 이벤트
    public void OnChangeToggle()
    {
        // 현재 상태가 변한 토글버튼을 가져옵니다.
        UIToggle current = UIToggle.current;
        // 우리는 활성화 된 경우만 처리할 예정이므로,
        // 활성화 된것(value가 true)이 아닌경우(false인 경우) return합니다.
        if (current.value == false) return;
        // 확인을 위해 메시지를 뿌립니다.
        m_lblMessage.text = current.name;
    }
}

인스펙터를 보시면 Arr Toggels가 보이실 것입니다.

여기에서 메뉴가 세개이므로 3으로 세팅하고, 

ToggleA, B, C를 끌어서 연결시키겠습니다.

실행을 하고 

1, 2, 3을 누르면 선택이 되실 것입니다.

나중에 완성된 게임을 가지고 포스팅을 할 예정인데

그때 NGUI 토글도 필요하니 잘 기억해두시기 바랍니다.

- NGUI 버전 : 3.9.8 -

NGUI 토글버튼 기초

게임을 구현하다 보면, 토글 버튼이라던가 라디오버튼이 필요할 때가 있습니다.

이를 위해 NGUI에서는 UIToggle이라는 컴포넌트를 제공합니다.

이 기능에 대해 간단하게 알아보고, 다음 포스팅에서 

제어할 수 있게 구현하도록 하겠습니다.

* 포스팅에 사용되는 이미지는 유료라서 공유가 힘듭니다. 양해바랍니다.

우선 아래 그림처럼 배치를 하도록 합니다.  

ToggleA(Gray)는 빈 게임오브젝트 이며, 자식으로 버튼들이 들어갑니다.

NGUI에서 기본 뼈대 만드는 법과, Button 만드는 법은 다음을 참고하세요.

[NGUI] 스프라이트(SPRITE)

[NGUI] 버튼과 레이블

이제 ToggleA(Gray)게임 오브젝트에 

UIToggle과 UIToggleComponents를 추가합니다.

(나머지도 동일하게 추가합니다)

Box Collider넣고 Size 설정하는거 잊지 마시기 바랍니다.

그리고 아래 설명에 나온것처럼 세팅을 해 줍니다.

실제 기능은 완료가 되었습니다. 아주 간단하죠.

이제 확인을 해보고 위해서 레이블 하나를 추가하겠습니다.

[NGUI] 버튼과 레이블 참고

ToggleHandler라는 스크립트를 하나 만들고, 

다음 처럼 코딩하겠습니다. (설명은 주석으로 하겠습니다)

< ToggleHandler.cs 코드 >

using UnityEngine;
using System.Collections;

public class ToggleHandler : MonoBehaviour {

    // 어떤 버튼이 활성화 되었는지 표시하기 위함.
    public UILabel m_lblMessage;

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
	
	}

    // 토글 버튼이 바뀔 때 발생하는 이벤트
    public void OnChangeToggle()
    {
        // 현재 상태가 변한 토글버튼을 가져옵니다.
        UIToggle current = UIToggle.current;
        // 우리는 활성화 된 경우만 처리할 예정이므로,
        // 활성화 된것(value가 true)이 아닌경우(false인 경우) return합니다.
        if (current.value == false) return;
        // 확인을 위해 메시지를 뿌립니다.
        m_lblMessage.text = current.name;
    }
}

코드 작성이 완료되었으면, 

ToggleHandler.cs를 UI Root 게임 오브젝트에 넣어줍니다.

메시지를 봐야하므로, Message를 연결시켜줍니다.

마지막 단계만 남았습니다.

ToggleA(Gray)를 선택하보면, 아까 넣어둔 UIToggle이 보입니다.

거기에 보면 On Value Change라는게 보이는데, 

상태가 변하면 발생하는 이벤트 입니다.

우리가 만든 함수를 거기에 등록하도록 하겠습니다.

이제 실행을 하고 버튼을 눌러보면, 다음과 같은 결과를 볼 수 있습니다.

< 결과 >

기본 기능은 간단하지만, 

제어를 하려면 수작업이 좀 필요합니다.

다음 포스팅에는 제어하는 방법에 대해 설명하도록 하겠습니다.

궁금한 사항은 댓글달아주세요.

- NGUI 버전 : 3.9.8 -

NGUI 버튼과 레이블의 활용

간단한 사용법에 대해 포스팅 하도록 하겠습니다.

(아틀라스와 스프라이트 기초는 여기 에서 확인 하세요)

* 포스팅에 사용되는 이미지는 유료라서 공유드리기가 힘드네요. 양해부탁드립니다.

우선 가지고 계신 이미지로 다음처럼 배치를 하겠습니다.

버튼 A 자식으로 게임오브젝트를 하나 만들고,

거이에 UILabel하나를 추가하도록 합니다.

그리고 Depth는 50정도로 잡아줍니다.

( 스프라이트와 레이블의 뎁스는 분리시키는게 좋습니다. )

( 드로우콜이 덜 발생하는걸로 들은것 같네요. )

다음 화면처럼 UILabel 세팅이 되었다면, 

이제 버튼으로 다시 가서, Box Collider를 추가합니다.

( Box Collider가 있어야 클릭할 때 이벤트를 발생 시킬 수 있습니다. )

그리고 auto-adjust to match를 눌러줍니다. 그러면 Box Collider 사이즈가 동일하게 적용됩니다.

이제 버튼을 눌렀을 때 효과를 주려고 합니다.

일반 상태의 버튼이미지와, 마우스가 올라갔을 때 다른 이미지를 표시할 예정입니다.

Button 이라는 컴포넌트를 추가합니다.

Normal과 Hover 그리고 Pressed 모두 흰색으로 변경시킵니다.

(색상을 넣으면 마우스 이벤트시(Hover, Pressed등) 버튼 색상이 변경됩니다)

그리고 Sprites에서 Normal 상태와 Hover상태의 이미지를 세팅해줍니다.

이제 마우스를 올렸을 때와 눌렀을 때 버튼 사이즈도 변경하려고 합니다.

Button Scale 컴포넌트를 추가합니다.

(기본 세팅값으로 두겠습니다)

버튼 B도 방금했던 작업들을 동일하게 적용시킵니다.

그리고 실행하면 다음처럼 동작할 것입니다.

버튼에 이벤트를 추가 하려고 합니다.

이벤트 발생 여부를 표시하기 위해 Label하나를 추가하겠습니다.

Overflow를 Shirink Content로 하고 

좌측 빨간 네모처럼 사이즈를 맞춰줍니다.

이벤트를 발동 시키기 위해 스크립트를 하나 생성하겠습니다.

저는 ButtonTest.cs 라는 스크립트를 만들겠습니다.

< ButtonTest.cs >

using UnityEngine;
using System.Collections;

public class ButtonTest : MonoBehaviour {

    // 버튼 눌렀을 때 나타낼 메시지.
    public UILabel m_lblMessage;

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
	
	}

    // 버튼 A를 클릭했을 때 발생하는 이벤트
    public void OnClickButtonA()
    {
        m_lblMessage.text = "A 버튼을 클릭하였습니다.\nA버튼은 회색입니다.";
    }

    // 버튼 B를 클릭했을 때 발생하는 이벤트
    public void OnClickButtonB()
    {
        m_lblMessage.text = "B 버튼을 클릭하였습니다.\nB버튼은 빨간색입니다.";
    }
}

이제 이 스크립트를 UI Root에 넣고

마지막에 만든 레이블(Text)를 연결해줍니다.

이제 버튼 이벤트를 연결해야 하므로, 버튼을 선택합니다.

그리고 UIButton 컴포넌트에 있는 OnClick에 UIRoot를 연결합니다.

그리고 보시면 좀전에 만든 OnClickButtonA 함수가 보일것입니다.

선택하도록 합니다.

버튼B도 마찬가지로 이벤트를 연결시켜 줍니다.

실행을 해 보시면 다음처럼 잘 작동 될 것입니다.

이제 TypewriterEffect 를 이용해서 레이블에 효과를 주겠습니다.

TypewriterEffect는 코드를 이용해서 추가하겠습니다.

< ButtonTest.cs 에 세번째 이벤트 추가 >

using UnityEngine;
using System.Collections;

public class ButtonTest : MonoBehaviour {

    // 버튼 눌렀을 때 나타낼 메시지.
    public UILabel m_lblMessage;

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
	
	}

    // 버튼 A를 클릭했을 때 발생하는 이벤트
    public void OnClickButtonA()
    {
        m_lblMessage.text = "A 버튼을 클릭하였습니다.\nA버튼은 회색입니다.";
    }

    // 버튼 B를 클릭했을 때 발생하는 이벤트
    public void OnClickButtonB()
    {
        m_lblMessage.text = "B 버튼을 클릭하였습니다.\nB버튼은 빨간색입니다.";
    }


    // 레이블 효과
    public void OnClickButtonC()
    {
        // 효과를 나타낼 텍스트 추가.
        m_lblMessage.text = "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세." +
                            "무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.";
        // 효과를 주는 컴포넌트를 추가한다.
        TypewriterEffect twe = m_lblMessage.gameObject.AddComponent();
        twe.ResetToBeginning();
    }
}

사진이라서 정확하게는 표현을 못하였지만, 

실행해 보시면 어떤 효과인지 아실 수 있을 것입니다.

typewriterEffect는 튜토리얼이나 대사창 등에 효과적으로 

이용하실 수 있습니다.

다음은 재사용 스크롤 뷰를 포스팅 하도록 하겠습니다.

도움되셨길 바랍니다.

- NGUI 버전 : 3.9.8 -

NGUI 스프라이트 기초 및 응용

유니티 5.x 가 들어오기 전부터 NGUI를 사용해서 

UGUI보다는 NGUI가 편하네요. 그리고 얼마전에 최신버전으로 업그레이드 했습니다.

기능이 좀 추가된 것 같네요.

우선 Sprite는 버튼, 스크롤뷰, 토글 등 을 사용하기 위해 기본적으로 필요한 요소입니다.

그래서 간략하게 정리 하려고 합니다.

아무것도 없는 상태에서 상단 메뉴 NGUI -> Create -> 2D UI를 만들어 줍니다.

NGUI를 사용하기 위해서는 무조껀 필요합니다.

스프라이트를 넣을 빈 게임 오브젝트를 하나 만듭니다.

메뉴를 통해서도 생성할 수 있지만, 

단축키가 빠르고 편하니 단축키를 눌러줍니다.

그러면 하단처럼 GameObject가 생성됩니다.

이제 스프라이트를 넣으려고 합니다.

Add Component를 눌러 uisprite를 치면 다음처럼 스크립트가 나옵니다.

선택해서 집어넣어 줍니다.

이제 이미지 세팅을 해 줍니다.

아틀라스를 선택하여 그 안에 이미지를 선택만 하면 됩니다.

저는 NGUI 샘플에 있는 Wooden Atlas를 선택하겠습니다.

(샘플이 없으신 분은 아틀라스를 만드셔서 해야합니다.)

이미지나 생겼네요. 기본 사이즈로 100 x 100으로 잡혀있습니다.

우측에서 Type을 보시면 아래 그림처럼 리스트가 나타납니다.

아래 설명을 읽어보시면 이해하는데 조금 도움이 될것 같네요.

제 경험으로는 Sliced가 가장 많이 사용되네요. 이것 저것 바꿔보시면 이해가 빨리 되실꺼에요.

NGUI를 업데이트 했더니 Sprite에 Gradient 기능이 생겼더라구요.

항상 이미지 새로 만들어서 했었는데

기능이 생겨서 다행이네요.

전체적인 색상도 바꿀 수 있습니다.

코드로 바꾸는 걸 간단히 해보도록 할께요.

C# 스크립트를 만들고 (이름은 원하는대로) 다음 코드를 넣어 줍니다.

using UnityEngine;
using System.Collections;

public class ChangeSpriteColor : MonoBehaviour {

    // 대상 스프라이트
    public UISprite sprite;
    // 변경할 색상    
    public Color color;
	// Use this for initialization
	void Start () {
	    // 기본값으로 white
        color = Color.white;
	}
	
	// Update is called once per frame
	void Update () {
        // 실시간 색상변경
        sprite.color = color;
	}
}

그리고 아까만든 GameObject에 연결해주고 링크 시켜줍니다.

실행시키고 Color를 눌러서 색상을 변경해보세요.

다음처럼 변경이 됩니다.

NGUI의 스프라이트(Sprite)는 정말 간단하지만 가장 중요하지 않나 싶네요.

다음에는 버튼을 만들고 버튼 이벤트와 트윈효과 등을 넣어보겠습니다.