scale9grid in Scaleform

잠깐 올린 비트마스크 포스팅을 제외하면 오랜만의 포스팅입니다


사실 다음은 스케일폼 스터디 카페인 http://cafe.naver.com/scaleformdevelop 에서 발표한 주제입니다.

스터디의 구성원이 클라이언트 개발자, 디자이너, 플래시 ui 개발자 등 다양하게 섞여있다보니 디자이너와 개발자가 같이 볼 수 있는 주제를 생각해봤는데 그게 바로 scale9grid 입니다


scale9grid 를 안다고 생각하시는 플래시 개발자도 봐두셔야 합니다. scaleform 에서는 그 결과물이 다르게 나오기 때문입니다


그럼 각설하고,....


///////////////////////////




사실 플래시 개발을 하던 시절에서는 전 scale9grid 를 거의 쓰질 않았습니다.


하지만, 게임에서 scale9grid 는 거의 필수에 가깝습니다... 비슷한 이미지가 있다면 재활용을 해서 써야만, 메모리를 낮출 수 있기 때문입니다. 어떤 면에서 스케일폼은 온라인보다 더욱더 메모리에 신경을 써야 합니다... 프레임과 사양에 목숨을 건(?) 유저들이 많기 때문입니다.


위의 이유로 scale9grid를 잘 활용해야 하는데, 스케일폼의 scale9grid는 플래시의 그것과는 다른 모습을 보입니다.


보통 scale9grid 는 다음과 같습니다

            

좌측이 이미지를 9등분 한 후, 그냥 스케일만 늘린 무비클립이고, 우측은 scale9grid를 적용한 모습입니다.
이미지가 깨지지 않고, 확대된 모습을 보입니다.
이것이 우리가 알고 있는 플래시에서의 scale9grid 라면 스케일폼은 다음과 같은 차이를 보입니다

         

 
 
플래시에서는 좌측과 같이 9등분을 해야만 scale9grid 가 먹는 반면, 스케일폼에서는 이미지 한장으로도 scale9grid를 적용해줍니다. 
이는 작업자가 해야할 엄청난 포토샵 노가다를 줄여주게 됩니다. 

하지만 그럼에도 스켈폼에서도 9등분을 해서 작업을 해야할 필요가 있을 때가 있는데, 바로 컴포넌트의 라이브프리뷰를 사용할 때입니다.
개발자가 반드시 라이브프리뷰 기능을 적용할 필요가 없다면 앞서 말한대로, 더이상의 포토샵 노가다는 사라진 셈입니다

이건 벡터이미지에 scale9grid를 적용했을 경우입니다. 벡터이미지 역시 9등분을 해줄 필요가 없고, 이는 플래시도 동일합니다

 

폰트에 scale9grid 를 적용했을 경우입니다. 폰트에는 scale9grid 가 적용되지 않고 스케일 그대로 적용됨을 알 수 있습니다

 

    

폰트가 아닌 숫자 이미지를 넣어봤습니다
위의 그림에서 보다시피 9등분의 위치에 따라 스케일되는 방식이 다르다는 것을 알 수 있을겁니다

앞서 말했듯 다시 한번 말하지만 폰트는 영향을 받지 않습니다 :^)

 

이번에는 마스크를 씌워본 보습입니다

무비클립 속에 무비클립보다 더 큰 마스크를 넣어봤습니다. 좌측이 플래시고, 우측이 스케일폼입니다

플래시는 아예 scale9grid 가 먹지 않음을 알 수 있고, 스케일폼은 무비클립의 실제 크기로 scale9grid 가 먹어버리는 기현상을 확인하실 수 있습니다...

주의하셔야 할 부분이 아닌가 싶습니다

 

이번엔 비트맵과 폰트에 함께 scale9grid를 적용해봤습니다

당연한 결과겠지만, 비트맵에는 scale9grid 가 적용되고, 폰트에는 적용되지 않습니다

그렇다면 응용에 들어갈 시간입니다... 보시면 가장많이 쓰이는 ui형태입니다.

비트맵은 의도대로 커졌고, 타이틀은 원래대로의 크기로 써져야 할 것 같은데, scale9grid가 먹질 않으니 같이 커져버렸습니다.

텍스트를 밖으로 빼는 방법도 있겠으나, 그럼 수십개의 ui마다 타이틀을 따로 복사해놓고 배치도 새로 해야합니다. 그 수고를 줄이려면 같은 무비클립 안에 있긴 있어야 할 것 같은데 각자 scale9grid가 먹는 방식이 다르니 문제입니다.

여기서 부터가 개발자가 코드로 처리해야할 부분이죠...

import gfx.core.UIComponent;

/**

 * Frame

 * ...

 * @author minarto

 */

class Frame extends UIComponent

{

/**

* stage resource

*/

public var textField:TextField;

/**

* 생성자

*/

public function Frame()

{

super();

}

private function draw():Void

{

super.draw();

var scaleXRate:Number = 100 / _xscale;

var scaleYRate:Number = 100 / _yscale;

textField._xscale = scaleXRate * 100;

textField._yscale = scaleYRate * 100;

var innerWidth:Number = _width * scaleXRate;

textField._x = innerWidth - textField._width >> 1;

textField._y = 5 * scaleYRate;

}

}

간단하게 짜봤습니다. 실제코드는 더 간단하게 짜겠지만, 포스팅을 위해 더 풀어 쓴 녀석입니다.
(현재 udk통합버전의 스케일폼이 as2를 지원하기 때문에 as2기준의 코드입니다... draw 는 UIComponent 에서 디스플레이 객체가 stage에 붙었을 때나, 크기가 변경될 때 호출되는 함수입니다)

뭐, 간단한 예제지만, 개발자의 역량에 따라 scale9grid의 장점을 더욱 더 극대화 할 수 있다는 얘기입니다.