scaleform.clik.controls.Button class 부터 보겠습니다.

사실 이름을 보면 알 수 있듯이 플렉스의 Button Component 와 크게 다를 것은 없습니다. 다른게 있다면...

1. 라이브프리뷰를 제공하지 않습니다
2. Sprite 가 아닌 MovieClip 을 상속받습니다.
3. 몇몇 속성과 메소드가 없습니다.
4. 몇몇  속성과 메소드 이름이 다릅니다
5. 게임 UI에 활용하기 위한 몇몇 속성과 메소드가 추가되어있습니다
6. 몇몇 속성과 메소드는 이름은 같지만 사용되는 방법이 다릅니다.

Inspectable 메타태그로서 Flash IDE 에 노출되는 속성값만 살펴보겠습니다.
Flash IDE 에는 component parameters 라고 쓰여져있는 판넬에 있습니다.

참고를 위해  http://flexdocs.kr/docs/flex2/langref/langref.html 를 연결해두긴 했지만, 위에 언급했듯이 Flex 와는 다른 점이 있다는 것을 염두하시기 바랍니다. 똑같았다면 제가 따로 포스팅을 할 필요도 없겠죠.
scaleform 쪽은 게임미들웨어인지라 폐쇄적인 성격이 강해 링크를 걸 수가 없네요


1. data:Object

데이터 저장소라고 보시면 됩니다. 예를 들어 툴팁에 관한 내용을 저장해뒀다가 롤오버시 해당데이터를 불러서 툴팁을 뿌린다던가 하면 되겠죠. (Flex 와 달리 툴팁 속성이 따로 업습니다)
오브젝트 형태이기 때문에 뭐든 받을 수 있으나, IDE 상으로는 String 만 넣을 수 있겠죠??



2. autoRepeat:Boolean

예를 들어서 숫자를 늘리는 버튼을 클릭한다고 했을 때, 1에서 10까지 늘리기 위해 10번을 클릭할게 아니라 누르고 있으면 자동으로 디스패치가 발생합니다.
참고로 이때 발생하는 이벤트는 scaleform.clik.events.ButtonEvent.CLICK 이벤트("buttonClick")입니다.


3. enabled:Boolean

버튼 활성화(MouseEvent, KeyboardEvent 등의 이벤트를 적용하는지)에 대한 여부라고 보면 됩니다
버튼을 활성화할 필요가 없다면 mouseEnabled 가 false 처리가 되어 속도가 향상됩니다.


4. focusble:Boolean

탭으로 이동하는 포커스에 포함시킬지입니다.
포함시킬 필요가 없다면 false 로 해두어야 tabChildren, tabEnabled 가 false 처리되어 속도의 향상이 옵니다.
당연한 얘기지만, 참고로 Button class 는 mouseChildren 이 false 로 처리되어 있어서 자식 InteractiveObject 들은  MouseEvent, KeyboardEvent 등의 이벤트를  적용할 수 없습니다


5. toggle:Boolean

버튼을 온오프 형식으로 적용할지의 여부입니다


6. selected:Boolean

토글 버튼일 때, 버튼이 선택(클릭)되어 있는 상태로 적용할지의 여부입니다
값을 변경할 때마다 Event.SELECT 가 발생합니다


7. label:String

버튼에 쓰여지는 텍스트입니다


8.  autoSize:String

텍스트의 정렬방식입니다
TextFieldAutoSize.NONE, TextFieldAutoSize.LEFT, TextFieldAutoSize.CENTER, TextFieldAutoSize.RIGHT 가 있습니다.


9. visible:Boolean

보일지 안보일지겠죠??

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

전에 포스팅했던 Tween 성능 비교 글에서 CLIK 을 고려해봐야 한다는 말을 했습니다.


저도 사실 CLIK 을 안썼습니다.
정확히는 제가 플렉스는 경험이 없는데다가, 컴포넌트는 느려...라는 생각에 멀리하다보니 컴포넌트는 거의(한번도) 써보지를 않았습니다.

하지만 게임 업계에서 UI를 만들다보니 좀 생각이 바꼈습니다. 계속해서 UI를 엎어야 하거든요...ㅡ.,ㅡ;;;
이런 상황에서 빨리 잘(정확히는 나쁘지 않게) 만들 수 있는데 왜 안쓰나입니다.


그래서 클릭에 관한 글도 조금씩 올려보려 합니다.


클릭은 (click 이 아니랍니다) 스케일폼에서 제공하는 UI component 들을 말합니다. 3.0 대의 클릭은 gs스키너 그룹에서 만들어 제공했는데, 4.0 대도 그런지는 잘 모르겠습니다.


일단 시작하기에 앞서 해둬야 할 것들이 있습니다.

4.0 버전대의 클릭은 이녀석들이 만들다 말았어요. FDT같이 강력한 문법체크를 하는 에디터에서 열어보면 오류 메세지를 마구마구 뿜어냅니다.

일단 플젝을 하나 만들고선 소스에 UDK (현재 1월 버전) 에 있는 클릭관련 소스들(제 컴 기준으로는 C:\UDK\UDK-2012-01\Development\Flash\AS3\CLIK 이 폴더입니다) 중 scaleform.clik.* 패키지와 scaleform.gfx.* 패키지를 넣어보면요... 크게 3군데의 오타가 있습니다



1. scaleform.clik.controls.Button



위의 메타태그를 아래와 같이 고쳐야 합니다 




2. scaleform.clik.data.DataBinding



3. scaleform.clik.managers.FocusHandler


 
이번에도 메타태그 문제입니다. 아무래도 이녀석들 문법체크 안하나 봅니다. 다음과 같이 바꿔줍니다.



4. scaleform.clik.constants.LayoutMode




이 친구들이 왜 대충만들었냐고 말하는거냐면 UDK 11월 버전, 12월 버전, 1월 버전에도 있는 문제거든요. 안고쳐요...

일단 여기까지 해두고 나면 일단 에러메세지는 사라집니다. 에러 이외의 워닝 메세지들은 알아서들 세팅해주세요... 그건 컴파일 에러는 나질 않으니까요...

이거 말고도 swc로 컴파일해보면 엄청나게 많습니다... 다 고쳐주세요...


CLIK 첫 글이니 일단 오타 수정정도로만  시작하죠...

p.s. 자주 봐두면 좋은 곳 http://flexdocs.kr/docs/flex2/langref/langref.html 공식레퍼 사이트는 콤포넌트 쪽이 한글화가 안되있어서리...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

0. 아~ 쿨타임 어려워요


스케일폼 코리아 카페에 들어갔더니, 쿨타임 그리는 것에 대한 질문이 올라왔더군요...

거기에 몇몇 분들의 덧글들이 답변으로 달려있긴 한데...

여기에 대해서 한번 정리해 볼 필요가 있어보여서, 포스팅을 해봅니다...



1. 쿨타임이란?


일반적으로 게임에서 쿨타임이라 하면, 반투명한 사각박스 형태의 그래픽이 시계방향으로 돌면서 없어지는 애니메이션을 말합니다.

물론 애니메이션(혹은 이펙트)에는 수십/수억가지가 존재할 테지만, 그런 것들은 이 포스팅의 목적인 "런타임에 그려보자" 와 무관해지니 논외로 치겠습니다...


뭐, 당연히 삼각함수 알아야 합니다. 그런데 일반적으로 플래시에서 사용하는 cos 과 sin 함수 외에 tan 함수를 써야합니다... 그러니 조금은 각오(?)를 해두시고 시작해보겠습니다.




2. scaleform4 에서의 Graphics


scaleform4 (현재 시점 버전 4.0.15) 에서는 Graphics 의 지원이 좀 제한적입니다.
제한 사항은 다음과 같습니다.

1. Bitmap 그리기 불가
2. Flash Player 9까지의 api만 지원
3. SpreadMethod 의 제한적 지원 (현재로서는 PAD만 지원하는 것으로 확인됨)


drawGraphicsData 메소드를 지원하지 않는다는 얘기입니다. 사실 이 메소드는 사용하는 분들이 별로 없어서 크게 필요할까 싶기도 하지만 그래도 간단히 설명하자면...


이런 세개의 명령문이 있다고 치죠. 이것이 렌더링 될 때는 총 3번의 렌더링이 일어나게 됩니다.



Flash Player 10 에서 지원하는 api를 활용하면 위와 같이 표현할 수 있습니다. 이렇게 해놓으면 drawPath 의 한순간만 렌더링이 일어나게 됩니다. 아무래도 빨라지겠죠??? (그 외에도 장점이 많지만 오늘 주제와 무관하니 패스~)

뭐, scaleform4에서 지원되지도 않는 녀석을 두고 말이 길어졌네요. (하지만 마지막 결론 단원에서 써먹을 겁니다. 복선이라고 해두죠.)




3. 닥치고 draw


사설이 길었네요. 코드 해설서가 아니니, 풀코드를 공개하지는 않겠습니다. (구글서치를 잘 해보시면 어딘가 제 코드가 숨어있을 지도...)

가장 중요한 이론만 살펴보죠... 구현해야할 메소드 인터페이스는 다음과 같다고 하겠습니다.


시작위치($x:Number, $y:Number)는 이론에 굳이 필요치 않으니 생략하였습니다. $width, $height 는 당연히 사각영역의 크기이고, $rate는 현재 시간의 비율값입니다. 0~1 까지를 인자로 받습니다.
왜 각도나 시간을 받지 않느냐 하시면... 제 취향입니다. 궁금하시면 이 글을 참고해 주세요.


그 다음에는 넓이와 높이의 절반을 구해야 합니다. 이유는 다음의 그림을 보시면 됩니다.

쿨타임이란게 결국 위와 같은 그림을 그려내는 과정입니다. 사각형을 그려내는건 일도 아니죠... 문제는 저 삼각형이 빠지는 영역의 드로잉입니다.
좌측 그림의 빠진 삼각형의 밑변(그림으로는 윗변이라고 해야겠군요)의 넓이를 알아야 하고, 우측 그림에서는 채워진 삼각형의 높이를 알아내야 합니다.


결국 사각영역 내에서 각도에 따른 x, y 값을 알아내는게 핵심입니다.

-90 에서부터 시계바늘이 돌다가(이렇게 표현해두죠) 사각형의 우측 상단의 꼭지점을 넘지 않은 지점이라면 좌측 그림에 해당하는 것이고, 꼭지점을 넘었다면 우측 그림에 해당하는 것이죠.

그럼 꼭지점을 넘은 여부는 그 시계바늘의 길이가 일정하다고 했을 때, 끝이 넓이의 절반을 넘느냐 안넘느냐입니다. 그림을 잘 보시면 알겠지만, 절대 45도가 아닙니다.

시계바늘의 길이가 바로 반지름입니다. 반지름은 다음과 같이 알아내면 됩니다.


굳이 직각삼각형의 빗변 길이의 공식은 말씀드리지 않아도 되겠지요???  


우측의 경우부터 보죠....

삼각형의 높이를 모릅니다만, 우리는 넓이를 알고 있습니다. 넓이의 절반이죠... 그리고 각도도 알고 있습니다.
각도와 넓이를 알고 있다? 바로 tan 입니다. tan(Θ) * hw 하면 높이를 알아낼 수 있습니다.


좌측을 볼까요?

우측과는 반대로 넓이를 모릅니다만, 높이를 알고 있습니다. 이번에는 tan 의 역수입니다. 1 / ( tan(Θ) * hh ) 하면 넓이를 알아낼 수 있습니다.


와~ 다 그렸다!!!~~~

여러분은 이제 기쁘게 이 as 파일을 가지고선 팀장님에게 자랑하러 가시면 됩니다.

"제가 해냈습니다. 팀장님!!!"

하지만 만약 제가 팀장이라면 이렇게 말할 겁니다.

"그냥 타임라인에 그려"



4. 브루스 윌리스가 귀신


아... 이건 완전 씩스쎈스 이후로 충격적인 반전입니다. 도대체 어쩌라는거냐...

위와 같은 방법을 이용해서 드로우 함수를 실행시키면 말이죠... 프레임 당 엄청난 실수 연산을 반복해야 합니다. 그것도 하나의 슬롯에서만 도는게 아니라 여러 군데서 동시에 제각각 돌고 있겠죠...

게다가 2번에서 언급했 듯이 scaleform4 에서는 렌더링을 최적화 시킬 10용 api도 지원하지 않습니다. (copyFrom 만 지원해도 좀 꽁수가 있는데 말이죠...)
실수연산 부하 + 렌더링 부하.... 가 매 프레임당 무수하게 일어날 겁니다.

하지만 프레임에다가 미리 그려놓고선 프레임 이동으로 쿨타임을 그린다면, 메모리는 좀 늘지 몰라도...

1. 실수연산을 하지 않는다
2. 한번에 렌더링을 해낸다. (이걸 설명하려고 scaleform4 에서 지원하지도 않는 2번을 저렇게 써댔습니다...)

이런 이득이 생깁니다...



5. 그러나 모두 사랑합시다.


무조건 런타임 드로우를 쓰지 말라는 얘기는 아닙니다. 개발 상황에 따라 런타임 드로잉이 꼭 필요할 수도 있겠죠... 당연한 얘기잖아요

그럴 때는 다음과 같은 방법을 고려하시기 바랍니다.

1. 짝수 렌더링과 같이 렌더링 주기를 조절하여 그린다.
2. visible = false 로 해두었다가 드로잉이 완료되면 true로 바꾼다.
3. 동시에 같은 모양을 여러군데 그리는 거라면, 드로잉 인스턴스를 하나로 사용하여 실수연산이라도 한번만 하게 만든다.
4. etc... (지금으로선 다른 방법은 떠오르질 않네요...)

적절한 상황에 맞게 적절한 방법을 사용하시는 것이 일을 잘하는 방법이겠죠...



p.s. 그냥 일정한 반지름으로 쭉 돌리고 마스크를 사각형으로 씌우는 방법이 있을 겁니다.
이러면 시각적으로는 원한대로 그려지겠지만, 실제로는 크기가 변경될겁니다.(원만큼의...)
이럴때, 혹시 scale9grid 를 사용했다면, 디스플레이 객체가 마구 변신하는 모습을 보시게 될겁니다...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.