[멋쟁이사자처럼 X 넥슨] MOD Supporters Hackathon 2주차 회고 (3. 기본 컴포넌트의 이해)

[7월 11일]

 

[MOD 강좌 Chapter 3] 기본 컴포넌트의 이해

 

자주 쓰는 두 개의 컴포넌트(TransformComponent, SpriteRenderComponent)에 대해서 이야기 해보겠다.

● TransformComponen

- 월드 상에서 Entity를 다룰 때 반드시 필요한 Component. 모든 Entity에 내장되어 있다.

● SpriteRenderComponent

- 월드 상에서 Entity를 다룰 때 부가적으로 필요한 Component. 필요한 Entity에만 내장되어 있다.

 

 

● TransformComponent

 

 

Property	기능
Position	* Entity의 부모를 기준으로 좌표를 나타냅니다. 월드 내에서의 위치를 의미한다. 상대 좌표를 의미한다. Z좌표도 존재하긴 하지만, 2D이므로 사실상 X와 Y로만 구성된다고 보면 된다.
Scale	* Entity의 크기 비율을 나타냅니다. 크기를 나타낸다. X, Y, Z가 있지만, Z는 크게 신경 쓰지 않아도 된다. 숫자를 키우면 해당 축의 방향으로 늘어난다. Scale은 1 이하로도 설정할 수 있다.
ZRotation	* Entity의 오일러 각 회전 값 중 Z축의 값을 나타냅니다. 회전값 : 물체를 회전시키는 것. 각 축에 대해서 회전할 수 있는데, 2D 게임이므로 Z축 방향으로 회전한다. 각도는 Degree.
WorldPosition	* Entity의 월드 기준 좌표를 나타냅니다. 절대 좌표를 의미한다.
WorldZRotation	* Entity의 월드 기준 오일러 각 회전 값 중 Z축의 값을 나타냅니다.

 

○ TransformComponent는 기본적으로 사용되는 Component이므로 메이커와도 연동이 잘 되어 있다.

○ 메이커에서 Entity를 직접 다룰 때, 각 Component에 해당하는 Property의 값이 바로바로 연동된다.

 

 

○ Entity를 클릭하고 움직임과 동시에 Position의 값이 바로 바뀌는 것을 확인할 수 있다.

 

 

○ 여덟 개의 점을 잡고 늘이면, Scale이 변한다. 대각선에 있는 점을 찍으면 X와 Y가 동일한 비율로 늘어난다.

 

 

○ 회전 값도 지원한다.

 

○ Entity는 계층(Tree) 구조로 되어있다. 따라서, 부모와 자식의 형태가 있다.

○ 두 개의 Entity를 동시에 움직이게 하기 위해서는 하나의 Entity를 다른 Entity의 자식 노드로 지정하면 두 개의 entity를 동시에 선택해서 이용할 수 있다.

 

○ Position : 해당 Entity의 부모 Entity 기준 좌표를 나타냄. (부모 기준 상대 좌표)

- 자식 Entiy의 좌표는 부모 Entity의 좌표를 기준으로 상대 좌표로 나타낼 수 있다.

- 최상위(World) 기준으로 봤을 때, 자식 Entity의 좌표는 [자신의 좌표 + 부모의 좌표]가 되는 것이다.

 

World Position : 해당 Entiy의 월드 기준 좌표를 나타냄. (월드 기준 절대 좌표)

 

 

○ 자식 Entity와 부모 Entity 사이의 부모 자식 관계를 해제한다면, 자식 Entity의 Position은 월드 기준 좌표로 자동으로 변환된다. 킹슬라임을 부모 Entity로, 슬라임을 자식 Entity로 설정되어 있던 것을 해제하는 순간 슬라임의 Position 좌표의 값이 WorldPosition의 값과 동일하게 바뀌는 것을 확인할 수 있다. 따라서, Position은 부모 Entity 기준 상대 좌표이고, WorldPosition은 월드 기준 절대 좌표임을 다시 한 번 확인할 수 있다.

 

○ 자식 Entity에서 Position 값과 WorldPosition 값은 엮여있는 관계이기 때문에 하나가 바뀌면 다른 하나도 바뀐다.

 

○ Rotation : 부모 기준 : 상대 회전 정도

○ World Rotation : 월드 기준 : 절대 회전 정도

 

○ Transform Component의 함수 활용

- Transfrom 함수

- TranslateFunction은 엔티티 위치를 이동시킬 때 사용합니다. 엔티티가 배치된 위치를 원점으로 삼아 상대적으로 입력한 값만큼 이동합니다. 다음은 게임을 실행했을 때 엔티티가 이동하는 예시 코드입니다.

 

void OnBeginPlay() {
	self.Entity.TransformComponent:Translate(4,5)
	-- 배치된 엔티티 위치를 기준으로 X 좌표를 4, Y 좌표를 5만큼 이동합니다.
	log("Move On")
	-- 이동이 되면 콘솔 창에 Move On을 출력합니다.
}

 

○ Rotate 함수

- Rotate Function은 엔티티를 반시계 방향으로 회전시킬 때 사용합니다. 엔티티가 배치된 위치에서 입력한 값만큼 왼쪽(반시계 방향)으로 회전합니다. 다음은 게임을 실행했을 때 엔티티가 회전하는 예시 코드입니다.

 

void onBeginPlay() {
	self.Entity.TransformComponent:Rotate(6)
	-- 배치된 엔티티 위치를 기준으로 6만큼 반시계 방향으로 회전합니다.
	log("Move On")
	-- 실행이 완료되면 콘솔 창에 Move On을 출력합니다.
}

 

 

● SpriteRendererComponent

 

○ Entity를 무엇을 그릴 것인가를 정의해주는 것이다. 어떤 이미졸 표시할 것인가? 이런 것들을 표시한다.

○ SpriteRUID를 유의해서 봐야 한다. SpriteRUID가 이미지를 뜻한다고 보면 되고, 여기에 이 이미지를 그려라 라는 뜻이다.

 

○ 외부 이미지 또한 들여올 수 있다. 외부 이미지를 Import 하는 순간 ID가 발급된다. 그래서 발급된 ID를 붙여넣기만 한다면 쉽게 사용할 수 있다. 이미지 자체를 옮기는 것이 아니라 이미지의 ID를 복사한다는 것이다.

→ 서로 같은 속성을 가진 Entity라고 할지라도 표현되는 이미지를 다르게 적용할 수도 있다. 반대로, 서로 다른 속성을 가진 Entity라고 할지라도 표현되는 이미지를 동일하게 적용할 수도 있다.

 

 

Property	설명
DrawMode	* Sprite가 그려지는 형식을 설정합니다. * Simple은 일반적인 형태이며 Tiled는 같은 이미지를 반복하는 형태입니다.
EndFrameIndex	* 재생될 애니메이션의 마지막 프레임입니다.
FlipX	* Sprite의 X축을 기준으로 반전 여부를 결정합니다.
FlipY	* Sprite의 Y축을 기준으로 반전 여부를 결정합니다.
PlayRate	* 애니메이션 리소스의 경우, 재생 속도를 지정할 수 있습니다. * 최소 1 이상의 값부터 지원하며 숫자가 클수록 속도가 빨라집니다. (Default : 1)
SpriteRUID	* Sprite 또는 AnimationClip의 RUID입니다.
StartFrameIndex	* 재생될 애니메이션의 시작 프레임입니다.
Color	* Sprite에 색깔을 덧씌웁니다. - 하얀색으로 설정된 경우 원래 지정된 색상이 표현된다. - 하얀색 이외의 색상으로 지정되었을 경우, 해당하는 색상으로 표현되는 것이 아니라,   원래 지정된 색상과 조합되어 나온다.
SortingLayer	* 2개 이상의 Entity가 겹쳤을 때 Sorting Layer에 따라 보이는 우선순위가 결정됩니다.
OrderInLayer	* 같은 Layer 내 우선순위를 결정합니다. 수가 클수록 앞에 보입니다.
IgnoreMapLayerCheck	* SortingLayer에 Map Layer 이름을 지정했을 때 자동 치환을 수행하지 않습니다.

 

○ Animation

- Animation이란, 이미지 여러 개로 구성되어 있는 오브젝트를 의미합니다. 여러 개의 이미지가 일정 속도에 맞춰 바뀌는 모습이 마치 움직이는 듯한 효과를 냅니다.

- Animation 속성을 가진 오브젝트는 다음과 같이 움직이는 효과를 보여줍니다.

 

마우스 커서를 잡으면 편집에 용이하도록 움직이는 효과가 없어진다.다시 커서를 풀었을 때 정상적으로 효과가 들어감을 확인할 수 있다.

 

- 위의 움직이는 불꽃은 아래의 그림과 같이 여러 불꽃 이미지가 합쳐져서 만들어진 Animation 속성을 가진 Object이다.

 

 

○ StartFrameIndex / EndFrameIndex

- 애니메이션 리소스의 경우 시작 프레임과 끝 프레임을 지정하여 루프를 통해 반복된다.

 

○ OrderInLayer, SortingLayer : 다음 강의 '지형과 레이어의 이해'에서 상세하게 학습할 것.

○ Layer : 물체와 겹치게 되면 어떤 것을 표시하게 될 것인가를 정해야 하는데, 이런 것들을 다루는 설정을 Layer라고 한다.

 

○ DrawMode

- Simple : 일반적인 형태. 한 개만 표현된다.

- Tiled : 동일한 형태를 계속하여 이어나간 것.

 

 

○ X축 또는 Y축으로 Entity를 나열할 수 있다. 소수점도 가능하다.

 

 

○ Tiled 설정으로 나열된 이미지는 하나의 Entity로 취급되는 것을 확인할 수 있었다.

 

회고 : MOD를 학습하며 필요한 것들을 차근히 학습해나가고 있다는 생각이 든다. 마지막에 Tiled 설정이 아주 흥미로워 보였다. 이 설정을 활용하여 시각적으로 흥미로운 컨텐츠를 만들어 볼 수도 있겠다는 생각이 들었다.

 

*해당 게시글은 Supporters Hackathon 참여자에게 제공되는 MOD 학습 강의와 기본 학습 교안의 내용을 기반으로 작성되었음을 알립니다.