[유니티] 하스스톤 유니티 튜토리얼 #1 - 환경세팅

본 게시글은 고라니TV님의 하스스톤 유니티 튜토리얼을 보고 만든 게시물입니다. 빠른 코딩을 원하시는 분들은 아래 링크를 보고 클론코딩 하시면 됩니다.

https://youtube.com/playlist?list=PL3KKSXoBRRW0RVfemPWsfg9uLIjxyRHjN&feature=shared

유니티 하스스톤

1장 하스스톤 개발 환경 구성

1.1 프로젝트 생성

① 유니티 허브에서 New Project -> 2D클릭

② 원하는 경로에 원하는 프로젝트 명을 적어 새로운 프로젝트를 생성한다.

Hearthstone 프로젝트 생성

1.2 프로젝트에 사용할 이미지 다운로드

카드에 사용할 이미지를 다운 받습니다. 다운받은 그림은 Glingy님께서 저작권을 갖고 있습니다. 비상업용으로 사용가능합니다.(NonCommercial)

① https://drive.google.com/file/d/1McVb1KMI3zXqGN2t_-VZFqWToEoWjE-G/view?pli=1

② 위 링크를 눌러 이미지를 전부 다운 받습니다.

③ Project 창에서 Assets 폴더에서 마우스 오른쪽 버튼 클릭 -> Create -> Folder 클릭

④ 폴더 이름을 Sprites로 변경

⑤ 다운 받은 그림을 Sprites 폴더로 드래그 앤 드롭하여 저장한다.

Assets 폴더에 새로운 폴더 생성

Sprites 폴더 생성 완료

이미지를 Sprites 폴더에 드래그 앤 드롭

1.3 사용할 이미지 편집

다운 받은 이미지를 사용하기 위해 크기를 편집하고 Sprite로 잘라주겠습니다.

1.3.1 card, shock, z 이미지 편집

① Sprites폴더에서 card, shock, z 3개의 이미지를 클릭한다.

② Pixels Per Unit을 16으로 변경한다.

③ Advanced -> Filter Mode를 "Point (no filter)"로 변경한다.

④ Advanced -> Default -> Compression을 "None"으로 변경한다.

① ~ ④ card, shock, z 설정 변경

 

1.3.2 card 이미지 Sprite로 편집하기

① Sprites폴더에서 card 이미지를 클릭한다.

② Sprite Mode를 Multiple로 변경한다.

③ Sprite Editor를 누른다.

④ 각각의 이미지를 드래그 후 Trim을 누른다.

⑤ 이후 apply를 눌러 적용시키면 이미지가 7개로 나눠진다.

① ~ ③ Card 이미지의 Sprite Mode를 Multiple로 변경 후 Sprite Editor 클릭

④ 각각의 이미지를 드래그 후 Trim을 누른다.

⑤ 7개로 나눈 후 apply 클릭

⑤ 정상적으로 이미지가 7개로 나눠진다.

 

위에 나와있는 설정들을 하나씩 살펴보도록 하겠습니다.

 

ㆍPixels Per Unit : 1 Unit 당 몇 Pixel을 표현할지에 대한 옵션입니다.

유닛(Unit)은 유니티에서 사용하는 단위로 Scene 화면에 네모 한 칸을 1 Unit이라고 합니다.

즉, Pixels Per Unit은 한 유닛에 몇 pixel을 보여줄 건지 정하는 것이며 값이 커질수록 유닛의 크기가 커지므로

오브젝트의 크기가 줄어들것이고 값이 작아질수록 유닛의 크기가 작아므로 오브젝트의 크키가 커질것입니다.

Scene 창에 있는 네모 한 칸이 Unit이다.

 

ㆍ Filter Mode :  픽셀 이미지를 선명하게 보기 위해서 Filter Mode를 변경합니다. 옵션에 대해 하나씩 살펴보겠습니다.

- Bilinear : 이중 선형 보간으로 필터링

- Trilinear : 삼중 선형 보간으로 필터링

- Point(No Filter) : 필터 없이 오리지널 상태로 표시한다.

Filter Mode		3D 변환을 통해 텍스처를 늘리는 경우에 텍스처가 필터링되는 방법을 선택합니다.  기본 옵션은 Bilinear 입니다.
Point (no filter)		텍스처를 가까이에서 보면 블럭 현상이 나타납니다.
Bilinear		텍스처를 가까이에서 보면 흐릿하게 보입니다.
Trilinear		바이리니어와 유사하게 텍스처가 서로 다른 MIP 레벨 간에 흐릿하게 보입니다.

 

왼쪽 Liner필터 / 오른쪽 point 필터없음

 

선형 보간에 대한 자세한 설명은 아래의 블로그를 참조하면 좋을거 같습니다.
https://darkpgmr.tistory.com/117

선형 보간법(linear, bilinear, trilinear interpolation)

 

ㆍ Compression : 압축 방식을 설정한다.

None ~ Hiogh Quality : 이미지를 압축하는 정도를 설정합니다. None이 아닌 다른 걸로 선택되어 있으면 도트 그래픽에서 색깔이 누렇게 변하게 되는 현상이 일어나게 됩니다. 따라서 None로 설정해줍니다. 

또한 픽셀을 확대할 때 색깔이 미세하게 누래질 경우가 있는데 이는 compression(압축)에서 None으로 설정해줘야 합니다.
또한 어차피 도트 이미지 자체는 크기가 작기때문에 압축할 이유가 없다.

Compression	텍스처의 압축 타입을 선택합니다. 그러면 Unity가 텍스처에 알맞은 압축 포맷을 선택하는 데 도움이 됩니다. 플랫폼과 압축 포맷의 유효성에 따라서 다른 설정을 사용하더라도 결과적으로 같은 내부 포맷이 될 수있습니다. 예를 들어 Low Quality Compression 은 모바일 플랫폼에는 영향을 미치지만, 데스크톱 플랫폼에는 영향을 미치지 않습니다.
None	텍스처를 압축하지 않습니다.
Low Quality	저품질 포맷으로 텍스처를 압축합니다. 이는 Normal Quality 보다 더 적은 메모리를 사용할 수 있습니다.
Normal Quality	일반 포맷을 사용하여 텍스처를 압축합니다.
High Quality	고품질 포맷으로 텍스처를 압축합니다. 이는 Normal Quality 보다 더 많은 메모리를 사용할 수 있습니다.

1.4 폰트

1.4.1 폰트 다운로드

① https://neodgm.dalgona.dev/ 링크를 들어가 Neo둥근모 Pro를 다운 받는다.

② Project 창에서 Assets 폴더에서 마우스 오른쪽 버튼 클릭 -> Create -> Folder 클릭  

③ 폴더 이름을 Fonts로 변경

④ 다운 받은 폰트를 Fonts 폴더로 드래그 앤 드롭하여 저장한다.

① 네오둥근모 프로 폰트 다운받기

네오둥근모 일반용 다운로드

 

② 새로운 폴더 생성

③ 폴더 이름을 Fonts로 변경

④ 다운 받은 폰트를 Fonts 폴더로 드래그 앤 드롭하여 저장한다.

 

1.4.2 Text Mesh Pro를 적용시키기

프로젝트에서 사용하는 오브젝트들은 이미지는 2D Sprite이고 글자들은 Text Mesh Pro를 적용시키겠습니다.

 

① Window -> TextMeshPro -> Font Asset Creator 클릭

② Import TMP Essentials를 클릭하여 Import 합니다.

③ Neo둥근모 Fonts를 Source Font File로 드래그 앤 드롭합니다.

④ Atlas Resolution을 4096, 4096으로 설정

⑤ Chractoer Set을 Custom Range로 설정

⑥ Character Sequence를 32-128, 44032-55203으로 설정

⑦ Render Mode를 SDF32로 설정

⑧ Generate Font Atlas를 누릅니다. (많은 시간 소요)

⑨ Save를 눌러 Fonts 폴더에 저장한다.

⑩ TextMesh Pro 폴더를 Fonts 폴더 안으로 옮겨준다.

① Window -> TextMeshPro -> Font Asset Creator 클릭

② Import TMP Essentials를 클릭하여 Import 합니다.

③ ~  ⑧ 설정 후 Generate Font Atlas 클릭

⑨ ~ ⑩ Save를 눌러 Fonts 폴더에 저장 후 TextMesh Pro 폴더 옮기기

 

1.4.3 Text Mesh Pro를 위한 Materials 만들기

① Project 창에서 Assets 폴더에서 마우스 오른쪽 버튼 클릭 -> Create -> Folder 클릭

② 폴더 이름을 Materials로 변경

③ Materials 폴더에서 마우스 오른쪽 버튼 클릭 -> Create -> Material 클릭

④ Material 이름을 TMPGeneralMaterial로 변경

⑤ 생성한 TMPGeneralMaterial를 누르고 Inspector창에서 Shader를 TextMeshPro -> Mobile -> Distance Field로 변경

① ~ ② Materials 폴더 생성

③ ~ ④ TMPGeneralMaterial 생성

⑤ Shader 변경

1.5 DOTween 에셋

1.5.1 DOTween 에셋 다운 받기

① https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676  링크를 들어가 에셋을 다운 받는다.

② 이후 아래의 그림을 참조하여 Import하고 Apply 하면 DOTween을 사용할 수 있는 Plugin 폴더가 생성된다.

내 에셋에 추가하기

Import 클릭

Import 클릭

Open 클릭

Setup DOTween 클릭

Apply 클릭

성공적으로 Plugins 폴더 생성 완료

 

다음 시간부터 스크립트를 작성하여 본격적인 코딩을 시작해보도록 하겠습니다.