[멋쟁이사자처럼부트캠프] 유니티 게임 개발 5기(15일차) - 사운드 및 UI 활용

✅ 오늘의 학습 목표
1. Cat씬 애니메이션 및 사운드 적용
2. UI 활용

 

1. Cat

기존에 cat 씬의 애니메이션은 걷는 애니메이션만 구현되었었다.

이전 수업과 동일하게 고양이 캐릭터에도 점프 애니메이션을 구현해 보자!

 

1. 점프 애니메이션

 

고양이의 점프 애니메이션을 구현해 주기 위해서

기존에 다운로드 받았던 Cat 패키지의 Run 이미지를 활용해 줄 것이다.

 

• Pixels Per Unit : 고양이의 크기가 작아서 15로 사이즈 조절
• Compression : 압축 X

 

 

Trigger 파라미터를 생성해서 애니메이션을 위와 같이 적용해 준다.

 

using UnityEngine;

public class CatController : MonoBehaviour
{
    private Rigidbody2D catRb;
    
    // 새로 추가
    private Animator catAnim;

    public float jumpPower = 10f;
    public bool isGround = false;

    public int jumpCount = 0;

    void Start()
    {
        catRb = GetComponent<Rigidbody2D>();
        
	// 새로 추가
        catAnim = GetComponent<Animator>();
    }

    void Update()
    {
        // 2단 점프 구현
        if (Input.GetKeyDown(KeyCode.Space) && jumpCount < 2)
        {
            //새로 추가
            catAnim.SetTrigger("Jump");

            catRb.AddForceY(jumpPower, ForceMode2D.Impulse);
            jumpCount++;
        }
    }

    private void OnCollisionEnter2D(Collision2D other)
    {
        if (other.gameObject.CompareTag("Ground"))
        {
            isGround = true;
            jumpCount = 0;
        }
    }

    private void OnCollisionExit2D(Collision2D other)
    {
        if (other.gameObject.CompareTag("Ground"))
        {
            isGround = false;
        }
    }
}

 

점프할 경우에만 점프 애니메이션이 동작될 수 있도록 코드를 수정해 주었다.

 

위 코드의 문제점은 고양이 오브젝트가 점프하고 있을 때에는 계속 점프 애니메이션이 동작되어야 하는데,

점프 애니메이션이 끝나고 나면 바로 걷는 애니메이션으로 전환되는 점이다.

 

 

Bool 타입의 파라미터 IsGround를 생성하고

바닥에 닿았을 때에만 걷기 애니메이션이 실행되도록 코드를 수정해 주었다.

void Update()
{
    // 2단 점프 구현
    if (Input.GetKeyDown(KeyCode.Space) && jumpCount < 2)
    {
        catAnim.SetTrigger("Jump");
        catAnim.SetBool("IsGround", false);

        catRb.AddForceY(jumpPower, ForceMode2D.Impulse);
        jumpCount++;
    }
}

private void OnCollisionEnter2D(Collision2D other)
{
    if (other.gameObject.CompareTag("Ground"))
    {
        // 점프 중일 때 계속 점프 애니메이션이 작동되도록
        catAnim.SetBool("IsGround", true);

        isGround = true;
        jumpCount = 0;
    }
}

 

그런데도! 점프 애니메이션에서 걷는 애니메이션으로 바뀔 때의 약간의 딜레이? 같은 것이 있다.

이 부분을 좀 보완해 주기 위해서 인스펙터 창에 셋팅값을 조금 변경해 주었다.

 

Has Exit Time : 애니메이션의 Exit (탈출)까지의 걸리는 시간을 뜻함

Transition Duration : 화살표를 지날 때의 시간 (좀 틈을 주고 다른 애니메이션으로 전환하냐, 아니면 바로 전환하냐 차이!)

 

2. 사운드 적용

2.1. 사운드 오브젝트 생성

 

2.2. 사운드 클립 설정 (인스펙터 편)

 

인스펙터 창에 오디오 항목들의 기능은 아래와 같다!

오디오 인스펙터 항목	설명
Audio Resource	재생할 오디오 클립 지정 (.mp3, .wav 등)
Output	연결할 오디오 믹서 그룹 지정 (없으면 기본 출력 사용)
Mute	체크 시 소리를 재생하지 않음 (무음 처리)
Bypass Effects	오디오 소스에 적용된 이펙트 무시
Bypass Listener Effects	오디오 리스너에 적용된 이펙트 무시
Bypass Reverb Zones	리버브 존 효과 무시 (환경 반향 제거)
Play On Awake	씬 시작 시 자동으로 재생 여부 설정
Loop	오디오 클립을 반복 재생할지 여부
Priority	재생 우선순위 (0 = 가장 높음, 256 = 가장 낮음)
Volume	재생 볼륨 조절 (0 = 무음, 1 = 기본)
Pitch	재생 속도 조절 (1 = 원래 속도, 2 = 2배 빠름)
Stereo Pan	좌/우 방향 조절 (-1 = 왼쪽, 1 = 오른쪽)
Spatial Blend	2D ↔ 3D 오디오 혼합 (0 = 완전 2D, 1 = 완전 3D)
Reverb Zone Mix	리버브 존의 효과 강도 조절 (0~1)

 

2.3. 사운드 클립 설정 (스크립트 편)

여기서 점프 사운드는 한 번만 실행되도록 코드를 구현해 주었다.

using UnityEngine;

// 네임 스페이스 설정
namespace Cat
{
    public class SoundManager : MonoBehaviour
    {
        public AudioSource audioSource;
        public AudioClip jumpClip;
        public AudioClip bgmClip;

        private void Start()
        {
            SetBgmSound();
        }

        // 인스펙터뿐만 아니라 스크립트를 통해서도 오디오 설정 가능
        public void SetBgmSound()
        {
            audioSource.clip = bgmClip;
            audioSource.playOnAwake = true;
            audioSource.loop = true;

            audioSource.Play();
        }

        public void OnJumpSound()
        {
            // PlayOneShot = 한번만 실행
            audioSource.PlayOneShot(jumpClip);
        }
    }
}

 

Sound Manager을 public으로 선언해 주었기 때문에 Cat Controller가 적용된 오브젝트에 Sound Manager 스크립트를 추가해주어야 한다.

그리고 오디오 오브젝트의 Audio Source에는 Sound Manager 스크립트를 넣는 게 아니라 오디오 오브젝트 자체를 넣어주어야 한다.

 

그런 다음 CatController 스크립트에 생성한 Cat 네임스페이스를 추가해 주고,

관련된 사운드 기능을 넣어주고 게임을 실행하면 오디오가 제대로 작동하는 것을 확인할 수 있다.

 

2. UI

사용자가 프로그램의 정보를 보거나 상호작용할 수 있는 기능 (사람과 컴퓨터, 시스템, 기기 등 그 사이에서 일어날 수 있는 상호작용을 매개하는 것)

• UGUI : 유니티에서의 GUI는 UGUI로 불린다.

Canvas - Render Mode	설명	사용 예시	카메라 필요 여부
Overlay	UI가 화면 위에 직접 그려짐 (카메라와 무관)	체력 바, 점수, 게임 메뉴 등 2D HUD	X
Camera	UI가 특정 카메라를 기준으로 그려짐 (원근감 없음)	월드 공간에 고정된 UI, 3D UI와 혼합	O
World Space	UI 요소가 실제 3D 오브젝트처럼 존재	NPC 위 이름표, 게임 내 상호작용 UI, VR UI	X

 

 

이 이미지를 보면 Render Mode가 대략적으로 무엇을 의미하는지 알 수 있다

World Space는 캐릭터의 이름표나, 캐릭터가 특정 대상에게 가까워질 때 나타나는 텍스트 등을 의미한다.

 

 

UI 오브젝트도 기존 오브젝트 생성과 동일하게  생성한다.

특이한 것은 EventSystem 이라는 파일도 같이 생성된다.

 

 

화면 해상도에 따라 사이즈를 조절하는 기능도 있으니 화면에 잘 나오도록 크기를 조절해 주자!

 

1. 텍스트

UI의 필수 텍스트를 삽입하려고 한다.

그런데 유니티에서는 한글 폰트를 제공하지 않기 때문에 한글로 텍스트를 넣을 경우 □ □ □ □ 이런 식으로 표기된다.

우리가 직접 폰트를 추가해 주자

 

1.1. 폰트화

 

우리가 import한 폰트는 픽셀 기반이라 크기에 따라 화질이 좌우될 수 있다

그래서 SDF를 활용해서 폰트를 렌더링 해준다.

 

한글이 잘 적용되는 것을 확인할 수 있다!

 

1.2. 특수문자 적용

 

뷁, 뾺, 특수문자 등등 일부 글자의 경우 여전히  □ □ □ □ 로 나타난다.

이 부분을 보완해 주기 위해 폰트의 설정값을 바꿔주자

 

[편집창]

1. 윈도우 창을 통해서 편집창으로 이동

2. 인스펙터 창에서 Update Atlas Texture을 클릭해서 편집창으로 이동

 

Custom Range로 세팅값을 바꿔준 후 적용할 폰트와 패딩값 등을 설정해 준 후 입력칸에 아래 아스키코드를 입력해 준다.

32-126,44032-55203,12593-12643,8200-9900

 

 

1.3. 폰트 기본값 설정

Text UI를 추가할 때마다 폰트가 기본 폰트로 적용된다.

이 기본값을 바꾸기 위해서 프로젝트 세팅에서 설정해 준다

 

 

1.4. 고양이 움직임에 따라 Text UI가 따라오도록 설정

위에서 World Space 모드에 대해 정리해 놓은 부분이 있다.

글로만 써놔서 뭐지? 했다면 지금은 실습을 통해서 육안으로 확인해 보자!

 

Cat 오브젝트 아래 캔버스를 생성해 주고 캔버스의 렌더 모드를 World Space로 설정해 준다.

 

 

그리고 캔버스 하위에 Image, 그 하위에 Text UI를 생성해 준다.

텍스트 편집이 원활하게 될 수 있도록 Wrapping Mode를 No Wrap으로 설정해 준다.

 

이미지와 텍스트 모두 화면에 확장되도록 앵커를 설정해 준다.

 

Cat 오브젝트 하위에 캔버스가 World Space로 설정되었기 때문에

텍스트 UI가 고양이 오브젝트를 따라다니는 것을 확인할 수 있다.

 

2. 버튼

버튼 UI를 실습해 보겠다

 

버튼도 동일하게 UI 추가해 주면 되고

 

인스펙터를 확인해 보면 버튼의 색깔을 넣을 수 있는 창이 있다.

백문이 불여일견 gif로 마우스 동작에 따른 색깔 변화를 확인해 보자

• 빨간색 : 기본
• 노란색 : 커서를 버튼에 가져다 놓았을 때
• 초록색 : 버튼을 클릭했을 때
• 주황색 : 버튼이 눌려졌을 때

버튼의 이벤트에 따라 색깔이 바뀐다는 것은 버튼 이벤트가 있다는 뜻!

이걸 응용해서

버튼에 이미지를 넣고, 버튼을 클릭하면 기존의 Cat 오브젝트들이 나오도록 해보겠다.

 

2.1. Cat 오브젝트 비활성화

 

Cat과 관련된 오브젝트들을 그룹화하여 비활성화해준다.

빈오브젝트를 새로 생성하지 않고 단축키로 그룹화해줘도 되는데

이유는 피봇 같은 걸 활용하지 않을 것이기 때문에 가능하다.

 

(나는 그룹화한 이 오브젝트들의 이름을 PLAY로 해주었다)

 

2.2. 버튼에 이미지 넣기

 

버튼에 이미지를 삽입해 주고,

클릭 이벤트가 발생될 수 있도록 Target을 체크해 준다.

 

2.3. 이벤트 적용

 

패널은 빈 오브젝트처럼 계층구조를 활용한 그룹화나 스크립트 실행 용도로 사용된다

 

OnClick 메소드에 게임오브젝트의 bool값을 가져와서 화면을 바꿔치기(?) 해보는 방식이다.

 

버튼을 클릭했을 때 Play 오브젝트들이 나타나야 하니 bool값에 체크되어 있고 (true)

버튼을 클릭했을 때 Intro 오브젝트는 사라져야 하니 bool 값에 체크하지 않는다. (false)

 

2.4. Text UI 애니메이션 적용 후 버튼 이벤트 결과

 

버튼을 클릭하면 Cat 게임이 나타난다!

 

---

 

 

예전에 유니티 독학으로 했을 때에는 버튼 이벤트를 씬 하나 더 만들어서 씬 자체가 변경되게 했었는데..

오늘 이렇게 씬 변환 없이도 화면이 전환되는 걸 보고 우왁.. 나 진짜 힘들게 구현했었구나 싶었다 ㅋㅋ큐ㅠ

 

 

예전에 했던 거 찾아와 봤는데 22년도 버전이라 혹시 지금 하고 있는 프로젝트랑 충돌 나는 건 아니겠지..? 하면서 일단 열어봄..

근데 맥으로 열었을 때는 화면이 잘 맞는데 윈도우로 여니까 뭔가 안 맞네 머지

이때의 내 지식은 믿을 수 없기에 ㅋ.. 뭔가 잘못되긴 됐나 보다..^-^

 

암튼 점점 성장하는 게 보이니까 재밌다! 계속 열심히 해보자 아좌좌~⭐