유니티 UI 이해 :: UI 스프라이트, 한글폰트 설정, 버튼 작성하기

 

 

캐릭터 이동제어 복습

---

 

Update()에서 Vector3 이동벡터, 회전벡터를 각각 초기화, 키보드 입력받기

FixedUpdate()에서 캐릭터 이동/회전 적용

private Vector3 MoveDirection = Vector3.zero;
private Vector3 RotDirection = Vector3.zero;

//인스펙터 창에서 제어하기 위해 public선언
public float MoveSpeed = 5.0f;
public float RotDegreeSeconds = 180.0f; //1초동안 180도 돌림
public float JumpPower = 10.0f;

Update(){
    MoveDirection = Vector3.zero;
    RotDirection = Vector3.zero;
	
    float vertical = Input.GetAxis("Vertical"); //수직
    float horizontal = Input.GetAxis("Horizontal"); //수평
    
    //버티컬 축의 값을 얻어온다.
    if(vertical != float.Epsilon) // vertical != 0.0f
    {
    	//얻어온 값을 애니메이터의 Speed에 넣어준다.
    	GetComponent<Animator>()?.SetFloat("Speed",Vertical);
        //?가 있으면 Null이 아닐때만 호출된다.
    }
    
	if (Input.GetKey(KeyCode.W)) //이동은 GetKey
    	MoveDirection += transform.forward;
    ...
    if (Input.GetKeyDown(KeyCode.Space)) //Jump는 GetKeyDown
    	GetComponent<Ridgidbody>().AddForce(Vector3.up * JumpPower, ForceMode.Impulse);
        
    //벡터의 정규화
    MoveDirection.Nomalize();
    RotDirection.Nomalize();
}

void FixedUpdate(){
	//매번 리지드바디의 함수를 쓰는 것은 퍼포먼스 저하가 있을 수 있기에
	//움직임에 대한 값이 있을 때만 설정하기 위해 If문 사용.
	If(MoveDirection != Vector3.zero){
    	Vector3 newPosition = Vector3.MoveTowards(transform.position, transform.forward*MoveDirection*1000.0f, MoveSpeed*Time.fixedDeltaTime);
    	GetComponent<Rigidbody>().MovePosition(newPosition);
    }
    
    If(RotDirection != Vector3.zero){
    	//LookRotation은 Vector3를 Quaternion화 시켜준다.
    	Quaternion newQuat = Quaternion.RotateTowards(Quaternion.LookRotation(transform.forward, ))
    	GetComponent<Rigidbody>().MoveRotation(newQuat);
    }
    

}

 

---

 

 

UI 만들기

---

 

에셋 다운로드 & 임포트

 

좋은 케이스 -  아틀라싱(Atlasing)  하나의 파일을 메모리로 로드하여 각 부분부분을 스프라이트로 이용함. 드로우콜을 최대한 줄임.

https://assetstore.unity.com/packages/2d/gui/icons/2d-casual-ui-hd-82080

2D Casual UI HD | 2D 아이콘 | Unity Asset Store

 

 

나쁜 케이스 - 스프라이트 파일 여러개를 따로따로 로드함.

https://assetstore.unity.com/packages/2d/gui/buttons-set-211824

Buttons Set | 2D GUI | Unity Asset Store

 

~~강사님의 코멘트~~

컴퓨터는 2의 배수로 이루어진 texture를 좋아합니다. 최대한 2의 배수로 맞춰주는 것이 좋습니다.

1024*1024 ⭕  /  1024*1026 ❌ (초과된 2만큼의 픽셀때문에 1024*2048의 메모리 소요함.)

 

 

참고❗ 패키징하여 전달할 때는 아래 폴더/파일들만 압축하여 전달하면 된다.
○ Assets
○ Packages
○ ProjectSettings
○ Assembly-CSharp.csproj
○ Assembly-CSharp-Editor.csproj

 

 

 

스프라이트 분할하기

• 스프라이트를 자동으로 나눠주는 방법 > Sprite Mode > Multiple (더 상세히 수정하려면 Sprite Editor 사용)

참고) 스프라이트 에디터가 열리지 않을 경우 Window > Package Manager > Unity Registry > 2D Sprite 임포트

 

 

 

한글 전용 폰트 만들기 + 버튼에 적용하기

 

하이어라키창에서 오른쪽버튼 > UI > Button-TMP 클릭

UI를 관리하는 Canvas 아래 Button오브젝트 생성.

TMP Essentials 임포트

 

 

• 실습을 위해 네이버 무료폰트 검색 > 내려받기

(중요!) 라이센스 확인하기~~

https://hangeul.naver.com/font

 

 

 

 

 

 

다운로드 받은 폰트를 드래그하여 프로젝트창에 넣어줌. 이름은 반드시 영어로!

 

 

• 한글 폰트 사용을 위해 폰트 에셋 크리에이터를 이용하여 폰트에셋 생성.

Window > TextMeshPro > Font Asset Creator 눌러서 폰트에셋 생성해줌.

• Source Font File로 폰트를 드래그
• Sampling Point Size - AutoSizing : 각 글자의 사이즈를 자동으로 사이징. 만약 폰트가 이상하게 출력되는 경우 직접 데이터를 만져보면서 자동 대신 30? 정도로 설정해보고 바꿔볼 수 있다.
• Padding : 글자간의 간격. 패딩이 작으면 용량이 줄고 패딩이 커지면 용량도 커진다. 다만 패딩이 너무 작으면 각 글자가 붙어서 출력될 수 있어 이상하게
• Atlas Resolution : 4096 * 4096 해상도 클수록 폰트가 깨지지않음
• Character Set - Custom Range
• Character Sequence 렌더모드 입력 : 32-126,44032-55203,12593-12643,8200-9900

> Generate Font Atlas 누르고 대기

완성되면 Save 눌러서 저장

 

 

Canvas > Button > Text(TMP) 클릭 > Inspector창에서 TextMeshPro컴포넌트 > FontAsset을 내가 만든 sdf로 변경한다.

 

 

해상도 조정 & UI 앵커 설정

해상도 변경하기. 아래 + 버튼을 누르면 원하는 해상도를 설정하여 추가할 수 있다.

참고자료 : UI - 캔버스,앵커,피봇
https://velog.io/@som4255/%EC%9C%A0%EB%8B%88%ED%8B%B0-UI-%EC%BA%94%EB%B2%84%EC%8A%A4-%EC%95%B5%EC%BB%A4-%ED%94%BC%EB%B4%87

 

오른쪽 아래로 변경하고 버튼 위치도 그에 맞춰 변경해준다.

 

 

canvas scaler > 를 사용하면 간단하게 화면비율에 맞게 조정할 수 있다.

 

상세하고 정확하게 변경하려면 앵커를 활용한다.

창 크기 변화에 호환되게 하려면  앵커로 크기를 맞추거나  창크기에 상관없이 하려면 높이 너비만  조절해서 앵커로 위치만  박아두면 된다.
앵커 조절하는 창에서 알트 누르시면 창 크기에 따라 ui크기도  조절하도록  하는  빨간 선으로 표시되는 기능이 나온다.

여기서 alt를 누르면 스트래치  라는 기능으로 창크기와 호환시키는 기능을 쓸 수 있다.

프리셋으로 몇가지 지정된걸 사용할 수도 있고, 숫자를 열어서 지정할수도 있다.

 

 

보더를 설정하면 크기가 변해도 모서리의 모양이 찌그러지지 않는다.

 

 

 

JumpButton() 어태치 //OnClick() 프로퍼티 바인딩을 사용하는 경우

public class JumpButton : MonoBehaviour
{
    public GameObject character;
    
    public void Jump() //public으로 해야 OnClick에서 찾을 수 있다 ! (자유로운 접근)
    {
        if (character != null)
        {
            CharacterController_Me0605 script = character.GetComponent<CharacterController_Me0605
            >();
            character.GetComponent<Rigidbody>().AddForce(Vector3.up * script.jumpPower, ForceMode.Impulse);
        }
    }
}

드래그하여 프로퍼티 바인딩

 

 

 

Tip👍 :: 프로퍼티 바인딩보다는 Script에서 연결하기
On Click()에서 바인딩하는 것은 비추천! ⇒ 이유: 유니티 프로퍼티 바인딩으로 함수를 이벤트하는건 나중에 큰 곤란을 초래한다.
🧑‍🏫강사님 코멘트 - 버튼에 있는 OnClick() 기능보다는 Script에서 연결해 사용하는 것을 추천합니다. 스크립트에서 연결해두면 어디에 연결되어있는지 바인딩으로 연결했을때보다 찾기 쉽기 때문입니다.

 

 

OnClick() 대신 스크립트에서 연결하는 경우

using UnityEngine.UI; //버튼을 사용하려면 필요한 네임스페이스

public class JumpButton : MonoBehaviour
{
    public GameObject character;
    public Button _jumpButton;
    
    // Start is called before the first frame update
    void Start()
    {
        _jumpButton = GetComponent<Button>();
        
        _jumpButton.onClick.AddListener(Jump);
        //_jumpButton.onClick.AddListener(() => { Jump(); }); 와 동일
    }
    
}