게임 클리어되었을때 NEXT버튼이나 게임오버시 RESTART 버튼을 사용할 수 있도록 해보겠습니다.

씬 변경 스크립트 만들기

프로젝트뷰 +를 클릭해 ChangeScene이름의 스크립트를 만듭니다.

씬매니저를 사용하기 위해 using UnityEngine.SceneManagement; 를 선업합니다.

불러올 씬을 참조하기 위해  public string SceneName; 변수를 선언합니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class ChangeScene : MonoBehaviour
{
    public string SceneName;  //불러올씬
    // Start is called before the first frame update

    void Start(){
        
    }

    // Update is called once per frame
    void Update(){
        
    }
    public void Load() {
        SceneManager.LoadScene(SceneName);
    }
}

저장합니다. 하이라키의 RestartButtong과 NextButtong에 ChangeScene 스크립트를 어태치 합니다.

이제 RestartButton을 누르면 ChangeScene스크립트의 Load()가 실행되게 만들겁니다.

우선 하이라키의 RestartButtong을 선택후 인스펙트뷰의 OnClick의 +를 눌러 리스트를 하나 생성합니다.

하이라키의 RestartButton을 끌어다 OnClick() None에 놓습니다.  NoFuction을 선택해 팝업이 나오면 ChagneScene>Load()를 선택합니다. 오른쪽같이 변경되어야 합니다.

 

스크립트의 Scene Name에 Stage1이라고 입력합니다.

하이라키의 Canvas를 프로젝터뷰로 드래그앤드랍해서 프리팹으로 만들어줍니다. UI가 동작하기 위해서는 EventSystem도 필요한데 프리팹에는 포함되어 있지 않기 때문에 나중에 +를 눌러 추가할 수 있습니다.

 

현재 Scene의 이름이 SampleScene입니다. 이름을 Scene1으로 변경하겠습니다. 리로드해줍니다.

'유니티2D게임 > 버튼과 UI' 카테고리의 다른 글

게임과 UI를 관리하는 스크립트 만들기  (0) 2023.05.14
게임UI 만들기  (3) 2023.05.14

게임 전반을 관리하는 GameManager를 만들겠습니다. 프로젝트뷰의 +를 클릭해 C# Script를 만들고 GameManager라 이름 변경합니다. 아이콘이 톱니바퀴모양으로 됩니다. 이걸 끌어다 하이라키의 Canvas에 끌어다 어태치합니다.

GameManager 스크립트를 다음과 같이 작성합니다.

UI를 컨트롤 하기 위해 다음과 같이 선언합니다.

GameManager.cs
0.00MB

using UnityEngine.UI; // UI 를 사용할 때 필요

GUI를 다루기 위해 변수를 선언합니다. 아까 만들었던 패널  버튼 이미지등입니다.

public GameObject mainImage;        // 이미지를 담아두는 GameObject
public Sprite gameOverSpr;          // GAME OVER 이미지
public Sprite gameClearSpr;         // GAME CLEAR 이미지
public GameObject panel;            // 패널
public GameObject restartButton;    // RESTART 버튼
public GameObject nextButton;       // NEXT 버튼
Image titleImage;                   // 이미지를 표시하고있는 Image 컴포넌트

보통은 시작화면을 게임씬과 분리하여 독립된 씬으로 사용하는데 여기서는 게임씬안에서 시작시 감추네요

Invoke()함수로 "GAME START이미지를 Inactive하는InactiveImage()"를 1초후 호출합니다. 

panel.SetActive()를 이용 감춥니다. 포함된 버튼들도 다 감추어 집니다.

void Start() {
    Invoke("InactiveImage", 1.0f); // 이미지 숨기기
    panel.SetActive(false); // 버튼(패널)을 숨기기
}

Invoke() 함수는 다음과 같이 SetActive()를 이용해 비활성화 합니다.

void InactiveImage() {
    mainImage.SetActive(false); // 이미지 숨기기
}

Update()에서는 PlayerController.gameState 변수를 참조해서 Image오브젝트들을 표시하거나 설정합니다.

원래 런타임시의 객체에 접근하려면 Public으로 참조하던지 Find해야하는데 PlayerController는 아무런 참조없이 그냥 사용하고 있습니다. 이건 gameState를 static으로 선언했기 때문입니다. PlayerController의 gameState외 다른것들은 꼭 연결후 사용하셔야 합니다. 일종의 싱글턴 기법입니다. 

GameOver일시 NEXT버튼의 interactable변수를 false로 해 비활성 상태로 만듭니다. 또한 PlayerController.gameState=gameend로 설정해 다음 프레임부터 아무런 처리도 안하게 만들어 줍니다.

if (PlayerController.gameState == "gameClear"){
    ~생략
}
else if (PlayerController.gameState == "gameOver"){
    ~생략
}
else if (PlayerController.gameState == "playing"){
    // 게임 중
}

이제 하이라키에서 Canvas를 선택하고 GameManager의 변수들을 연결해야합니다. 하이라키의  Cavans에서 Image, Panel, RestartButton, NextButtong을 다음과 같이 끌어서 연결합니다. 이후  Images폴더에서 GameOver, StageClear 스프라이트를 끌어다 놓와줍니다.

GameManager의 전체코드 입니다

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // UI 를 사용할 때 필요

public class GameManager : MonoBehaviour
{
    public GameObject mainImage;        // 이미지를 담아두는 GameObject
    public Sprite gameOverSpr;          // GAME OVER 이미지
    public Sprite gameClearSpr;         // GAME CLEAR 이미지
    public GameObject panel;            // 패널
    public GameObject restartButton;    // RESTART 버튼
    public GameObject nextButton;       // NEXT 버튼
    Image titleImage;                   // 이미지를 표시하고있는 Image 컴포넌트

    // Start is called before the first frame update
    void Start() {
        Invoke("InactiveImage", 1.0f); // 이미지 숨기기
        panel.SetActive(false); // 버튼(패널)을 숨기기
    }

    // Update is called once per frame
    void Update()
    {
        if (PlayerController.gameState == "gameClear")
        {
            // 게임 클리어
            mainImage.SetActive(true); // 이미지 표시
            panel.SetActive(true); // 버튼(패널)을 표시
            // RESTART 버튼 무효화 
            Button bt = restartButton.GetComponent<Button>();
            bt.interactable = false;
            mainImage.GetComponent<Image>().sprite = gameClearSpr;
            PlayerController.gameState = "gameEnd";
        }
        else if (PlayerController.gameState == "gameOver")
        {
            // 게임 오버
            mainImage.SetActive(true);      // 이미지 표시
            panel.SetActive(true);          // 버튼(패널)을 표시
            // NEXT 버튼 비활성
            Button bt = nextButton.GetComponent<Button>();
            bt.interactable = false;
            mainImage.GetComponent<Image>().sprite = gameOverSpr;
            PlayerController.gameState = "gameEnd";
        }
        else if (PlayerController.gameState == "playing")
        {
            // 게임 중

        }
    }
    
    void InactiveImage() {
        mainImage.SetActive(false); // 이미지 숨기기
    }
}

'유니티2D게임 > 버튼과 UI' 카테고리의 다른 글

게임 재시작 기능 만들기  (0) 2023.05.14
게임UI 만들기  (3) 2023.05.14

이미지 UI 만들기

하이라키 + 를 누르고 UI>Image를 클릭한다. Canvas를 부모로 Image가 생기고 EventSystem까지 생겼다. ㅠㅠ

Canvas 표시 설정

하이라키의 Canvas를 더블클릭해서 포커스해보면 게임화면 보다 훨씬 큰 크기입니다. 

현재 Canvas의 Renderer Mode는 Screen Overlay라 결국 최종 출력위에 오버레이 되는 거라 출력은 게임화면 사이즈를 무시하고 현재 이 상태가 오버레이되지만 게임화면과 좀더 직관적인 편집을 위해 모드를 Screen Space - Camera로 변경합니다. 나중에 다시 변경해도 문제없습니다. Renderer Camera를 하이라키의 Main Camera를 끌어다 놓거나 ◉검색브라우저를 눌러 찾아도 됩니다.

이제 하이라키의 Canvas를 더블클릭해서 포커스를 주면 게임화면과 같이 보이게 되나 이미지가 보이지 않습니다. 문제는 Order in Layer입니다. 이걸 10으로 변경해서 가장 위로 위치 시킵니다. 

Overlay Mode에서는 무조건 게임씬 맨 위로 오버레이되기 때문에 이런 문제가 없습니다. 여기서 다루지 않은 World Space모드는 Cavas위치를 게임내 3D 월드공간 특정 위치에 배치됩니다. 따라서 자유도는 있지만 게임출력화면에 딱 붙어 있지 않으므로 잘 조절해야 합니다.

 

현재 이미지는 Cavas 좌하에 위치하고 있습니다. 중앙으로 옮겨보겠습니다. 하이라키의 Image를 클릭한후 손으로 옮겨도 되겠지만 좀더 편한 방법이 있습니다. 인스펙터뷰의 Transform아래 좌표그림을 눌러봅니다. Anchor 프리셋이 나타납니다. 잘 읽어보면 Alt를 누를 경우 set position을 바꿀수 있습니다. Alt를 누르면 화면이 바뀌고 가운데를 누르면 위치가 가운데로 변경됩니다.

Image가 선택되어져 있는 상태에서 프로젝트뷰 Images폴더에서 GameStart이미지를 Image컴포넌트의 Source Image에 끌어다 가져다 놓으면 표시가 바뀝니다.

그런데 사이즈가 좀 작고 글씨가 뭉쳐보이지요 같은 Image컴포넌트 내 PreserveApect를 체크하고 Set Native Size를 클릭하면 보기좋게 바뀝니다.

버튼 UI 추가하기

게임이 끝난 후 재시작하기 위한 RESTART버튼을 추가합니다. 버튼도 UI오브젝트이기에 Cavas안에 배치합니다.

계층 뷰의 Canvas를 선택하고 +>UI>Legacy>Button을 선택합니다. 이름을 RestartButton으로 변경합니다.

Images폴더내 Button스프라이트를 끌어다 Image컴포넌트의 Source Image로 끌어다 주고 Preserve Aspect 체크 Set Native Size를 클릭후 화면에 맞게 적당히 사이즈를 조절해줍니다.

하이라키의 RestartButton을 펼쳐보면 Text가 숨어 있습니다. RestartText로 이름을 변경해주고 인스펙터뷰의 Text컴포넌트에서 RESTART로 Text내용을 바꿔주고 사이즈도 적당히 바꿔줍니다.

하이라키뷰에서 RestartButton를 선택후 Ctrl-D를 눌러 복사한후 이름을 NextButton으로 변경한후 펼치후 Text를 인스펙터뷰에서 NEXT로 바꿉니다. RestartButton을 선택후 위치도 적당히 아래로 내려줍니다. (위치는 Text가 아닌 Button을 해야 함께 움직입니다.)

하이라키에서 Canvas선택후 +를 눌러 UI>패널을 만듭니다. 버튼2개를 감쌀 정도로 사이즈를 바꿔줍니다.

 

이후 버튼 2개를 패널의 자식으로 만듭니다. 패널을 선택하고 칼라의 알파를 0으로 변경합니다.

+ Recent posts