edc에 유려한 디자인을 입하기 위해서는 이미지가 필수입니다.
아무래도 기본 도형이나 텍스트만으로는 한계가 있겠지요.
이번 포스팅에서는 IMAGE 타입에 대해 살펴보도록 하겠습니다.
이미지 파트를 사용하여 이미지를 원하는대로 배치해보도록 하겠습니다.
이미지는 미리 준비해주세요.
안녕하세요, Tizen 개발자 윤진입니다.
이미지 타입의 파트를 사용하려면 이미지가 있어야겠지요.
이미지는 edc 파일과 하나가 되어 edj 파일을 만듭니다.
edc 내에서 확정하여 사용하는 이미지 파일은 edj로 컴파일될 때 합쳐질 수 있습니다.
블로깅을 하며 edc에서 edj로 컴파일되는 과정을 언급한 적이 없었는데요,
아주 간단하게 언급하자면,
edc는 텍스트 기반의 스크팁트이므로 edj라는 기계가 인지할 수 있는 언어로 컴파일해야하죠.
이 때 edj에는 edc에서 언급한 이미지 파일을 내재할 수 있습니다.
그 때 사용하는 블록이 images 블록입니다.
- images {}
collections와 동일한 레벨로 사용하는 images 블록이 있습니다.
이 블록에서 edj에 포함될 이미지들을 확정하지요.
edje_cc는 컴파일을 진행하며 images 블록을 참고하여 edj와 이미지들이 한 몸이 됩니다.
images 블록에는 image 필드를 넣을 수 있습니다.
- image: [이미지파일] [압축방법] [압축레벨];
이미지 필드에는 이미지파일과 압축방법이 명시됩니다.
이미지 파일은 절대경로/상대경로 어느 방식으로나 적어둘 수 있습니다.
여기에 명시한 경로값을 이미지 파트에서 그대로 사용하면 됩니다.
압축방법으로는 RAW, COMP, LOSSY[0~100], USER를 사용할 수 있습니다.
RAW는 날 것 그대로 사용하는 경우,
COMP는 무손실 압축으로 이미지를 사용하고,
LOSSY는 압축레벨과 함께 이미지를 손실 압축하고,
USER는 edj에 이미지를 포함하지 않습니다.
edc에서 이미지 파트를 사용하기 위한 준비가 완료되었습니다.
이제 이미지를 사용하기 위해,
그리고 세부 설정을 위해 part - description 내에 image 블록을 사용합니다.
- image {}
이미지 블록에는 여러 필드를 사용할 수 있습니다.
normal, tween, border, middle, border_scale, border_scale_by
위의 인자 정도만 익혀도 이미지를 사용하는데 무리가 없습니다.
- normal: "파일이름";
normal 상태에서 사용하는 이미지의 파일이름을 지정합니다.
파일은 절대경로 혹은 상대경로로 지정할 수 있습니다.
만약 edc 파일과 이미지 파일이 같은 위치에 있다면 경로를 써줄 필요가 없겠지요.
이미지 파트에 다수의 이미지를 설정할 수 있습니다.
2개 이상의 이미지가 설정된다면 애니메이션으로 동작하게 됩니다.
이때 normal로 설정하는 이미지가 시작/끝 프레임이 됩니다.
normal이 시작/끝 두 개의 역할을 하기 때문에 뭔가 어색한 애니메이션이 될 수도 있습니다.
차라리 normal을 시작으로 제한하고,
마지막 frame은 다른 이름으로 하는게 더 명확했을 거라 생각이 듭니다.
- tween: "파일이름";
tween에는 애니메이션에서 시작/끝 프레임을 제외한 다른 프레임을 설정합니다.
tween은 몇 개를 사용해도 상관없으며,
tween으로 입력하는 순서대로 애니메이션이 재생됩니다.
각각의 이미지가 재생되는 시간은 program을 이용하여 조절할 수 있습니다.
그 부분은 차후에 program을 설명하며 자세히 살펴보겠습니다.
- border: [왼쪽] [오른쪽] [위] [아래];
border에는 4가지 값을 입력합니다.
단위는 픽셀로써 이미지의 왼쪽/오른쪽/위/아래의 가장자리영역을 지정합니다.
이미지가 스케일에 따라 확대/축소된다고 하더라도,
위에 지정된 가장자리는 왜곡없이 표시됩니다.
라운드 형의 버튼 이미지를 사용하는 경우,
가로 혹은 세로가 상대적으로 더 길어지면 라운드 형태가 왜곡될 수 있습니다.
이를 막히 위해 border를 사용하여 가장자리 형태를 유지합니다.
border가 좌우만 설정되어 있다면,
이미지는 좌우로 확대가 가능합니다.
border가 상하로만 설정되어 있다면,
이미지는 상하로 확대가 가능할테지요.
border가 상하좌우로 모두 설정되어 있다면,
border는 9개 영역으로 나뉘게 됩니다.
이 중 좌상/좌하/우상/우하 영역만 고정 되고 다른 영역은 유동적으로 변합니다.
- middle: [0/1/NONE/DEFAULT/SOLID];
border가 설정되어 있을때 사용합니다.
border로 설정된 영역 외에 나머지 영역은 middle이지요.
0이나 NONE을 지정하면 middle 영역이 보이지 않습니다.
1이나 DEFAULT 혹은 SOLID로 지정하면 middle 영역이 보이지요.
아래 예시를 보면, middle에 대한 개념이 확실하게 잡히실 겁니다.
images {
image: "btn.png" COMP;
}
collections {
group {
name: "main";
parts {
part {
name: "bg";
type: RECT;
description {
state: "default" 0.0;
color: 255 255 255 255;
visible: 1;
}
}
part {
name: "example";
type: IMAGE;
description {
state: "default" 0.0;
image {
normal: "btn.png";
}
rel1.relative: 0.5 0.1;
rel1.to: "bg";
rel2.relative: 0.5 0.1;
rel2.to: "bg";
min: 61 56;
}
}
part {
name: "border_example";
type: IMAGE;
description {
state: "default" 0.0;
image {
normal: "btn.png";
border: 20 20 20 20;
}
rel1.relative: 0.5 0.3;
rel1.to: "bg";
rel2.relative: 0.5 0.3;
rel2.to: "bg";
min: 122 56;
}
}
part {
name: "middle_0_example";
type: IMAGE;
description {
state: "default" 0.0;
image {
normal: "btn.png";
border: 20 20 20 20;
middle: 0;
}
rel1.relative: 0.5 0.5;
rel1.to: "bg";
rel2.relative: 0.5 0.5;
rel2.to: "bg";
min: 122 56;
}
}
part {
name: "middle_1_example";
type: IMAGE;
description {
state: "default" 0.0;
image {
normal: "btn.png";
border: 20 20 20 20;
middle: 1;
}
rel1.relative: 0.5 0.7;
rel1.to: "bg";
rel2.relative: 0.5 0.7;
rel2.to: "bg";
min: 122 56;
}
}
part {
name: "middle_none_example";
type: IMAGE;
description {
state: "default" 0.0;
image {
normal: "btn.png";
border: 20 20 20 20;
middle: DEFAULT;
}
rel1.relative: 0.5 0.9;
rel1.to: "bg";
rel2.relative: 0.5 0.9;
rel2.to: "bg";
min: 122 56;
}
}
}
}
}
- border_scale: [0 혹은 1];
border도 scale factor의 영향을 받을 수 있게 합니다.
scale에 대해선 이전 포스팅에서 언급한 바 있습니다.
화면 해상도가 바뀔 경우 스케일 팩터가 바뀔텐데요,
그에 맞춰 border에서 지정해둔 픽셀값에 스케일 팩터가 곱해져서 적용됩니다.
- border_scale_by: [0.0~];
border_scale을 enable할 때만 의미가 있는 필드입니다.
border 영역에 적용되는 스케일 팩터를 따로 설정할 수 있습니다.
border_scale_by로 설정한 스케일 값에 스케일 팩터를 곱한 값이 최종 적용됩니다.
스케일팩터가 2.0이고 border_scale_by가 0.5라면,
다른 scale 영역들이 2.0배씩 늘어날때,
border 영역은 2.0 x 0.5로 곱해져서 1.0으로(그대로) 보여지게 됩니다.
이미지에 대한 설명은 여기까지 하겠습니다.
그럼 좋은 하루 보내세요~
끝_
