[최종 프로젝트] 서버와 기획에 맞게 클라이언트 수정하기

오, 아름다운 나의 상상 코드

팀원들의 작업 속도는 예상보다 빨랐고, 서버는 추가 기획된 부분까지 하나 둘 구현되기 시작했다. 문제는 추가 기획된 부분을 테스트하려면 기본 클라이언트를 수정해야 한다는 것이었다. 프로젝트를 위해서도, 후에 유니티 담당자분들과 협업할지도 모르는 미래의 나를 위해서도 일단 클라이언트 수정 작업에 도전해봐야겠다는 생각에 일단 작은 것부터 시작해보기로 했다. 

 

 

실전으로 배우는 유니티

작업자마다 다르겠지만, 개인적으로 유니티에서 UI를 먼저 세팅하고 스크립트를 연결하는 것이 가장 작업 속도가 빨랐다. 유니티에서 밑그림을 그리고, 그에 맞는 스크립트를 짜서 채색하는 느낌이었다.

 

유니티에서 먼저 필요한 부분들을 세팅한 모습

 

// 속성 아이콘이 출력될 위치
[SerializeField] private Image imgElement;

// 규칙에 따라 출력될 아이콘 이미지들의 배열
[SerializeField] public Sprite[] elements;

// 아이콘과 함께 출력될 속성명의 배열
private string[] elementList = {"전기 속성", "땅 속성", "풀 속성", "불 속성", "물 속성"};

 

 

유니티 작업창에서 미리 UI를 잡으며 스크립트가 필요한 부분을 확인했기 때문에, 연결해야 하는 부분들을 [SerializeField]로 선언하기로 했다. 또한 서버로부터 받아오는 정보는 속성의 id값 뿐이었으므로, 서버에서 정의된 속성과 동일한 순서로 이미지와 속성명을 위와 같이 세팅해주기로 했다.

 

스크립트에서 [SerializeField] 로 선언하여, 유니티 상에서 연결이 가능해진 모습

 

public void Set(PlayerStatus playerStatus)
{
    SetName(playerStatus.PlayerName);
    SetFullHP(playerStatus.PlayerFullHp);
    SetFullMP(playerStatus.PlayerFullMp);
    SetCurHP(playerStatus.PlayerCurHp);
    SetCurMP(playerStatus.PlayerCurMp);
    // 속성에 맞게 UI를 세팅해주는 함수 추가
    SetElement(playerStatus.PlayerClass);
}

// 1001부터 1005까지 서버로부터 받아오는 id값에 맞게 속성 정보 세팅
public void SetElement(int element)
{
    int elementIndex = element - 1001;
    // txtLv로 세팅된 오브젝트에 elementIndex에 해당하는 string 값 출력
    txtLv.text = $"{elementList[elementIndex]}";
    // imgElement로 세팅된 오브젝트에 elementIndex에 해당하는 sprite 출력
    imgElement.sprite = elements[elementIndex];
}

 

기존 코드에서 플레이어들의 UI를 세팅해주는 Set 함수를 참고하여 속성 관련 UI를 세팅해주는 함수를 추가했다. 1001부터 1005까지의 id값에 맞게, 해당하는 속성 데이터가 그려지도록 하는 간단한 로직이다. 

 

속성과 닉네임이 잘 적용된 모습

 

 

쉽지만, 쉽지 않았던 유니티

 

알고 보면 간단한 이 작업을, 기본 지식이 없는 상태에서 해보려고 하니 몇시간씩 허비하다가 조언을 구하기 일쑤였다. 수많은 블로그와 유튜브 영상들을 봐도 생략된 부분들이 많아 유니티 오브젝트와 스크립트를 연결하는 방법을 찾는 것이 생각보다 어려웠기 때문이다. 나처럼 급하게 유니티에 도전해야 하는 사람들을 위해, 혹시라도 까먹을 미래의 나를 위해 기본적인 작업 순서와 팁들을 하기와 같이 정리해보았다.

💡 잊지 말아야 할 유니티 기본 Tip

1. 유니티 Hierarchy 창에서 우클릭으로 원하는 타입의 오브젝트를 생성한다.
2. 위치와 사이즈, 정렬 기준값 등을 조절하여 원하는 UI의 밑그림을 그린다.
   * 동적으로 변하는 이미지들을 적용해야 할 경우, UI>Image로 밑그림을 그려두고 적용될 이미지들은 
     Sprite로 Resources 폴더에 담아둔다.
3. 스크립트가 연결되어야 할 오브젝트(서버로부터 받은 데이터를 기반으로 출력이 달라지는 경우)들은
    스크립트 초반에[SerializeField]로 선언해준다.
    *동적으로 변하는 이미지 리소스가 있다면, 담아둘 빈 배열도 함께 선언한다.
4. 서버로부터 받은 데이터(패킷)에 맞는 UI가 그려질 수 있도록 함수를 세팅한다.
5. 부모 오브젝트에 전체 스크립트를 'Add Component'로 추가해준다.
6. 부모 오브젝트에 추가된 스크립트에 뚫린 슬롯(?)에 해당하는 오브젝트를 연결시켜준다.
    (Hierarchy 창에서 오브젝트를 끌어서 해당 슬롯에 올려주기)
7. 미리 Resources 폴더에 담아둔, 동적으로 변하는 이미지 소스들은 미리 선언한 빈 배열에 순서대로 연결시켜준다.
    *빈 배열명 옆에 있는 빈칸에 이미지 소스 갯수 만큼 숫자를 기입하면, 숫자에 맞게 슬롯이 열린다.
8. 테스트 하기 전에 꼭 저장하기!