본문 바로가기

모바일 게임 개발/[입문]브러쉬유

4. 브러쉬유: 카멜레온 만들기(2)

 

# 이번 장에서 할 일

 

시작하기 전에 카멜레온의 특징을 다시 한번 떠올려 보면 다음과 같습니다.

 

카멜레온 특)

1. 카멜레온 처럼 생겼다.

2. 터치하면 색이 변한다.

3. Palette 위의 색으로 변한다.

4. 눈동자 색은 변하지 않는다.

5. 그림자가 있다.

 

 

이 장에서 우리는 1. 카멜레온 처럼 생겼다 라는 특징을 구현할거에요. 이 작업을 진행하기 위해 아래 그림파일(.tga) 두 개를 다운받으세요. 카멜레온 몸통과 눈을 그리기 위한 파일입니다.

 

ChameleonBody.tga
4.00MB
ChameleonEye.tga
4.00MB

 

 

그리고 시작하기 전에 한가지 기획을 수정하겠습니다. 4. 눈동자 색은 변하지 않는다. 를 구현하지 않을거에요. 그 이유는 다음과 같아요.

- 카멜레온을 그리는 과정이 복잡해지는 것을 막기 위해

- 눈동자 색이 변하는 게 더 괜찮아 보여서

그래서 원작인 브러쉬미의 카멜레온은 눈동자 색이 항상 검은색이었지만 브러쉬유의 카멜레온은 눈동자 색까지 변하게 만들겠습니다.

 

카멜레온 특)

1. 카멜레온 처럼 생겼다.

2. 터치하면 색이 변한다.

3. Palette 위의 색으로 변한다.

4. 그림자가 있다.

 

파일 다운로드와 변경사항 이해가 끝나셨으면 다음으로 넘어가겠습니다.

 


# 그림파일 언리얼 엔진으로 가져오기 (=텍스쳐 임포트)

 

1. 콘텐츠 브라우저에 Materials 폴더를 만들고, 그 아래 다시 Textures 폴더를 만드세요.

 

2. 다운로드 받은 파일을 콘텐츠 브라우저에 드래그 앤 드랍으로 가져오세요.

 

언리얼 엔진에서 외부 파일을 가져오는 것을 임포트(Import)라고 하고, 그림파일은 텍스쳐(Texture)라고 해요. 우리는 두 개의 그림파일을 언리얼 엔진으로 가져왔고, 이 작업을 이렇게 말할 수 있습니다.

 

 

"텍스쳐(Texture) 두 개를 임포트(Import) 했다."

 

 

 

 


# 카멜레온 액터 블루프린트 작성하기

 

이제 본격적으로 게임에 등장시킬 카멜레온 액터의 블루프린트를 작성하겠습니다.

1. 이전 장에서 만든 Chameleon 액터 블루 프린트를 더블클릭해서 열어줍니다.

 

2. 아래와 같은 화면이 나왔다면 툴바 바로 아래에 있는 Open Full Blueprint Editor를 누르세요.

 

그럼 아래처럼 나오게 됩니다.

 

3. 좌측 상단 +Add Component 버튼을 클릭하세요.

 

4. Plane(플레인, 평면) 을 선택하세요.

 

5. Viewport(뷰포트)의 모습은 왼쪽처럼, 컴포넌트 창은 오른쪽처럼 나오겠네요.

 

 

6. 툴바에서 Compile(컴파일) 버튼과 그 옆에 Save(저장) 버튼을 차례대로 누르세요. 이 두 버튼으로 변경사항을 적용/저장 합니다.

 

컴파일 전 > 후

 

"근데 저기 저 공같은 물체는 뭔가요?"

실제 게임에서는 보이지 않고 단순히 액터의 중심 위치를 잡아주는 역할을 하는 녀석입니다. 없애고 싶다면 컴포넌트 창의 Plane 컴포넌트를 DefaultSceneRoot에 드래그 앤 드랍해줍니다.

 

 

아래 링크에서 그래프 에디터의 구성과 사용방법을 알아보세요. 특히 그래프 에디터 안에서 화면을 이동하는 방법(우클릭 + 드래그)은 꼭 기억해두시면 좋습니다.

 

 

그래프 에디터 탭

블루프린트 안의 노드 망을 시각적으로 표현한 것으로, 편집도 가능합니다.

docs.unrealengine.com

 


# 머티리얼(Material) 만들기

 

이제 저 판떼기에 그려질 그림을 만들어 보겠습니다. 조금 있어보이게 말하고 싶을 땐 다음과 같이 표현할 수도 있습니다.

 

 

"머티리얼(Material)을 만든다.

or

셰이더(Shader)를 작성한다."

 

 

 

참고로, 영어의 Material 을 발음하거나 한글로 쓸 때, 머티리얼 이라고 읽고 써주세요. 마테리얼, 머테리얼, 메터리얼, 메테리얼이 아닌 머티리얼입니다. 아래 국립국어원의 답변을 참고하세요. (물론, 유창한 영어 발음으로 읽는게 제일 멋집니다. 머티어뤼얼~)

 

 

국립국어원

축소 확대 온라인가나다 상세보기 material 의 정확한 외래어 표기는 뭔가요? 작성자 김동일 등록일 2014. 10. 21. 조회수 574 요즘 안드로이드 때문에 material 이라는 단어를 쓸 일이 많아졌습니다. 구

www.korean.go.kr

 

1. Materials 폴더에 Material 에셋을 만드세요. (작업에 사용하는 파일을 통틀어 에셋이라고 부릅니다.)

콘텐츠 브라우저에 무언가 추가하고 싶을 땐? 빈공간 우클릭! 잊지마세요.

 

2. 이름은 M_Chameleon 이라고 정했고, Save All 버튼도 눌렀습니다. M_(엠 언더바)는 머티리얼임을 나타내는 표시에요.

 

3. 머티리얼을 더블클릭하면 머티리얼 에디터가 열려요.

 

4. 임포트(Import)한 텍스쳐(Texture)를 가져오세요. 드래그 앤 드랍.

 

여러개의 에셋을 함께 선택하려면? Ctrl 을 누른 상태로 선택하세요.

5. Texture Sample 이라는 노드로 잘 올라와진 것을 확인하세요. 지금 보고 계신 창을 머티리얼 에디터라고 합니다.

 

6. 머티리얼 에디터의 좌측 하단(왼쪽 아래)에 디테일 패널(Details 탭)을 봐주세요.

 

7. 다음과 같이 바꿔주세요.

 

간단히 설명하자면, Masked는 투명한 부분을 포함해서 그리는 방법이고 Unlit은 레벨에 배치된 빛과 상호작용하지 않겠다는 말이에요.

8. M_Chameleon 노드가 왼쪽에서 오른쪽 처럼 변했습니다.

 

 

9. 이제 드래그 앤 드랍으로 핀을 연결하세요. 방법은 다음과 같아요.

 

핀 뽑아오는 방법

 

일단 이렇게만 연결해볼까요?

 

10. 머티리얼 에디터 좌측 상단 프리뷰 화면을 보시면 왼쪽 그림처럼 되어있을텐데요. 화살표가 가르키고 있는 버튼을 눌러주세요.

 

 

프리뷰 화면은 머티리얼이 어떻게 그려질지 미리 볼 수 있는 화면이에요. 프리뷰 화면을 통해 이 머티리얼이 판떼기에 그려지면 오른쪽 그림처럼 나온다는 것을 알 수 있어요.

만약 프리뷰 화면에 아무것도 없는 것처럼 보인다면?

화면에 마우스 왼쪽버튼을 클릭한 상태로 좌우로 돌려보세요.

 

3D 공간에서 회전시켜보세요.

 

11. 저장을 눌러주세요.

 

중요한 건 아니지만, Save 버튼의 아이콘이 왜 저렇게 생겼는지 궁금하신 분들을 위해 링크를 달아드릴게요.

 

 

플로피 디스크 - 나무위키

Floppy는 유연하여 팔랑팔랑거린다는 뜻이다. -ette는 작다는 뜻. 8인치가 커서, 5.25인치가 작다고 붙은 이름. 실제로 내부의 자기필름은 잘 팔랑거린다. 흔히 디스켓(Diskette)이라고 한다. 노태우 정

namu.wiki

 

 


# 블루프린트 Plane에 카멜레온 머티리얼 입히기 (그림 그리기)

이제 실제로 그림을 그려볼게요.

1. Chameleon 블루프린트로 다시 돌아옵니다.

 

2. Plane 컴포넌트를 선택하시고

 

3. 디테일 패널의 Materials 를 확인하세요. 지금 Plane에 BasicShapeMaterial 이라는 머티리얼이 사용된 것을 알 수 있죠. 이 머티리얼은 물체를 모두 흰색으로 칠해주는 머티리얼입니다.

 

4. 이 머티리얼을 우리가 만든 M_Chameleon 머티리얼로 바꾸세요. 카멜레온 모양대로 색칠해주겠다는 뜻이에요.

 

5. 결과를 확인 해보죠.

 

Good

 

 

뷰포트에서 이동방법이 궁금하다면? 아래 영상을 보세요. (한글자막도 나와요)

 

 

 

 


# 다음 장은 짧고 쉽게 갑니다.

이번 장에서는 카멜레온을 그려봤어요. 새로운 개념들이 많이 나와서 헷갈리시나요? 다음 장은 아래 내용으로 좀 짧게 끊어볼게요.

- 카멜레온에게 한가지 색 입히기