본문 바로가기

렌파이/GUI 꾸미기

버튼이 작동하는 영역을 네모가 아닌 다른 모양으로 만들기


라는 질문이 포럼에 올라왔길래
렌파이로는 그딴 거 안됩니다.. 라고 답변을 썼는데..
"그거 됨. focus_mask 속성을 써보셈."
이라는 댓글이 달렸다.

헐.......내가 저 부분도 다 번역했었는데 왜 난 몰랐지....분명 스타일과 스타일 속성은 새 문서 번역할 때 다 번역했는데...? 하고 보니까 새 문서에는 없는 내용이었다..--;

1. 기본적으로 imagebutton으로 버튼을 만들면
설사 사용한 이미지 파일이 투명 영역을 가진 네모나지 않은 이미지라고 해도
무조건 이미지의 최대 가로 x 세로 길이만큼의 사각형 영역을 클릭하면 이미지의 빈 부분을 클릭해도 동작하게 된다.

그러니까 지금 여러분이 구지 코왈스키가 그려진 부분을 선택하지 않고 204x204 범위 내의 사각형 안을 클릭하면 새 창에서 코왈스키 그림을 볼 수 있는 것과 마찬가지.


이태까지는 그러려니 하고 있었는데. 알고보니 그렇게 작동하는 이유가 있었다.
버튼이 취하는 focus_mask 속성이 기본적으로는 False이기 때문에 그런 것.
이 속성이 False값이면 버튼이 동작하는 영역이 네모난 영역이 되어버리는 것이다.
고로, focus_mask 속성에 다른 값을 주면 네모나지 않은 영역을 버튼이 동작하는 영역으로 설정할 수 있다는 거다.


2. 근데 focus_mask에 어떤 값을 줘야 원하는 영역을 설정할 수 있을까.

focus_mask - 이 속성은 버튼이 focused 되어야 하는지 아닌지를 결정하는 마스크로 사용된다. False면 기본적인 사각형이 마스크로 사용된다. 그 외의 경우, 그러니까 특별한 True 값이 배정되었다면, 렌더링된 디스플레이어블이 마스크로 사용된다. 혹은 그 값이 디스플레이어블로 해석되어, 버튼의 크기로 렌더링되어 사용된다. 두 가지 경우 모두 마스크의 알파값이 사용되며, 0이 아닌 모든 알파값을 가지는 픽셀이 마스크로 사용된다.


포커스고 마스크고 일단 잊어버리고 특별한 True 값이 어쩌구 하면 하는 문장을 보면
'값이 디스플레이어블로 해석되어'
그러니까 이미지 파일 이름을 문자열에 적어서 배정할 수도 있다는 얘기이다.

일단 시험먼저 해보자.
아래는 테스트용 이미지들. 모든 이미지는 호박 그림의 바깥 부분이 완전히 투명한, alpha 0의 상태.
 

_halloween.png // idle 상태의 이미지 버튼을 표시하는데 쓰이는 그림

_halloween_hovered.png // 버튼에 마우스가 올라간 상태에 표시할 이미지

_halloween_mask.png // 버튼이 작동할 영역을 나타내는 이미지.


사실 _halloween_mask.png 파일은 없어도 되는 건데 눈에 보기 쉬우라고 만들어두었다-.-

이제 이 그림들을 imagebutton 속성들에 알맞에 세팅한 다음 focus_mask 속성에 "_halloween_mask.png" 를 써봅시다.

아래는 테스트용 스크립트.



어떻게 작동하는지는 눈으로 직접 확인하시길.




참고로 이미지맵에서는 핫스팟을 사각형 영역을 설정하여 만드는데, 만일 핫스팟으로 설정한 사각형 영역 안의 이미지에 투명도가 0인 부분이 있다면 그곳에 마우스를 가져다 대도 반응하지 않는다. ground 외에 idle, selected hover, hover, selected idle 등의 상태에 사용할 이미지에 투명영역이 있어야 한다.

스크린 문에서 사용하는 imagebutton 에는 focus_mask를 사용할 수 없다. 헐. 그래서 새 문서에는 안 나와 있었구나.
-----
6.12 이후에는 스크린문에도 focus_mask 속성을 사용할 수 있게 되었다.