0426 NGUI 버튼, 슬라이더, 스프라이트, 텍스트, input Field

위의 메뉴창에서 NGUI를 가져와 만들 수 있다.

UI 스프라이트를 화면에 배치하는 방식은 UGUI와 비슷하나 훨씬 간편화 되어있다.

UI Root가 저절로 생김. 그 이후 NGUI에 속하는 모든 오브젝트는 UIRoot 안에서 만들어야 한다.

(tag는 UI로 맞춰줌)

캔버스 사이즈 여기서 확인

NGUI는 모든 스프라이트를 아틀라스에서 사용한다.

미리 만들어둔 것과 달리 새로운 것을 만들고 싶으면 New, 후에 스프라이트를 전체 선택하면 자동으로 스프라이트 리스트에 추가된다.

 

버튼 만들기

콜라이더가 이미지 사이즈와 맞아야 버튼이 작동이 된다.

버튼 스크립트를 작성 후 빈 오브젝트에 부착, 컴포넌트 어싸인

using UnityEngine;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour
{
    public UIButton btn;
    // Start is called before the first frame update
    void Start()
    {
        this.btn.onClick.Add(new EventDelegate(() =>
        {
            Debug.Log("click");
        }));
    }

}

마우스를 호버하고 클릭이 된다.

슬라이더 만들기

슬라이더 용 이미지를 슬라이스 해서 slider 컴포넌트 부착 후 assign

using UnityEngine;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour
{
    public UISlider slider;
    [Range(0f,1f)]
    public float sliderValue;

    // Start is called before the first frame update
    void Start()
    {
        StartCoroutine(this.CheckSliderValue());

    }
    private IEnumerator CheckSliderValue() 
    {
        while (true) 
        {
            this.slider.value = this.sliderValue;
            yield return null;
        }
    }
}

코드 작성 후 assign, 아래에 생긴 슬라이더를 직접 움직이면 슬라이더가 작동한다..

텍스트 영역 만들기

해당 부분으로 설정해두면 라벨 영역 변경시에도 글자 크기가 리사이징 되지 않는다.

label은 GUI의 text와 같은 부분.

using UnityEngine;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour
{
    public UIButton btn;
    public UILabel label;

    // Start is called before the first frame update
    void Start()
    {
        this.btn.onClick.Add(new EventDelegate(() =>
        {
            Debug.Log("click");
            this.label.text = "Hello World";
        }));
        
        //버튼 클릭 시 문구가 변경되도록 설정

    }
    
}

스프라이트 아틀라스에서 불러오기

using UnityEngine;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour
{
    public UIButton btn;
    public UILabel label;
    public UISprite thumb;

    // Start is called before the first frame update
    void Start()
    {
        this.btn.onClick.Add(new EventDelegate(() =>
        {
            Debug.Log("click");
            this.label.text = "Hello World";
            thumb.spriteName = "user_info_profile_monster";
            //snap 버튼과 같음
            this.thumb.MakePixelPerfect();
        }));
    }
    //NGUI의 경우엔 스프라이트 파일명을 그대로 붙혀넣기 하면 된다.
    //버튼 클릭시 썸네일이 변경되도록 설정

입력창 만들기

입력창 배경 이미지에다 해당 컴포넌트 붙혀주기

배경 스트라이프 내부에 라벨 오브젝트 만든 후 배경 bg 컴포넌트에 assign

박스 콜라이더 크기 bg사이즈에 맞춘 후 isTrigger 체크해주기

따로 스크립트를 작성하지 않아도 작동된다.

 

using UnityEngine;
using UnityEngine.UI;

public class UILogin : MonoBehaviour
{
    public UILoginButton uiLoginButton;

    // Start is called before the first frame update
    void Start()
    {
        this.Init();
    }

    public void Init() 
    {
        this.uiLoginButton.btnClose.onClick.Add(new EventDelegate(() =>
        {
            this.gameObject.SetActive(false);
        }));
        this.uiLoginButton.btnLogin.onClick.Add(new EventDelegate(() =>
        {
            var username = this.uiLoginButton.inputUsername.text="";
            var pwd = this.uiLoginButton.inputPassword.text="";
            Debug.LogFormat("{0} {1}", username, pwd);

        }));
        this.uiLoginButton.btnLogin.onClick.Add(new EventDelegate(() =>
        {
            Debug.Log("LogIn");
        }));

        //-------------------------------------------------------

        this.uiLoginButton.btnForgotPwd.onClick.Add(new EventDelegate(() =>
        {
            Debug.Log("Remember");
            this.uiLoginButton.isChecked = true;
            this.uiLoginButton.arrChecks[0].SetActive(false);
            this.uiLoginButton.arrChecks[1].SetActive(true);
        }));

        this.uiLoginButton.btnCheck.onClick.Add(new EventDelegate(() =>
        {
            Debug.Log("Forget");
            this.uiLoginButton.isChecked = false;
            this.uiLoginButton.arrChecks[0].SetActive(true);
            this.uiLoginButton.arrChecks[1].SetActive(false);

        }));
    }
}

using UnityEngine;
using UnityEngine.UI;

public class UILoginButton : MonoBehaviour
{
    public UIButton btnClose;
    public UIButton btnLogin;
    public InputField inputUsername;
    public InputField inputPassword;
    public UIButton btnForgotPwd;
    public UIButton btnCheck;
    public bool isChecked;

    public GameObject[] arrChecks;

}