Object 이미지 변경 및 제작

Object 이미지 변경 및 추가 패널

전체적으로 컨셉에 부합하게 혼란한 컨셉의 이미지로 설정하였는데, 게임을 플레이를 하거나 UI 글씨를 읽는 부분에 있어서 혼선이 있어, 폰트를 일부 수정하고 UI도 약간 조정을 하였다. 추가적으로 생성한 패널들에는 깔끔한 이미지를 적용하고, 폰트도 가독성이 좋은 것으로 바꾸게 되었다. 추가적으로 생성한 sprite들은 모두 그림판 3D로 제작하였으며, 가볍게 마우스로 그렸다.

Info 패널 생성

Info 패널에서 내 정보를 확인할 수 있고, 맞힌 단어들의 뜻을 확인하고 업적도 확인하고 튜토리얼 구글 연동 등 다양한 정보를 확인할 수 있다.

Dictionary 패널 생성

사전 패널에서는 내가 지금까지 맞힌 단어들을 확인할 수 있다. 단어를 클릭하면 단어의 뜻을 확인할 수 있다. 추가적으로 검색 기능도 넣어 두었는데, 검색은 실시간 반영 형식으로 검색 버튼을 누르지 않아도 지금까지 검색한 글자가 포함된 단어를 보여준다. InputField에서 addListener를 통해 실시간으로 입력된 string을 반환하는데, 이 반환된 string으로 검색하게 된다.

    [SerializeField] public InputField input;
    public void Start()
    {
        input.onValueChange.AddListener(ValueChanged);
    }
    void ValueChanged(string text)
    {
        Debug.Log(text + " - 글자 입력 중");
    }

위와 같은 코드를 통해 InputField의 실시간 입력 값을 출력해 볼수 있다. 아래와 같은 결과가 나온다. 한글을 입력했을 때는 한글자가 모두 완성되어야 출력된다.

업적 패널 생성

업적 패널은 특정 미션을 클리어하게 되면 업적을 획득하게 된다. 특정 업적 목록은 뒤끝서버에 저장되어 있고, Dictionary<string,bool> 형태이다. 서버에서 정보를 불러와 특정 미션이 true이면 클리어했다는 것으로 업적 패널에 표시된다. 클리어 하지 못한 업적은 ??로 뜨게 된다. 추가적으로 닉네임 옆의 아이콘으로 설정할 수 있으며, Toggle Group을 통해 여러 Toggle들을 하나의 그룹으로 묶어서 라디오 버튼처럼 사용할 수 있다. 체크된 이미지를 사용자의 아이콘이 되게 된다.

랭킹 패널 생성

랭킹 패널은 뒤끝서버에서 랭킹을 불러와 유저의 정보를 검색하여 유저의 등수와 일부 정보를 보여준다.

위와 같이 정보를 보여준다.

---

Scroll Veiw

위의 세개의 패널은 모두 Scroll View를 사용하고, Prefebs를 통해 content를 채워넣었다.

현재 게임에 필요한 Scroll View는 일단 세로로 움직여야 한다. 그리고 Scrollbar는 비활성화 시키고, Scroll의 움직임이 끝과 끝에서 걸리는 느낌이 드는 옵션이 필요하다. 추가적으로 content를 구성하는 부분은 위쪽부터 자연스럽게 채워야하므로, Content Size Fitter와 Grid Layout Group을 이용하여 content에 채울 것들을 크기를 한번에 조절하고, 간격과 채우는 방향을 조절할 수 있다.

위와 같이 Scroll View의 Component에서 Vertical만 체크하여 세로로만 움직일 수 있게 한다. 추가로 Movement Type을 Clamped로 하여 Scroll의 끝과 끝이 걸리는 느낌을 준다.

위와 같이 설정하고, 위에서 Grid Layout Group의 Cell Size를 통해 Scroll View에 들어갈 Prefebs들의 크기를 한번에 조절하고, Spacing을 통해 오브젝트들의 간격을 조정한다. Padding을 통해 content들의 위 아래 좌우 간격을 조절할 수 있다. Start Corner을 통해 어디서 부터 채워 나갈지를 조절할 수 있다.

[SerializeField] public GameObject wordPrefeb;
public void CreateBlock()
{
    foreach (var row in clearWords)
    {
        var word = Instantiate(wordPrefeb); 
        //프리펩을 생성
        word.transform.parent = content.transform; 
        // 프리펩의 부모를 Scroll View의 content로 설정
        word.name = row;
        word.transform.localScale = new Vector2(1.0f, 1.0f); 
        // 프리펩을 생성하는 과정에서 Scale이 뒤죽박죽되어서 1로 고정
        word.transform.DOMoveZ(99f, 0); 
        // 프리펩을 생성하는 과정에서 z축이 -30000 까지 가버리는데 원인을 못찾고 있다. 
        word.transform.GetChild(0).GetComponent<Text>().text = row;
    }
}

위와 같은 코드를 통해 프리펩을 Scroll View에 생성할 수 있다.

위와 같이 설정하면, 생성된 Scroll은 이렇게 작동한다.