4. AR Ruler②

이번 포스트에서는 예고한대로 저번 포스트에서 만든 간단한 Virtual Ruler를 개선해보고자 한다. 몇가지 기능을 추가하는거라 어렵지는 않을 것이라고 생각된다.

 

이번 포스트는

1. 화면 가로 모드로 고정

2. 지우개 기능 추가

3. 점 포커싱 기능 추가

로 이루어져 있다.

 

---

1. 화면 가로 모드로 고정

AR을 인식하면서 화면이 흔들려 가끔 화면이 가로, 세로로 움직이는 것이 불편해 화면을 가로모드로 고정해보고자 한다. 이 편이 UI를 배치할 때 세로 모드는 고려하지 않아도 될 것 같기도 했다. 물론 이 부분은 번거로울지 몰라도 아예 불가능한건 아닌 것으로 알고 있다. 평면을 더욱 안정적으로 인식하는 것에도 도움이 될 것이라고 생각되었기에, 일단 화면을 가로로 고정시켜보도록 하겠다. 추후 그럴 필요가 없거나 세로가 낫다고 판단되면 그때 가서 고쳐보도록 하겠다.

 

이 부분은 유니티로 앱을 만들어 보았다면 이미 해보았을 법 하다.

 Edit > Project Settings > Player > Resolution and Presentation으로 들어간 뒤, Orientation의 Default Orientation을 Landscape Left로 바꿔준다. 아마 원래는 Auto Rotation으로 되어 있었을 것이다.

Auto Rotation은 가로 세로 회전을 자유롭게 하는 설정이고, Landscape는 가로모드, Portrait는 세로모드로 화면을 고정하는 것이다. 

 

Left와 Right의 차이는 회전 방향의 차이이다. Left로 설정해줄 경우, 화면이 가로로 돌아갔을 때 오른쪽에 홈버튼이 위치하는 설정으로, 오른손잡이에게 유용할 듯 하다.

 

이렇게 설정해둔 후 빌드하면 화면이 한 방향으로 고정된다. 

---

2. 지우개 기능 추가

이번에는 잘못 선택한 점을 삭제하는 기능을 추가해보고자 한다. 화면에 있는 Erase버튼을 누르면, 방금 생성한 점 오브젝트가 삭제되는 방식으로 작동한다. 

---

바로 코드를 보는 것은 잘 와닿지 않을 것 같아, 이번에는 유니티에서 에셋을 추가하는 부분을 먼저 작성해보고자 한다. 

최신버전의 HelloAR 예제에는 기본적으로 톱니바퀴 모양의 메뉴버튼이 포함되어 있다. 우리는 이 버튼을 복사하여 Erase버튼으로 바꿀 것이다. 

 

Hierachy에서 Canvas > Menu Button 을 Copy하고 Paste하여 생긴 두번째 Menu Button을 다시 Canvas 안으로 위치해준다. 그리고 헷갈리지 않게 이름을 Erase Button으로 바꾸도록 하자. 

 

Erase Button의 Inspector를 보면,  Image(Script) 부분이 체크 해제되어있는 것을 볼 수 있다. 이것을 다시 체크해주면, 톱니바퀴 모양의 버튼 주위에 박스가 생긴다. 

Rect tool을 이용해 이것을 원하는 길이로 늘려준다. 이 포스트에서는 Erase라는 글씨가 가로로 길기 때문에 가로 폭을 넉넉히 늘렸다. 

 

 

그리고 Hierachy를 보면, Erase Button 아래에 Image가 붙어있는 것을 확인할 수 있다. 이것이 메뉴 버튼의 톱니 바퀴 이미지이다. 우리는 이건 필요없으니 삭제하고, Erase Button을 마우스 우클릭 > UI > Text를 눌러 텍스트를 추가해준다.

이번에도 Inspector > Text(Script) > Character의 Font Size를 200으로 바꿔주고, Paragraph의 Alignment를 중앙정렬으로, Horizontal/Vertical Overflow를 모두 Overflow로 바꿔준다. 그리고 Scale tool로 글씨가 미리 설정해둔 버튼의 안에 들어가도록 줄여준다. Text 내용은 Erase나 지우개 등으로 바꿔준다. 

 

이제 위치를 조절해줘야한다. 지금은 메뉴 버튼과 같은 위치에 있으니까 적당한 다른 위치로 이동해보자. 이 포스트에서는 메뉴버튼의 아래에 버튼을 회전시켜 배치하려고 한다. 좌측 이미지와 같이 말이다. 

 

위치는 Move tool을 이용해 조절할 수 있다.

회전은 Erase Button의 Inspector > Rect Transform의 Rotation을 Z=90으로 바꿔주면 좌측 이미지와 같이 버튼이 돌아간다. 

 

여기까지 하면 유니티에서 버튼을 만들어주는 것까지는 완료되었다. 이제 버튼을 클릭했을 때 일어나는 일을 코드로 만들어보자.

---

이번에도 HelloARController.cs 파일을 열어준다. 우선 코드에서 Erase Button을 인식할 수 있도록 선언해준다. 

위와 같은 코드를 파일 상단 선언부에 추가해준다. Public class HelloARController 이하에 Awake() 이전이면 위치는 아무곳이나 상관 없다. 

 

여기에 EraseButtonClick()이라는 함수를 추가해줄 것이다. Update()함수가 끝난 바로 아래에 아래의 코드를 작성해준다. 

코드는 코딩을 조금 해봤으면 이해할 수 있을만큼 간단하다. p_index가 0보다 크면 즉, 점이 한개라도 생성되어 있다면 지우개 기능을 수행할 수 있다. 점이 하나도 없는데 점을 지울 수는 없기 때문이다. 

 

l_index와 t_index는 점이 두 개 이상일 때부터 늘어난다. 점과 점 사이에 위치해야하기 때문이다. 그래서 l_index와 t_index 값은 p_index 값보다 1씩 작다. 그래서 일반적인 경우에는 else 이하와 같이 각 배열에 들어있는 index번째의 점을 삭제하고 index값을 1씩 줄여주는데, l_index나 t_index가 0이 된 경우는 점만 삭제하고 선과 텍스트는 삭제하지 않는다. 마찬가지로 index도 p만 줄여주어 최종적으로 전부 0,0,0이 된다. 

 

코드를 작성했다면 저장해 준 뒤, 다시 유니티로 돌아온다.

---

버튼을 클릭했을때 방금 만든 EraseButtonClick() 함수가 실행되도록 하려면 버튼 내의 On Click() 기능을 이용하면 된다. 

Erase Button을 Hierachy에서 클릭한 후 Inspector의 아래쪽을 보면 좌측과 같은 On Click() 기능을 찾을 수 있다. 아래에 있는 + 버튼을 누른다. 이제 함수를 가져올 수 있다.

 

 

EraseButtonClick()이 작성된 파일인 HelloARController.cs는 저번 포스트에서 Hierachy의 HelloAR Controller에 연결해줬었다. 그러므로 EraseButtonClick()을 이용하기 위해서는 None이라고 적힌 부분에 HelloAR Controller를 넣어줘야한다.  Hierachy에서 해당 컨트롤러를 그대로 드래그 해서 넣어주면 된다. 그럼 우측의 No function이라고 적혀 있던 부분이 활성화 될텐데, 이 드롭다운을 클릭해서 HelloARController > EraseButtonClick을 눌러준다. 그럼 위의 이미지와 같이 On Click기능을 사용할 수 있다. 

 

그리고 코드에서 Erasebutton을 선언해줬으니, 유니티에서 만들었던 Erase Button 게임 오브젝트와 연결시켜야한다. Hierachy에서 HelloARController > Inspector > HelloARController(Script) > Erasebutton에 아까 만들어둔 Erase Button을 드래그해서 연결해준다. Hierachy에서 바로 끌어오면 된다. 

---

여기까지 연결을 마쳤다. 이제 빌드를 통해 테스트해볼 수 있다.

(이전 포스트에서 언급한 것과 같이 유니티 내에서도 테스트해볼 수 있기는 하다. 하지만 유니티에서 실행하는 코드는 '클릭할 때마다' 점이 추가되는 코드인데, Erase 버튼을 테스트하기 위해서는 버튼을 '클릭'해야하기 때문에 결과적으로 점을 지웠다가 다시 생성하게 된다. 이런 부분이 테스트에는 적합하지 않아 보이니, 빌드 후 테스트를 하는 쪽을 권한다.)

 

---

3. 점 포커싱 기능 추가

지우개 기능을 테스트하다보니, 점을 만들고 지우다 보면 현재 포커싱 되어있는, 즉 지우개 버튼을 한번 더 누르면 지워질 가장 최근의 점이 어떤 것인지 바로 볼 수 있으면 좋을 것 같다는 생각이 들었다. 그래서 점 포커싱 기능을 추가해보았다. 포커싱 되어있는 점과 그렇지 않은 점의 색을 다르게 하는 기능이다.

최종 결과물은 위와 같을 것이다. 빨간색 점은 일반 점, 파란색 점이 가장 최근의 점, 포커싱된 점이다.

 

이 기능은 간단히 코드만 추가해주는 것으로 구현할 수 있다.

일반적인 게임 오브젝트의 컬러를 바꿔주는 코드는 아래와 같다.

위 코드에서 gameObject부분에 색이 바뀔 대상인 게임 오브젝트가, Color.color의 뒷 부분에 바꾸고 싶은 색의 이름이 들어간다. 

 

이 포스트에서는 점 포커싱 기능을 아래와 같이 구현했다. 저번 포스트에서 추가해줬던 FixedUpdate()를 수정했다.

주석으로 추가된 부분이라고 표시한 곳 이하가 점 포커싱 기능을 위해 추가한 코드들이다. 

 

이 코드 또한 매우 간단하다. 현재 생성되어있는 모든 점 오브젝트들, 즉 Points 배열의 원소들을 foreach문을 이용해 한번씩 체크한다. 해당 점의 인덱스가 p_index-1과 같으면, 즉 가장 최근의 점이라면 색을 파란색으로 바꿔주고 foreach문을 나오고, 그렇지 않다면 전부 빨간색으로 바꿔준다. 

이를 FixedUpdate() 안에서 실행하는 이유는 FixedUpdate()가 Update()가 한번 돌 때마다 실행되는 함수이기 때문이다. 즉 새로운 점이 있는지, 또는 지워진 점이 있는지를 매 프레임마다 체크해줘야하기 때문에 이곳에 넣게 되었다.

 

---

이렇게 세 가지 기능을 추가해 Virtual Ruler를 좀 더 사용하기 좋게 바꾸어 보았다. 위 기능을 추가한 상태로 빌드 후 실행해보면, 아래와 같이 가로 화면 고정, 지우개 버튼, 점 포커싱 기능이 잘 작동하는 것을 확인할 수 있다.

1. 점 생성	2. 지우개 버튼 클릭(한 번)	3. 지우개 버튼 클릭(두 번)

(사진의 주변이 너무 지저분해서 좌우를 조금 잘랐는데, Erase버튼이 있는데 사진에선 잘려서 보이지 않게 되었다...)

 

이렇게 점과 관련된 편의성을 조금 개선해 보았다.

 

앞으로는 아래와 같은 시도를 진행해보고자 한다. 

 

<추후 시도해볼 것>

- 아이패드처럼 클릭 후 드래그 기능 추가해볼 법 함, 길이도 실시간으로 측정

- 아예 평면인식 다시 하도록하는 리셋 버튼 추가

- 길이가 점이나 라인에 고정된 것이 아니라 카메라를 항상 바라보도록 수정

- 평면이 여러층으로 잘못 인식되는걸 한층으로 합치기

-anchor 기능 공부 및 평면을 더 잘 인식할 수 있도록 수정 시도

 

 

이 포스트는 상황에 따라 추후 업데이트 될 수 있다.
-작성일: 2020.11.26
-2020.12.02 하단 연관 포스트 추가

-Last Updated: 2022.06.30 코드를 Github Gist로 변경

 

연관 포스트

- 1. 유니티에서 ARCore 시작하기

- 2. HelloAR

- 3. AR Ruler①