UI 비법서 (7) 

Button 컴포넌트

 

작성 기준 버전 :: 2019.2

 

[이 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다.]

 

아마 게임을 하면서 플레이어와 제일 많은 상호작용을 하는 UI 요소는 바로 버튼일 것이다. 버튼은 마우스의 클릭에 반응해서 지정해둔 기능을 동작하게 하는 UI이다. 이렇게 설명만 들어도 간단해보이는 Button 컴포넌트가 이렇게 영상까지 만들어서 이야기할 필요가 있을까 싶을 것이다.

 

버튼 게임 오브젝트 생성하기

 

하지만 이렇게 간단해보이는 Button 컴포넌트에도 유용하게 사용할 수 있는 팁들이 꽤 있다.

 

 

하이어라키 뷰에 우클릭하고 [UI > Button]을 선택하면 버튼 게임 오브젝트를 생성할 수 있다.

 

 

생성된 버튼 게임 오브젝트에는 Image 컴포넌트와 Button 컴포넌트가 부착되어 있는 것을 볼 수 있다. 거기에 기본적으로 버튼 게임 오브젝트 아래에는 버튼에 글자도 표시되게 Text 컴포넌트가 붙어있는 게임 오브젝트도 자식으로 있는 것을 알 수 있다. 이게 버튼의 제일 기본적인 상태이다.

 

Button 컴포넌트의 프로퍼티

 

그럼 Button 컴포넌트의 프로퍼티들을 하나씩 알아보도록 하자.

 

Interactable

 

첫 번째 프로퍼티는 Interactable이다. Interactable은 버튼이 상호작용 가능한지를 정하는 프로퍼티입니다.

 

 

먼저 Interactabla이 체크된 상태에서 클릭해보면 클릭할 때마다 버튼이 깜빡깜빡하며 버튼과 마우스 사이의 상호작용이 일어나고 있는 것을 확인할 수 있다.

 

 

Interactable을 끄면 먼저 버튼의 색깔이 약간 어두워지고 반투명해지는 것을 볼 수 있다. 그 상태에서 버튼을 클릭해보면 아까와는 다르게 상호작용하면서 발생하는 깜빡임이 나타나지 않는 것을 알 수 있다.

 

이 프로퍼티는 특정한 조건에 따라서 버튼을 활성화/비활성화 하는 기능으로 응용할 수 있다.

 

Transition

 

그다음 프로퍼티는 Transition이다. Transition은 버튼이 각 상호작용 상태에서 어떤 모습으로 보일 것인지를 결정한다.

 

 

버튼의 상호작용 상태로는 먼저 아무런 상호작용도 일어나고 있지 않은 Normal, 마우스가 버튼 위에서 호버링되고 있는 상태인 Highlighted, 버튼을 클릭하고 손을 떼지 않은 상태인 Pressed, 버튼에 클릭을 하고 손을 뗀 상태인 Selected, 버튼이 비활성화된 Disabled. 

 

이렇게 총 5가지가 있다.

 

그리고 선택 가능한 Transition의 종류로는 None, Color Tint, Sprite Swap, Animation이 있다.

 

None

 

None 타입의 트랜지션은 버튼과의 상호작용이 일어나도 아무런 표현을 하지 않는 타입이다.

 

Color Tint

 

버튼을 생성하면 기본 트랜지션으로 설정되는 Color Tint는 버튼에 상호작용을 했을 떄 상태변화를 생상으로 표현하는 것이다.

 

위에서 버튼을 클릭할 때마다 버튼이 깜빡깜빡하던 것을 기억할 것이다. 여기 Pressed를 보면 색깔이 약간 어두운 색으로 되어 있다. 이 Pressed에 설정된 색상이 버튼 이미지에 합쳐져서 버튼을 클릭할 때마다 깜빡거렸던 것이다.

 

Sprite Swap

 

Sprite Swap은 버튼의 상호작용 상태에 따라서 버튼 게임 오브젝트의 Image를 완전히 교체하는 방식이다.

 

 

Transition을 Sprite Swap으로 바꾸면 각 버튼 상호작용 상태에 따라서 색깔을 바꾸던 프로퍼티들이 스프라이트를 넣도록 바뀐 것을 볼 수 있다.

 

Sprite Swap 타입에서는 Normal 상태가 없는 것을 볼 수 있는데 Sprite Swap의 기본 상태는 버튼에 붙은 기본 이미지의 Image Source여서 바꿔넣을 필요가 없기 때문이다.

 

  

버튼 이미지에 기본 이미지를 넣고 Pressed에 버튼이 눌린 이미지를 넣으면 위의 그림과 같이 버튼이 눌리는 듯한 연출이 가능하다.

 

Animation

 

Animation 타입은 버튼의 색깔만 바뀌는 Color Tint나 이미지만 바뀌는 Sprite Swap에 비해서 좀 더 복잡하고 다양한 연출이 필요할 때 사용한다.

 

 

Animation 타입에서 Transition의 하위 프로퍼티는 각 상태에 맞는 이름으로 되어있는데 버튼 애니메이션에 추가될 스테이트와 파라미터의 이름을 지정하는 부분입니다. 이 부분은 따로 손댈 필요가 없다.

 

아래에 있는 Auto Generate Animation 버튼을 누르면 버튼에 대한 애니메이터 컨트롤러를 생성하는 대화상자가 뜬다. 여기서 애니메이터를 생성하면 하면 자동으로 버튼 게임 오브젝트에 애니메이터 컴포넌트가 추가되고 애니메이터에서 필요한 스테이트와 파라미터들이 자동으로 생성된다.

 

버튼 게임 오브젝트를 선택한 상태로 [Ctrl +6] 단축키를 누르면 애니메이션 뷰가 열리는데 개발자는 여기서 각 상태의 애니메이션 키만 잡아주면 된다.

 

 

  

이미지 하나를 버튼의 자식 게임 오브젝트로 만들고 버튼 위에 마우스를 올렸을 때, 이미지를 활성화 시키면서 360도 회전시키는 애니메이션을 만들어보자.

 

 

그 다음 플레이시킨 뒤 버튼에 마우스를 올려보면 버튼 앞에서 사각형이 나타나서 회전하는 것을 볼 수 있다.

 

이런 연출은 확실히 Color Tint나 Sprite Swap으로는 할 수 없는 연출이다. 일반적으로는 Color Tint나 Sprite Swap을 사용하지만 버튼과의 상호작용 연출에서 이런 다양한 연출을 사용하려면 Animation 타입의 Transition을 사용하는 것이 좋다.

 

Navigation

 

그 다음 프로퍼티인 Navigation은 모든 UI 컴포넌트에 있는 것으로 키보드나 패드로 UI를 선택할 때 어떤 순서로 포커스가 넘어갈 것인지를 결정하는 옵션dl다.

 

On Click 이벤트

 

 

On Click()은 버튼을 눌렀을 때 실행될 기능을 넣을 수 있는 On Click 이벤트 리스트이다.

 

public class ButtonTester : MonoBehaviour
{
    public void OnClickButton()
    {
        Debug.Log("Button Click!");
    }
}

 

On Click에 실행될 함수를 이벤트로 등록해주기 위해서는 스크립트에서 public으로 된 함수를 만들면 된다.

 

 

그리고 버튼에 스크립트로 작성한 컴포넌트를 추가하고 On Click 항목의 [+] 버튼을 누른 뒤 비어있는 오브젝트 란에 호출할 함수를 가진 컴포넌트를 넣어주고 호출해야할 함수를 선택해주면 된다.

 

이렇게 함수를 선택해주면 이 버튼이 클릭되었을 때, 이 함수가 실행되게 된다.

 

스크립트에서 On Click 이벤트 등록하기

 

버튼의 응용 기술로는 이렇게 에디터에서 고정으로 이벤트를 등록하지 않고 스크립트에서 동적으로 등록해주는 방법이 있다.

 

using UnityEngine.UI;

public class ButtonTester : MonoBehaviour
{
    Button button;

    public void OnClickButton()
    {
        Debug.Log("Button Click!");
    }

    void Start()
    {
        button = GetComponent<Button>();
        button.onClick.AddListener(OnClickButton);
    }
}

 

스크립트에서 Button 컴포넌트와 같은 UI의 기능을 사용하기 위해서는 UI 네임 스페이스를 using 선언해줘야 한다.

 

그 다음에는 Button 변수를 선언하고 Start 함수에서 GetComponent로 게임 오브젝트에 부착된 Button 컴포넌트를 가져온다. 그리고 button.onClick.AddListener에 함수를 넣어주면 이 함수가 이 버튼을 클릭했을 때 호출되는 이벤트로 등록된다.

 

게임을 플레이해보면 Button 컴포넌트의 On Click에서는 아무런 이벤트가 등록되지 않은 것처럼 보이지만 게임 뷰에서 버튼을 클릭해보면 스크립트에서 버튼의 이벤트로 등록해준 ButtonTester의 OnClickButton 함수가 정상적으로 호출되어 로그를 출력하는 것을 볼 수 있다.

 

버튼 터치 영역 키우기

 

모바일 기기에서 작은 버튼은 터치가 잘 안되거나 잘못 터치할 확률이 높다. 이런 문제를 해결하기 위해서 그냥 버튼의 크기를 키워버릴 수도 있지만 그렇게 하면 디자이너가 지정해준 전체적인 UI 레이아웃이 깨지게 될 것이다. 그러니 실제로 보이는 버튼의 크기는 키우지 않고 버튼의 터치 영역만 키워야 한다.

 

 

우선 버튼의 자식 컴포넌트로 이미지를 하나 추가하고 적당히 버튼을 덮도록 세팅한 다음 투명하게 만들어주면 된다.

 

 

그러면 눈에 보이는 버튼 이미지보다 바깥을 클릭해도 버튼이 무사히 동작하는 것을 볼 수 있다.

 

이것을 응용해서 버튼보다 작은 투명 이미지를 만들고 그 투명 이미지를 제외한 나머지의 Raycast Target을 끄는 방법으로 실제 버튼 이미지보다 작은 영역만 클릭 가능하게 만드는 것도 가능하다.

 

버튼 이미지보다 작은 영역에 터치를 받는 테크닉은 잘 사용되지 않을 것 같지만 버튼 이미지 리소스 외곽에 그림자나 글로우가 들어간 경우에 글로우 영역이나 그림자 영역을 제외하고 실제 버튼 영역에만 클릭을 받기 위해서 사용되는 경우가 종종 있다.

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

Animation 

애니메이션 이벤트

 

작성 기준 버전 :: 5.6 - 2019.2

 

[이 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다]

 

게임에서는 애니메이션이 실행되는 도중에 적절한 타이밍에 맞춰서 무언가가 실행되어야 하는 경우가 종종 발생한다. 예를 들자면 캐릭터가 이동할 때 발 동작에 맞춰서 발소리가 나거나 먼지가 일어나야 하는 경우, 캐릭터가 무기를 휘두를 때 타이밍에 맞춰서 대미지가 들어가야 하는 경우등이 있을 수 있다.

 

이때 발 움직임과 다르게 소리가 나거나 공격하는 동작과 다르게 대미지가 들어간다면 플레이어는 굉장히 거슬리는 느낌을 받게 될 것이다.

 

이런 애니메이션과 리액션의 타이밍을 맞추기 위해서 존재하는 기능이 바로 유니티의 애니메이션 이벤트이다. 이 기능은 애니메이션 실행 도중에, 원하는 시점에 원하는 함수를 호출할 수 있게 해준다.

 

애니메이션 이벤트를 사용하는 방법은 FBX 모델과 함께 임포트된 애니메이션에서 사용하는 방법과 애니메이션 클립에서 사용하는 방법, 이렇게 2가지가 있다.

 

방법 1 : FBX 파일에서 모델과 함께 임포트된 애니메이션에서 애니메이션 이벤트 사용하기

 

 

프로젝트 뷰에서 임포트한 FBX 파일을 선택하면 인스펙터 뷰에 그 FBX 파일의 정보들이 보인다. 그 중에 상단의 Animations 탭을 선택하면 그 FBX에 포함된 애니메이션의 정보를 볼 수 있다.

 

애니메이션 이벤트 기능은 Events 항목에서 볼 수 있다.

 

 

접혀있는 Events 항목을 열면 이런 타임라인과 비활성화된 필드를 볼 수 있다.

 

 

애니메이션에 이벤트를 추가하기 위해서는 먼저 이벤트를 추가할 지점을 애니메이션에서 선택해야 하는데 인스펙터 뷰의 제일 아래를 보면 이렇게 지금 선택한 FBX 파일에 포함되어 있는 애니메이션을 미리보기로 재생해볼 수 있는 부분이 있다.

 

여기서 재생 버튼 옆의 타임라인을 클릭해보면 애니메이션의 특정 지점을 선택할 수 있게 된다.

 

이 타임라인에서 애니메이션 지점을 선택하면 위쪽의 전체 애니메이션 타임라인은 물론이고 Events의 타임라인도 함께 움직이는 것을 볼 수 있다.

 

 

애니메이션 중에 팔을 적절한 지점을 선택하고 Events 타임라인 앞에 있는 버튼을 클릭하면 그러면 Events 타임라인에 작은 표식이 생기며 아래 쪽에 있는 입력 가능한 필드들이 활성화되는 것을 볼 수 있다.

 

참고로 파란색 표식을 잡고 드래그하면 언제든지 이벤트가 실행될 시점을 조절할 수 있다.

 

 

 필드 이름 내용 
Function  이벤트 시점에 호출할 함수의 이름 
Float  함수에 float형 매개변수가 있을 때 들어갈 값 
Int  함수에 int형 매개변수가 있을 때 들어갈 값 
String  함수에 string형 매개변수가 있을 때 들어갈 값 
Object  함수에 Object형 매개변수가 있을 때 들어갈 값 
 
필드에 입력되는 내용은 위와 같다.
 
참고로 애니메이션 이벤트가 함수를 호출하는 방식은 여기에 넣어준 함수 이름으로 애니메이터 컴포넌트가 붙어있는 게임 오브젝트에 부착되어 있는 모든 컴포넌트에서 같은 이름을 가진 함수를 찾아서 실행하는 것이다.

 

만약 게임 오브젝트에 붙어있는 A라는 컴포넌트와 B라는 컴포넌트가 둘 다 Attack이라는 함수를 가지고 있다면 이 두 함수가 모두 호출된다.

 

 

Attack 애니메이션이니 이벤트에서 호출할 함수의 이름은 Attack으로 설정하고 매개변수에는 스크립트에서 여기에 입력된 값들이 넘어오는 것을 체크하기 위해서 Float에는 3.14, Int에는 10, String에는 hello, Object에는 씬에서 큐브 게임 오브젝트를 하나 생성한 뒤 프리팹으로 만들어서 넣어주자.

 

그리고 Apply 버튼을 누르면 추가한 애니메이션 이벤트가 완전히 적용된다.

 

 

그리고 Attack 애니메이션을 재생할 애니메이터 컨트롤러를 만들어서 애니메이터 뷰를 열고 Attack 트리거를 만들어준 다음 Stand와 Attack 애니메이션을 스테이트로 넣어주고, Attack 트리거가 들어오면 Attack 애니메이션이 재생된 다음 Stand로 돌아가게 구성해준다.

 

그리고 BoxMan을 씬에 배치하여 애니메이터에 애니메이터 컨트롤러를 넣어준다.

 

using UnityEngine;

public class AttackComponent : MonoBehaviour
{
    private void Attack()
    {
        Debug.Log("Damage");
    }
}

 

애니메이션 이벤트가 실행할 함수를 만들어주기 위해서 AttackComponent C# 스크립트를 생성하고 코드를 작성한다.

 

 

애니메이션 이벤트는 앞에서 이야기한 것과 같이 애니메이션 이벤트가 포함된 애니메이터 컨트롤러를 가진 컴포넌트과 같은 게임 오브젝트에 부착된 컴포넌트 중에서 이벤트의 Function에 넣어준 이름과 같은 함수를 찾아서 실행해준다.

 

애니메이션 이벤트의 매개변수

 

private void Attack(float f)
{
    Debug.Log("Damage");
}

private void Attack(int i)
{
    Debug.Log("Damage");
}

private void Attack(string str)
{
    Debug.Log("Damage");
}

private void Attack(Object obj)
{
    Debug.Log("Damage");
}

 

애니메이션 이벤트를 정의할 때 넣어준 매개변수를 받아오기 위해서는 이벤트로 만든 함수의 비어있는 괄호 안에 받아올 매개변수 타입과 이름을 넣어주면 된다. 

 

애니메이션 이벤트의 매개변수를 사용할 때 주의할 점이 있는데, 애니메이션 이벤트 함수에서 받아올 수 있는 매개변수의 종류는 하나 뿐이라는 것이다.

 

private void Attack(float f, int i)
{
    Debug.Log("Damage");
}

 

그래서 이렇게 하나보다 많은 매개변수를 가져오려고 하면 애니메이션 이벤트가 실패하게되서 제대로 동작하지 않게 되므로 애니메이션 이벤트의 매개변수를 사용할 때는 하나의 매개변수 타입만을 받아와서 사용해야 한다.

 

그리고 한 컴포넌트에 같은 이름의 함수를 여러 개 만들어두면 스크립트 파일에서 제일 상단에 만들어둔 함수 하나만 이벤트로 호출된다.

 

방법 2 : 애니메이션 클립에서 애니메이션 이벤트 사용하기

 

애니메이션 클립은 유니티 엔진에서 3D 모델없이 애니메이션에 대한 정보만을 가지고 있는 것을 이야기한다. 애니메이션 클립을 만드는 방법은 유니티 엔진에서 직접 만드는 방법도 있고 FBX 파일에서 애니메이션 클립 만을 추출해서 사용할 수도 있다.

 

 

FBX 파일에서 애니메이션 클립 만을 추출하기 위해서는 FBX 파일의 접힌 부분을 확장해보면 재생 버튼 모양의 애니메이션 클립이 보이는데 이것을 선택하고 [Ctrl + D] 단축키를 누르면 애니메이션 클립이 복사되어 추출된다.

 

애니메이션의 최적화를 위해서 이렇게 모델링 정보를 제외하고 애니메이션 클립만 추출해서 사용하기도 한다.

 

애니메이션 클립을 선택하고 [Ctrl + 6] 단축키를 누르면 애니메이션 뷰가 열리고 현재 선택한 애니메이션의 키 값 등의 정보가 표시된다.

 

 

애니메이션 뷰에서도 FBX 파일의 애니메이션 이벤트에서 봤던 것과 같은 모양의 AddEvent 버튼을 볼수 있는데 이것을 누르면 새로운 이벤트를 생성할 수 있다.

 

 

이렇게 추가한 이벤트를 선택하면 인스펙터 뷰에서 FBX 파일에서 이벤트를 만들 때와 같이 호출할 함수의 이름과 매개변수를 넣을 수 있게 되어있다.

 

이 후에는 앞에서와 같이 여기서 추가한 이벤트의 이름과 같은 함수를 스크립트에서 만들어주면 애니메이션 이벤트 기능이 정상적으로 동작하는 것을 확인할 수 있다.

 

애니메이션 이벤트의 단점

 

이 애니메이션 이벤트는 굉장히 편리해보이지만 몇 가지 단점이 있어서 신중하게 사용해야 한다.

 

첫 번째 단점은 레거시(Legacy) 애니메이션을 사용할 때 프레임이 심하게 낮아지거나, 메카님 애니메이션에서 트랜지션을 설정할 때 블랜드되는 과정을 잘못 설정하면 애니메이션 이벤트가 실행되지 않는 경우가 발생할 수 있다.

 

이동할 때 먼지가 발생하는 수준의 기능이면 큰 문제가 되지 않겠지만, 앞에서 구현한 예시처럼 타이밍에 맞춰서 대미지를 넣는 기능을 애니메이션 이벤트로 만들었는데 이게 스킵되는 문제가 발생하면 게임에 심각한 영향을 미치게 된다.

 

두 번째 단점으로는 함수의 호출 구조를 파악하는게 어려워진다는 것이다.

 

 

스크립트 에디터에서 애니메이션 이벤트로 만든 함수를 보면 위쪽에 참조 0개라는 글자가 보인다. 이것은 이 함수를 전체 스크립트에서 몇 군데의 위치에서 호출하고 있는지를 알려준다.

 

 

예를 들어서 Start 함수에서 이 Attack 함수를 호출하고 있다면 참조 0개가 참조 1개로 바뀌는 것을 볼 수 있다.

 

 

이 글자를 클릭해보면 어디서 호출되고 있는지 볼 수 있고 호출되고 있는 위치로도 바로 이동할 수도 있다.

 

게임에 버그가 발생했을 때는 이런 방식으로 호출 구조를 파악해서 흐름을 확인해야 하는 경우가 많은데 애니메이션 이벤트로 호출된 함수는 이 참조에 표시되지 않기 때문에 문제가 발생했을 때 문제가 발생한 지점을 찾기가 어려워 진다.

 

세 번째 단점은 네트워크 게임을 만들 때 애니메이션 이벤트를 사용하면 굉장히 곤란한 문제가 발생할 확률이 높다는 것이다.

 

공격과 대미지 타이밍 같은 처리는 굉장히 중요한 판정으로 분류되기 때문에 네트워크 게임에서는 주로 서버가 처리해야되는 작업인데 서버는 최적화가 굉장히 중요하기 때문에서 애니메이션 재생 같은 부분은 처리하지 않도록 하는 경우가 많다.

 

그렇게 최적화를 진행한 서버에서는 애니메이션 재생이 진행되지 않으니 애니메이션 이벤트 역시 실행되지 않을 것이다. 그렇기 때문에 네트워크 게임에서는 공격 타이밍과 관련된 방법을 애니메이션 이벤트가 아닌 다른 방법으로 구현해야 한다.

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

콜리전과 콜리전 이벤트

 

작성 기준 버전 :: 4.21.1

 

콜리전(Collision)은 언리얼 엔진에서 물리적인 충돌이나 레이 캐스팅 실시간 처리를 해준다. 이러한 물리 시뮬레이션은 Collision Response(콜리전 반응) 및 Trace Response(트레이스 반응) 설정을 통해서 다른 오브젝트 유형과 어떻게 상호작용할지 정의된다.

 

블록(Block), 겹침(Overlap), 무시(Ignore)

 

충돌 작용은 블록(Block), 겹침(Overlap), 무시(Ignore)로 나누어진다.

 

 

블록은 충돌하는 두 오브젝트가 모두 블록이어야 두 오브젝트가 충돌했을 때, 겹치지 않고 서로에게 막히게 된다. 콜리전 옵션 중에 Simulation Generates Hit Event 프로퍼티를 true로 설정하면 이러한 충돌이 발생했을 때 Event Hit을 받아서 블루프린트나 디스트럭터블 액터, 트리거 등에 사용할 수 있고 이를 응용해서 총알에 맞아서 깨지는 유리창 등을 구현할 수 있다.

 

 

겹침은 다른 오브젝트를 통과시키지만, 만약 Generate Overlap Event가 활성화된 상태라면 Overlap Event를 발생시킨다. 이 겹침 이벤트가 발생하려면 두 오브젝트 모두 겹침 이상으로 설정되어 있어야 한다. 만약 한 쪽은 겹침이고 다른 한 쪽이 무시인 상태라면 겹침 이벤트는 발생하지 않는다.

 

 

무시는 모든 오브젝트와 트레이스를 통과시키며 어떠한 이벤트도 발생시키지 않는다.

 

 

콜리전 이벤트

 

콜리전이 발생시키는 이벤트를 다루는 방법에 대해서 배워보자.

 

히트 이벤트(Hit Event)

 

히트 이벤트는 블록 상태인 오브젝트들이 서로 충돌했을 때 발생하는 이벤트로 해당 오브젝트에게 통지된다. 히트 이벤트를 발생하게 하기 위해서는 우선 콜리전의 프로퍼티 중에 Simulation Generates Hit Event를 true로 설정해줘야 한다.

 

우선 히트 이벤트를 받아서 처리하기 위한 클래스를 BlockCollisionActor라는 이름으로 Actor 클래스를 상속받아서 생성하자.

 

 

그리고 비주얼 스튜디오로 가서 BlockCollisionActor.h에 다음 멤버 변수와 함수 선언 코드를 추가한다.

 

protected:
    virtual void NotifyHit(UPrimitiveComponent *MyComp, AActor *Other, UPrimitiveComponent *OtherComp, bool bSelfMoved, FVector HitLocation, FVector HitNormal, FVector NormalImpulse, const FHitResult &Hit) override;

public:   
    UPROPERTY(EditAnywhere)
    class UStaticMeshComponent* BoxMesh;

 

NotifyHit() 함수는 부모 클래스에서 상속받은 것으로 이것을 덮어씌워 작성함으로써 충돌이 발생했을 때 개발자가 원하는 동작을 처리하도록하는 것이 가능해진다. BoxMesh는 다른 물체와 충돌할 메시를 담을 변수이다.

 

그 다음엔 BlockCollisionActor.cpp로 가서 스태틱 메시 컴포넌트를 사용하기 위해서 다음 전처리기를 추가한다.

 

#include "Engine/Classes/Components/StaticMeshComponent.h"

 

ABlockCollisionActor::ABlockCollisionActor() 생성자 함수에 다음과 같이 BoxMesh 변수를 초기화하는 코드를 추가한다.

 

ABlockCollisionActor::ABlockCollisionActor()
{
    PrimaryActorTick.bCanEverTick = true;

    BoxMesh = CreateDefaultSubobject<UStaticMeshComponent>(TEXT("BoxMesh"));
    RootComponent = BoxMesh;
}

 

그리고 아까 선언한 NotifyHit() 함수를 다음과 같이 충돌이 발생했을 때 로그를 출력하도록 구현한다.

 

void ABlockCollisionActor::NotifyHit(UPrimitiveComponent *MyComp, AActor *Other, UPrimitiveComponent *OtherComp, bool bSelfMoved, FVector HitLocation, FVector HitNormal, FVector NormalImpulse, const FHitResult &Hit)
{
    UE_LOG(LogTemp, Log, TEXT("NotifyHit"));
}

 

코드 작업이 마무리되었다면 프로젝트를 빌드하고 에디터로 돌아가서 히트 이벤트 테스트를 위한 작업을 진행해보자.

 

먼저 BlockCollisionActor를 레벨에 배치한다.

 

 

BlockCollisionActor의 디테일 패널에서 BoxMesh를 선택하고 비어있는 스태틱 메시 프로퍼티에 모드 패널의 큐브 스태틱 메시를 드래그래서 넣는다.

 

 

그 다음 디테일 패널에서 Collision 카테고리를 찾아서 Simulation Generates Hit Event를 체크해준다.

 

 

BlockCollisionActor 배치가 끝났다면 BlockCollisionActor와 충돌할 액터를 추가해준다. 모드 패널에서 구체 메시 하나를 BlockCollisionActor 위에 배치한다.

 

 

그 다음 배치한 구체의 모빌리티를 무버블로 하고, Physics 카테고리에서 Simulate Physics를 체크해준다.

 

 

다음 이미지와 같이 세팅이 모두 끝났다면 플레이 버튼을 눌러보자.

 

 

그러면 공이 떨어져서 상자에 맞는 순간 NotifyHit 로그가 출력되는 것을 볼 수 있다.

 

 

 

 

 

 

겹침 이벤트(Overlap Event)

 

겹침 이벤트는 겹침으로 설정된 오브젝트에 겹침이나 블록으로 설정된 다른 오브젝트가 겹쳐지면 발생하는 이벤트이다. 겹침 이벤트를 발생시키기 위해서는 Collision 카테고리에서 Generate Overlap Event를 true로 설정해줘야 한다.

 

겹침 이벤트를 처리할 클래스를 OverlapCollisionActor라는 이름으로 Actor 클래스를 상속해서 생성한다.

 

 

OverlapCollisionActor.h에 다음 멤버 변수와 함수 선언 코드를 추가한다.

 

protected:
    virtual void NotifyActorBeginOverlap(AActor *OtherActor) override;
    virtual void NotifyActorEndOverlap(AActor *OtherActor) override;

public:   
    UPROPERTY(EditAnywhere)
        class UStaticMeshComponent* BoxMesh;

 

NotifyActorBeginOverlap() 함수는 겹침이 시작되었을 때 실행되는 함수이고 NotifyActorEndOverlap() 함수는 겹침이 끝났을 때 실행되는 함수이다. 이 두함수를 통해서 우리는 언제 겹침이 시작되었는지, 언제 겹침이 끝났는지를 알 수 있다.

 

BoxMesh는 사실 큰 필요는 없지만 구체가 통과해서 지나갔음을 보여주기 위해서 추가한다. 하지만 만약 스태틱 메시를 사용하지 않을 것이라면 BoxComponent나 SphereComponent, CapsuleComponent 같은 콜리전 컴포넌트를 사용해야 한다.

 

그 다음엔 OverlapCollisionActor.cpp로 가서 스태틱 메시 컴포넌트를 사용하기 위해 다음 전처리기를 추가한다.

 

#include "Engine/Classes/Components/StaticMeshComponent.h"

 

AOverlapCollisionActor::AOverlapCollisionActor() 생성자 함수에 BoxMesh를 초기화하는 코드를 추가한다.

 

AOverlapCollisionActor::AOverlapCollisionActor()
{
    PrimaryActorTick.bCanEverTick = true;

    BoxMesh = CreateDefaultSubobject<UStaticMeshComponent>(TEXT("BoxMesh"));
    RootComponent = BoxMesh;
}

 

그리고 NotifyActorBeginOverlap() 함수와 NotifyActorEndOverlap() 함수를 구현한다.

 

void AOverlapCollisionActor::NotifyActorBeginOverlap(AActor * OtherActor)
{
    UE_LOG(LogTemp, Log, TEXT("NotifyActorBeginOverlap"));
}

void AOverlapCollisionActor::NotifyActorEndOverlap(AActor * OtherActor)
{
    UE_LOG(LogTemp, Log, TEXT("NotifyActorEndOverlap"));
}

 

코드 수정이 끝나면 솔루션 탐색기에서 프로젝트를 빌드하고 에디터로 돌아가서 겹침 이벤트를 테스트하기 위한 작업을 한다.

 

우선 아까 전에 배치한 BlockCollisionActor보다 높은 공중에 구체가 통과해서 지나갈 수 있게 OverlapCollisionActor를 배치한다.

 

 

배치된 OverlapCollisionActor를 선택하고 디테일 패널에서 BoxMesh 컴포넌트를 선택한 다음에 비어있는 스태틱 메시에 모드에서 큐브 메시를 드래그 해서 할당해준다.

 

 

그 다음 Collision 카테고리에서 Generate Overlap Event를 체크해주고 Collision Preset을 OverlapAll로 설정한다.

 

 

마지막으로 구체를 선택한 다음 디테일 패널의 Collision 카테고리에서 Generate Overlap Event가 체크되어 있지 않다면 체크를 해준다. 겹침 이벤트가 발생하려면 겹치는 양 오브젝트에 모두 Generate Overlap Event가 true여야 한다.

 

 

플레이 버튼을 눌러보면 구체가 OverlapCollisionActor를 통과하면서 겹침이 시작되면 NotifyActorBeginOverlap 로그가 출력되고, 겹침이 끝나면 NotifyActorEndOverlap 로그가 출력되는 것을 확인할 수 있다.

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

Player Controller

 

작성 기준 버전 :: 4.21.1

 

언리얼 엔진에서 Player Controller는 Pawn과 그것을 제어하려는 사람 사이의 인터페이스로서, 플레이어의 의지를 대변하는 클래스이다. Player Controller는 Controller 클래스를 상속받는데, Possess() 함수로 Pawn의 제어권을 획득하고, UnPossess() 함수로 제어권을 포기한다.

 

컨트롤러에 대한 언리얼 문서

 

플레이어 컨트롤러에 대한 언리얼 문서

 

이러한 설명이 언리얼 문서 상에서의 Player Controller에 대한 내용의 대부분이고, 실제적인 C++ 코드에서의 사용법은 레퍼런스에서 찾아서 멤버 변수와 함수 등을 직접 찾아서 읽어야 하는 불편함이 있기 때문에 입문자는 Player Controller의 사용법을 제대로 익히기가 쉽지 않다.

 

그럼 이제부터 Player Controller의 기본적인 기능과 사용법에 대해서 알아보도록 하자.

 

 

마우스 인터페이스

 

플레이어 컨트롤러가 기본적으로 제공하는 기능 중에는 마우스 인터페이스에 관련된 기능이 있다.

 

플레이어 컨트롤러를 상속받는 블루프린트 클래스를 만들고 에디터를 열어보면 디테일 패널의 Mouse Interface 카테고리에서 플레이어 컨트롤러가 기본적으로 제공하는 마우스 인터페이스와 관련된 기능들을 한눈에 볼 수 있다. 디테일 패널에서 보이는 것들은 아주 기본적인 내용으로 이보다 심도깊은 기능에 대해서 배우고자 한다면 APlayerController 클래스의 언리얼 레퍼런스를 확인하는게 좋다.

 

 

bEnableClickEvents = true;
bEnableTouchEvents = true;
bEnableMouseOverEvents = true;
bEnableTouchOverEvents = true;

 

C++ 코드 상에서는 UPlayerController 클래스의 위와 같은 프로퍼티들을 통해서 옵션을 바꿀 수 있다.

 

Show Mouse Cursor

 

Show Mouse Cursor 옵션은 말 그대로 게임 도중에 마우스 커서를 보이게 할 것인가에 대한 옵션이다. 예를 들어보자면, 전통적인 PC 플랫폼에서의 탑다운뷰 RPG 게임은 캐릭터를 이동시킬 때 주로 마우스를 이용한다. 때문에 커서가 항상 보이도록 이 옵션을 true로 해줘야 한다. 하지만 FPS 게임은 화면 중앙의 크로스헤어에 적을 일치시키고 공격하는 방식이기 때문에 커서가 보일 필요가 없다. 혹은 위 두 가지 사례가 융합된 장르들은 전투나 이동 같은 플레이 중일 때는 커서를 비활성화시킨 상태로 크로스헤어를 사용하고, 인벤토리나 지도를 열면 커서를 활성화시키는 방식으로 사용하기도 한다.

 

bShowMouseCursor = true;

bShowMouseCursor = false;

 

C++ 코드 상에서는 UPlayerController 클래스의 bShowMouseCursor 프로퍼티를 통해서 옵션을 바꿀 수 있다.

 

Event

 

그 다음 네 가지 옵션은 월드에 배치된 액터/컴포넌트가 마우스나 터치에 대해서 이벤트를 발생시킬지에 대한 프로퍼티이다.

 

Click Event / Touch Event는 액터/컴포넌트에 대한 클릭/터치 이벤트이고, Mouse Over Event / Touch Over Event는 액터/컴포넌트에 커서나 터치가 올라가 있는 상태에 대한 이벤트이다.

 

간단하게 예시를 보자면 언리얼 프로젝트에 테스트용 C++ 클래스를 하나 만들고 NotifyActorOnClicked() 함수를 덮어씌워서 다음과 같이 구현하고 프로젝트를 다시 빌드한다.

 

virtual void NotifyActorOnClicked(FKey PressedButton = EKeys::LeftMouseButton) override;

 

void AClickEventTestActor::NotifyActorOnClicked(FKey PressedButton)
{
    UE_LOG(LogTemp, Log, TEXT("NotifyActorOnClicked"));
}

 

그리고 새 Player Controller를 하나 만들어서 Show Mouse Cursor와 Enable Click Event를 true로 설정한 뒤, 프로젝트 설정의 맵 & 모드에서 기본 플레이어 컨트롤러로 설정한다.

 

그 다음 아까 만든 액터를 레벨에 배치하고 클릭할 수 있게 스태틱 메시 컴포넌트를 추가해주자.

 

레벨 에디터에서 플레이 버튼을 누르고 추가한 액터를 클릭해보면 출력 로그 패널에서 "NotifyActorOnClicked"라고 출력되는 것을 확인할 수 있다.

 

 

액터나 컴포넌트에 Click Event를 추가했더라도 Player Controller에서 Enable Click Event를 false로 설정했다면, NotifyActorOnClicked() 이벤트는 호출되지 않는다.

 

Default Mouse Cursor

 

Default Mouse Cursor 프로퍼티는 기본적인 마우스 커서 모양을 정하는 프로퍼티이다. 커서 모양의 종류는 언리얼 문서에서 확인할 수 있다.

 

DefaultMouseCursor = EMouseCursor::Default;

 

C++ 코드 상에서는 UPlayerController 클래스의 DefaultMouseCursor 프로퍼티를 통해서 옵션을 바꿀 수 있다.

 

Default Click Trace Channel

 

Default Click Trace Channel은 클릭 이벤트가 발생했을 때, 플레이어가 클릭한 대상을 3D 공간에서 찾기 위해서 트레이스를 통해 광선 같은 개념의 선을 쏘는데 어떤 채널에 속하는 객체가 맞았을 때 찾았다고 판정할 지를 정하는 프로퍼티이다. "Visibility"가 기본값으로 되어 있는데, 이는 화면에 보이는 객체가 맞으면 무조건 맞았다고 판정한다는 의미이다.

 

이 값의 종류에는 Visibility 이 외에도, Pawn만 찾아내는 Pawn, 월드에 스태틱으로 배치된 액터만 찾아내는 WorldStatic 등이 있다.

 

DefaultClickTraceChannel = ECollisionChannel::ECC_Visibility;

 

C++ 코드 상에서는 UPlayerController 클래스의 DefaultClickTraceChannel 프로퍼티를 통해서 옵션을 바꿀 수 있다.

 

Trace Distance

 

Trace Distance 프로퍼티는 클릭 이벤트 등이 발생했을 때, 화면으로부터 얼마나 멀리 떨어진 지점까지 대상을 탐색할 것인가에 대한 것이다.

 

HitResultTraceDistance = 10000.0f;

 

그 외의 유용한 마우스 관련 함수

 

1. GetHitResultUnderCursor()

 

GetHitResultUnderCursor() 함수는 함수 이름 그대로 화면에서 마우스 커서 위치에 트레이스를 쏴서 그 결과를 가져오는 함수이다. 일반적인 함수의 사용법은 아래와 같으며, 이 함수는 레벨에 배치된 오브젝트를 선택하거나, RPG 식으로 클릭한 위치로 캐릭터를 이동시킬 때, 유용하게 사용할 수 있다.

 

FHitResult Hit;
GetHitResultUnderCursor(ECC_Visibility, false, Hit);

if (Hit.bBlockingHit)
{
    // 충돌 결과가 있을 때의 처리
}

 

 

플레이어 틱(Player Tick)

 

플레이어 컨트롤러는 액터 클래스에서 상속받는 Tick() 함수 외에 PlayerTick() 이라는 별도의 틱 함수를 하나 더 가진다. 일반 Tick() 함수는 어디서나 작동하는 반면에, PlayerTick() 함수는 Player Controller에 PlayerInput 객체가 있는 경우에만 호출된다. 따라서 로컬로 제어되는 Player Controller에서만 플레이어 틱이 호출된다. 이 말인 즉슨, 만약 멀티플레이 게임이라면 자기 자신의 플레이어 컨트롤러에서만 플레이어 틱이 호출된다는 것이다.

 

virtual void PlayerTick(float DeltaTime) override;

 

void ATestPlayerController::PlayerTick(float DeltaTime)
{
    Super::PlayerTick(DeltaTime);

}

 

플레이어 틱 함수를 덮어쓰기 위해서는 위와 같이 코드를 작성하면 된다.

 

 

폰(Pawn)

 

플레이어 컨트롤러는 기본적으로 자신이 빙의(Possess)하여 컨트롤하는 폰을 레퍼런스로 가지고 있게 된다. 일반적으로 프로젝트 세팅의 맵 & 모드나 월드 세팅에서 디폴트 폰을 None이 아닌 특정 폰으로 설정해둔 상태라면, 게임이 시작되면 폰이 생성되고 플레이어 컨트롤러는 생성된 폰에 자동으로 빙의된다.

 

디폴트 폰이 None이어서 자동으로 빙의되는 상황이 아니라면, Possess() 함수를 이용하여 빙의하고자 하는 폰에 컨트롤러를 빙의시키면된다.

 

Possess(TargetPawn);

 

이 반대의 경우로 현재 빙의하고 있는 폰에서 제어권을 포기하고 탈출하려고 한다면 UnPossess() 함수를 사용하면 된다.

 

UnPossess();

 

컨트롤러가 빙의 중인 폰을 가져와서 사용하기 위해서는 다음과 같이 GetPawn() 함수를 사용하면 된다.

 

APawn* MyPawn = GetPawn();

 

만약에 컨트롤러가 현재 컨트롤 중인 폰이 없는 상태라면 GetPawn() 함수는 nullptr를 반환한다.

 


 

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

제대로 따라가기 (1) C++ 프로그래밍 튜토리얼 :: 변수, 타이머, 이벤트 (타이머를 사용하는 액터 만들기)

 

작성버전 :: 4.20.3

 

언리얼 엔진은 다양한 기능을 제공하며, 그 기능에 대한 튜토리얼들이 문서에 존재한다. 언리얼 엔진을 공부하기 위해선 필수적으로 이러한 튜토리얼들을 첫걸음으로 따라가게 되는데, 언리얼 튜토리얼 문서는 가끔 따라가다보면 제대로 진행이 안되고 막히는 부분이 존재한다. 튜토리얼은 배우는 단계인데 아직 엔진에 전혀 숙련되지 못한 사람이 이런 문제에 부딪히면 생각보다 많은 시간은 잡아먹게 된다. 제대로 따라가기는 이런 튜토리얼 도중에 막히는 부분을 빠르게 해소하고 따라가기 위해 제작되었다.

 

튜토리얼대로 하면 문제가 발생해서 제대로 따라갈 수 없는 부분으로 동작이 가능하게 수정해야하는 부분은 빨간 블럭으로 표시되어 있다.

 

이번 튜토리얼에서 새로 배우게 되는 내용은 글 제일 끝에 "이번 섹션에서 배운 것"에 정리된다.

 

 

변수, 타이머, 이벤트 (1. 타이머를 사용하는 액터 만들기)

 

변수, 타이머, 이벤트 튜토리얼은 변수와 함수를 에디터에 노출시키는 법, 타이머를 사용하여 코드 실행을 지연 또는 반복시키는 법, 이벤트를 사용하여 액터 사이의 통신을 하는 법을 알려주는 튜토리얼이다.

 

Countdown 클래스 추가

 

 

 

우선 C++ 프로젝트에서 Actor 클래스를 상속받는 Countdown 클래스를 생성하도록 한다.

 

 

카운트다운 진행 상황을 보여주기 위한 기능 추가

 

클래스가 생성되었다면 비주얼 스튜디오를 열어서 생성된 클래스에 카운트다운할 시간 변수와 카운트다운 진행 상황을 보여줄 텍스트 렌더 컴포넌트와 함수를 추가해야 한다. 그 예시 코드는 다음과 같다.

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/Actor.h"
#include "Countdown.generated.h"

UCLASS()
class CODEPRACTICE_API ACountdown : public AActor
{
    GENERATED_BODY()
   
public:   
    // Sets default values for this actor's properties
    ACountdown();

protected:
    // Called when the game starts or when spawned
    virtual void BeginPlay() override;

public:   
    // Called every frame
    virtual void Tick(float DeltaTime) override;

    int32 CountdownTime;
   
    UTextRenderComponent* CountdownText;

    void UpdateTimerDisplay();
};

 

추가된 것은 int32 CountdownTime, UTextRenderComponent* CountdownText, void UpdateTimerDisplay()이다.

 

바로 이 부분에서 막히는 사람들이 꽤 많을 거라고 생각한다.

 

 

바로 UTextRenderComponent가 정의되어 있지 않다고 신텍스 에러가 뜨기 때문이다. 이 문제를 해결하기 위해서는 UTextRenderComponent가 정의된 헤더를 포함시켜줘야 한다. UTextRenderComponent 클래스는 Engine/Classes/Components/TextRenderComponent.h 에 정의되어 있다.
 
하지만 이 TextRenderComponent.h를 추가해야 된다는 걸 깨달았다고 모든 문제가 해결되지는 않았다. 바로 헤더 포함 순서 문제가 남아있기 때문이다. 습관적으로 새로 추가하는 헤더를 가장 뒤에 추가하는 프로그래머들이 많을텐데 언리얼 C++프로그래밍에서는 헤더를 포함할 때 순서를 지켜야 한다. 새로 추가되는 헤더는 무조건 generated.h보다 위쪽에서 추가되어야 한다.
#pragma once

#include "CoreMinimal.h"
#include "GameFramework/Actor.h"

#include "Engine/Classes/Components/TextRenderComponent.h"
#include "Countdown.generated.h"

UCLASS()
class CODEPRACTICE_API ACountdown : public AActor
{
    GENERATED_BODY()
   
public:   
    // Sets default values for this actor's properties
    ACountdown();

protected:
    // Called when the game starts or when spawned
    virtual void BeginPlay() override;

public:   
    // Called every frame
    virtual void Tick(float DeltaTime) override;

    int32 CountdownTime;
   
    UTextRenderComponent* CountdownText;

    void UpdateTimerDisplay();
};

위의 예시 코드처럼 generated.h 위의 적당한 위치에 TextRenderComponent.h를 포함시켜주면 신텍스 에러가 발생하지 않는다.

 

그 다음 작업은 ACountdown 클래스의 생성자에서 액터의 프로퍼티 값들을 초기화해주는 것이다. 언리얼 엔진 문서에서 제공하는 예시코드는 다음과 같다.

// Sets default values
ACountdown::ACountdown()
{
     // Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it.
    PrimaryActorTick.bCanEverTick = false;

    CountdownText = CreateDefaultSubobject(TEXT("CountdownNumber"));
    CountdownText->SetHorizontalAlignment(EHTA_Center);
    CountdownText->SetWorldSize(150.0f);
    RootComponent = CountdownText;

    CountdownTime = 3;
}

 

이 클래스에서 Tick 기능은 사용하지 않기 때문에 bCanEverTick은 false로 하고 CountdownText에 TextRenderComponent를 생성해서 루트 컴포넌트에 붙여주고 CountdownTime을 3초로 설정한다.

 

하지만 코드가 과거버전 기준으로 만들어지고 문서가 업데이트되지 않은 문제인지, CreateDefaultSubobject()함수를 호출하는 부분에서 신텍스 에러가 발생한다. 그래서 CreateDefaultSubobject() 함수를 살펴보면 템플릿 함수임을 알 수 있다.

CountdownText = CreateDefaultSubobject<UTextRenderComponent>(TEXT("CountdownNumber"));

CountdownText 변수가 받아야하는 UTextRenderComponent를 템플릿 파라미터에 넣어주면 문제없이 신텍스 에러가 사라진다.

그 다음은 아까 정의해둔 UpdateTimerDisplay() 함수를 구현하는 것이다. 이 함수는 남은 시간을 TextRenderComponent에 업데이트하고 시간이 다되면 0을 표시하도록 한다.

void ACountdown::UpdateTimerDisplay()
{
    CountdownText->SetText(FString::FromInt(FMath::Max(CountdownTime, 0)));
}

 

 

 

 

 

타이머(Timer)

 

화면에 대한 준비를 끝냈다면 이번에는 시간을 체크할 타이머를 추가할 차례다. 타이머란 사용자가 정의한 시간마다 사용자가 지정한 동작이 실행되도록 하는 것이다. 이러한 동작은 물론 Tick() 함수에서 DeltaTime 값을 받아서 같은 동작을 수행하도록 할 수는 있지만, 사용자가 지정한 동작이 지속적으로 실행될 필요가 없이 특정한 순간에만 몇 번 실행되면 되거나 실행될 텀이 1초를 넘는 경우라면 Tick() 함수에서 시간을 재서 실행하는 것보다는 타이머를 이용하는 편이 좋다.

 

타이머에 대해 이해가 되었다면 이제 타이머에 필요한 멤버 변수와 함수들을 Countdown.h의 Countdown 클래스의 하단에 추가해보자.

void AdvanceTimer();

void CountdownHasFinished();

FTimerHandle CountdownTimerHandle;

 

AdvanceTimer() 함수는 Timer가 돌아가면서 호출될 함수이다.

 

CountdownHasFinished() 타이머가 사용자가 의도한 만큼 돌아간 뒤의 처리를 위한 함수이다.

 

차량에 달린 핸들이 차량의 이동 방향을 컨트롤하기 위한 것이듯, FTimerHandle 역시 타이머를 컨트롤하기 위한 구조체로서 CountdownTimerHandle 변수는 카운트다운이 끝났을 때, 타이머가 계속해서 돌아가지 않도록 종료하기 위해서 필요하다.

 

AdvanceTimer() 함수와 CountdownHasFinished() 함수를 모두 정의했다면 이번에는 각 함수를 구현해보자.

void ACountdown::AdvanceTimer()
{
    --CountdownTime;
    UpdateTimerDisplay();
    if (CountdownTime < 1)
    {

        // 카운트다운이 완료되면 타이머를 중지
        GetWorldTimerManager().ClearTimer(CountdownTimerHandle);
        CountdownHasFinished();
    }
}

 

AdvanceTimer() 함수의 예시 코드는 위와 같은데 이 함수를 구현하면서 문제가 다시 발생한다. 이번에는 GetWorldTimerManager() 함수에서 ClearTimer() 함수를 호출할 때 "불완전한 형식은 사용할 수 없습니다." (E0070 :: Incomplete type is not allowed.) 라는 에러가 발생한다.

 

이 문제는 아래의 예시 코드와 같이 Countdown.cpp의 상단에 TimerManager.h를 포함시켜주면 해결된다.

// Fill out your copyright notice in the Description page of Project Settings.

#include "Countdown.h"
#include "TimerManager.h"

 

CountdownHasFinished() 함수의 코드는 다음과 같다.

void ACountdown::CountdownHasFinished()
{
    CountdownText->SetText(TEXT("Go!"));
}

 

다음 작업은 BeginPlay() 함수에서 텍스트 표시를 초기화하고 타이머를 동작시키는 것이다.

void ACountdown::BeginPlay()
{
    Super::BeginPlay();
   
    UpdateTimerDisplay();
    GetWorldTimerManager().SetTimer(CountdownTimerHandle, this, &ACountdown::AdvanceTimer, 1.0f, true);
}

 

 

에디터 컴파일과 레벨 배치 그리고 테스트 실행

 

 

 

모든 코드 작업이 끝났다면 이제 언리얼 에디터로 돌아가서 컴파일 버튼을 눌러보자. 

 

 

 

만약 컴파일 에러 없이 컴파일에 성공했다면 위의 이미지와 같이 컴파일 완료라고 에디터의 오른쪽 하단에 출력될 것이다.

 

 

 

컴파일이 완료된 다음에 우리가 작성한 Countdown 클래스를 레벨 에디터에 드래그 앤 드롭해서 배치할 수 있다.

 

 

 

배치를 완료했다면 플레이 버튼을 눌러서 실행해보자. 그러면 화면의 Text 글자가 3, 2, 1, Go!로 바뀌는 것을 확인할 수 있다.

 

 

 

 

 

 


 

 

이번 섹션에서 배운 것

 

 

1. CreateDefaultSubobject<T>() (언리얼 엔진 문서)

 

UObject 클래스를 상속받는 모든 클래스에서 사용가능한 함수이다. 하위 오브젝트나 컴포넌트를 생성할 때 사용되는 함수로 2번의 UTextRenderComponent를 생성하는 예시와 같이 사용된다. 이 함수는 T의 포인터(T*) 타입을 반환한다.

 

 

2. UTextRenderComponent(언리얼 엔진 문서)

 

UTextRenderComponent* TextRenderComponent;

 

설정된 텍스트를 3D 공간 상에 렌더링하는 컴포넌트이다. 글자 색, 크기, 폰트, 정렬 등을 설정할 수 있으며 액터 등에 컴포넌트로 덧붙여서 사용할 수 있다. 이 컴포넌트를 사용하기 위해서는 "Engine/Classes/Components/TextRenderComponent.h"를 포함해야 한다.

 

TextRenderComponent = CreateDefaultSubobject<UTextRenderComponent>(TEXT("TextRenderComponent"));

 

코드 상에서 UTextRenderComponent를 생성하는 방법은 위와 같다.

 

TextRenderComponent->SetHorizontalAlignment(EHTA_Center);

 

렌더링되는 텍스트의 수평 정렬을 설정하는 함수이다. 정렬 방식은 EHTA_Center, EHTA_Left, EHTA_Right가 있다.

 

TextRenderComponent->SetWorldSize(100.0f);

 

렌더링되는 텍스트의 월드에서의 크기를 설정하는 함수이다.

 

TextRenderComponent->SetText(TEXT("TEXT"));

 

렌더링되는 텍스트의 문자열 내용을 설정하는 함수이다.

 

 

3. Timer

 

타이머는 사용자가 정의한 시간마다 사용자가 지정한 동작이 실행되도록 만든다.

 

1) FTimerHandle (언리얼 엔진 문서)

 

FTimerHandle TimerHandle;

 

FTimerHandle은 타이머를 구별할 수 있는 유일한 핸들이다. 타이머를 생성하는 함수는 타이머를 생성할 때, 타이머의 핸들을 돌려주는데, 이 핸들을 가지고 있어야 생성한 타이머를 중지시킬 수 있다.

 

2) GetWorldTimerManager() (언리얼 엔진 문서)

 

AActor 클래스를 상속받는 모든 클래스에서 호출가능한 함수이다. 월드 타이머 매니저를 반환한다. GetWorldTimerManager()의 호출이 정상적으로 되지 않을 경우 "TimerManager.h"를 포함시키면 된다.

 

GetWorldTimerManager().SetTimer(TimerHandle, this, &ACountdown::AdvenceTimer, 1.0f, true);

 

SetTimer() 함수는 타이머를 생성하고 시작시키는 함수로 여러가지 오버로드가 존재하지만 우선은 위의 오버로드 형식만 살펴보자.

 

첫 번째 매개변수는 지금 생성되는 타이머의 핸들이다. 위에서 설명했듯이 이 핸들을 가지고 있어야 나중에 타이머를 종료할 수 있다.

 

두 번째 매개변수는 타이머 함수를 호출하는 오브젝트이다.

 

세 번째 매개변수는 타이머가 발동할 때마다 호출될 함수이다.

 

네 번째 매개변수는 타이머가 호출될 시간이다. 만약 값을 1로 두면 1초에 한 번씩 함수가 호출된다.

 

다섯 번째 매개변수는 타이머의 반복 여부이다. 만약 값이 false라면 타이머는 반복되지 않고 정해진 시간에 한 번만 호출된다.

 

GetWorldTimerManager().ClearTimer(TimerHandle);

 

ClearTimer() 함수는 돌아가고 있는 타이머를 중지시키고 해당 핸들을 무효화시키는 함수이다.

 

 

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

Animation Event 사용법

 

 

새로운 버전의 글!

 

이 버전의 글은 약간의 오류를 포함하고 있으며 이를 수정한 최신 버전의 글을 링크를 통해서 보실 수 있습니다.

 

 

개요(Overview)

게임을 제작할 때, 애니메이션이 실행되는 도중에 적절한 타이밍에 맞춰서 무언가가 실행되어야 하는 경우가 종종 발생한다. 예를 들자면 대표적으로는 캐릭터가 걷거나 뛸 때 발소리가 나거나 먼지가 일어나야 한다던지 캐릭터가 무기를 휘두를 때 맞는 타이밍에 맞춰서 데미지가 들어가야 한다던지 하는 경우가 있을 수 있다. 이러한 문제를 해결하는 하드한 방법으로는 계산해낸 타이밍에 맞춰서 해당 함수를 실행시킨다던지, 콜라이더를 원하는 위치에 붙여서 그 콜라이더가 충돌했을때 처리하는 방법이 있지만, 이러한 방법들은 매우 비효율적이다.

 

계산해낸 타이밍에 맞춰서 원하는 함수를 실행하는 방법의 경우에는 공격 속도나 이동 속도에 맞춰서 모션의 속도가 변하는 유동적인 상황에 대처하기가 매우 어렵고, 특히 콜라이더를 사용하는 방법은 겨우 발소리나 발움직임에 맞춰 먼지 이펙트를 만드는데 쓰기에는 매우 비용이 비싸다. 공격 애니메이션에 맞춰서 데미지를 주는 경우에는 무기나 데미지를 주는 부위에 콜라이더를 붙여서 사용하는 것을 고려해볼만 하지만, 이러한 방법은 주로 공격의 명중이 확정되지 않은 게임, 즉 논타겟(None-Target) 방식의 게임에 적합한 방법이며, 공격의 명중이 확정되어있는 게임의 경우에는 역시 사용하기가 곤란하다.

 

 

 

애니메이션 이벤트(Animation event)

그래서 존재하는 것이 바로 유니티의 애니메이션 이벤트(Animation event)라는 기능이다. 이 기능은 애니메이션의 실행 도중, 원하는 시점에 원하는 함수를 호출할 수 있게 해준다. 이 문장 하나만으로도 개요에서 설명한 상황에 전부 대처가 가능할 것임을 알 수 있다.

 

이 애니메이션 이벤트를 사용하는 방법은 2가지가 있는데 FBX 모델과 함께 임포트된 애니메이션에서 사용하는 방법과 애니메이션 클립(Animation clip)에서 사용하는 방법이다.

 

 

방법 1 : FBX 모델과 함께 임포트된 애니메이션에서 애니메이션 이벤트 사용하기

 

 

프로젝트 창(Project view)에서 임포트한 FBX파일을 선택하면 Inspector 창에 그 FBX파일의 정보들이 보일 것이다. 그 중에서 상단의 Animations라는 탭을 선택하면 그 FBX에 포함된 애니메이션의 정보를 볼 수 있다. 우리가 필요로 하는 애니메이션 이벤트 기능은 그 중에서 Events라는 곳 안에서 사용할 수 있다. 그 항목을 열면 다음과 같은 내용을 볼 수 있다 :

 

 

노란색으로 표시된 버튼을 누르면 다음과 같이 애니메이션이 재생되는 도중에 실행될 이벤트가 새로 생성된다 :

 

 

위의 이미지에서 파란색으로 표시된 것을 드래그하면 이 이벤트가 실행될 시점을 조절할 수 있으며 그 아래의 입력 필드의 내용들은 다음과 같다 :

 

 필드 이름 내용
 Function 이벤트 시점에 실행될 함수의 이름
 Float  함수에 float형 매개변수가 있을 때 들어갈 값
 Int  함수에 int형 매개변수가 있을 때 들어갈 값
 String  함수에 string형 매개변수가 있을 때 들어갈 값
 Object  실행할 함수가 들어있는 스크립트

 

이번 예시로는 공격 애니메이션의 타이밍에 맞춰 데미지를 주는 것으로 진행 해보겠다. 먼저 적에게 데미지를 주는 작업을 할 스크립트를 생성한다.

 

예제이기 때문에 자세한 과정에 대한 코드를 생략하고 AttackComponent 스크립트는 다음과 같은 함수를 가지고 있다.

 

using UnityEngine;

public class AttackComponent : MonoBehaviour
{
    public void AttackDamage()
    {
        // 적에게 데미지를 주는 처리
        Debug.Log("데미지 60!");
    }
}

 

공격 애니메이션에서 적에게 무기가 맞는 시점이 위의 Events 이미지에서 0:050라고 가정하자. 다음과 같이 이전에 생성한 이벤트를 0:050 지점으로 옮기고 Object에 생성한 AttackComponent 스크립트를 넣어주고 Function에는 AttackDamage 함수 이름을 입력해주면 된다.

 

 

다음과 같은 과정을 끝내고 나면 애니메이션이 실행되고 0:050 지점을 지날 때마다 유니티 에디터에서 "데미지 60!"이라는 로그가 출력될 것이다.

 

 

 

방법 2 : 애니메이션 클립에서 애니메이션 이벤트 사용하기

 

 

 

 

애니메이션 클립은 3D 모델 없이 애니메이션에 대한 정보만을 가지고 있는 것을 이야기한다. 물론 임포트한 FBX 모델 파일에서 애니메이션만 꺼내와서 사용하는 것도 가능하다. 이러한 애니메이션 클립에서 애니메이션 이벤트를 사용하는 방법은 이전에 소개한 FBX 모델에 포함된 애니메이션에서 사용하는 방법과 상당히 비슷하다.

 

프로젝트 창에서 애니메이션클립을 선택하고 애니메이션 탭을 열면 다음과 같은 화면을 볼 수 있다.(만약 애니메이션 탭이 보이지 않는다면 상단의 Windows 메뉴에서 Animation을 찾아서 열거나 Ctrl+6 단축키를 이용해서 열 수 있다)

 

 

애니메이션 탭에서도 FBX 파일 애니메이션의 이벤트에서 봤던 것과 같은 모양의 버튼을 볼 수 있는데 이것을 통해서 이벤트를 생성할 수 있고 드래그를 통해서 이벤트의 시점을 이동시킬 수도 있다.

 

 

그리고 이 이벤트를 선택하면 Inspector 창에서 다음과 같은 내용을 볼 수 있다 :

 

 

이 이후에는 방법 1에서 진행한 것과 같이 진행하면 원하는 결과를 얻을 수 있게 된다.

 

 

 

마무리...

 

이 애니메이션 이벤트를 사용할 때, 프레임이 씹힐 경우에 애니메이션 이벤트가 같이 스킵되는 경우가 발생한다는 이야기도 있다. 다른 이야기로는 이 문제는 레거시(Legacy) 애니메이션을 사용할 때 주로 발생하며, 메카님에서는 개발자의 실수로 트랜지션 구간을 잘못 설정했을 때 발생하는 문제이며 일반적으로는 발생하지 않는 문제라고도 한다. 이런 문제가 발생하면 애니메이션의 트랜지션에서 블랜드되는 과정을 잘 확인해보는 것이 우선일 것 같다.

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

마우스나 터치 같은 화면으로 입력하는 처리를 해야하는 경우가 많은데 유니티에서는 EventTrigger라는 것을 지원한다. 일반적인 방법인 Input.mousePosition나 Input.GetTouch()를 이용해서 직접 처리하는 대신에 화면 전체나 혹은 원하는 부분을 덮는  Panel Object에 EventTrigger Component를 추가해서 각종 화면 입력을 처리할 수 있게 된다.

 

간단한 예시 (Pointer Enter : 포인터가 Panel 위에 올라왔을때, Drag : 드래그 중일때, Move : 포인터가 Panel 위에서 움직이는 중일때)

 

당연하게도 이 모든 것들이 스크립트에서도 처리가 가능한데 그 방법은 panel에 들어갈 스크립트의 클래스에 원하는 EventTrigger 인터페이스를 상속하고 필요로 하는 함수를 구현해주면 된다.

 

이번에 발생한 문제는 나는 마우스 클릭 후 놓을때, 혹은 터치 후 손을 뗄 때 반응하기를 원했기 때문에 클래스에 IPointerUpHandler를 상속시키고 구현해야하는 함수 public void OnPointerUp(PointerEventData eventData)를 구현했다.

 

하지만 기능은 원하는대로 동작하지 않았다. 무슨 문제인지 살펴보니 IPointerUpHandler와 IPointerDownHandler는 항상 짝지어서 사용해야 하는 것 같다. 실제로 해당 클래스에 두 인터페이스를 모두 상속시킨 이후에는 기능이 원하는대로 작동한다.

 

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

+ Recent posts