[1인개발 프로젝트] 하늘소 프로젝트 2주차

1주차에 기본적인 세팅을 하고, 간단한 애니메이션을 구현하는 등의 작업을 했었는데, 1주차에 너무 달렸는지 그만 롤이 재밌어지는 부작용이 찾아왔다. (진짜 거짓말 안치고 3일동안 케일 조이만 함)

어떻게든 부작용을 처리하고 다시 프로젝트 작업에 들어갔다.

편의점 갈 때 찍었던 하늘

이 사진은 또 두 줄을 발견해서 찍었던 사진이다. 두 줄이 뭔데?

아무튼, 2주차에는 디자인 중심의 공부를 하고, 본격적으로 모바일 환경에서의 개발을 위해 마지막 세팅을 했다. 3D가 들어가면 좋을 것 같아 블렌더도 공부해보고, 모바일 환경 설정을 하다가 엄청난 삽질을 하기도 했다.

---

블렌더 공부

생각해뒀던 게임의 이미지가 생각보다 3D를 요구하는 구도가 많아서, 이것을 실제 3D 에셋으로 편하게 다뤄보면 어떨까 하고 블렌더 공부를 해봤다. 어떻게 했는데?

[#1] 완전 기초부터 시작하는 블렌더

하긴 했지만... 생각보다 어려운 난이도와 직접 그리는 것 보다 오래걸리는 모델링 속도에 일찌감치 포기했다.

비록 프로젝트에 반영이 안된 것은 아쉽지만, 자기계발에는 확실히 도움이 되었고, 또 누가 아나? 나중에 프로젝트에 쓸지.

---

메인 씬 UI 제작

고정 UI

스플래시 씬과 로딩 씬은 얼추 되었기 때문에, 메인 씬에 쓸 UI 에셋을 제작하였다.

아래는 예시 에셋이다.

지역 인장 및 재화 표시칸	퀘스트	우편함	설정

 

Medibang Paint를 주로 사용하였고, 필요에 따라 일러스트레이터도 약간 첨가하였다.

 

에셋을 추가하고, 배치하여 UI로 만들었다. 그리고, 우편함과 설정은 우측에 토글 버튼을 만들어 펼치고 접는 형식의 UI로 구성하였다.

그리고, 실제 시간을 나타내는 UI를 추가해 힐링 요소라면 힐링 요소인 것을 추가했다.

아래는 실제 시간 UI의 코드이다.

    void Update()
    {
        date = DateTime.Now.ToString(("HHmm"));
        //0시 ~ 6시 = 새벽
        //6시 ~ 10시 = 아침
        //10시 ~ 15시 = 낮
        // 15시 ~ 19시 = 저녁
        // 19시 ~ 24시 = 밤
        if (Int32.Parse(date) >= 0 && Int32.Parse(date) < 600)
        {
            dateText.text = "새벽 " + date[0] + date[1] + "시 " + date[2] + date[3] + "분";
        } else if (Int32.Parse(date) >= 600 && Int32.Parse(date) < 1000)
        {
            dateText.text = "아침 " + date[0] + date[1] + "시 " + date[2] + date[3] + "분";
        }
        else if (Int32.Parse(date) >= 1000 && Int32.Parse(date) < 1500)
        {
            dateText.text = "낮 " + date[0] + date[1] + "시 " + date[2] + date[3] + "분";
        }
        else if (Int32.Parse(date) >= 1500 && Int32.Parse(date) < 1900)
        {
            dateText.text = "저녁 " + date[0] + date[1] + "시 " + date[2] + date[3] + "분";
        }
        else if (Int32.Parse(date) >= 1900 && Int32.Parse(date) < 2400)
        {
            dateText.text = "밤 " + date[0] + date[1] + "시 " + date[2] + date[3] + "분";
        }
    }

DateTime.Now.ToString(("HHmm"));을 이용해 현재 시간을 받아오고, 이를 Update 안에 넣어 지속적으로 현재 시간 변수가 새로고침되도록 했다. 그 후, 일정한 기준으로 시간을 분류해 새벽, 아침과 같은 현재 상태를 시간 앞에 붙여 소소한 재미를 더했다.

배경 아트워크

파란 배경에 들어갈 배경이미지를 제작했다.

프로그램은 Medibang Paint만 사용하였다.

낮의 모습	밤의 모습

 

이 작업만 이틀이 걸렸다...

 

저 배경 이미지는 층이 나뉘어있어, 모바일 기기의 자이로 센서나 가속도 센서를 이용해 핸드폰을 움직이면 그에 따라 배경도 움직이는 효과를 줄 것이다.

---

메인 씬 애니메이션 구현

게임의 컨셉이 힐링이고, 배경에 아트워크가 들어갔기 때문에 UI를 숨기는 버튼 또한 만들었다. 위로 숨겨질 UI, 옆으로 숨겨질 UI, 아래로 숨겨질 UI를 분류한 후에 간단하게 위치를 옮기는 애니메이션을 수행해 숨기는 기능을 구현하였다.

숨기기 전	숨긴 후

 

배경 보기 버튼을 눌러 숨기고, 다시 UI가 나와야하기 때문에 배경 보기 버튼은 숨기지 않았다. 지금 생각하고있는 추가 구현 요소는, 배경 보기 버튼도 숨기되 숨긴 후에 화면 중앙에 '터치하여 돌아가세요' 라는 반투명한 문구와 함께 반투명한 이미지를 추가하면 어떨까 하는 것이다. 추후에 구현할 예정이다.

 

그리고, 시간에 따라 배경의 시간대도 바뀌는 애니메이션을 제작하였다. 단순히 시간만 보고 배경을 페이드 효과와 함께 바꾸는 것이지만, 꽤 괜찮은 느낌을 주고 게임에서 '힐링 게임'의 느낌으로 가게 해주는 요소가 되는 것 같다.

---

 

모바일 개발 환경 구축

모바일 게임을 만들기 때문에, 모바일에 맞는 개발 환경을 구축했다.

Unity Remote 사용

모바일 게임은 단순히 에디터에서 하는 테스트만으로는 부족하다. 실제 모바일 기기에 옮겨서 테스트를 해봐야하는데, 그 때마다 빌드하고 앱 깔아서 보기에는 굉장히 번거롭다. 그래서, 이 수고로움을 덜어주기 위해 유니티에서 만든 Unity Remote를 사용하기로 했다.

Unity Remote는 모바일 기기와 컴퓨터를 연결하여 모바일 기기와 동시에 테스트를 돌릴 수 있는 서비스이다. 

1. 플레이스토어에서 앱 설치 / 연결

플레이스토어에서 Unity Remote 앱을 깐다.

그 후에, 핸드폰 설정의 개발자 모드에 들어가 USB 디버깅 모드를 켜준다. (이걸 켜지 않으면 되지 않는 경우도 있다고 함.)

그리고 핸드폰과 컴퓨터를 연결한다. 그러면 핸드폰에 권한 관련해서 허용하겠냐고 묻는데, 허용하면 된다.

2. Unity Remote 디바이스 설정

프로젝트의 Project Settings > Editor에 디바이스를 설정하는 것이 있다. 그것을 Any Android Device로 설정해준다.

3. 에디터에서 테스트 시작

이제 Unity Remote 앱을 켠 채로 에디터에서 시작버튼을 누르면, 핸드폰에서도 테스트가 작동된다! 이렇게 터치 여부 혹은 자이로 센서를 직접 테스트해볼 수 있다.

빌드 환경 설정

원래 쓰던 2022.3.6.1f LTS 버전에 Android 개발 환경이 안깔려있길래, 깔고 빌드를 해봤더니 계속 오류가 나서 결국 새 버전의 에디터를 깔았다.

1. 빌드 환경 변경

기본 플랫폼이 Windows, Mac, Linux로 되어있는데, Android에 가면 Switch Platform이 있다. 이걸 눌러 플랫폼을 바꿔준다.

2. 최소 안드로이드 버전 설정

구동될 안드로이드의 최소 버전을 설정해줘야한다. File > Build Settings > Player Settings > Other Settings에 Minimum API Level을 설정해주면 된다. 나는 Android 13.0 (API 33)으로 설정했다.

아무래도 이 요소가 구형 핸드폰에서 일부 게임을 이용하지 못하는 원인인 것 같다.

 

이제 빌드를 하면 빌드가 잘 된다!

해상도 변경 기능 구현

모바일 기기는 특성상 기기마다 해상도가 다 다르기 때문에 이것을 맞춰줘야한다.

    public void SetResolution()
    {
        int setWidth = 1080;
        int setHeight = 1920;

        int deviceWidth = Screen.width;
        int deviceHeight = Screen.height;
        width = deviceWidth;
        height = deviceHeight;

        Screen.SetResolution(setWidth, (int)(((float)deviceHeight / deviceWidth) * setWidth), true);

        if ((float)setWidth / setHeight < (float)deviceWidth / deviceHeight)
        {
            float newWidth = ((float)setWidth / setHeight) / ((float)deviceWidth / deviceHeight);
            Camera.main.rect = new Rect((1f - newWidth) / 2f, 0f, newWidth, 1f);
            width = newWidth;
        }
        else
        {
            float newHeight = ((float)deviceWidth / deviceHeight) / ((float)setWidth / setHeight);
            Camera.main.rect = new Rect(0f, (1f - newHeight) / 2f, 1f, newHeight);
            height = newHeight;
        }

    }

https://giseung.tistory.com/19를 참고했다.

 

간단히 코드를 설명하면, 원래 보여주고 싶은 해상도를 설정해놓고 기기의 해상도를 감지한다. 그 후, 해상도를 설정해주고, 기기의 해상도에 맞게 카메라를 조정해준다.

 

이렇게 되면 어떤 해상도에서든 잘 작동한다. 가로모드는 지원하지 않을 것이기에 생각하지 않았다.

 

해상도가 변경되기에, 그에 맞게 기존에 상수 좌표로 수행하던 애니메이션을 반응형으로 바꿨다.

---

BGM 저작권 등록

저작권 등록 완료!

 

BGM 저작권 등록을 완료했다. 수수료가 20000원 돈이라 손이 떨리긴 했지만 경험이라고 생각하고 신청했다. 신청 자체는 10일쯤 한 것 같은데, 이런저런 심사에 절차를 거치다보니 일주일이나 걸렸다. 그래도 등록이 돼서 유튜브 영상도 공개로 돌리고 저작권 표시도 할 수 있게 되었다. 내가 Copyright을 쓰다니...

---

이번주차는 한 것은 많지만 한 것은 없는 기묘한 한주이다. 빌드 세팅하다 오류나서 몇시간 삽질하기도 하고, 디자인을 갈아엎고 갈아엎다 10시간이 삭제되기도 하고... 그래도 매를 먼저 맞았다고 생각한다. 앞으로 개발과 디자인, 작곡만 열심히 하면 될 것 같다!

근데 이러면 그냥 전에 했던거 다 하는거 아님?