엔티티의 위치, 크기, 회전 조정

# 학습 과정 소개

TransformComponent 구성과 사용 방법을 설명합니다. 좌표 개념을 이해하고, 엔티티의 이동, 회전, 크기 조절을 할 수 있습니다.

# 엔티티 변형 방법

엔티티를 변형하는 방법은 두 가지입니다. 크리에이터의 선호에 따라 사용할 수 있습니다.

  * 프로퍼티 에디터에서 TransformComponent 프로퍼티 값을 변경합니다.
  * Scene에서 엔티티를 선택, 드래그하거나 핸들러를 이용해 조정합니다.



# 좌표 이해하기

TransformComponent를 사용하기 위해 먼저 좌표 개념을 살펴보겠습니다. World에 배치한 엔티티는 좌표를 기반으로 '위치, 크기 회전'을 조정할 수 있습니다. X 축은 좌우, Y 축은 상하, Z 축은 앞뒤를 의미하는 좌표 축입니다. 증감 값은 음수와 양수로 표현합니다. [png](1637114783017401b498e2b214c02a549e756b19f3bb3) X, Y, Z 축은 3D 게임에서 주로 이용하는 개념입니다. 메이플스토리 월드는 2D 모델을 사용하기 때문에 엔티티 상태 변화를 위해 세 축을 다 사용하지는 않습니다. Position과 Scale은 X, Y 값을 가장 많이 사용하며, Z 값은 2D 엔티티에서는 필요할 때 사용합니다. 여러 엔티티가 겹쳐 있으면 Z 값이 클수록 앞에, 작을수록 뒤에 놓여 마치 레이어 순서처럼 보입니다. 회전은 오직 Z 축을 기준으로 움직입니다. 그러므로 Position, Scale과 다르게 ZRotation/WorldZRotation으로 독립적으로 명명되어 하나의 값만 입력할 수 있습니다. 사용 빈도를 표로 구분하면 아래와 같습니다.

[{"Unnamed: 0":"X","Position WorldPosition":"●","Scale":"●","ZRotation WorldZRotation":"X"},{"Unnamed: 0":"Y","Position WorldPosition":"●","Scale":"●","ZRotation WorldZRotation":"X"},{"Unnamed: 0":"Z","Position WorldPosition":"▲","Scale":"▲","ZRotation WorldZRotation":"●"}]

#### Z 값 사용

Position과 Scale의 Z 값을 사용하는 일이 드문 이유는 2D 이미지를 사용하기 때문입니다. 2D는 면이기에 면적만 변형이 가능합니다. 앞뒤로 튀어나온 부피가 없으므로 Z 값을 변경해도 변화가 없습니다. 그러나 여러 개의 엔티티가 겹쳐져 있을 때, Z 값을 조정해 레이어의 순서를 바꾸듯 순번에 영향을 줄 수 있습니다. [png](1637114865603b3dbe59028114cbc95e80edb39e3d4aa) Rotation에서 Z 값만 사용하는 이유 또한 2D 이미지이기 때문입니다. 눈앞에서 종이의 윗부분을 잡고 돌린다고 상상해 봅시다. 처음에는 제대로 된 이미지가 보이다가 어느 순간 종이의 얇은 단면만 보일 것입니다. 이를 화면에 적용한다면 Y축을 기준으로 도는데, 이미지가 옆으로 줄어들다 이미지가 일그러질 것입니다. 올바른 회전이라 볼 수 없기 때문에 사용하지 않습니다. Z축을 기준으로 회전하면 이미지가 훼손되지 않고 올바르게 회전합니다. 화면에서는 마치 좌우로 돌리는 것처럼 보일 수 있으나 이 역시 2D 이미지이기 때문입니다. [png](16371150089380390a89a833549279015e3acd4cd728d)

# 위치 변경하기

  1. 배치한 엔티티를 선택해 프로퍼티 에디터를 활성화합니다.
  2. TransformComponent에서 Position의 X, Y 값을 변경합니다.
  3. Scene에서 엔티티를 선택한 후, 원하는 위치로 이동합니다.



#### X 값 변경 예시

Position X값에 4를 입력하면, 오른쪽으로 엔티티가 이동합니다. [png](163711505255438094dc5f40847b980a0ec74bf336520)

#### Y 값 변경 예시

Position Y값에 3을 입력하면, 위로 엔티티가 이동합니다. [png](163711533385082094259354448c59298d1f60f084bad)

#### Z 값 변경 예시

Position Z값에 각 1과 2를 입력하면, 적은 숫자가 앞에 배치됩니다. [png](1637129854895b7a5e5c04c754a389026df1017ff4c2f)

> Tip. 엔티티 순서 변경 SpriteRendererComponent의 OrderInLayer를 사용해 순서를 변경하는 것이 가장 바람직합니다.

# 크기 조정하기

  * 프로퍼티 에디터에서 Scale의 X, Y값을 변경합니다.
  * Scene에서 활성화된 핸들러를 움직입니다.



#### X 값 변경 예시

Scale의 X값을 늘리면 좌우로 크기가 늘어납니다. [png](163712981670835563d7a4c624c498e242240e3b8a9c4)

#### Y 값 변경 예시

Scale의 Y값을 늘리면 상하로 크기가 늘어납니다. [png](1637129906868ea6b4f61f3b34d25835aa40b8cd54d67)

#### X, Y 값 변경 예시

Scale의 X, Y값에 4를 입력하면 기존 대비 비례하게 4배 커집니다. [png](163712992630702c9e1c108bb41f1920d778f71388559)

# 회전

WorldZRotation과 ZRotaion은 값을 상호 교환합니다.

#### 방법 1

TransformComponent의 ZRotation 값을 45로 변경합니다. 엔티티가 반시계 방향으로 45도 회전된 것을 확인합니다. [png](1637129956129332db21c233f45dba0e6741eff67ec52)

#### 방법 2

  1. Scene에서 엔티티를 선택, 핸들러를 활성화합니다.
  2. 핸들러 박스의 모서리 쪽으로 마우스를 움직입니다.
  3. 커서가 [jpg](163452377985689268fa2aa5c412989c41cbb81e3e13f) 모양으로 바뀌면 원하는 방향으로 엔티티를 돌립니다.  
[gif](163538582711066d4943dd3814f5fa29565c837aa53a4)



# TransformComponent의 함수 활용

#### Translate 함수

`Translate` 함수는 엔티티 위치를 이동시킬 때 사용합니다. 엔티티 위치를 원점으로 삼아 상대적으로 입력한 값만큼 이동합니다. 다음은 게임을 실행했을 때 엔티티가 이동하는 예시 코드입니다.
    
    
    @Component
    script TranslateOnBegin extends Component
        method void OnBeginPlay()
        self.Entity.TransformComponent:Translate(4,5)  -- 배치된 엔티티 위치를 기준으로 X 좌표를 4, Y 좌표를 5만큼 이동합니다.
        log("move on")  --  이동이 되면 콘솔 창에 Move On을 출력합니다.
        end
    end
    

해당 스크립트를 엔티티에 추가하여 정상 동작하는지 확인합니다. 타일에 가까이 배치한 고양이 오브젝트는 게임 실행 시 입력한 좌표 값만큼 이동했습니다. [gif](16353203939604dd5bf2ec48549a2880226e944ec5021)

#### Rotate 함수

`Rotate` 함수는 엔티티를 반시계 방향으로 회전 시킬 때 사용합니다. 엔티티가 배치된 위치에서 입력한 값만큼 왼쪽(반시계 방향)으로 회전합니다. 다음은 게임을 실행했을 때 엔티티가 회전하는 예시 코드입니다.
    
    
    @Component
    script BeginPlayRotator extends Component
        method void OnBeginPlay()
        self.Entity.TransformComponent:Rotate(6) -- 배치된 엔티티 위치를 기준으로 6만큼 반시계 방향으로 회전합니다.
        log("Move On") -- 실행이 완료되면 콘솔 창에 Move On을 출력합니다.
        end
    end
    

해당 스크립트를 엔티티에 추가하여 정상 동작하는지 확인합니다. 타일과 수평으로 배치한 고양이 오브젝트는 게임 실행 시 반시계 방향으로 6만큼 회전했습니다. [gif](163532046690887f78a7c6d9549fe8eb9b63f036d6060)