[Unity][3D-Game] Tower Defense Game (16)

suhan0304·2023년 12월 20일

3d game TowerDefenseGame Unity 게임개발

유니티 - Tower Defense Game

목록 보기

16/26

preview Link : https://velog.io/@suhan0304/Unity3D-Game-Tower-Defense-Game-15
gitHub Link : https://github.com/suhan0304/TowerDefenseTutorial

강의영상 (18)

개발

노드 UI

터렛을 선택하면 업그레이드, 판매를 할 수 있도록 UI가 뜨도록 할 예정이다. 해당 기능을 위해서 먼저 터렛 선택 시 뜰 노드 UI를 먼저 만들어보자. 먼저 빈 오브젝트로 Node
UI를 생성한다. NodeUI의 Position을 Prefab에서 스탠다드 포탑을 하나 꺼내서 해당 포탑의 위치와 맞춘다. 이제 캔버스를 NodeUI의 자식 오브젝트로 생성해준다.

Canvas의 Render Mode를 World Space로 설정
Rect Transform를 Reset
Scale을 (0.07, 0.07, 0.07)로 설정

위치를 포탑의 위쪽으로 옮긴 후
Width, Height = 210, 95로 설정
자식 오브젝트로 패널을 추가

이제 패널의 이름을 Buttons로 설정해준 후 Image를 비활성화 해준 후 컴포넌트로 Horizontal Layout Group을 추가해준다. 그런 다음 자식 오브젝트로 Button을 추가해준다.

Horizontal Layout Group의 Control Child Size의 Width, Height을 체크해주어야 Button의 사이즈가 자동으로 꽉차게 조절된다.

Button의 Text를 다음과 같이 수정한다.

<b>...</b>를 텍스트 부분에 추가하면 해당 부분만 굵게 설정이 가능하다. (마크업 언어의 굵게 설정과 유사하다.)

이제 버튼의 스타일을 적당히 설정해주고 해당 버튼을 하나 Ctrl+D로 붙여넣기 해준 후에 Sell로 설정해준다.

이제 패널의 사이즈를 줄이고 남은 공간에 포탑을 가리키는 화살표를 만들어준다. Canvas 안에 Image 오브젝트를 하나 추가해주고 Source Image를 DropdownArrow로 설정해준다. 그런 다음 크기와 위치를 적절히 조절해준다. (패널의 Bottom을 높여서 패널의 아래에 공간을 만들어준다.)

이제 캔버스 Rotation을 65로 설정해서 화면에 잘 보이도록 눕혀주고 화살표가 포탑을 잘 가리키도록 위치를 적절히 조절한다.

인게임 상에서 확인해보면 다음과 같다.

노드 선택 구현

이제 터렛이 건설된 노드를 선택해야 Node UI를 뛰우도록 할 것이기 때문에 노드를 선택하는 기능을 구현해보자. 다른 스크립트로 구현해서 코드가 복잡해지는 것보다는 기존의 빌드 매니저, 노드 스크립트에 선택 기능을 구현한다.

BuildManager.cs

private Node selectNode; // 선택한 노드

public void SelectNode(Node node)
{
    selectNode = node; //선택한 노드에 매개변수 노드를 연결
    turretToBuild = null; //건물 건설은 더 이상 진행 X
}

public void SelectTurretToBuild (TurretBlueprint turret)
{
    turretToBuild = turret; //건설하기위해 선택한 터렛을 turretToBuild에 넣어준다.
    selectNode = null; //선택한 노드는 null로 초기화
}

Node.cs

private void OnMouseDown()
{
    if (EventSystem.current.IsPointerOverGameObject())
        return;

    if (turret != null) //터렛 오브젝트가 null이 아니면 이미 터렛이 있다는 모습 -> 노드 선택
    {
        buildManager.SelectNode(this);
        return;
    }

    if (!buildManager.CanBuild) //건설할 터렛이 null이 아니면 True 리턴됨 (BuildManager 참고)
        return;

    buildManager.BuildTurretOn(this); //이(this) 노드에 Turret을 건설

NodeUI 스크립트

이제 노드가 선택되면 NodeUI가 해당 위치에서 표시되고 선택이 해제되면 사라지도록 관리할 NodeUI 스크립트를 작성한다.

NodeUI.cs

public class NodeUI : MonoBehaviour
{
    public GameObject ui;

    private Node target;

    public void SetTarget(Node _target)
    {
        target = _target;

        transform.position = target.GetBuildPosition(); // 노드 포지션이 아니라 빌드 포지션을 가져온다
                   
        ui.SetActive(true); //NodeUI 오브젝트를 활성화
    }
    
    public void Hide()
    {
        ui.SetActive(false); //NodeUI 오브젝트를 비활성화
    }
}

이제 SetTarget을 BuildManager에서 수행하도록 업데이트한다.

BuildManager.cs

public void SelectNode(Node node)
{
    selectNode = node; //선택한 노드에 매개변수 노드를 연결
    turretToBuild = null; //건물 건설은 더 이상 진행 X

    nodeUI.SetTarget(node);
}

public void SelectTurretToBuild (TurretBlueprint turret)
{
    turretToBuild = turret; //건설하기위해 선택한 터렛을 turretToBuild에 넣어준다.
    selectNode = null; //선택한 노드는 null로 초기화

    nodeUI.Hide();
}

이제 NodeUI와 ui 오브젝트를 연결해준다.

선택 해제 구현

건설 버튼을 누르지 않더라도 선택된 노드를 한 번 더 선택하면 선택이 해제되면서 NodeUI가 사라지는 기능을 구현한다.

BuildManager.cs

public void SelectNode(Node node)
{
    if (selectNode == node)
    {
        DeselectNode();
        return;
    }
    selectNode = node; //선택한 노드에 매개변수 노드를 연결
    turretToBuild = null; //건물 건설은 더 이상 진행 X

    nodeUI.SetTarget(node);
}
public void DeselectNode()
{
    selectNode = null;
    nodeUI.Hide();
}

public void SelectTurretToBuild (TurretBlueprint turret)
{
    turretToBuild = turret; //건설하기위해 선택한 터렛을 turretToBuild에 넣어준다.

    DeselectNode();
}