3-1 게임 화면 구성 및 환경설정

이번 시간부터 실전 2D 리듬 게임 개발을 시작해 보도록 하겠습니다. 그전에 이번 2D 리듬 게임 개발 프로젝트를 진행할 때에도 우리의 소스 코드를 GitHub를 이용해서 프로젝트를 버전별로 관리할 수 있도록 해 볼 거예요. 그렇기 때문에 이처럼 GitHub에 접속해 주시고요. 여기에서부터 프로젝트를 시작하도록 할게요. 앞서 이론 시간에서 다루었듯이 먼저 로그인을 진행해 줍니다. 로그인해 주시면 새롭게 Repository를 만들어 주실 수 있는데요. 바로 좌측에 New 버튼을 눌러서 새롭게 Repository를 만들어 보도록 할게요. 바로 이런 식으로 새로운 저장소를 만들어 주시면 됩니다. 저는 Unity-2D-Rhythm-Game이라고 이름을 지어주도록 할게요. 그다음에 설명란에는 Unity로 개발한 2D Rhythm Game Project라고 넣어 주겠습니다. 그리고 저는 Public으로 누구든지 소스 코드를 볼 수 있도록 설정하고 기본설정 그대로 Create repository 버튼을 눌러서 우리의 리듬 게임에 소스 코드가 올라갈 하나의 저장소를 만들어주었습니다. 이후에 이처럼 Unity 2D Rhythm Game Project에 소스 코드가 담길 수 있는 하나의 경로를 만들어 주시면 되고요. 가능하면 이 경로에 한글이 포함되지 않도록 해서 하나의 폴더를 만들어 주시면 됩니다. 앞선 시간에 다루었던 대로 GitHub Desktop을 이용해서 방금 우리가 만들었던 GitHub의 Repository와 우리 컴퓨터의 폴더를 서로 연결해 주겠습니다. 즉 Clone을 해 줄 건데요. 바로 GitHub Desktop에서도 로그인을 진행해 주시고요. 아마 강의를 따라오시는 여러분은 기본적으로 지난 시간까지의 내용을 따라오면서 이미 로그인이 되어 있을 것이고요. 아무튼 전 이렇게 로그인을 진행해 주었습니다. 이제 인터넷 공간에서부터 GitHub에서부터 클론을 받을 수 있도록 하겠습니다. Clone 버튼을 눌러 주시고요. URL로 이동해 보시면 어떠한 저장소에서부터 소스 코드를 내려받을 것인지 Clone을 위한 저장소 경로를 넣을 수가 있는데요. 우리가 조금 전에 만들었던 Unity 2D Rhythm Game 개발을 위한 Repository의 경로를 복사해 주시고요. GitHub Desktop 프로그램의 URL 경로에 내용을 넣어 주겠습니다. 그다음 이러한 프로젝트가 저장될 폴더 경로로는 조금 전 만들어 준 그 경로가 될 수 있도록 합니다. 폴더를 선택해 주시고요. Clone까지 진행해 주시면 됩니다. 그러면 이처럼 GitHub Repository에 프로젝트 폴더가 우리 컴퓨터 내에 존재하는 것을 확인할 수 있고요. 자동으로 .git 파일이 만들어진 것을 확인할 수 있습니다. .git 파일 같은 경우는 기본적으로 숨김 폴더로 설정되어 있기 때문에 윈도우 사용자의 경우 이 폴더가 보이지 않으시는 분은 보기 탭에서 숨긴 항목도 볼 수 있도록 체크해 주시면 .git 폴더가 보일 거예요. 우리가 만들어 준 Repository에서 프로젝트 폴더의 Clone이 완료되었습니다. 이렇게 만들어진 git 프로젝트 경로에 새롭게 Unity 프로젝트를 하나 만들어 준 이후에 그것을 우리의 GitHub Repository에 Push 해 보도록 하겠습니다. 이 경로를 그대로 복사해 주시고요. 이처럼 Unity Hub를 실행해서 새로운 프로젝트를 만들어 주겠습니다. 이것은 2D Rhythm Game을 위한 프로젝트이므로 프로젝트 이름을 Unity 2D Rhythm Game이라고 넣어 주겠습니다. 그리고 강의를 찍는 시점에서 가장 최신 버전의 Unity로 강의를 진행할 거고요. Template로는 2D를 선택해서 2D 게임으로 개발해 보도록 하겠습니다. 이때 프로젝트가 만들어지는 경로로는 조금 전 만들어 준 이 git 프로젝트가 들어갈 수 있도록 하겠습니다. 이제 이 상태에서 Create project 버튼을 눌러서 프로젝트를 만들어 줄 수 있습니다. Unity 개발 환경이 실행되었으면 Unity의 프로젝트 폴더도 만들어져 있는 것을 확인할 수 있고요. 이러한 폴더 및 파일들은 기본적으로 Unity 개발환경이 만들어 놓은 프로젝트의 구성품이라고 할 수 있습니다. 따라서 이렇게 만들어진 Unity의 프로젝트 파일을 GitHub에 업로드 해 보도록 하겠습니다. 이를 위해서 현재 실행 중인 Unity 개발환경을 꺼 주시고요. GitHub Desktop 프로그램을 열어주시면 엄청나게 많은 파일이 새롭게 추가되어있는 것을 확인할 수 있습니다. Changes라고 해서 새롭게 추가된 파일이 몇 개인지 보여주고 있는데요. 300개 이상이라고 나오네요. 정확히는 1,886개의 파일이 만들어졌다고 나와 있습니다. 이렇게 구성된 초기 프로젝트를 GitHub에 업로드해 보도록 하겠습니다. 여기 Summary란에 초기 프로젝트 구성이라고 넣어주시고요. 아래쪽에 Commit to master 버튼을 눌러서 Commit을 진행해 주도록 할게요. 다만 이때 모든 파일이 체크되어 있는지 확인해 주세요. 프로젝트의 구성품에 포함된 모든 파일을 다 체크해 주셔서 이대로 Commit을 진행해 주셔야 합니다. 실제로 Commit을 할 때마다 컴퓨터 그리고 GitHub에서는 작업한 소스 코드의 내역을 기록하게 됩니다. 이것을 실제로 GitHub에 업로드하기 위해서는 Commit이 완료된 이후에 위쪽의 Push 버튼을 눌러서 GitHub에 업로드해 주셔야 해요. Commit과 Push 모든 과정에서 파일의 개수가 많으면 오랜 시간이 걸릴 수 있으니까 다소 기다리시는 것을 추천합니다. 저는 이렇게 Commit이 완료되었네요. 바로 Publish 버튼을 눌러 줄게요. 그러면 자동으로 Push가 진행되는 것을 확인할 수 있습니다. 말씀드렸듯이 파일의 개수가 많아서 업로드하는 데 약간의 시간이 소요될 수 있습니다. Push가 완료되면 GitHub 페이지를 새로고침해 보시면 방금 넣어 준 Unity 2D Rhythm Game 프로젝트 폴더가 존재하는 것을 확인할 수 있습니다. 여기에 들어가 보시면 아까 컴퓨터상에서 확인했었던 다양한 파일 및 폴더가 그대로 올라가 있는 것을 확인할 수 있고요. 사실 이렇게 GitHub Repository를 만들어서 Clone을 받고 소스 코드를 채워서 다시 Push 하는 과정은 Part 1에서 전부 다루었던 내용이지만 프로그래밍의 모든 과정에 익숙해지는 것이 중요하기 때문에 한 번 더 짚어 드리는 시간을 가져 보았습니다. 이제 GitHub 설정이 완료되었으므로 바로 게임 화면을 만들어 보도록 할게요. Unity Hub를 통해서 프로젝트 폴더를 열어주도록 할게요. 이처럼 번거롭다고 하더라도 GitHub의 Commit이나 Push를 진행할 때는 Unity 개발환경을 끄고 진행해 주시고요. 그다음 개발을 하고자 할 때는 다시 Unity Hub를 통해 프로젝트를 열어 주시고 작업해 주시는 것을 추천드립니다. 이제 첫 번째 강의 시간으로 Rhythm Game의 화면을 구성해 보는 시간을 가져 볼 거예요. 제가 미리 강의 자료로 첨부해 드린 3-1 Rhythm Game Sprites 폴더의 압축을 풀어 주시고요. 이 폴더를 그대로 개발환경에 드래그 앤 드롭해서 놓아 주도록 할게요. 이렇게 놓아 주시면 자동으로 Unity Hub 프로젝트 안에 해당 스프라이트 파일이 담기게 되는데요. 여기에는 게임 개발을 위해 필요한 미리 준비해 놓은 이미지 파일이 들어가 있으니까 이 폴더의 이름을 Sprites라고 바꾸어 주겠습니다. 그다음 해당 폴더에 들어가 보시면 리듬 게임 개발을 위한 기본적인 이미지 파일을 확인할 수 있습니다. 이제 게임이 시작되는 화면부터 바로 구현을 해 보도록 할 거예요. 게임을 개발할 때는 다양한 방식이 있는데요. 그중 하나는 빠르게 핵심 기능부터 개발하는 방식이 있습니다. 우리는 그러한 방식을 선택해서 Rhythm Game 곡을 선택하는 화면을 건너뛰고 바로 게임이 진행되는 씬부터 만들어 보도록 하겠습니다. 따라서 가장 먼저 이 Hierarchy View에서 하나의 Game Object를 만들어 주시고요. 이름을 Background라고 설정해 주겠습니다. 기본적으로 게임을 개발할 때는 배경화면을 구성하는 요소가 매우 다양합니다. 그러므로 아예 Background라는 이름의 Object를 만들어 주어서 이것을 이용해 게임 내에서 사용되는 전체 배경에 대해서 관리하는 것이 효율적입니다. 기본적으로 이렇게 하나의 Object를 만들어 주시면 포지션값이 0, 0으로 설정되어 있겠지만 혹시 모르니까 전부 0으로 들어가 있는지 확인할 수 있도록 합니다. Sprites 폴더에서 Game Background라는 이미지를 확인할 수 있는데요. 이것을 그대로 드래그 앤 드롭해서 Background Object의 자식으로 들어갈 수 있도록 설정합니다. 마찬가지로 위치값이 0, 0, 0으로 게임 화면 정중앙에 놓여있는지 확인할 수 있도록 합니다. 이렇게 만들어진 게임 화면은 실제로 어떻게 보이게 될까요? Game View를 확인해 보시면 실제로 게임이 어떻게 보이는지 확인할 수 있습니다. 이때 해상도 설정으로는 1,920 * 1,200으로 넣어 주세요. 이러한 해상도가 존재하지 않으신 분은 1,920 * 1,200으로 넣을 수 있도록 하면 됩니다. 일반적인 모바일 스마트폰 스크린 해상도의 평균적인 값 중 하나이니까 우리는 바로 이 해상도로 게임을 개발하게 될 겁니다. 다만 현재 이미지 해상도가 너무 높기 때문에 1,920 * 1,200으로 해도 이러한 배경 이미지가 화면에 전부 들어가지는 않습니다. 따라서 Game Background의 크기 값으로 0.8 * 0.8을 넣어주셔서 화면에 가득 들어올 수 있도록 해 주겠습니다. 실제로 게임 실행 버튼을 눌러서 실행해 보시면 배경 이미지가 잘 출력되는 것을 확인할 수 있습니다. 약간 잘리는 것은 신경 쓰지 말아 주세요. 이렇게 게임 실행을 하실 때 전체 화면에서 게임을 테스트할 것인지 결정하기 위해서 Maximize On Play 버튼을 눌러서 설정해 줄 수 있습니다. 저는 일반적으로 테스트를 진행할 때 전체 화면에서 테스트하는 것을 좋아하기 때문에 Maximize On Play 버튼에 체크해 주는 편입니다. 이제 처음 리듬 게임이 실행되어 곡이 재생되고 있을 때 게임이 시작되었다는 것을 알리기 위해서 배경 이미지가 밝았다가 서서히 어두워지는 애니메이션을 구현해 보도록 할 거예요. 가장 먼저 Game Background Shine 이미지를 그대로 드래그 앤 드롭해서 Background 폴더에 놓아줄 수 있도록 합니다. 그다음 마찬가지로 Game Background와 동일한 크기를 가질 수 있도록 하기 위해서 Game Background Shine 같은 경우도 0.8, 0.8로 크기 값을 고정해 주시고요. 이제 Game Background Shine Object가 이 Game Background Object보다 항상 앞쪽에 출력될 수 있도록 할 거예요. 그래야 Game Background Shine Object가 투명해졌을 때 Game Background 이미지가 화면에 출력될 수 있겠죠. 이를 위해서 가장 먼저 Sorting Layer 설정부터 해 주겠습니다. Sorting Layer를 눌러주시고요. Add Sorting Layer를 눌러서 Sorting Layer를 추가해 주겠습니다. 지금 여기에서 향후 나올 모든 Object에 대한 설정 기준을 설정해 줄 거예요. Rhythm Game은 매우 단순한 편입니다. 배경, 노트, 판정선 정도가 나올 수 있는 Object의 전부이죠. 그렇기 때문에 총 5개의 Layer만을 만들어 줄 거예요. 가장 먼저 Background Layer를 만들어 주시고요. 이어서 판정선을 의미하는 Judge Lines 또한 만들어 주시고요. 그리고 각 Note가 들어갈 공간인 Notes Layer를 만들어 주시고 판정 결과를 보여주는 Judgement 또한 만들어 주시고요. 마지막으로 각종 Effect를 출력할 수 있는 Effect Layer까지 만들어 주겠습니다. 그러면 지금 만들고 있는 Background 즉 게임의 배경 같은 경우는 방금 만든 Layer 중에서 Background Layer에 해당하겠죠. 따라서 Game Background의 Sorting Layer를 Background로 만들어 주시고 Game Background Shine 또한 마찬가지로 Background라고 설정하겠습니다. 다만 이때 Game Background Shine 같은 경우는 Order in Layer를 1로 설정해서 같은 Sorting Layer에 있는 것 중에서는 1이라는 우선순위를 가질 수 있도록 설정해 주었어요. 기본적으로 이전에 만들었던 Game Background는 Order in Layer가 0으로 설정되어 있기 때문에 더 뒤쪽에 출력되는 것이고요. 새롭게 만든 Game Background Shine 같은 경우는 Order in Layer가 더 높기 때문에 이처럼 앞쪽에 출력될 수 있도록 바뀐 겁니다. 앞쪽에 있는 Game Background Shine 이미지가 서서히 투명해지는 애니메이션을 만들기 위해서 Assets 폴더에서 하나의 폴더를 만들어 주신 이후에 이름을 Scripts라고 만들어 줄게요. 이제 이 안에 하나의 C# Scripts를 만들어 주겠습니다. 이름은 Background Behavior입니다. 즉 Game Background Object의 행동을 결정해 주기 위한 Script라고 이해하시면 문제가 없고요. 이렇게 만들어진 Background Behavior Script를 작성해 보도록 할게요. 먼저 Game Object를 효과적으로 관리할 수 있도록 하기 위해서 Game Background라는 이름의 하나의 변수를 만들어 주었고요. 그다음 private 형태로 SpriteRenderer 변수를 하나 만들어 주겠습니다. Game Background SpriteRenderer라고 이름을 지어 주었고요. 이제 Game Background SpriteRenderer 변수를 초기화해 줄 건데요. 바로 Game Background에 포함되어 있는 SpriteRenderer를 받아와서 초기화 할 수 있도록 할 겁니다. 그다음에 Coroutine 함수를 불러올 건데요. 이제 불러오고자 하는 Coroutine 함수가 어떤 것이냐면 바로 Fade Out이라는 함수입니다. 흔히 특정한 이미지나 음악이 갈수록 작아지거나 점차 희미해져 가는 그러한 애니메이션을 말할 때 Fade Out이라고 말을 하죠. 다시 말해서 Game Background SpriteRenderer를 0.005씩 매 프레임마다 투명하게 만들어주는 Fade Out이라는 함수를 하나 만들어 줄 겁니다. 바로 Coroutine 함수를 만들어 볼게요. Fade Out 함수를 만들어 주는 거고요. 매개변수로는 SpriteRenderer와 매 프레임마다 줄어드는 그 양이 얼마인지 정해줄 수 있도록 합니다. 매 프레임마다 어떤 기능이 실행되냐면 SpriteRenderer의 color 값을 받아와서 현재 알파 값이 0보다 크다면, 아직 완전히 투명 상태가 아니라면 불투명도 값이 조금이라도 존재한다면 투명한 상태가 아니기 때문에 amount만큼 해당 알파 값을 감소시킬 수 있도록 해서 투명도를 높여 주는 거예요. SpriteRenderer의 color 값을 줄어든 값으로 갱신함으로써 Coroutine 함수를 만들어 줄 수 있는 거고요. WaitForSeconds에서 amount만큼 0.005초만큼 멈췄다가 다시 알파 값을 감소시킬 수 있도록 작업을 했습니다. 또한 기본적으로 Unity C#에서는 실수형 데이터를 만들어 줄 때 꼭 뒤에 F를 넣어주셔야 해요. 결과적으로 Game Background SpriteRenderer는 쉽게 말씀드리자면 프레임마다 0.005 fc 알파 값이 감소하는 거고요. 감소시킨 이후 0.005 f만큼 쉬었다가 다시 감소를 수행해 주는 겁니다. 다만 0.005초는 매우 짧은 순간이기 때문에 일반적으로 이런 식으로 Coroutine 함수를 동작시키게 되면 사실 프레임마다 계속해서 알파 값이 줄어들게 되어 불투명도가 빠르게 감소하게 되는 것입니다. 그로 인해 Sprite가 투명해지겠죠. Script를 잘 저장해 주시고요. Unity 화면으로 돌아오셔서 만들어진 Background Behavior Script를 Background Object에 적용해 주시고요. 이로써 Background Behavior가 Background Object에 적용이 되었는데요. 실제로 투명하게 만들고자 하는 Game Background는 Game Background Shine Object였죠. 이것을 드래그해서 해당 Game Background의 매개변수로 넣어 주시면 됩니다. 이로써 게임이 실행되면 자동으로 Game Background Shine 이미지가 서서히 투명해지면서 보이지 않게 되는 거죠. 이 상태에서 게임을 실행해 테스트해 보도록 할게요. 이처럼 처음에는 화면이 밝았다가 서서히 어두워지는 애니메이션이 구현된 것을 확인할 수 있습니다. 이번 시간에는 Unity 2D Rhythm Game의 초기 화면을 구성해 보는 시간을 가져 보았습니다. 뿐만 아니라 게임의 소스 코드 관리에 필요한 GitHub 설정 게임 해상도 설정 등을 진행함으로써 게임 개발의 토대를 다지게 되었습니다. 작업한 내용을 GitHub에 올려 보도록 할게요. Unity를 꺼 주시고요. 또한 비주얼 스튜디오와 같은 Script 작성을 위한 개발환경이 실행되어 있다면 이 또한 모두 닫아주세요. 이제 GitHub Desktop을 열어 보시면 매우 많은 수정 사항이 존재하는 것을 확인할 수 있습니다. 실제로 우리가 작성한 Script는 Background Behavior Script이지만 이런 식으로 Unity 개발환경이 자동으로 다양한 환경설정 파일을 관리해 주고 있는 것을 확인할 수 있어요. 따라서 이것을 전부 체크해 주셔서 모든 파일을 반영할 수 있도록 해 줄게요. 이렇게 Commit 메시지로 에셋 추가 및 게임 화면 구성이라고 넣어 주겠습니다. 여기에서 Commit을 진행해 주신 후에 Push까지 진행해 주시면 성공적으로 GitHub Repository에 반영이 되는 것입니다. 이후에 저장소를 새로고침해 보시면 성공적으로 방금 작업한 내용이 반영되어 있는 것을 확인할 수 있습니다. 이로써 게임 화면을 만들어주었고 그것을 GitHub에 업로드하는 것까지 맞춰 보았습니다. 다음 시간에는 박자 노트의 이동과 판정선을 구현해 보는 시간을 가져보도록 할게요.