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

suhan0304·2023년 12월 30일

3d game TowerDefenseGame Unity 게임개발

유니티 - Tower Defense Game

목록 보기

24/26

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

강의영상 (26)

개발

레벨 선택 Scene 구현

레벨을 선택하는 장면을 구현하기 위해 MainMenu Scene을 복사해서 LevelSelector라는 이름으로 하나 생성해준다.

StandardTurret, MainMenu 오브젝트를 제거해준 후에 레벨 선택 UI를 구현한다.

레벨 선택 UI 구현

UI > Canvas를 하나 생성해주고 이름을 UICanvas로 수정한다. Title이라는 이름으로 Text를 하나 생성해준다.

글꼴은 Roboto-Thin으로 설정
글자 사이즈와 위치는 적절히 조절
글자 색은 흰색

이제 Panel을 추가로 하나 만들어준 후에 Title과 가로 길이가 같도록 크기를 수정해준다. 해당 Panel에 레벨 버튼들이 추가될 예정이다.

이름을 Levels로 설정
Image의 Color를 검정색으로 설정

해당 Panel에 빈 오브젝트를 하나 자식 오브젝트로 생성해준다.

이름을 ScrollRect로 설정
Left,Right, Top, Bottom을 모두 20으로 설정

이제 ScrollRect 자식 오브젝트로 Content라는 빈 오브젝트를 추가해준다. (Content 자식 오브젝트들로 버튼들이 생성될 예정)

이제 Content의 자식 오브젝트로 버튼을 하나 100, 100 사이즈로 만들어준 후에 GridLayout Group 컴포넌트를 추가해준다. 그 후에 버튼들을 복사해주면 아래 사진과 같이 저절로 배열되면서 버튼들이 추가 되는 것을 볼 수 있다.

이제 Button들 간에 간격을 조절하기 위해 GridLayout Group의 Spacing을 적절히 조절해준다.

이제 Content에 Content Size Fitter 컴포넌트를 추가해준다. (이 때 Content의 앵커는 꽉 차도록 설정해야한다.)

Pivot Y = 1로 설정
Content Size Fitter의 Vertical Fit을 Preferred Size로 설정

Content Size Fitter : 컨텐츠들(자식 오브젝트들)의 사이즈에 맞게 오브젝트의 사이즈가 자동으로 조절되도록 하는 컴포넌트이다. 해당 컴포넌트를 사용하면 버튼들이 들어날 수록 Content 오브젝트의 사이즈가 저절로 버튼들을 모두 포함하는 사이즈가 되도록 커지게 할 수 있다.

레벨 선택 버튼 구현

이제 버튼 하나를 제대로 만들어보자. LevelButton이라는 이름으로 Button을 하나 생성해준다.

버튼에 Shadow 컴포넌트를 추가 후 적절하게 조절
글꼴을 Roboto-Thin으로 설정
글자 사이즈를 45로 설정

Button의 Transition을 Animation으로 수정해준 후에 Animator 컴포넌트를 추가해주고 기존에 사용하던 Button 애니메이션 컨트롤러를 연결시켜준다.

이제 버튼을 프리팹화 시킨 후에 해당 버튼을 복사해서 Content에 붙여넣기 하는식으로 버튼을 추가적으로 생성한다.

버튼 UI 마스크 설정

ScrollRect 사이즈 범위를 넘어가는 버튼들은 드래그해서 해당 버튼을 확인할 수 있도록 ScrollRect에 Rect mask 2D 컴포넌트를 추가한다.

Rect Mask 2D : UI의 사이즈 내부만 출력되도록 마스킹 시키면서 UI 사이즈를 벗어나는 오브젝트는 잘라서 출력하지 않는다.

그 다음에 Scroll Rect 컴포넌트를 추가한다. 그 다음에 수직으로만 스크롤이 되도록 하기 위해 Horizontal은 비활성화 시킨다. 이제 위 아래로 드래그 해서 버튼들을 확인할 수 있다.

Content에는 Content 오브젝트를 연결시켜준다.
Viewport에는 ScrollRect 오브젝트를 연결시킨다.

Canvas의 UI Scale Mode를 Screen Size의 1920x1080으로 설정 후에 위치와 크기를 다시 조절해주었다.

LevelSelector 스크립트

이제 버튼을 누르면 원하는 레벨이 시작될 수 있도록 LevelSelector 오브젝트를 만들어 LevelSelector 스크립트를 작성한다.

LevelSelector.cs

using UnityEngine;

public class LevelSelector : MonoBehaviour
{
    public SceneFader fader;
    public void Select(string levelName)
    {
        fader.FadeTo(levelName); //선택한 레벨 장면으로 Fade 효과 주면서 이동
    }
}

Fader에 SceneFader를 연결시켜준다.

이제 버튼 이벤트에서 Select 함수에 Level01을 매개변수로 넘기도록 초기화 해준 다음에 기존 MainLevel을 Level01이라는 이름으로 복사 붙여넣기 해준다.
(두 번째 버튼도 동일하게 진행하되 매개변수로 Level02를 넘겨준다. + Level02라는 장면을 하나 동일하게 복사해서 생성해준다.)