본문 바로가기

IT/Tizen

[EFL/Tizen 타이젠] edc - map 필드(perspective, on, zplane)

edc를 이용하여 간단한 3D 효과를 줄 수 있습니다.

정밀하게 조절하기가 힘들어서 혹은 조절할 수가 없어서

정교한 효과와는 거리가 있습니다만,

지루한 2D 효과에 지쳤다면 한 번쯤 도전해볼 필요가 있습니다.


이번 포스팅에서는 원근효과를 주는 방법에 대해 살펴보겠습니다.



안녕하세요, Tizen 개발자 윤진입니다.


3D 효과를 적용하기 위해서는 map 블록을 사용해야 합니다.

collections - group - parts - part - description - map

위의 구조의 종단에 map 블록이 있습니다.

description 에에 있다는 것은 program으로 map의 상태를 변경하여 3D 효과를 줄 수 있다는 겁니다.


코드 상에서 map을 보면 아래와 같은 필드들과 사용됩니다.

description {
        ..
        map {
            perspective: "다른 파트이름";
            light: "이름";
            on: 1;
            smooth: 1;
            perspective_on: 1;
            backface_cull: 1;
            alpha: 1;
            rotation {
                ...
            }
        }
        ...
    }


위의 map 블록에서 사용한 필드-

perspective, light, on, smooth, perspective_on, backface_cull, alpha, rotate

우선 위의 필드 중 확대/축소와 관련된 필드인 perspective를 살펴보도록 하겠습니다.


- perspective: [다른 파트이름];

perspective 필드에는 현재 파트의 zplane을 정할때 참조하는 파트를 적어줍니다.

참조하는 파트의 zplane에 따라 현재 파트의 zplane도 확정됩니다.


그렇다면, zplane은 무엇일까요?

zplane은 2차원의 x축과 y축에 이은 3차원의 z축을 의미합니다.

zplane의 설정값에 따라 파트의 멀고 가까움이 결정됩니다.

zplane의 값이 커지면 파트가 가까워져서 커지고,

zplane의 값이 작아지면 파트가 점점 멀어져서 작아집니다.


위의 참조하는 파트는 아래와 같이 perspective 블록을 사용하여 zplane을 설정해야합니다.

       part {
         name: "zoom_out";
         type: RECT;
         description {
           state: "default" 0.0;
           perspective {
             zplane: -140;
           }
           visible: 0;
         }
       } 


perspective 필드에 사용할 파트는 화면에 보이지 않아도 됩니다.

따라서 color 필드를 사용하지 않았고,

visible을 '0'으로 설정하였습니다.

하지만, 영역만큼은 반드시 가지고 있어야 하기에 RECT 타입을 사용하였습니다.

(SPACER 타입도 사용하면 안됩니다)

rel1 / rel2를 사용하진 않았지만,

default로 rel1은 0.0으로 rel2는 1.0으로 설정되니 영역이 잡힌거나 다름없습니다.

perspective는 이 영역의 정가운데 점 하나만을 perspective 로 활용합니다.

zplane은 -140이니 이 파트에 perspective를 걸어둔다면 파트가 작아질 것입니다.


       part {
         name: "zoom_in";
         type: RECT;
         description {
           state: "default" 0.0;
           perspective {
             zplane: 140;
           }
           visible: 0;
         }
       }

위의 파트는 zplane이 140입니다.

perspective로 위의 파트를 걸어두면 파트는 더 커지게 됩니다.



- on: [0 or 1];

map 블록을 활성화(1) 혹은 비활성화(0) 시킵니다.

default가 비활성화이기 때문에 map 블록을 사용하려면 반드시 on: 1;을 해주어야 합니다.



perspective를 확인하기 위해서 우선 rectangle을 3개 만들어보겠습니다.

       part {
         name: "rect_1";
         type: RECT;
         description {
             state: "default" 0.0;
             rel1 { relative: 0.1 0.1; to: "bg"; }
             rel2 { relative: 0.2 0.2; to: "bg"; }
             color: 100 0 100 255;
             visible: 1;
           }
         }
         part {
           name: "rect_2";
           type: RECT;
           description {
             state: "default" 0.0;
             rel1 { relative: 0.2 0.2; to: "bg"; }
             rel2 { relative: 0.3 0.3;  to: "bg"; }
             color: 150 0 150 255;
             visible: 1;
           }
         }
         part {
           name: "rect_3";
           type: RECT;
           description {
             state: "default" 0.0;
             rel1 { relative: 0.3 0.3; to: "bg"; }
             rel2 { relative: 0.4 0.4; to: "bg"; }
             color: 200 0 200 255;
             visible: 1;
           }
         }


색상을 점차 밝은 색으로 변경하며 세 개의 사각형을 그렸습니다.

세 개의 사각형 모두 relative 0.1의 폭과 높이를 가지고 있습니다.

실제로는 아래와 같이 보이겠지요.



이번에는 사각형에 각각의 perspective를 적용합니다.

제일 상단의 사각형에는 -140의 zplane이 적용된 파트를 보게 하고,

제일 하단의 사각형은 140의 zplane이 적용된 파트를 보게합니다.

중간에 있는 사각형은 zplane이 없습니다.


그리고 zplane이 적용된 파트는 전체화면을 영역으로 가지도록 만들겠습니다.

전체영역을 가지고 있다고 하더라도,

실제 perspective가 되는 것은 영역의 정가운데에 점입니다.

정가운데 점이 perspective 관점이 되어서 다른 파트의 원근을 조정합니다.

영역으로는 원근법의 중심점을 정하고,

zplane으로는 원근을 정합니다.


collections {
   group {
     name: "main";
     parts {
       part {
         name: "bg";
         type: RECT;
         description {
           state: "default" 0.0;
           color: 255 255 255 255;
           visible: 1;
         }
       }
       part {
         name: "zoom_out";
         type: RECT;
         description {
           state: "default" 0.0;
           perspective {
             zplane: -140;
           }
           visible: 0;
         }
       } 
       part {
         name: "zoom_in";
         type: RECT;
         description {
           state: "default" 0.0;
           perspective {
             zplane: 140;
           }
           visible: 0;
         }
       }
       part {
         name: "rect_1";
         type: RECT;
         description {
             state: "default" 0.0;
             rel1 { relative: 0.1 0.1; to: "bg"; }
             rel2 { relative: 0.2 0.2; to: "bg"; }
             color: 100 0 100 255;
             visible: 1;
             map {
               perspective: "zoom_out";
               on: 1;
             }
           }
         }
         part {
           name: "rect_2";
           type: RECT;
           description {
             state: "default" 0.0;
             rel1 { relative: 0.2 0.2; to: "bg"; }
             rel2 { relative: 0.3 0.3;  to: "bg"; }
             color: 150 0 150 255;
             visible: 1;
           }
         }
         part {
           name: "rect_3";
           type: RECT;
           description {
             state: "default" 0.0;
             rel1 { relative: 0.3 0.3; to: "bg"; }
             rel2 { relative: 0.4 0.4; to: "bg"; }
             color: 200 0 200 255;
             visible: 1;
             map {
               perspective: "zoom_in";
               on: 1;
             }
           }
         }
     }
  }
}


rect1 파트는 가운데 점에서 봤을때,

zplane이 -140이 되어 더 작아집니다.

더 작아지지만 원래 있던 위치보다 가운데 쪽으로 '많이' 다가오게 됩니다.

이는 소실점이 있는 원근법을 생각하시면 될 겁니다.

1m가 떨어진 두 물체를 가까이에서 보면 1m의 거리만큼으로 보이겠지만,

먼 거리에서 보면 1cm로 보일 수도 있겠죠.

물체가 멀어지면 멀어질수록 가운데로 다가오게 됩니다.


rect3 파트는 가운데 점에서 봤을때,

zplane이 140이 되어서 더 커집니다.

더 커지지만 원래 있던 위치보다 가운데 쪽에서 '조금' 멀어지게 됩니다.

완전히 가운데 있지 않는 한,

눈에 가까이 올수록 가운데에서 멀어지게 되는 것이지요.


종합하자면 아래 그림처럼,

rect1은 작아지고 rect2쪽으로 다가옵니다.

rect3는 커지면서 rect2로 멀어집니다.



오늘은 perspective에 대해서 알아보았습니다.

그럼 좋은 하루 보내세요~

끝_