[패스트캠퍼스 수강 후기] 올인원 패키지 : 유니티 포트폴리오 완성 100% 환급 챌린지 16회차 미션

[패스트캠퍼스 수강 후기] 올인원 패키지 : 유니티 포트폴리오 완성 100% 환급 챌린지 16회차 미션 시작합니다.


전투 시스템의 NPC 전투 UI 구현하기 입니다.

항상 카메라를 바라보는 Billboard 기법라는 것을 사용하여 만들어지게 됩니다.
캐릭터와 UI가 회전을 하더라도 항상 카메라를 바라보게 해서 유저가 항상 동일한 형태의 UI를 볼 수 있도록 하는 기법입니다.

이러한 Billboard를 구현하기 위해 Camera Facing이라는 컴포넌트 스크립트를 구현하도록 합니다.


public class CameraFacing_New : MonoBehaviour
{
    Camera referenceCamera;
    public bool reverseFace = false; // 고정이되는 축과 향하는 방향이 반대로 보여주는 flag
    
    public enum Axis // 특정 축을 기준으로 회전.
    {
        up, down, left, right, forward, back
    }
    public Axis axis = Axis.up;
    
    public Vector3 GetAxis(Axis refAxis)
    {
        switch (refAxis) {
            case Axis.down: return Vector3.down;
            case Axis.forward: return Vector3.forward;
            case Axis.back: return Vector3.back;
            case Axis.left: return Vector3.left;
            case Axis.right: return Vector3.right;
        }
        return Vector3.up;
    }
    
    private void Awake()
    {
        if (!referenceCamera) {
            referenceCamera = Camera.main;
        }
    }
    
    private void LateUpdate()
    {
        Vector3 targetPos = transform.position + referenceCamera.transform.rotation * (reverseFace ? Vector3.forward : Vector3.back);
        Vector3 targetOrientation = referenceCamera.rotation * GetAxis(axis);
        
        transform.LookAt(targetPos, targetOrientation);
    }
}

UI에서 "Slider"를 추가하면 "Canvas"의 자식으로 "Slider"가 추가됩니다.
+ Render Mode를 "Screen Space - Overlay"에서 "World Space"로 변경합니다.
+ Pos X, Y, Z도 모두 "0"으로 지정합니다.
+ Scale X, Y, Z를 모두 "0.05"로 설정합니다.
+ Width = 100, Height = 20

일단 실행해 보면 캐릭터이 회전에 따라 체력바가 따라서 회전하는 것을 볼 수 있는데, 어색하지요? 아직 CameraFacing을 연동하지 않았기 때문입니다.

Canvas에 Camera Facing 컴포넌트를 추가하고 실행하면 아래와 같이 캐릭터가 회전하더라도 Y축으로 고정된 체력바가 고정되어 표시되는 것을 확인할 수 있습니다.

이제 여기 NPC에 HP를 변경하는 스크립트를 추가하도록 하겠습니다.


public class NPCBattleUI_New : MonoBehaviour
{
    private Slider hpSlider;
    
    public float MaximunValue
    {
        get => hpSlider.maxValue;
        set {
            hpSlider.maxValue = value;
        }
    }
    
    public float MinimunValue
    {
        get => hpSlider.minValue;
        set {
            hpSlider.minValue = value;
        }
    }
    
    public float Value
    {
        get => hpSlider.value;
        set {
            hpSlider.value = value;
        }
    }
    
    public void Awake() {
    {
        hpSlider = gameObject.GetComponentInChildren<Slider>();
    }
    
    private void OnEnable()
    {
        GetComponent<Canvas>().enabled = true;
    }
    
    private void OnDisble()
    {
        GetComponent<Canvas>().enabled = false;
    }
}


위와 같이 작업하고 EnemyController_Range_Original.cs에서 battleUI 인스턴스를 사용하여 최대, 최소, 현재 체력값을 설정하도록 수정해 줍니다. 그리고 데미지가 입었을 때 HP가 변화하는 것을 처리하기 위해 아래와 같이 추가해줍니다.

public void TakeDamage(int damage, GameObject hitEffectPrefab)
{
    // 기존 코드 유지
    
    health -= damage;
    
    if (battleUI) {
        battleUI.Value = health;
    }
    
    // 기존 코드 유지
}

현재까지 상태로 실행을 해보면 적캐릭터가 데미지를 입을 때마다 HP가 주는 것을 확인할 수 있습니다. 단지 HP나 숫자가 반대로 표시되는 것을 볼 수 있습니다.

카메라를 UI가 바라보는 상황이 되어 유저가 바라보는 방향이 Flip 상태로 되기 때문에 "Reverse Face [v]"를 체크하여 유저가 바라보는 방향으로 맞추어진 UI로 만들어줍니다.

그 상태로 플레이를 진행하면 정상적으로 표시되는 것을 확인할 수 있습니다.



데미지 관련하여서도.. (캐릭터 위에 표시되는 숫자값) 동일하게 NPC UI를 활용하여 구현하면 됩니다.

TextMeshPro를 사용하여 보도록 하겠습니다. Damage값을 애니메이션으로하여 위로 튀는 것처럼 보여주면 좀더 재미있는 효과가 되므로 해당 애니메이션을 추가하도록 합니다.

 

 

Text 애니메이션 작업은 시간이 걸리는 관계로 미리 제작된 내용으로 진행합니다.
여튼 동작은 그렇습니다. Text가 위로 통통 튀는 애니메이션이고, 위로 올라갈때 Text Alpha값이나, Scale값등이 적용된 애니메이션이라고 보면 됩니다.

동일하게 NPCBattleUI 로 구현한 것이므로 해당 클래스에서 처리하면 됩니다. 추가된 코드만 작성합니다.


public class NPCBattleUI_New : MonoBehaviour
{
    [SerializeField]
    private GameObject damageTextPrefab;
    
    public void CrateDamageText(int damage)
    {
        if (damageTextPrefab != null) {
            GameObject damageTextGO = Instantiate(damageTextPrefab, transform);
            DamageText damageText = damageTextGO.GetComponent<DamageText>();
            if (damageText == null) {
                Destroy(damageTextGO);
            }
            
            damageText.Damage = damage;
        }
    }
}

// 특정 시간후에 DamageText가 사라지도록 구현
public class DamageText_New : MonoBehaviour
{
    public float delayTimeToDestroy = 1.0f;
    
    void Start()
    {
        Destroy(gameObject, delayTimeToDestroy);
    }
}

실행을 해보면 TakeDamage()가 발생할 때마다 DamageText가 애니메이션으로 잘 동작하는 것을 확인할 수 있습니다.
여기까지가 NPC UI를 사용하여 적의 HP바와 DamageText를 표시하도록 구현이 완료되었습니다.

 

이제 캐릭터의 이동지점을 클릭하였을 때 클릭 지점을 표시하는 기능을 만들어 보겠습니다.
Pointer를 하나 추가하고 Position Y 값을 -100으로 설정합니다. Pointer의 Enable/Disable을 사용하여 보였다 안 보였다 하는 형태를 취할 수도 있고, 여기에서와 같이 -100 위치에 있다가 클릭 위치로 순간 이동시켜서 표시하는 방법도 있습니다.

해당 Pointer에 Image를 추가하여 아래와 같이 설정한 상태로 진행합니다.

이제 클릭 지점에 해당 Pointer Image가 표시되도록 하는 컴포넌트 스크립트를 작성하면 되겠지요~


public class PlaceTargetWithMouse : MonoBehaviour
{
    public float surfaceOffset = 1.5f; // gameObject의 위치에서 조금 높여주기 위해.. 지면과 겹치는 문제 해결위해
    public Transform target = null;
    
    private void Update()
    {
        if (target) {
            transform.position = target.position + Vector3.up * surfaceOffset;
        }
    }
    
    // 마우스 클릭 hit 정보
    public void SetPosition(Raycast hit)
    {
        target = null;
        transform.position = hit.point + hit.normal * surfaceOffset;
    }
}


그리고 PlayerCharactor에서 마우스 클릭을 할 때 적이 아니라면,

if (picker) picker.SetPosition(hit);

코드를 추가해 주면 되고,

만약 적이라면,

if (picker) picker.target = hit.collider.transform;

코드를 추가해 주면 됩니다.

실행해보면 잘 동작하는 것을 확인할 수 있는데요..
여기서의 문제점은 굴곡이 있는 지형이나 벽에서 클릭을 할 경우 파묻히는 현상이 나타날 수 있습니다.

파묻힘을 해결하기 위해서는 데칼 기법이나 프로젝터 기법을 사용하면 됩니다.
이런 구현은 유니티 기본 샘플에 포함되어 있으니 필요한 경우 가져다 사용하면 됩니다.



<위의 코드들은 제가 보면서 주요한 함수, 코드를 확인하기 위해 타이핑한 용도로, 전체 소스코드가 아님에 주의해 주세요. 전체 코드는 교육 수강을 하면 완벽하게 받으실 수가 있답니다 ^^>

패스트캠퍼스 - 올인원 패키지 : 유니티 포트폴리오 완성 bit.ly/2R561g0

유니티 게임 포트폴리오 완성 올인원 패키지 Online. | 패스트캠퍼스