[유니티 프로젝트] 포탈 이펙트 및 어나운스 UI 추가

오늘 작업으로 두가지 요소를 추가하였다.

 

우선 유저 편의 및 연출을 위한 어나운스 먼트 UI 

그리고 순도 100% 연출을 위한 포탈 이펙트

 

우선 어나운스 먼트 UI를 먼저 보고 가자면 아래 에셋인 TextAnimator를사용하여 제작하였다.

https://assetstore.unity.com/packages/tools/gui/text-animator-for-unity-158707

Text Animator for Unity | GUI 도구 | Unity Asset Store

어나운스는 단순히 유저가 어떤 방에 있는지 혹은 어떤 지역에 있는지 또는 룸이나 보스를 클리어 했는지 등을 알려주는 단순한 역할을 한다.

 

이때 연출적인 요소를 편리하게 사용할수 있는 요소들이 필요했다.

 

그리하여 TextAnimator 를 이용해 애니메이션 혹은 닷트윈등을 이용하지 않고 텍스트 메쉬 프로 컴포넌트를 이용한 객체를 HTML 태그를 이용하여 굉장히편리하게 제어할수 있는 어셋을 이용하였다.

 

코드또한 매우 간결해서 매번 애니메이션을 실행하고 싶을떄 마다 메서드를 발동 시켜주기만 하면 된다.

나의 경우엔 DOTWeen과 함께 병합하여 코루틴으로 제어하였다.

 

UI 제어 코드는 아래와 같다.

   private IEnumerator CoStartAnnounce(eAnnounceType type)
    {
        this.textAnimatorPlayer.ShowText(this.txtAnnounce);

        yield return new WaitForSeconds(3f);

        this.textAnimatorPlayer.GetComponent<TMP_Text>()
            .DOFade(0f, 0.5f).OnComplete(() =>
            {
                this.textAnimatorPlayer.GetComponent<TMP_Text>().color = Color.white;   
                this.gameObject.SetActive(false);
            });
    }

정말 간결하다. 

우선 중요한 부분은 text메쉬 프로 객체에 접근하여 showText 메서드를 사용하는 것인데 매개변수로는 해당 텍스트 메쉬 객체를 넣어주는 걸로 끝.

 

html 태그를 이용하여 속도, 색상, 애니메이션, 등등 상당히 많은걸 제어할수 있기에 태그 또한 종류가 다양하다.

(나의 경우엔 기본적인 태그들만을 사용하였고 이후 퀄업 기간에 좀더 깔끔하게 수정해볼 예정이다.)

 

태그의 예시

Hi! Welcome to TextAnimator; have fun bringing your dialogues to life!

Examples:
<shake>I'm freezing</shake>.
<wiggle>I'm joking</wiggle>.
It's a <fade>secret</fade>.
<bounce>Oh, how lucky</bounce>.
An<expl> EXPLOSION</expl>.
<rot>I'm confused</rot>.
<swing>So happy right now</swing>.
Head over the next example scenes to discover more!

<share>I'd love to share the projects you create with TextAnimator! Let me know (if you want) aand have a lovely day! ^^</share>
<speed=3>Aaaaaaaaaaaaaand please do not forget to leave a review, it <speed=.1><incr><rainb>really</rainb></incr> <speed=3>helps ^^<speed=1>

 

중요한 부분은 텍스트 메시 프로 오브젝트에는 TextAnimator 컴포넌트와  TextAnimatorPlayer 컴포넌트가 함께 붙어야 한다는 것이다.

이제 결과물은 직접 보도록 하자

이런식으로 무지개 효과등 아케이드적인 연출도 가능했다.

 

다음으로는 파티클시스템 컴포넌트를 장착한 오브젝트를 생성, 및 로테이션 시키는 부분인데 제어코드는 단순하지만 특이한 부분은  컴포넌트 자체의 프로퍼티에 접근하는것이 아닌 .main 으로 접근하여 제어해야한다는 부분이었다. (이전에는 직접 접근도 가능했지만 이제는 안되는 모양이다)

 

코드는 아래와 같다.

var go = Instantiate(effect, originPos, Quaternion.identity);
        var comp = go.GetComponent<ParticleSystem>();
        var main = comp.main;

        switch (portalName)
        {
            case "portal0":
                main.startRotationZ = Mathf.PI; // 180도
                go.transform.position = new Vector3(originPos.x, originPos.y - 2, 1);
                //go.transform.position = originPos;
                break;
            case "portal1":
                main.startRotationZ = -Mathf.PI / 2; // -90도
                go.transform.position = new Vector3(originPos.x - 2, originPos.y, 1);
                //go.transform.position = originPos;
                break;
            case "portal3":
                main.startRotationZ = Mathf.PI / 2; // 90도
                go.transform.position = new Vector3(originPos.x + 2, originPos.y, 1);
                //go.transform.position = originPos;
                break;
            case "portal2":
                go.transform.position = new Vector3(originPos.x, originPos.y + 2, 1);
                //go.transform.position= originPos;   
                break;
            default:
                Debug.LogWarning("Invalid portal name");
                break;
        }
        Destroy(go,2f);

 

로테이션 하는 부분이 특이했는데 쿼터리온 혹은 오일러각을 사용하지 않고 Matf.PI를 이용하여 각도를 계산해 주어야 하는 것이 특이했다. 

원주율을 이용하므로 고정된 상수를 가져와 수정해서 사용해야하는 부분은 좀 귀찮은 부분 중 하나였고 또 .main에 접근하여 대부분의 프로퍼티에 접근해야한다는 사실또한 파티클시스템을 사용하는데 조금 불편한 부분중 하나였다.

 

결과물은 이 글의 최상단의 포탈 파티클 애니메이션에서 확인 가능하다.