업데이트가 늦었다. 현재 학교 시험기간이고, 병행하기 조금 힘들어졌다.
그래도 이 전에 진도가 나갔던 내용은 필기는 잊어버리기 전에 velog에 적어놔야 한다고 생각해서 작성하게 되었다.
우선 프로젝트를 마무리 짓고, 내가 생각하던 게임의 구상은 이렇다.
- Player는 어떠한 공간을 탈출하기 위해, Key를 일정 개수 모아야 한다.
- 물론 그냥 Key를 모으는 것은 재미가 없으므로, 특정 Monster들을 소환해놓아 플레이어를 쫓게 만든다.
- Monster들을 피하기 위해 Player는 뛸 수 있지만, Stamina가 고갈되면 뛸 수 없다.
- Monster의 어그로를 풀기 위해서는 특정 행동을 해야한다 (아직 특정 행동에 대해서는 정하지 않았음)
현재까지 정해진건 여기까지이다. 하나하나씩 구현하고 있고, 그 중 하나를 오늘 적어보도록 하겠다.
UI (User Interface)
말로는 많이 들어봤을 것이다. 게임에서의 UI는 사용자가 게임에 대한 정보를 직접적으로 볼 수 있는 장치를 뜻한다. 아마 이번 게임에서는, Key의 개수나 남은 Stamina의 양을 볼 수 있게 만들 것이다.
나는 이번에 게임을 제작할 때, 3인칭 3D 템플릿을 이용하였고, 템플릿 내에 미리 작성되어 있는 ThirdPersonController.cs 코드를 사용하였다.
유니티에서의 UI
본인도 게임을 많이 좋아하는 유저로서, UI를 아는건 맞았지만 구현해보는 것은 이번이 처음이었다.
처음 UI를 제작하려고 했을 때, 아무 생각 없이 왼쪽 Hierarchy 창에서 우클릭 -> UI -> Text로 UI를 만들었다.
하지만, 이렇게 하면 실제 게임 창에 Text가 뜨지 않는다. 그 이유는 UI가 월드 상에 존재하기 때문에, 월드의 저 끝에 UI가 박혀있어서 캐릭터에는 뜨지 않는다.
그래서 우선 캐릭터에 UI를 붙여보았다. 3인칭 3D 템플릿을 사용한다면, 캐릭터는 PlayerArmature라는 이름의 오브젝트로 생성되어있다. 이 하단에 UI를 넣고 실행하면, 캐릭터를 돌리는 순간 UI가 함께 이동해버린다.
그래서 또 다시 고민하게 되었다. 검색을 해보니, UI는 카메라에 붙이는 경우가 많다고 한다. 이를 보고, 실제로 카메라에 붙여보니 원하는 대로 작동이 되는 것을 확인할 수 있었다.
그림으로 이를 표현하면 다음과 같다 (본인의 처참한 그림 실력을 부디 용서하길)
위에 적힌 것처럼, PlayerArmature는 Camera의, 정확히 말하면 PlayerFollowCamera와 붙어있다.
UI가 만약 카메라에 포함되어 있다면, PlayerFollowCamera는 위에서 그린 것처럼 캐릭터를 비추면서 UI도 비출 것이다.
하지만, PlayerArmature가 UI를 가지고 있다면, 캐릭터가 돌아가는 순간 UI도 돌아가면서 카메라에 이상하게 비춰질 것이다.
맨 처음에 한 것처럼, World 자체에 UI를 생성해버린다면, PlayerFollowCamera가 담을 수 없을만큼 UI가 커지기 때문에 UI가 보이지 않게 되어버리는 것이다.
꼭 UI를 만들면 카메라에 붙이도록 하자...!
Key 가까이에 갈 때, 줍는 키(E)를 띄우게 하는 UI
이 윗 부분까지 쓰고 거의 2주일이 지나버렸다. 기억이 가물가물하지만, 다시 학습해서 써보겠다.
UI를 카메라에 붙이고, 제대로 나오는 것까지 확인하였다. 그러면 뒷 일은 간단하다. Key나 PlayerArmature에 감지 장치 같은 것을 달고, 감지하면 UI에 글자를 띄워주면 되는 것이다.
나는 PlayerArmature, 즉 플레이어에 Trigger를 달았고, 만약 플레이어의 Trigger 안에 Key가 들어온다면 UI에 글자를 띄워주는 방식으로 코드를 짰다.
우선, 플레이어의 왼쪽 잘 보이는 쪽에 E라는 글자를 가진 Text형 UI를 하나 만들어준다. 본인은 TMP_Text형으로 하나 만들어 주었는데, 유니티에서 지원하는 기본 Text보다 더 깔끔한 글자를 만들어준다고 한다.
이렇게 글자를 만든 후, 게임을 실행하면 그냥 E라는 글자가 덩그러니 캐릭터의 왼쪽 편에 떠있을 것이다. 하지만, 우리는 아무것도 없는 Default 상태일때는 UI를 숨기고, 트리거가 Key를 감지하였을때만 띄우게 하고 싶다.
그걸 위하여, 우선 [SerializedField]를 이용하여 이 UI Text를 ThirdPersonController 스크립트 안으로 가져왔다.
[SerializeField] TMP_Text tmp;tmp 변수 안에 TMP_Text형 UI가 저장되었다. 이 코드를 이용하여,
private void Awake()
{
// get a reference to our main camera
if (_mainCamera == null)
{
_mainCamera = GameObject.FindGameObjectWithTag("MainCamera");
}
// 위 코드는 ThirdPersonController.cs 파일에 처음부터 작성되어있던 코드이므로 건드리지 않았습니다.
tmp.gameObject.SetActive(false);
}Awake() 클래스 안에 SetActive()를 사용하여 UI를 꺼준다.
private void OnTriggerStay(Collider other) {
// Code for players to enable to take key
if (other.tag == "Key"){ // If trigger detects object tagged "Key"
isReadyToTaken = true; // make bool var to true so that player can take key
tmp.gameObject.SetActive(true); // Enable hidden UI Text
key = other.gameObject;
Debug.Log("You can take a key!");
}
}
private void OnTriggerExit(Collider other) {
// Code for player to disable to take key
if (other.tag == "Key"){
isReadyToTaken = false; // If trigger can't detect object tagged "Key",
tmp.gameObject.SetActive(false); // Enable hidden UI Text
Debug.Log("You can't take a key..."); // Debugging code
}
}OnTriggerStay, OnTriggerExit를 이용하여, Player에 미리 넣어둔 Trigger를 이용하는 코드를 짰다. 만약 트리거가 감지한 물체의 Tag가 "Key"라면, 위에서 사용한 SetActive()를 이용하여 UI를 켜주는 것이다. 트리거에서 감지한, Tag가 "Key"인 물체가 더 이상 트리거에 감지되지 않는다면, SetActive()를 사용하여 UI의 글씨를 꺼주는 것이다.
아무 물체나 만든 후, Tag를 Key로 준 후 실제로 실행하면
이 링크에서 실행 결과를 확인할 수 있다.
다음 게시글에서는, 스태미너 시스템과 가지고 있는 Key의 개수를 확인할 수 있는 UI를 만들어보도록 하겠다.
