개발자의 개발 블로그

스크린 좌표와 월드 좌표의 혼란때문에 머리가 복잡하다.

월드좌표로 하고 있는데 갑자기 스크린 좌표로 코드가 설정되었는지 이상해지고 있다.

예를 들어, 어떤 플레이어 캐릭터가 센터(0,0)에 있다고 가정하자.

그리고 적 캐릭터가 화면에서 플레이어를 향해 돌진한다.

이렇게 할 경우 플레이어의 위치로 이동하도록 0,0) 했는데

갑자기 왼쪽 하단 구석으로 적들이 몰려가서 바글바글거린다.

찾아보니 좌표의 문제였다.

참고 블로그 : http://hyunity3d.tistory.com/m/368

1. 월드 좌표계

- 오브젝트의 위치를 나타내는 좌표계로, 화면의 중심을 원점으로(0,0,0)으로 하는 3차원 상대좌표계이다.

- 게임 화면을 투영하는 카메라의 위치와 회전 상태에 따라 달리지므로 화면의 중심이 원점이 100%라고 할 수 없다.

- 스크린 좌표계는 단말기의 화면 좌표계로, 화면의 왼쪽 아래를 원점으로 하는 평면 절대좌표계입니다.

- 마우스 클릭이나 터치는 스크린 좌표계를 이용하여 처리한다. 이 좌표계는 카메라의 위치나 각도와 상관없이 일정하다.

- 뷰 포트 좌표계는 화면에 글자나 2D 이미지를 표시하기 위한 것. 화면 왼쪽

[이벤트(Event) 시스템(System)]

유저가 웹브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(Event)라 부른다.

- 버튼을 클릭했을 때, onclick

- 버튼을 두번 클릭했을 때,

- 버튼에 마우스 커서를 올렸을 때, 

- input 창에 값이 바뀔 때,

등등 수많은 이벤트가 존재한다.

HTML 이벤트와 비교해서 리액트에서 이벤트 사용시 주의 사항

1. camelCase를 사용한다.

HTML에서는 onclick, onkeyup과 같이 소문자로 작성했다. 

하지만, React에서는 camelCase를 쓴다. 

camelCase란 여러 단어가 붙여지는 변수 선언시 첫 단어를 대문자 처리하는 것이다.

onClick, onKeyUp으로 사용한다. 

2. 이벤트에 실행할 자바스크립트 코드를 전달하지 않고, 함수 형태의 값을 전달한다.

HTML에서는 

<button onclick= "alert('Clicked')">클릭</button>와 같이 

onclick 안에 자바스크립트 코드가 들어가지만, React에서는 

 <button onClick= { () => {

            this.setState({

              number: this.state.number+22

            })

          }

        }

        >Plus 22

        </button>

와 같이 함수 형태로 전달한다. 물론, 외부에 미리 함수를 만들어서 전달해도 된다.

3. DOM 요소에서만 이벤트를 설정할 수 있다. 

- 직접 만든 컴포넌트는 이벤트를 자체적으로 설정할 수 없다

- 우리가 만든 컴포넌트에 이벤트를 달게 되면, 이름으로 설정되어 props값을 전달하게 된다.

- 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.

이벤트 처리 방법

1.함수를 직접 기입하기

2. 함수를 외부에 선언 후, 함수 호출하기

이 코드는 매우 짧아서 못 느끼겠지만,

길어지게 되면 아래 코드가 더욱 간결 & 깔끔하며 가독성이 높아진다는 것을 알 수 있다.

[input 여러 개 핸들링]

인풋이 여러개면, 메소드를 인풋 개수만큼 만들어야할까?

그럼 매우 비효율적일 것이다. 바로 event 객체를 활용하는 것이다.

input의 이름(name)속성을 이용하여 이벤트 핸들러에서 e.target.name을 사용할 수 있다.

유니티에서 사용하는 모든 UI 요소들은 기본적으로 Canvas안에 위치해야 한다.

캔버스(Canvas)는 Canvas 컴포넌트가 존재하는 게임 오브젝트의 일종이다.

캔버스를 먼저 생성하지 않아도, GameObject - UI 메뉴에서 자신이 원하는 UI (버튼, 이미지, 스크롤뷰 등등...)를

선택하면, 자동으로 Canvas가 생성이 되며, 그 안에 선택한 UI가 자식으로 생성이 된다.

또한, 캔버스(Canvas) 기능을 돕기 위해 EventSystem 오브젝트가 사용되기 때문에 동시에 생성된다.

캔버스(Canvas) 영역은 씬(Scene) 뷰에서 사각형으로 나타나므로 UI요소를 배치하기 용이하다.

캔버스(Canvas)에 있는 UI 요소는 계층 구조에 나타나는 것과 동일한 순서이다.

즉, 첫 번째 자식이 처음... 두 번째 자식이 그 다음으로 그려진다.

다시말하면, 첫 번째 자식이 두 번째 자식에 가려져 안 보이게 된다.

변경을 하고 싶다면 드래그하여 계층 구조에서 순서를 변경하면 된다.

또는 메소드를 사용하여 스크립트로 제어할 수도 있다.

1. Transform.SetAsLastSibling

가장 마지막으로 순서 변경

Move the transform to the end of the local transfrom list.

2. Transform.SetAsFirstSibling

가장 처음으로 순서 변경

Move the transform to the start of the local transfrom list.

3. Transform.SetSiblingIndex

순서 설정(index 값)

Sets the sibling index.

4. Transform.GetSiblingIndex

현재 순서 반환(index 값)

Gets the sibling index.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

렌더 모드(Render Mode)

캔버스에는 스크린 공간 또는 월드 공간에 렌더링하도록 하기 위해 사용되는 렌더 모드(Render Mode) 설정이 존재함.

1) 스크린 공간(Screen Space - Overlay)

이 렌더 모드에서는 UI 요소가 화면에서 씬 위에 렌더링된다.

스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경한다.

2) 스크린 공간(Screen Space - Camera)

이 렌더 모드에서는 캔버스는 씬에 있는 다른 게임오브젝트처럼 동작한다.

캔버스의 크기는 사각 트랜스폼(Rect Transform)을 사용하여 수동으로 설정할 수 있다. (위 두 개는 수동 설정 불가)

또한 UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링된다.

이 방식은 월드의 일부를 이루도록 의도된 UI에 유용하며 이 방식을 서사적 인터페이스라 부르기도 한다.