본문 바로가기

Starling

Starling - Introducing 번역 3 > Texture



목차

First Flight ------------------------------------------------------------------------------------------------- 


What Is Starling? 

Why Starling? 

Philosophy 

Intuitive 

Lightweight 

Free 

How 

Layering Restrictions 

Getting Started 

Setting Up Your Scene 

Wmode Requirements 

Stage Quality 

Progressive Enhancements 

The Display List 

Event Model 

Event Propagation 

Touch Events 

Simulating Multi-touch 

Texture 

Image 

Compressed Textures 

Collision Detection 

Drawing API 

Filters 

MovieClip 

Optimizing for Performance 

Release Build 

CPU Bound vs GPU Bound 

ActionScript Optimizations

Running Hardware Accelerated 

State Changes 

The Painter’s Algorithm 

Texture Atlas 

Flat Sprites 

Batching with the QuadBatch API 

Disable Blending 

Use Stage.color 

Accessing Width and Height 

Disable Interactivity 

Optimized Event Model 

Handle Lost Context 

Juggler 

Button 

TextField 

Embedded Fonts 

Native Display List Overlay 

Bitmap Fonts 

RenderTexture 

Tweens

Asset Management

Multi Resolution Development

Static Approach 

Dynamic Approach 

Handling Screen Resizes 

Plugging Starling with Robotlegs 

Plugging Starling with Box2D 

Particles

-----------------------------------------------------------------------------------------------------------------


본격 야메 번역.

의역이 조금 있습니다. 오역은 더 많을 거라 생각됨...ㅋㅋㅋㅋㅋ;

의미전달이 더 용이하다 판단 될 경우 원문의 단어를 그대로 사용했습니다.


머리식힐 겸 생각나면 조금씩 번역하고 있는데 최근 해당 e-book 이 업데이트 되어 

내용이 추가되고 목차가 변경되었으며 이번 Texture 단락도 변화가 있었습니다.


한글로 된걸 봐도 헷갈릴 내용을 영어로 봐야 하는데 제 영어 실력도 중학교 수준보다 미달이라는 것이 함정.


적당히 감안해 봐주세요.






Texture


텍스쳐 객체는 생성될때 하나의 Image 객체를 필요로 한다.

생각해보니, 고전적인 API 를 사용할때의 Bitmap 과 BitmapData 사이의 관계와 동일하다.

 

어쨌든, Texture 객체를 생성하고자 할땐 반드시 아래에 포함된 Texture API 중 하나를 사용해야만 한다.


• base

stage3D 의 텍스쳐 객체. 


• dispose:

근본적인 텍스쳐 데이터를 제거한다.


• empty:

면적(폭 과 너비) 를 통해 빈 텍스쳐를 반환


• frame: 

텍스쳐 틀 (클래스의 description 참고)  frameRate 의 그 frame 아님!


• fromBitmap:

Bitmap 객체를 통해 텍스쳐 객체를 반환.

이 Bitmap 객체는 포함되거나 동적으로 로드될 수 있다.


• fromBitmapData:

BitmapData 를 통해 텍스쳐 객체 반환.


• fromAtfData:

ATF(Adobe Texture Format) 을 사용한 압축된 텍스쳐의 사용을 가능하게 한다.

압축된 텍스쳐는 모바일 디바이스 같은 제약된 환경에서 특히 많은 메모리를 저장할 수 있도록 한다.


• fromTexture:

다른 텍스쳐를 통해 새로운 텍스쳐를 반환.


• height: 

높이.


• mipmapping: 

텍스쳐가 mipmaps 에 포함되었는지 표시한다.


• premultipliedAlpha: 

RGB 값에 대한 투명도가 사전곱셈 되었는지 표시


• repeat: 

텍스쳐가 벽지처럼 반복되거나 바깥쪽의 픽셀들이 늘었났는지 표시


• width: 

너비



텍스쳐에는 다른 이미지 포맷이 사용 될 수 있다.

아래의 리스트는 텍스쳐에 사용될 수있는 다양한 포맷을 요약한 것이다.



• PNG:

알파 채널이  필요한 포맷으로  PNG 는 가장 유명한 흔히 쓰이는 것중 하나이다.

• JPEG: 

전통적인 JPEG 포맷 역시 사용이 가능하다.

GPU 위에선 이미지는 압축이 풀린다는 것을 기억하자.

JPEG 를 이용하는것은 메모리사용에는 제한을 두지 않으나 텍스쳐는 불투명해진다. 

• ATF: 

어도비 텍스쳐 포맷. 이것은 압축에 있어서  최고의 파일 포맷이다.

ATF 파일은 주로 손실되는 텍스쳐 정보를 담는 역할을 한다.

이것은 JPEG-XR1 압축과 block based 압축, 2가지 기술을 통해 비가역압축을 실행하는데

JPEG-XR 압축은 스토리지 저장과 네트워크 대역폭에 있어 경쟁력 있는 방법을 제공한다.

Block based 압축은 클라이언트에서텍스쳐 메모리 사용이 감소되도록 하며, 

RGBA 텍스쳐에 비해 1:8의 고정된 비율을 가진다. 

ATF 는 block based 압축의 3가지 타입을 지원한다.(DXT1/5, ETC1/3 ,PVRTC4)





텍스쳐의 개념에 대해 조금 더 파헤쳐보고  GPU상의 이미지에 대한 필수적인 개념 밉매핑에 대하여 살펴보자.


밉매핑은(Mipmapping) 중요하며 이해하기 쉬운 개념이다.

크기가 작아진 텍스쳐는 밉맵을 호출한다.


텍스쳐를 사용하여 GPU에서 작업하면 컨텐츠의 크기에 따라 때때로 이미지의 크기가 조정 될 때가 있다.

카메라를 콘텐츠를 향해 움직이거나 콘텐츠가 카메라를 향해 움직일때 이는 발생할 수 있다.


두상황 모두 당신의 컨텐츠의 크기는 조절되고 텍스쳐에 반영될 것이다.


텍스쳐의 크기는 2의 제곱(1, 2, 4, 8,16, 32, 64, 128, 256, 512, 1024, 2048) 을 필요로 하지만 꼭 사각형일 필요는 없다.

만약 이 규칙을 따르지 않으면 스탈링은 자동으로 가장 가까운 2의 제곱 크기에 대한 이미지를 찾고

이사이즈에 맞는 텍스쳐를 생성한다. 이 행위는 메모리의 낭비를 가져오게 된다.

텍스쳐에 의한 메모리 사용을 최대한 효율있게 하기 위해선

흔히 알려진 sprite sheets 같은 텍스쳐 지도(texture atlases) 를 사용하는 것을 권장한다.

우리는 이 주제에 대해 나중에 다시 다룰 것이다.



최고의 퀄리티를 내기 위해선, GPU는 이미지의 모든 밉맵단계를  필요로 한다.

이는 모든 형태의 이미지는 원래의 크기(2의 제곱을 필요로 하는) 로부터 나온다는 것을 의미한다.


Starling 을 사용하지 않는다면  당신은 BitmapData.draw 와 조절된 matrix 등을 사용하여

수동적으로 밉맵을 생성해야만 해야만 할것이다


이것은 2d컨텐츠를 업로드하는 매우 좋은 연습이다.

이 연습은 요소들이 크기가 작아질때 당신의 컨텐트를 빠르고 보기 쉽게(aliasing 을 감소시켜)

수행하도록 만들어 줄 것이다.



다행스럽게도, 앞서 언급한 것처럼, Starling 은 이것을 자동으로 해주며

아래는 Starling 에서 사용된 내부적으로 밉레벨을 발생시키는  코드이다.



(번역자 주: 밉맵이란 간단히 설명하자면 만약 256x256 사이즈를 가진 이미지를 사용하여 텍스쳐를 만들었을 경우

텍스쳐의 크기가 크거나 혹은 작아질때마다 본래의 픽셀사이즈를 가진 것을 사용한다면 비효율적이므로

예를 들어 멀리 떨어진 사물이 40 x 40 크기로 표시될때 미리 연산해둔 32x32 혹은 64x64 사이즈의 이미지를 활용함으로써

연산속도를 빠르게 하는 것을 말한다. 자세한 것은 따로 검색)




ATF포맷을 사용할 때 당신은 사실 이러한 것들에 대해 걱정할 필요가 없다.

ATF 파일 포맷은 이미 밉맵레벨이 포함되어 있어 런타임 시 별도로 작업할 필요가 없다.

이것은 당신이 밉맵레벨 작업을 하면서 쓰일 시간을 아낄 수 있기 때문에 귀중한 것이다.


많은 텍스쳐들을 사용하는 상황에서 이것은 귀중한 시간들을 아끼게 해주며 컨텐츠의 빠른 초기화작업을 할 수 있도록 한다. 



Texture 객체에 frame 속성이 있는것을 주목하자.

이것은 이미지가 객체에 할당될때 위치를 정의할 수 있도록 한다.

예를들어 당신이 이미지 주위로 경계를 표시하고 싶다면

당신은 이미지와 이미지 중앙의 텍스쳐의 위치보다 더 작은 텍스쳐를 사용하면 된다.


texture.frame = new Rectangle(5, 5, 30, 30);

var image:Image = new Image(texture);



이제 Image 객체에 대해 이야기해보자.!






Image



스탈링에서 starling.display.Image 객체는 고전적인 플래시의 flash.display.Bitmap 객체와 같다.


var myImage:Image = new Image(texture);


이미지를 표시하려면 Image 객체를 생성한 뒤 Texture 객체를 전달해야 한다.







Texture 클래스의 static API 인 fromBitmap 을 사용하여 Texture 객체를 생성한것을 주목하자.

만약 이 코드를 테스트한다면 그림 15와 같은 결과를 얻을 것이다.


그림 15. 랜덤하게 분포된 소시지 (...위 그림이 소시지라는걸 번역하면서 깨달음)



여기에 사용된 비트맵은 포함은 되었지만 동적으로 로드 되지는 않았다.

동적으로 로드된 비트맵을 사용하려면  Loader객체를 사용하여,텍스쳐를 로드하고,

로드된 Bitmap을 회수하여 fromBitmap API 을 사용하여 Starling 텍스쳐로 생성해야한다.


 


또다른 API 를 사용하면 BitmapData 객체로부터 Texture를 생성하는게 가능하지만 이것은 나중에 다시 다룰 것이다.




같은 텍스쳐를 한화면에서 재사용하는 것을 주목하자.

아래에 별도로 다루어진 코드를 보면, 매 반복마다,

루프 밖에서 초기화하고 생성된 텍스쳐를 우리는 재사용하는 것을 알수있다.





아래처럼 매반복마다 텍스쳐를 재생성하는 것은 나쁜 방법이다.





이것은 텍스쳐에 다수의 같은 비트맵을 복사하여 할당하기때문에 메모리에 좋지않은 영향을 줄 뿐만 아니라

다수의 같은 이미지를 GPU에 업로드 하기때문에 당신의 컨텐츠 퍼포먼스에도 좋지 않고 비효율적이다.

마지막으로  루프로 인하여 호출된 fromBitmap은 밉맵 역시 매번 생성하게 된다.



이젠  CustmoImage 클래스를 만들어 보자!






이젠 우리의 코드에 CustomImage를  사용해보자.





알고 있겠지만 Starling 은 이벤트전파를 다룰수 있다.

움직이고 있는 모든 이미지에 대한 터치 이벤트를 받기위해선 우리가 해야 할 일은

단지 stage의 TouchEvent.TOUCH 를 청취하는 것이다.


// we listen to the mouse movement on the stage

stage.addEventListener(TouchEvent.TOUCH, onClick);


target 과 currentTarget 속성을 검사하면

이벤트를 디스패치한 것은(currentTarget)는 스테이지이며 이벤트를 접한 것은 CustomImage 객체라는 것을 알수 있다.





이러한 접근을 사용하면, 우리는 각 이미지에 리스너를 등록 할 필요가 없다.

우리는 단지 그들의 컨테이너의 이벤트리스너를 등록하고

스테이지가 이벤트 버블링을  하는 동안 이벤트를 캐취하면 된다.

TouchEvent 객체의 bubble 속성을 사용하면 우리는 이벤트 버블링 상태를 알 수 있다.


// outputs : [object Stage] [object CustomImage] true

trace ( e.currentTarget, e.target, e.bubbles );




OK. 이것이 바로 이벤트 전파 메커니즘을 위한 것이다.

이젠 Image 객체와 그것이 제공해줄 수 있는 능력을 보자.

예상대로 , Image 객체는 DisplayObject의 모든 API를 상속받는다.

뿐만 아니라 이미지의 매끈함을 조절하는 smoothing 속성을 가지고 있다.

아래의 값들이 허용되며, TextureSmoothing 클래스의 상수로 저장되어 있다.


• BILINEAR:

텍스쳐가 그려질때 bilinear 필터를 적용한다(기본)

• NONE:

텍스쳐가 그려질때 bilinear 필터를 적용한다(기본)

• TRILINEAR:

텍스쳐가 그려질때 trilinear 필터를 적용한다(기본)



이 작업은 아래와 같이 할 수 있다.


//disable filtering when scaled

image.smoothing = TextureSmoothing.NONE;




이것은 bilinear 필터가 사용된 이미지이다. (TextureSmoothing.BILINEAR)

Figure 16. TextureSmoothing.BILINEAR


이것은 trilinear 필터가 사용된 이미지이다. (TextureSmoothing.TRILINEAR)

Figure 17. TextureSmoothing.TRILINEAR


이것은 어떤 필터도 사용되지 않은 이미지이다. (TextureSmoothing.NONE).

Figure 18. TextureSmoothing.NONE




Image 객체의 color 속성은 컬러값을 지정할 수 있다는 것을 기억해두자. 

각픽셀은, 당신이 color를 지정한 텍스쳐들의 곱연산을 통해 최종적으로 색이 나타나게 된다.


이것은 이미지의 색조를 변경하는 것을 쉽게 해주고,

별도의 텍스쳐가 없더라도 이미지를 변화시킬 수 있도록 한다.

그림 19는 그 예이다.


그림 19. 색조가 변화된 사각형의 텍스쳐들.



우리는 이제 또 다른 중요한 주제인  compressed textures 에 대하여 약간의 시간을 쓸 것이다.





Compressed Textures (압축된 텍스쳐)



이미 언급한 것처럼 Starling 에서는 uploadAtfData API를 호출함으로써

압축된 텍스쳐를 사용하는 것이 가능하다. ATF 포맷에 대해서는 이미 들어 봤을 것이다.


이것은 여기저기에서 언급되는데 그럼 도대체 이것은 뭘까?

몇명은 stage3D에 대한 문서의 압축텍스쳐 파일포맷 부분에서 봤을 수도 있겠다.

그래서 그게 뭔데?


우선은 압축된 텍스쳐에 대하여 이야기 해보자.


어떤 기술로든 GPU 프로그래밍으로 하게 되면,

텍스쳐를 다루는 방법에 있어 두가지를 선택할 수 있다.

압축할 것인가 하지 않을 것인가. 


그래서, 뭐가 다를까?


1. 비압축 텍스쳐를 사용할 땐 PNG 같은 좋지만 오래된 포맷을 사용하여 GPU에 업로드하게 된다.


2.GPU는 사실은 그러한 파일들을 지원하지 않으므로, 당신의 텍스쳐는 실제로는 CPU 메모리에 저장되고

 그후 저장이 되면 GPU 메모리에 압축을 풀게된다!


3. JPEG 이미지도 마찬가지로 적용되며 그래픽 칩셋은 JPEG가 CPU 메모리에서 해독된 사실을 알지 못한다.


4.물론 각 플랫폼이 사용된 하드웨어 칩셉에 따라 지원하는 압축 텍스쳐가 다르다.



아래의 테이블은 각각의 흔히 쓰이는 플랫폼에서 요즘 사용되는 텍스쳐 포맷에 대한 것이다.




짐작한대로, 만약 IOS, 안드로이드, 데스크탑을 대상으로 게임을 개발하게 되면

텍스쳐는 각 플랫폼에 맞는 압축포맷을 모두 지원하게 해야 한다.

이말은 아래와 같다.


1. mytexture.png 를 윈도우 혹은 맥을 위해 DXT 로 인코딩

2. mytexture.png 를 안드로이드를 위해 ETC1 혹은 DXT(NVida) 로 인코딩

3. mytexture.png 를 IOS (ImgTech) 를 위해 PVRTC 로 인코딩



물론 어떤 플랫폼에서 실행이 되는지 감지하고 그에 따라 텍스쳐의 다른 버전을 제공하여

해당되는 텍스쳐를 업로드 하는 것은 고역이다.


그렇다고 단일 플랫폼만을 지원한는 것은 썩 좋지 않은 방법인데

그럼 Flash Player 와 AIR는 플랫폼에 따라 필요로 하는 텍스쳐를 자동으로 추출할까?


그래서 등장한 것이 ATF 이다.



기본적으로


모든 텍스쳐 포맷 (PVRTC, ETC1, 과 DXT1/5) 는 ATF 파일에 포함되어 있어 각 플랫폼을 지원하며

AIR 와 Flash Player 는 자동으로 적절한 텍스쳐를 추출한다.


그림 20. 모든 포맷이 포함된 ATF 의 위엄.jpg



하지만 몇몇의 경우,

예를 들어 IOS 만을 대상으로 했을때 데스크탑이나 안드로이드에 관련된 텍스쳐를 포함할 필요가 있을까?


이런 상황을 위해

AFT 파일엔 당신의 asset들이 더 적어지도록 PVRTC 포맷만 포함시킬 수도 있다.

그림 21이 바로 그것이다.


그림 21.  PVRTC 포맷만이 포함된 ATF



만약 ETC1에 대하여 알고 있다면

그것들의 투명도를 어떻게 처리할지 궁금할 것이다.

우리는 2개의 텍스쳐를 사용한 ETC1를 사용하여 하나는 알파채널로, 그리고 나머지는 컬러채널로 처리한다. 

그림 22를 보자.


그림 22. ETC1만 포함된 ATF



마지막으로 데스크탑에선

그림23 처럼 DXT 텍스쳐만을 제공할 수 있다.

그림 23.  DXT1/5 만이 포함된 ATF


DXT1 과 DXT5 의 차이는 알파채널을 지원하느냐 아니냐이다.

DXT1 does not support transparency, DXT5 does.

DTX1은 투명도를 지원하지 않고 DXT5는 지원한다.

ATF 툴은 자동으로 이미지가 투명도를 가지는지 검사하여 적절한 DXT를 선택하게 된다.


물론 ATF 는 미리 알파값을 곱연산 하지 않는다. 

압축되지 않은 텍스쳐를 ATF 파일에 저장하는 것 또한 그림 24에 보이는것처럼 가능하다.


그림24.  RGBA (비압축) 포맷 전용.




왜 이런것들을 해야하는지 궁금할 것이다.

당신은 어쩌면 압축되지않은 텍스쳐를 사용하길 원할수도 있지만 

큐브맵, 자동적인 밉맵, 텍스쳐 스트리밍의 지원은 여전히 필요로 할 것이다.


하드웨어가 압축된 텍스쳐들을 필요로 한다는 점은 제외하고

당신의 컨텐츠는 어떤 이점을 가지게 될까?  아래 목록이 그것들이다.


• 빠른 렌더링

• 적은 메모리 (메모리가 매우 제한된 iPAD1 같은 디바이스에선 이것이 매우 중요하다)

• 텍스쳐 메모리에서 빠르게 업로드

• 요구되는 밉맵을 자동으로 생성(만약 필요로 한다면 이기능을 사용하지 않을 수 있다)

• 게다가 압축된 텍스쳐의 사용은 어플리케이션이 같은 메모리로 더 높은 해상도의 텍스쳐를 활용할 수 있도록 한다.




이제 궁금한 것은 , 그럼 어떻게 이러한 ATF 파일을 만들까?

이것은 매우 쉽다. 

우리는 몇개의 커맨드 라인 툴을 제공한다.  이젠 어떻게 작업하는지 보자.




(번역자 : 이제 외계언어로 보이는 것들이 나옵니다. 제대로 번역했는지에 대한 확신도 없음) 


당신이 알아야 할 메인 툴은 png2atf 이다.

짐작할 수 있듯이, 이것은 PNG 를 가지고 ATF 파일을 만들어 낸다.




앞에서 이야기한것처럼

ATF 안에 압축되지 않은 텍스쳐를 저장하려면 어떻게 해야할까?

-c 인수를 사용하지 않으면 된다.



또다른 좋은 기능은 ATF 이 스트리밍을 할수 있도록 3개의 서브파일을 생성하는 것이다.

이것은 아래처럼 할 수 있다.



텍스쳐의 스트리밍 지원은 Flash Player 11.3/AIR 3.3 에 포함되어 있다.

스트리밍을 위한 텍스쳐 생성을 확실하게 하기 위해서 Texture.createTexture() API 의 streamingLevel 인수를 사용한다.

만약 Apple 의 텍스쳐툴을 사용하여 PVR 텍스쳐를 생성해도 같은식으로 처리한다.

커맨드라인 유틸리티 같은 다른 툴이 pvr2atf 를 호출하면  PVR 텍스쳐를 ATF 파일로 전환한다.


PVR 텍스쳐 포맷에 인풋 파일을 제공해야하는 작업들은 png2atf 를 제외하곤 거의 비슷하다.

PVR 파일을 RGB 나 RGBA  ATF파일로 전환하는것은 보통 아래와 같다.



물론 큐브맵 텔스쳐를 위한 ATF 파일도 사용할 수 있다.





ATF뷰어는 ATF파일을 검사하고 미리볼 수 있는 GUI 툴이다.

주된 용도는  DXT1, ETC1 과 PVRTC 의 압축물을 검사하는 것이다.

Open 메뉴를 이용하거나 파일을 드래그하여 ATF파일을 열어 볼 수 있고 

조그만 미리보기 화면은 특정한 ATF 파일이  ActionScript3 과 Stage3D 에서 어떻게  로드되는지 보여준다.


다음은 Starling 의 파일을 테스트한 예이다.

각포맷에 대한 미리보기도 가능하며,

ActionScript3 의 Stage3D 에서 어떻게 사용하는지에 대한 약간의 코드도 아래에 나타난다.


Figure 25. ATF뷰어에서 열린 ATF 파일



압축방법이 특정하게 하나만 포함된 ATF 텍스쳐가 열리면 ATF 뷰어는 그것을 보여주면서

아래에 DXT  텍스쳐만 포함되었다고 나오며 목록의 ETC1 와 PVRTC 텍스쳐타입은 회색으로 처리 된다.


Figure 26. ATV뷰어에서 열린 DXT 포맷의 ATF파일(only)




Starling 에서 압축된 텍스쳐들을 어떻게 사용 하는지 보자.




당신이 Starling을 사용하면, 요구조건들은 아래와 같다.


• 최소 1.2 이상의 Starling

• 최소 3.4 이상의 AIR SDK

• 최소 11.4 이상의 플래시플레이어

• 컴파일러 인수(compiler argument)에 “-swf-version=17” 추가



Starling 에서 역동적인 도형을 필요로 한다면?


걱정마라. 다음 섹션을 보자.






Collision Detection (충돌감지)



대부분의 게임에서,

물리엔진(Box2D같은) 을 사용하지 않는다면, 당신은 간단한 충돌감지를 다뤄야 할 것이다.



원형의 도형을 사용하여 작업할땐

두 도형의 중점 사이 간의 거리가 두도형의 반지름 합보다 적은지 테스트하는 것만으로도 충분하다.

일부 상황에서는 , 조합된 박스들간의 충돌을 감지해야 한다. 하지만 충돌된 완벽한 픽셀은 어떻게 구하는가?



그림 27은 그 전형적인 상황이다.

여기서 우리는 투명한 영역이 포함된 2개의 객체 사이간의 충돌을 감지해야한다.

Figure 27. 



이상황에서 우리는 곡선타입의, 픽셀 레벨에서의 충돌감지를 원한다.

물론 픽셀레벨의 충돌감지는 투명한 이미지를 가지고 행할 것이다.


사실 이건 액션스크립트 코드로 테스트하기에는 비용이 많이 든다.

다행이, Starling 은  고전적인 BitmapData API에 의존하여 텍스쳐를 만들고 있고

우리는 BitmapData 객체의 hitTest API 를 사용할 수 있다.


hitTest  API 는 사용하기 정말 간단하지만 처음 보면 헷갈릴 수 도 있다. 아래는 API 의 시그내쳐 이다.


public function hitTest(firstPoint: Point, firstAlphaThreshold: uint, secondObject:

Object, secondBitmapDataPoint: Point = null, secondAlphaThreshold: uint = 1): Boolean



secondObject 인자를 Rectangle 이나 BitmapData, Point 객체로도 사용할수 있다는 것을 주의하자.


이 API는 많은 상황에서 아주 유용하게 사용된다.


예제에서는 2개의 BitmapData 객체가 사용되며, Image 객체에 쓰이는 텍스쳐에 대한 Bitmapdata의 사용이기 때문에

이것은 Starling의 대부분의 상황과 매우 비슷할것이다.




우리는 먼저 충돌을 검사하고 싶은 두번째 객체의 위치에 해당하는 point와

불투명이라고 간주될 픽셀의 투명도 한계값을 전달한다.(아마 255 나 0xff가 쓰일 것이다)

두번째로 현재 이미지의 위치를 나타내는 두번째 point 와 두번째 투명도 한계값을 전달한다.


아마 충돌감지 검사는 매프레임마다 일어날 것이기 때문에,

우리는 가비지컬렉터 실행을 최소화 시켜야 한다.


위의 코드에선 hitTest 가 실행될때마다 새로운 Point 객체를 생성했다.

더 나은 처리방법은  매프레임마다 새롭게 생성하지말고 Point 객체의 x와 y속성을 갱신하는 것이다.



이제 Starling 에서 고전적인 drawing API를 어떻게 사용할 수 있는지 살펴 보자!





Drawing API


Starling 은 고전적인 플래시의 flash.display.Graphics 객체같은 드로잉 API를 노출 하지 않는다.

하지만, 드로잉 API를 사용하는 기능은 BitmapData 객체에 그려 복사하여 텍스쳐로 사용함으로써 쉽게 해결된다.


이를테면, 별모양 도형을 사용하고 Starilng 을 이용해 표시하고 싶다면 아래의 코드를 보자.




아이디어는 간단하다. 고전적인 Graphics API를 사용하여 선을 긋고, 색을 채우고, CPU를 사용한다음

Bitmap 으로 변환하고 이것을 텍스쳐로써 gpu에 업로드 한다.



그림 28은 Starling 을 사용하여 원을 그린 예이다.



Figure 28. 커스텀 동적 shape



그런데 잠깐, 여기에 뭔가 문제가 보이지 않나? 

우리의 코드는 퍼포먼스를 극도로 느리게 만들 매우 비효율적인 코드이다.

프레임레이트가 보이는가? 60 대신에 약 25로 표시되고 있다.


그리고 draw 수를 보자


그림 29. FPS, MEM, 그리고 DRW 수


이런 높은 draw 수가 우리 애니메이션의 퍼포먼스를 죽이고 있다.

우린 이제 최적화에 관련되어있는 좋은 퍼포먼스의 비밀을 파헤칠 것이다.

우리는 이 모든 애니메이션을 단 한번의 draw 로 렌더링 하고

부드럽게 60fps 로 실행 시킬 수 있다. 어떻게?


우리의 코드에서 아래의 라인이 나쁜 퍼포먼스를 유발하고 있다.


// create a BitmapData buffer var bmd:BitmapData = new BitmapData(radius * 2,

radius * 2, true, 0); // draw the shape on the bitmap bmd.draw(shape);

// create a Texture out of the BitmapData var texture:Texture =

Texture.fromBitmapData(bmd);



총 400번의 반복에서 매번 우리는 새로운 BitmapData 객체와 Texture 객체를 생성하는데

이것들은 쓸모도 없고 Starling 이 각 텍스쳐에 매번 다른 draw를 호출하는 문제를 발생하게 한다.


앞에서 한 쏘세지 예제를 기억하는가? 그것과 같은 실수이다.

우리는 Image 객체에 사용 될  벡터이미지를 표시 할 단 하나의 BitmapData 객체와 텍스쳐 객체만을 필요로 한다.



우리는 Image 객체의 tint 속성을 사용하여 색을 다르게 하여 다시 실험할 것이다.




테스트하면 아래와 비슷한 결과를 얻는다.



그림 30. 더좋은 퍼포먼스를 가진 예제.



그리고 그림 31을 통해 단한번의 draw만 호출된것을 볼수 있다.

그림 31. 새로운 반복문을 통한 FPS, MEM 과 DRW 수



조금 다른 주제를 살펴보자.

Staring 에서 filter 를 생성하고 사용할 수 있다는 사실을 알고 있는가?

사실 당신은 당신의 커스텀 필터를 만들수도 있지만 이것이 조금 더 나을 것이다.

여기에 관해서도 조금 알아보자.




Filters


Starling 1.2 엔  매우 인기 있는 filter 기능이 포함되었다!

당신은 이것들이 오래전 Flash Player 8 버전에서 소개되었던 것을 기억할 것이다.

이젠 이것은 Staring 을 통해 GPU 위에서 실행된다.

DisplayObject 라면 filter 속성을 사용하여 이용할 수 있다.


myDisplayObject.filter = new GrayScaleFilter();


 starling.display.filters 패키지에서 특별히 몇개의 필터가 제공된다.


• InverseFilter

• ColorMatrixFilter

• BlurFilter

• GrayScaleFilter



Starling 에서 지원하는 필터를 확장하거나 커스텀 필터를 만들기 위해선

FragmentFilter 클래스를 상속받아 커스팀 필터를 만들거나 확장이 가능하며

이것이 바로 장점이다.




일단 GrayScaleFilter 를 보고 그것이 어떻게 구현되었는지 알아보자.


(번역자 주 : 어째서인지 e-book의 예제코드에선 InverseFilter 가 나와있었다.

책이 잘못된것이라 판단하여 GrayScaleFilter 코드로 대체함)



가장중요한것은 부모클래스의 기능을 오버라이드 한 createPrograms , activate 함수이다.

다시말하자면 당신의 커스텀 필터에서 구현해야 할 것은 바로 이 함수들 이라는 말이다.


createPrograms 함수는 제대로된 fragment shader 를 구성하는 역할을 한다.

상상하다시피, 우리는 배분하는 픽셀효과 모두는 fragment shading 에 관련되어 있다.

vertex shader 는 수정될 필요가 없다.


activate 함수의 역할은  shader program 이 필요로하는 상수를 전달하고 그것을 업로드 하는 것이다.



만약  SepiaFilter 를 만들어 적갈색(sepia) 톤으로 효과를 주고 싶을땐 어떻게 해야 할까?


다행스럽게도 적갈색 톤 필터 는 GrayScaleFilter 윗단에서 실행된다.

그러니 이것을 재사용 할 것이다.


아래에 있는 것이 SepiaFilter 클래스이다.




보여지는 대로, 필터에 전달하는 것은 2가지이다.


• 먼저 재사용된 grayscaleFilter 를 적용하여 shader 레벨에서 연산하도록 한다.(dp3 부분)

• 우리의 quantifiers 를 통하여  픽셀 컬러를 곱연산한다. (mul 부분)

• 수행이 끝나면 우리는 output 연산자을 통해 최종 컬러를 반환한다. (oc 부분).



이젠 filter 속성에 SepiaFilter 객체를 전달하자.


myDisplayObject.filter = new SepiaFilter();



아래 그림이 그 결과이다.

그림 32.




쩌는 필터를 만들어 Starling 커뮤니티를 통해 공유해보자.

Devon O. Wolfgang 은 최근에 pixelateFilter 를 공유해주었다.


아래는 그 코드이다.



이제 MovieClip API 를 살펴보도록 하자!


To be continued . . .