유니티 - 카메라 컴포넌트 설명

목차

• • Clear Flags
    • • Skybox
      • Solid Color
      • Depth Only
      • Don’t Clear
  • Background
  • Culling Mask
  • Projection
  • Clipping Planes
  • Viewport Rect
  • Depth
  • Rendering Path
  • Target Texture (Unity Pro only)
  • HDR

---

Clear Flags

화면의 어디를 클리어 시킬 것인지를 정한다
라고 유니티 공식에 설명되어 있는데
이름도 거지같고 설명도 거지같아서 정확히 뭘 하는지 이해하는 거 자체가 거지같다
클리어가 Skybox이면 Skybox를 클리어한다? 실상 나타나는건 그 반대로 Skybox만 남긴다
반면 Depth Only의 경우는 진짜로 그 Depth만 남긴다.. 이러니 개판이지..
그러니 그냥저냥 알고 넘기자

Skybox

스카이 박스라 불리는 배경전용 셰이더로 빈공간을 채운다

Solid Color

빈공간을 단색으로 칠한다

Depth Only

빈공간을 투명처리한다.
카메라 두 대 이상을 한 화면에 합성할때 주로 사용한다.
아래 설명해놨지만 카메라의 Viewport를 수정하지 않는 이상 카메라를
10대를 놔도 한화면에 각 카메라의 영상을 가져와서 depth 순서대로 차곡차곡 쌓는다
당연히 화면에 투명한 부분이 없으면 뒤의 화면은 암것도 안보이게 되므로
이러한 처리가 반드시 필요하다
이는 또한 밑에서 설명할 Culling Mask와 같이 사용하는 것이 일반적이다
사용예를 하나 들어보자
적외선모드를 키면 벽넘어의 인물을 보이게 할려고 한다.
이때 벽을 랜더링 속성을 꺼버린다거나 하는 수가 있지만 일일이 벽들을 찾아서
그런 짓을 하기가 번거롭기도 하고 성능상으로도 문제가 될 수 있다
이것을 카메라 두 대로 처리하면 매우 간단히 처리가 된다
메인 카메라와 서브카메라를 두고 서브는
모든 사물의 모습을 끄고 단지 인물만 보이도록 해놓는다
그런 후 서브카메라를 Depth Only 설정으로 두고 켜버리면 벽안에 있든 말든
장소든 상관없이 화면 젤 위에 다 노출되게된다. 그런 점을 이용해서
일단 서브카메라를 꺼놓다가 적외선 모드 이런 것을 쓸때만 딱 키면

위에서처럼 벽넘어의 모습을 탐색하는 것 같은 효과를 줄 수 있는 것이다

Don’t Clear

이건 화면을 새로 갱신하지 않고 이전의 화면 위에다가 다시 그린다
덕분에 오브젝트가 움직이면 잔상이 화면에 잔뜩 남게 된다
일반적으로 게임에 사용하진 않지만 셰이더를 따로 만들어서 스파의 초필살기의
잔상처럼 쓸 순 있는 것 같기도한데.. 해보니까 2D 쪽은 뭔가 잘 안된다. 걍 패스

Background

위의 Clear flags에서 solid Color를 적용할때 나오는 색

Culling Mask

보여질 레이어들. 디폴트는 모든 레이어가 체크되어 있는데 체크를 끄면
해당 레이어의 물체들은 카메라 화면에서 안보이게된다. (모습만.. 그외는 그대로다)

Projection

원근과 직교 투사방식
원근은 가까운 건 크게, 멀리있는 것은 작게 보이는 방식이고
직교는 그딴거 없다.
화면상에 뭔가 보이는 방식은 카메라의 시야각안에서 평면으로 싹뚝짤라서 나오는 방식이다

Perspective
A부분을 싹뚝 잘라서 가져오면 가까울수록 빨간 시야각이 좁으므로
화면이 작아서 상대적으로 물체가 차지하는 비중이 크다
B부분은 화면이 커져서 상대적으로 물체가 차지하는 비중이 작다

Orthographic
처음부터 시야각엄청 넓으면서 동일한 Orthographic 방식은 거리가 멀어도 항상
동일한 물체 크기를 가지게된다

Clipping Planes

위에서 싹뚝 자르는 것은 전지역에 걸쳐서 촘촘히 이뤄지는데
무한정 그러다간 컴터 터질 것이고 시작 평면과 끝 평면을 정해놓고 그 안의 것만
랜더링한다. 이 사이에 안들어가면 화면상에 보이지 않게된다

Viewport Rect

위의 perspective 화면을 보면

사실은 이래야 정상이다. 화면 크기 자체가 달라지는 것이다
하지만 그렇게하면 화면상에 표현하는데 온갖 에로사항이 꽃피게 되고..
의도에도 맞지 않는다
그래서 뷰포트(Viewport )라는 모두에게 적용되는 가상의 화면이 필요하게 되었다
뷰포트는 모두가 같은 화면에서 단지 오브젝트의 비중으로 화면을 정하며
비중은 백분율.. 즉 0부터 1까지만 허용한다

• X : 가로 원점
• Y : 세로 원점
• W (Width) : 가로 넓이
• H (Height) : 세로 높이

이렇게 되어 있는데 하나의 카메라는 하나의 뷰포트만을 가지며
기본값은 항상 현재 화면의 전체크기이다.
그래서 기본값으로는 카메라가 10대라도 다 겹치게 되는 것이다
하지만 값을 변경하여 카메라 각각의 화면을 보이게 할 수 있다

xy를 0.7정도로 wh를 0.2 정도로한 미니맵용 카메라

Depth

오브젝트들이 순서가 있듯이 카메라의 보여지는 순서

Rendering Path

랜더링 패스를 지정한다.

Target Texture (Unity Pro only)

카메라 화면을 게임상 오브젝트의 텍스쳐에다가 붙여 넣을 수 있다
야구장에서 중계스크린이 붙어 있는 것 같은 효과

HDR

HDR 랜더링을 한다.

Written with StackEdit.

Read More

프로그래밍과 프로그래밍언어의 개념

목차

• • 프로그래밍(Programming) 용어적 의미
  • 기계어와 컴퓨터
  • 새로운 프로그래밍 언어의 등장

---

내가 처음 프로그래밍이란 용어를 접했을때의 이미지는

이랬다.-ㅅ-
뭐 비슷한 점도 있지만 실제로 여기에 무슨 우주적 신비가 깃들어 있다거나 하진 않고 충분히 이해가능한 것이다
그래서 초보입장에서 네오랑 만나지 않게 한번 설명해보겠다

프로그래밍(Programming) 용어적 의미

먼저 IT계열은 항상 미쿡인이나 영어를 주식으로하는 나라들이 너무너무 부럽다
이들은 언어적 이점으로 인해 비영어권보다 몇배나 쉽게 프로그래밍을 배우기 때문이다
그에 관한 글 - 프로그래밍에서 용어와 영어의 중요성

Programming : 계획하는 것, 남이 할 일을 짜주기

프로그래밍의 경우 위와 같은 뜻을 지닌다
우린 컴터를 부려먹는다. 한데 부려먹을 컴터는 사실상 백치나 다름없다
그래서 우린 컴터가 할일을 일일이 계획을 짜서 건네줘야한다
그것을 ‘프로그래밍 한다’ 라고 한다
근데 얘는 외국인이므로 한글로 계획을 짜줘봐야 못알아듣는다
그래서 컴터의 고향언어로 짜줘야한다
그러한 언어를 프로그래밍 언어라고 하는 것이다

기계어와 컴퓨터

이제 프로그래밍에 대해서 대충 알게되었다
그럼 컴퓨터의 고향언어로 짜주면 그만이다
컴퓨터의 고향언어는 뭘로 되어 있을까
바로 기계어이다
(기계어에 관해서 더 자세히 알아보고 싶다면
[언어] 프로그래밍 언어의 역사 를 읽어보길 바란다
아주 재밌고 유익하다)

이건 또 무슨 거창한 외계언어일까 생각될 것이다
하지만 기계어는 이름과 달리 유치원생급 언어이다
아주 짧은 지시어들로 이루어져 있는데
가, 멈춰,
이런식이고 이들은 001, 1010 이렇게 0과 1로 이루어져있다
예를들면

stop - 000000
go - 000001
threeGo - 000010
Godolii - 111111

이런식이다. 왜 기계어가 이런식인지는
컴퓨터와 이진수 여기에 따로 설명해 두었다
여하튼 이런 기계의 언어로 해야할 일을 적어 놓으면
그게 바로 프로그래밍인 것이다
그럼 첫번째 프로그래밍을 해보겠다

10 - 오른발
01 - 왼발
11 - 앞으로

이걸로 ‘걸어라’ 라는 프로그래밍을 해보겠다

10 11 01 11… 반복

나 이짤 맨날 써먹는듯

새로운 프로그래밍 언어의 등장

엄청 쉽다. 근데 왜 어렵게 변했을까? 1
우리집 개 이름이 다롱이 인데.. 얘는 밥먹자 소리 안해도
밥의 낌새가 느껴지면 밥그릇앞에 대기해있다
견공지능의 위대함이다

하지만 컴터에겐 어림도 없다

밥먹자~ 라는 지시가 아니라 위의 걷기로 밥그릇 앞에까지
가게 해야한다. 위의 앞으로 라는 것도 어느정도 앞으로 가야되는지
정해야하고 1cm라고 치면 1m 전진에 아래와 같은 코드가 펼쳐진다

10 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 ......
... (존내반복) .... 01 11 11 11 11 11 11 11 11 11 11 11.....
노가다도 노가다지만 어느 순간이 되면 이제 뭐가뭔지 알 수 없는 단계에 이르른다
그나마 저긴 꼴랑 3개의 지시어만 썼을뿐이고 지시어에 2자리만 사용할리도 없다
0000101010011 이런게 명령어 1개인 경우가 수두룩 하단것이다
저런걸 위에처럼 쓴다면 절대 못알아보게 된다

그래서 저딴 코드를 짜던 사람들이 더 이상 못살겠다며
인간답게 살아보자며 만든 것이 어셈블리어이다
그것은 숫자로 표현되던 기계어를 다음과 같이 표현하기로
약속하는 것을 말한다. 즉 어셈블리어의 문법을 창조했다

011110 011110
mov mov

근데 당연히 mov mov 이렇게 해놓으면 컴터가 알아들을리가 없다
그래서 mov라고 해놓으면 011110 으로 번역해주는 유틸을 만들었고
이제는 기계어를 쓸 필요가 없어졌다2
한데 이 어셈블리어도 상당히 기계어에 가까운 원시적 언어라
밥먹어라 ~ 라고하면

mov mov mov mov mov mov mov mov mov mov

이짓 하기가 일쑤다 (물론 코드자체는 상당히 다르다 걍 개념적으로)
그래서 더더욱 개공지능에 가깝게 만든 언어들이 나오고
이들은 위의 코드를

moveToEat

이런식으로 더욱 발전시켰다.
또한 각자의 방식, 용도에 따라 더더욱 분류가 되었고
오늘날에 이르러 프로그래밍 언어는 그 수도 장난이 아니게되었다

다만 ‘밥먹자’ 라는 개념이 전세계 어디서나 있듯이
프로그래밍 언어도 공통적인 개념에서는 크게 벗어나지 않아
하나의 프로그래밍 언어를 익히면 다른 언어의 문법에는 쉽게 접근할 수 있게된다 (특히 C를 익히면 어떤 언어든 접근이 쉽다)

Written with StackEdit.

---

1. 참고로 레지스터니 메모리관리니 이런건 일단 제외한다. 이 글을 읽을 사람이 그런거 보면 메트릭스로 다이빙하는 수가 있으니까.(사실 나도 모른다는게 더 큰 이유) ↩
2. 그것을 어셈블러 라고 하는데 그 후의 언어에는 일반적으로 컴파일러 로 퉁친다 - 더 자세한건 위키참조 ↩

Read More

컴퓨터와 이진수

목차

• • 이진수란
  • 컴퓨터에서의 이진수

---

이진수란

두 가지의 표현방식을 가지는 것을 이진법이라 한다
세 가지라면 삼진법, 네 가지라면 사진법이다

수업시간에 질문하기를 손을 들고 내리는 방식으로 정의하면
이진법이다. 손을 든다, 내린다 두가지이므로..
일주일은 요일을 표현하는 7진법이다

그러한 진법들의 각 표현에다가 수로 대응한 것이 진수이다
이진수의 경우 두 가지 표현의 각각에
0과 1을 할당했다

위의 질문하기에 대입하면

0 - 손내리기
1 - 손올리기

로 볼 수 있다
여기까지만 보면 이들의 가치에 의문을 가지게 되지만
오른손 왼손으로 보게 되면 표현수가 극적으로 늘어나게 된다

00 - 오른손 내리고 왼손 내리기
01 - 오른손 내리고 왼손 올리기
10 - 오른손 올리고 왼손 내리기
11 - 오른손 올리고 왼손 올리기

어떤 표현을 할 수 있는 것을 하나 추가할때마다
표현 가짓수는 제곱으로 늘어나게 되어

비록 2진법이라도 모스부호 처럼 모든 문자를 표현 가능하게
되는 것이다

컴퓨터에서의 이진수

컴퓨터는 자신의 의사표현 방식이 이진수이다
정확히는 반도체 하나의 표현방식이 이진수이다
앞서 말했듯이 모이고 모이면 대규모 표현이 가능해진다고 했다
그래서 반도체를 왕창 때려박아놓은 컴터가 각종 다양한 표현이 가능한 것이다

근데 왜 이진수 방식일까. 이왕이면 10진수가 가능한 부품을
왕창 때려넣으면 지금과는 비교가 안될 것이다

그것은 기계란 것을 창조해내는 과정에 있어서
뭔가를 작동하게 하는 것도 힘들지만 뭔가를 표현하게 하는것은
더더욱 힘들기때문에 생겨난 방식이다
예를들어 당신에게 여러개의 증기기관을 주고
숫자를 시각적으로 표현하라 하면 어떻게 하겠는가?
상당히 머리 아플것이다

그래도 한개 작동하면 1번 번호판을 내리고 두개 작동하면
2번 번호판 내리게 하고.. 이런식으로 무게추와 톱니바퀴
이용해서 어찌어찌 만들면 될것이다

그런데 증기기관 가지고 그런짓하긴 골때린다
그런 가운데 힘을 전달하는 매체로서 가장 탁월한 것이 나왔고
그것이 전기다.
위의 것을 전기로 바꾸면 전기볼트가 일정이상 넘어가면
뭐가 작동하고 하는 아날로그 식으로 할 수 있을지도 모른다
하지만 그러한 아날로그식 제어는 주변환경의 영향이 극심하고
제어 자체가 매우 힘들다.
그래서 현재 가능한 부품으로 최대한 주변영향을 배제하면서
명확한 결과를 낼 수 있는 방법을 고민해보니

전기가 통하면 1, 전기가 안통하면 0

전기가 통하는가 안통하는가로 따지는 이진법이 짱이었던 것이다
그리고 그런 부품을 왕창 때려박으니 그럭저럭
표현이 풍부해지게되었다. 하지만 진공관 같은 거대한 부품을
그런 수로 때려박으니 부피와 무게가 감당이 안되게 컸었다
세월이 흘러흘러 똑같이 통하고 안통하고를 제어할 수 있으면서도
부피와 무게가 머리카락보다 작게 할 수 있는 반도체를 만들게 되었고
이제 그런 부품 크기가 작아짐에 따라 컴터도 역시 작아지게되었다

아래의 동영상이
컴퓨터의 표현과 2진법의 관계를 잘 나타내줄 것 같다 ^^

벨브(1작동,0잠금)를 여러개 배치해서 표현하는 물 그래픽

Written with StackEdit.

Read More

xpath 의 개념과 문법

목차

• • xpath의 개념
  • xpath의 Node
  • xpath 문법
    • element

---

xpath의 개념

우린 파일을 찾을때 탐색기를 이용한다
탐색기는 미지의 장소를 그냥 탐험하는게아니라
길, 즉 path를 따라가서 원하는 곳을 찾아내는데
C:\windows\System32\important\왜가리
위와 같은 형식이고 이것이 윈도의 path 문법이다

마찬가지로 xml도 원하는 태그나 속성을 쉽게 찾기 위해
path문법을 만들게 되었고 xpath라 명명하게되었다

xpath의 Node

xml도 윈도처럼 단순히 파일과 디렉토리만 딸랑 있다면 매우좋았을 것이나
불행히도 <body style="sexy" class="top"> -ㅠ- </body> 이런식으로
우리가 찾아야할 것은 body라는 태그 하나로 끝나는 것이 아니다
각 태그에는 속성도 있고 속성값도 있고 태그의 내용물도 있다
그래서 이걸 어찌해야하나 고민하다가
그냥 모조리 node 라는 단위로 퉁쳐버렸다
<body style="sexy" class="top"> -ㅠ- </body>
위는 5개의 노드로 이뤄졌다고 할 수 있다
이렇게 노드로 만들고 나니 각 노드들 중에 동일한 타입들이 존재했다.
xml을 완전히 분해해봤을때 6가지 타입만 있으면 xml은 쫑이었다
그래서 노드들을 더욱 찾기쉽게 각 타입마다 이름을 붙여주었는데
그 과정에서 얘네들을 전부 포함하는 가상의 타입이 하나 추가되었다. 그게 다음과 같다

노드명	설명
root node 1	xml 자체를 표현하는 가상 노드
element node	태그
attribute node	속성
text node	태그 내용
namespace node	xmlns: 로 시작하는 태그
processing-instruction node	<?xml version="1.0" encoding="UTF-8" ?> 이렇게 <? 태그로 시작하는 애들을 말한다
comment node	주석문

7공주도 아니고 성질나게 많지만 다행이
자주 사용하는 것은 element와 attribute 노드이고
xpath의 사용법도 이들에 집중되어 있으니
element node, attribute node, text node
요렇게만 알고 있어도 끝이다

xpath 문법

자 이제 한번 xml의 신비로운 육체를 탐험해보자..-ㅅ-
너무 신비로운 나머지 쪼매 복잡한데
다 때려치우고 쉬운것만 맛보자
그것만으로도 왠만한건 다 해치울 수 있다

element node

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

<book>
  <title lang="en">Harry Potter</title>
  <price>29.99</price>
</book>

<book>
  <title lang="en">Learning XML</title>
  <price>39.95</price>
</book>

</bookstore>

위에서 book 태그를 찾아 들어가고 싶다면?
윈도처럼 쓰면 아래와 같은데
/bookstore/book
윈도에선 book 이라는 이름 하나는 하나만 찾는다는 소리지만
xpath에서는 NodeName 은 기본적으로 모든(ALL)을 뜻한다.
왜냐.. 윈도에는 같은 이름 디렉토리를 못만드는 반면 xml은
같은 태그를 줄창 만들 수 있으니까..-ㅅ-;;

하지만 원하는 것만 찾는 방법도 필요할터..
그래서 조건을 걸때를 위해 [] 대괄호를 제공해준다
아래는 첫번째 book만 찾아준다
/bookstore/book[1]

수식도 쓸 수 있다
/bookstore/book[price>35.00]

자.. 다시 해석하면
모든 bookstore 아래의 모든 price 의 값이 35 이상인 모든 book
이 되시겠다2
또한 //book 이렇게 쓰면 모든 book을 찾아준다
bookstore//book 이럴 경우는 bookstrore 안쪽의 모든 book을 찾는다
즉, 아래쪽의 모든 것을 찾을땐 //을 쓴다
book 그냥 이렇게 쓸 경우 현재 있는 곳에서 모든 book을 찾는다
저 위의 예제에서 저렇게 쓰면 암것도 못찾는다
book은 bookstore 아래에 있기 때문이다

attribute node

여기서 날카로운 사람이면 의문을 가질 수 있을 것이다
위에서 7개의 노드가 있다고 했는데 이런식이면
저건 Element 노드만 찾는게 아닌가.. 라고..
맞다. 앞서 말했듯이 xpath는 7개 노드 만들긴 했는데
딴건 워낙 잘 안쓰니까 가장 잘 쓰는 Element 노드는 위에처럼
걍 써도 되는 특권을 줬고
그 다음 잘 쓰는 Attribute 노드의 경우 앞에 @를 붙인다
//@lang
이럴 경우는 모든 곳에서 lang Attribute 노드를 찾는다
참고로 lang 속성을 가진 Element 노드를 찾는게 아니다
정확히 Atrribute 노드만 반환한다

그럼 저 속성을 가진 Element 즉, 태그를 찾고 싶다면?
앞서의 조건을 걸려면 [] 대괄호를 쓴다고 했다 그대로 하면된다
//title[@lang]
이러면 lang 속성을 가진 title 태그 노드를 반환한다

text node

마지막으로 또 하나의 중요한 노드인 Text 노드를 찾고 싶다면?
text()
를 사용한다. text 노드는 태생 자체가 엘리먼트 노드인 태그안에만 존재하기 때문에 문법도 일단 처음에 엘리먼트 노드가 나와야만 한다
//title/text()
모든 title 태그 안에 있는 Text 노드 추출

//text()
모든 태그안의 text 추출

xpath 테스트

그외에도 선택자로 찾기도 있고 그런데 여기까지 알았으면
그것들을 사용하는 것도 크게 어렵진 않다
문법을 참고한 후
http://www.w3schools.com/xpath/xpath_syntax.asp

이 사이트에서 연습해보면 xpath를 자유자재로 사용가능하게되고
이제 인간 XML 탐색기로 거듭나게 될 것이다 +_+
http://www.xpathtester.com/xpath

Written with StackEdit.

---

1. w3school에서는 Document node라 되어 있는데 그런 노드는 없다. http://www.w3.org/TR/xpath/ 참조 ↩
2. 어? 위의 book[1]은 그럼 book의 value가 1인거 아닌가요?
   라고 할 수 있는데 숫자만 쓰여졌으면 걍 순서고
   직접적으로 element랑 비교수식이 있으면 자동으로 값과 비교된다
   머리아프니 걍 그런줄 알고 넘어가자 ↩

Read More

컴터중 간단한 운동

목차

• • 목운동
  • 척추운동
  • 손목운동

---

목운동

척추운동

손목운동

벽에 똥칠할때까지 살테다..-ㅅ-;;

Written with StackEdit.

Read More

유니티 Mathf.Lerp Mathf.LerpAngle

목차

• • Mathf.Lerp 선형보간법
  • Mathf.LerpAngle

---

Mathf.Lerp 선형보간법

Interpolation 이라는 용어가 있는데 보간법(補間法)이라고 한다

본인은 수학도 잼병이고 이런 용어도 너무 약하다
거기다 검색해보니 너무 고차원적이라 간신히 흰것은 웹페이지 바탕화면이고
검은것은 글씨라는 것 정도만 해석 가능했다
그래도 어쩌랴 궁금한걸..;;;

일단 용어부터 시작하겠다
보간.. 간격을 보충한다는 말이다. 여기서부터 슬슬 복잡하게 전개되는데
본인은 그런건 관심없고 용도만 관심있으므로 최대한 내 맘대로 설명하겠다

어떤 두점 사이에서의 위치를 수학공식이나 법칙에 따라
t 라는 진행시간에 어디에 있을지 예측해내는 것이다

예를들면 친구가 놀러온다고 했을때
‘어디쯤 왔을려나? 아까 출발했으면 대충 xx슈퍼앞이겠네’
이게 보간법이다.
내 집(시작점)과 친구집(끝점)을 알고 있고 칭구의 속도라거나 길이라거나
내가 알고 있으므로 위치 예측이 가능하다
물론 지그재그로 온다거나 하면 예측공식은 더더욱 복잡해지는데
그냥 직선으로 온다고 가정하는 것을 선형보간법(Lerp)이라고 한다
그리고 여기서 t 라는 값은 진행시간 혹은 진행과정인데
그런걸 나타내는데는 역시 백분율이 짱이다
그래서 출발을 0으로 두고 도착을 1로 둔다.
그냥 정수로 했으면 나 같이 단순한 사람은 평화를 만끽했을텐데 아쉽게도
더욱 정밀한 걸 원하는 사람이 많아서 실수(float)로 0과 1사이가 되었다
대충 0은 0%, 0.5는 50%, 1은 100% 라고 생각하자

이제는 Mathf.Lerp 의 설명이 좀 쉽게 된다

Mathf.Lerp(float from, float to, float t);

from은 시작점, to는 끝점, t는 진행률이다
당연히 t가 0일때 반환값은 from 이고 1일땐 to를 반환한다
0.5일땐 from과 to의 중간값을 반환한다

예를들어

Mathf.Lerp(10f, 20f, 0.2f);

이면 10과 20의 20% 지점인 12를 반환한다.

Mathf.LerpAngle

Mathf.LerpAngle 은 위의 Mathf.Lerp 메서드의 각도버전으로
작동방법은 비슷하다
하지만 두가지가 다른데
첫째로 각도버전이므로 시작값과 끝값이 360도 범위를 벗어나면 안된다
벗어날 경우 NULL인지 예외발생인지 모르겠지만 여튼 작동하지 않는다
둘째로 Mathf.Lerp로 루프문을 돌릴 경우
Lerp( 300, 350, t) 이러면 t의 비율로 점점 300이 350으로 다가선다
이건 아무 문제가 없다. 그런데 각도는 360이 한계다
그래서 그걸 넘으면 다음과 같은 일이 생길 수 있다
Lerp( 300, 0, t)
300이 360을 향해 다가서다가
갑자기 0으로 돌아선 목표를 따라 이번엔 반대방향에서 다가서는 것이다
이 경우 물체가 회전을 하다 360을 넘으면 급격히 반대방향으로
도는 현상을 볼 수 있다
하지만 Mathf.LerpAngle은 그런 것을 내부에서 잘 처리해준다

이제 실사용예를 보자

float lerpAngle = Mathf.LerpAngle (tr.eulerAngles.y, target.eulerAngles.y, smooth * Time.deltaTime);

//간소화

float 목표각도 = Mathf.LerpAngle(나의 현재각도, 타겟의 현재각도, 민감도);

아래쪽의 간소화대로 설명하면
주로 얘는 LateUpdate() 같은데 쓰이는데 여튼 계속 업뎃함수로 무한 루프를 돈다
그럼 목표각도는 나의 각도와 타겟의 각도 사이의 값을 주는데
민감도 값이 100% (실제 float값으론 1.0f) 면 당연히 타겟 각도를 바로 돌려주어서
업뎃 한번에 타겟과 동일 각도를 유지하게 된다
반대로 민감도 값이 낮으면 낮을 수록
(그렇다고 0을 먹이면 각도 변화는 없으니 하지마-_-;;)
목표각도가 타겟의 각도에 쪼금씩 접근하게 된다.

예를들어 0.5를 먹이고 A(나) 와 B(목표)가 각각 0도 100도 라면

1. 50도, 100도 - 변화량 100도의 절반인 50도
2. 75도, 100도 - 변화량 50도의 절반인 25도
3. 87.5도, 100도 - 변화량 25도의 절반인 12.5도

이런 식이다. 나름 목표에 가까워지면서 자연스럽게 느려지는 효과도
부가적으로 얻을 수 있는 것이다

아.. 수학 실타..;ㅁ;…

주의점

Lerp를 목표수치에 정확하게 도달하는지 검출하는 식으로 사용하면 안된다.
예를들어 아래 문장을 무한루프를 돌렸을때
from = Mathf.Lerp(from, to, T);
최종적으로 from이 to 값이 되진 않는다는 것이다
T가 1이 아닌이상 매우 가까워지긴 하지만 닿진 않는다
또한 거리 보간 효과를 노리고
sqrMagnitude 와 같이 사용하는 것은 금물이다.
sqrMagnitude 는 제곱값이기 때문에 float.Epsilon 과 비교했을시
최소값에 도달하지 않아서 원하는 결과가 나오지 않을 수가 있다
….ㅠㅠ;; 본인얘기임..

Written with StackEdit.

Read More

안드로이드 merge 와 include 레이아웃 기법

목차

• • merge태그와 include태그 소개
  • include 태그
  • merge 태그

---

merge태그와 include태그 소개

안드로이드의 레이아웃의 멋진 기법으로
include와 merge 라는 것이 존재한다
공식홈피와 블로그에서도 소개해놨따
http://developer.android.com/training/improving-layouts/reusing-layouts.html
http://android-developers.blogspot.kr/2009/02/android-layout-tricks-2-reusing-layouts.html

또한 요런 사이트도 있다
안드로이드 merge의 단점 (일어)
일어지만 중국어나 아랍어가 아닌게 어딘가

몰라도 상관없지만 알면 매우 편리한 기법이라고나 할까..
나 같은 귀차니즈머한테는 특히나..

include 태그

똑같은 태그를 또 쓰는 걸 좋아하는 사람은 없을 것이다
그래도 메뉴라거나 할려면 어쩔 수 없다
리스트뷰라면 뷰를 복제복제 해주니 나름 편한데 그런 방법이 없을까

라면 뭐.. 뻔하게도 include 다

마구 써야할 뷰를 하나 정의해주고
그것을 include 태그에 넣어주면 쿠킹완성

예를들어보자

이런 화면을 만들어 줄려면
TextView를 여섯개나 도배해야한다. 근데 패턴이 있다
시작과 끝 시간.. 그럼 저것을 따로 만들어 보자

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TextView
        android:id="@+id/txt_startTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:text="공부 시작 시간"
        android:textSize="20dp"
        />

    <TextView
        android:id="@+id/txt_endTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txt_startTime"
        android:layout_marginBottom="30dp"
        android:text="공부 끝 시간"
        android:textSize="20dp"
        />
</RelativeLayout>

custom_timeset.xml

이렇게 된다.

이걸 include를 사용해서 마구 붙여주면된다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:padding="100dp"
    >
    <include
        android:id="@+id/include_layout"     <!-- 아이디 설정 가능 -->
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/custom_timeset"      <!-- xml을 적는데 주의점 android빼고 -->
        />
    <include
        android:id="@+id/include_layout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/custom_timeset"
        />
    <include
        android:id="@+id/include_layout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/custom_timeset"
        />
</LinearLayout>

올ㅋ

이렇게 되었다

결국.. ViewGroup을 따로 만들어놓고는 재활용하는 것이다
여기서 id가 어떻게 되는 것인지 궁금할 수가 있다

View include01 = findViewById(R.id.include_layout);
View include02 = findViewById(R.id.include_layout2);
View include03 = findViewById(R.id.include_layout3);

TextView tv1 = (TextView) include01.findViewById(R.id.txt_startTime);
TextView tv2 = (TextView) include01.findViewById(R.id.txt_endTime);
TextView tv3 = (TextView) include02.findViewById(R.id.txt_startTime);
TextView tv4 = (TextView) include02.findViewById(R.id.txt_endTime);
TextView tv5 = (TextView) include03.findViewById(R.id.txt_startTime);
TextView tv6 = (TextView) include03.findViewById(R.id.txt_endTime);

이런식으로 사용하면 된다
id가 겹치지만 윈도우에서 A폴더 B폴더 이름만 다르면 각 폴더안 내용물의
이름이 같아도 상관없는 것처럼 상위 뷰계층의 id안에서 findViewById를 하기에
문제가 없다

하지만 위에 보는것과 같이 코드가 더 추가되며
include 를 함으로써 뷰계층이 깊어진다

merge 태그

include를 쓸려면 반드시 감싸줄 ViewGroup이 존재해야만 한다
하지만 그것은 한편으론 뷰계층을 더 깊게하여 부하를 가중 시킨다

항상 레이아웃 디자인에 있어서 레이아웃의 중복은
좋지 않다.

그것을 위해서 나온것이 merge 태그로써
위에서 RelativeLayout 대신에 merge를 사용할 수 있다

<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TextView
        android:id="@+id/txt_startTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:text="공부 시작 시간"
        android:textSize="20dp"
        />
</merge>

이렇게 되면 include 되는 순간 merge 태그는 사라지고
그안의 내용물만 바로 붙여지게 된다
include의 최대 단점이 사라지게 되는 것이다
대신 merge의 슈퍼울트라 단점이 있는데
merge는 뷰 그룹을 생성하지 않음으로써 include와 달리 id 사용이 제한적이다
무슨 소리냐면
View include01 = findViewById(R.id.include_layout);
여기서 include01 이 NULL로 떨어진다는 것이다
아까 말했듯이 merge 태그가 사라짐으로써 include 할때 붙여주는 id도 함께
날아간다. 그렇게 되면 붙여주는 include 마다의 구분이 사라지게됨으로써
각 merge 의 내용물 뷰 역시 같은 id로 둘 수 없게된다
결국 include와 똑같은 효과를 볼려면
merge 로 만드는 뷰도 3개 만들어야한다는거..
노가다를 줄인답시고 하는건데 노가다가 배로 늘어버린다 -_-

그럼 왜 이런 정신나간 태그가 존재하는가

이 경우는 같은 xml이 아니라 각각의 xml에서
똑같은 형식이 딱 1개! 만 필요할때 써주면 편하다
즉, 액티비티가 5개 있는데
각 액티비티마다 무시무시한 분량의 태그가 있는데 그것이 똑같이 생겼다면
merge로 만들어두고 각각 하나씩 붙여주면 되는 것이다

여기서 또하나 ViewStub 이라는게 있는데 걍 없는셈 치자 ^^
잘 쓰지도 않는거…

Written with StackEdit.

Read More

동기와 비동기 개념

목차

• • 동기(synchronous)
  • 비동기(asynchronous)
  • 개념정리

---

동기와 비동기는 완벽하게 용어적으로 차이가 있지만
실제 그 차이가 뭔지는 이상하게도 파악하기가 쉽지 않다
그래서 동기와 비동기의 차이점과 개념을 정리해 보았다

동기(synchronous)

싱크로 되었다.. 라는 말은 들어본적이 있을지도 모른다
더 쉽게 싱크로나이즈드 스위밍은 들어봤을 것이다

이런거다

똑같이 움직이는 것이다

하지만 프로그래밍에서의 동기화란 현실과 좀 차이가 있다
현실에서의 동기화란 둘이 나란히 발을 맞춘다
정확하게는 속도를 서로간에 조절해서 일정한 속도로 나아가게 된다
그리곤 따뜻한 미소를 교환한다

컴터의 경우는 그딴 것 없다. 차가운 미소를 지은후 A 프로그램이
초고속으로 혼자가버린다. B 프로그램은 열심히 따라가는 수밖에 없다
그럼 이딴게 무슨 동기화인가 싶을 것이다
앞서 말했듯이 현실과 다른 방법으로 동기화를 한다
예를들면 토끼와 거북이처럼 토끼가 낮잠을 처자줌으로써 거북이와 만나게 되듯이
어느지점에서 강제로 한쪽이 다른 한쪽이 올때까지 대기하게 되는 것이다.

비동기(asynchronous)

현실에서 비동기는 엇박자가 나는 것을 말하지만
역시나 프로그래밍에서 비동기도 좀 다르다.
프로그래밍에서의 비동기는 그냥 각자 갈길을 가다가
‘살아있냐?’ 라는 뜬금포 메세지를 날리는 것을 말한다
혹은 불의의 일격을 당한다고 생각해도 된다

그래서 데이터를 비교적 안정적으로 받을 수 있는 동기식과 달리
비동기식은 상대방에게 스파이를 심어놔서 데이터가 넘어올때
통보가 오도록 조작해야한다

개념정리

둘의 공통점은 대기를 타던, 불의의 일격을 날리던
서로간에 데이터는 주고 받는다는 것이다.
전혀 관계없이 따로따로 논다면 애시당초 동기니 비동기니
그런 구분조차없다.

즉, 데이터를 받는 방식을 말하는 것이 바로
동기식과 비동기식이다.
말해줄때 데이터를 받는 두가지 방식! 이렇게 말해주면 땡스하지만
단순히 비동기 프로그래밍.. 이런식이라 이해가 어려웠던 것이다

또한 현실에선 정보를 주고 받는데 이 둘에 차이를 둘 의미가 없을만큼
편하게 주고 받는다. 그래서 더욱 이해가 어렵다

실상 프로그래밍의 세계가
구리고 원시적이고 말미잘지능의 미개한 세계라서
커뮤니케이션에 목숨을 걸어야한다는 것을 알기전엔 말이다

서로 하이파이브 한답시고 힘껏 손을 날렸는데
상대는 아직 주머니에서 손을 빼지도 않은 비동기 상태여서
귀싸대기 맞는 엄청난 에러가 시도때도 없이 발생하는 세계라는 것이다
(다른 말로는 Null pointer 에러라고도 한다-ㅅ-;;;
객체도 안만들었는데 데이터 날아와서 개망)

즉, 이쪽의 사람지능이 하이파이브할려고 손들면
저쪽의 사람지능이 알아서 손을 빼드는 뛰어나고 아름다운게 현실세계라면
플그램 세계는 인형 두개 가지고 이쪽 손 내가 들게 하고
저쪽 손도 내가 들어서 정확한 타이밍에 하이파이브 시키게
끙끙대야한다는걸 명심하자

Written with StackEdit.

Read More

컴파일과 빌드의 개념

보통 초보들.. 특히 최근에 시작한 초보들은
컴파일과 빌드의 차이를 모르는 경우가 많다
왜냐면 툴들이 워낙 좋아져서
그 둘을 동시에 Run 하나로 퉁치기 때문이다

당연히 본인도 Compile, Build 에 대해서 잘 몰랐고
그닥 알고 싶지도 않았지만 안드로이드 스튜디오라는 툴을 쓰면서
강제로 알아야만 하게 되었다 ..;ㅁ;

컴파일(compile) : 소스의 문법을 분석해 기계어로 번역
빌드(build) : 번역된 것과 그외 잡다한걸 모아서 실행 가능한 파일로 만듦

보통 IDE(통합 개발 환경.. 걍.. 이클립스나 visual studio 같은 거..) 에서
프로그램을 짠 후 실행 시켜서 확인을 할때

주로 Run 이라는 메뉴를 쓸 것이다
그 Run 이란 명령어는 사실 [Build + 실행] 을 수행한다
그런데 여기서 또 사실 [Build = Compile + 잡다] 이다
고로 결국 컴파일과 빌드 모두 수행한다

그때 만약 문법에 오류가 있으면 컴파일 에러가 나고
문법은 괜찮은데 있어야할 파일이 없으면 빌드 에러가 나지만
이것도 Error!! 로 끝난다

결국
초보인 우리는 IDE의 편리한 메크로 기능때문에
‘Run 했더니 에러가 났엉’
정도밖에 인식을 못했고 그렇기에 컴파일과 빌드의 차이를 모르는 것이다

하지만 알고보면 그렇게 어려운 것도 아니다. 앞서 말한듯이 하나는 번역전문이고
하나는 그것을 포함한 실행파일을 만들어주는 모든 작업을 말한다

추상적인 예를들면
영어로 된 대본이 3장이 있다.
이것을 한국어로 해서 봉투에 넣어 배우한테 주면 임무 완료라고 하자
그런데
이것을 번역하는데 왠 인도어가 들어 있거나
철자가 틀리거나 하면 번역이 막혀버린다.. 이것이 번역불가.. 즉 컴파일 에러가 된다
한편 그런게 없어서 대본 3장을 완벽히 번역 했다
그래서 이제 3장을 봉투에 넣을려고 하는데 봉투가 없다!
혹은 봉투에 넣어 가져갔는데 배우가 튀었다!!
이것이 빌드에러이다

좀더 직접적인 예를들면
컴파일은 현재 내가 짠 프로그래밍 언어를 진정한 기계들이 알아듣는 기계어로
번역해주는 과정이다. 그렇게 번역된 기계어로 컴터는 명령을 수행할 수 있게된다
그런데 그 명령중에 ‘빤스를 가져와라’ 이런게 있으면
컴터는 이렇게 빌드에러를 낸다
‘빤스라는 리소스를 찾을 수가 없습니다. 먹는건가요?’
그럴때를 대비해서 빤스를 손에 쥐어주고
This is Pantsuuuuuuuuuuuuuuuuu!!!
라고 정확하게 알려줘야한다. 그렇게 명령을 수행할때 필요한 것들을
바리바리 싸주는 것이 빌드이다

즉, 컴터가 빵셔틀인건 맞는데 ‘야채빵 사와라’ 이러면 강력한 인공지능이
발휘되어 진짜 야채빵 사오는 현실의 빵셔틀과 달리
‘그게 모죠? 에러입니다’ 이러는 애가 바로 컴터다..
그러므로 ‘야채빵을 사와라’ 라고 할려면 야채빵을 손에 쥐어주던가
아니면 야채빵이 있는 장소를 말해주고
그 장소에 손수 야채빵을 준비해주는 빌드작업을 해줘야한다

또한 빌드 라는 것은
더욱 큰 개념, 즉 ‘완성과정’ 이라는 개념으로 확장해서 의미하는 경우도 많다
실행파일을 내놓는다는 것을 넘어 버그잡고 피드백 나누고 작업 주고받고 마케팅에 출시까지
포함해서 빌드시스템이라고 하는 경우다.

여하튼
프로그램이라는 것에서 컴파일은 번역 하나이지만
빌드는 소스와 그림, 아이콘 같은 것도 연결해줘야하고
다른 사람이 만든 라이브러리도 가져와서 관리하는 둥 훨씬 복잡하므로 따로
Gradle 같은 빌드자동화 툴이 나오기도 한다

Written with StackEdit.

Read More