Crocodile Tears

- 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는 튜토리얼이나 대사창 등에 효과적으로 

이용하실 수 있습니다.

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

도움되셨길 바랍니다.