Starling에서는 Texture가 기본이죠.

그런데 이 Texture가 Display객체가 아니라 변형을 시키는게 쉽지 않죠.


Texture를 변형시키려면


Image.setTextCoord( vertextId: int, point: Point ) 메소드를 이용해야하죠.


point는 각 4방향을 0~1로 표현합니다.


0,0 

 

 1,0

 

 

 

 0,1

 

 1,1


이렇게 표현됩니다.


뭐 좀 헷갈리죠... 저도 잘 이해는 안가요 -_-


아래는 예제입니다.


각 Vertex를 이동하면 어떻게 되는지 이해하실 수 있을겁니다.







이해되시겠죠?


이걸 잘 이용하면


다음과 같이 마스크 효과도 낼 수 있습니다!!


이미지를 드래그 해보세요~





아래는 키보드 상하좌우 키를 누르면 회전까지 적용됩니다.






다음은 각 네 코너 위치를 setTexCoords 메소드에 적용시켜주는 예입니다.


private function setCoord(): void

{
     var i: int = 0;
     var len: int = 4;
     var dot: Dot;
     var point: Point;
     for( i ; i < len ; i++ )
     {
          dot = coords[ i ];
         
          point = new Point( ( dot.x - image.x ) / image.width, ( dot.y - image.y ) / image.height );
         
          image.setTexCoords( i, point );
     }
}




아 텍스쳐 다루기 힘드네요.




For the better.


(Play 버튼을 눌러서 직접 플레이해보세요)



Facebook의 앵그리버드가 재밌는 시도를 했네요.


Facebook 게임의 단점이 Facebook에 들어가서 앱을 설치해야만 게임을 할 수 있다는 진입장벽이 있었는데


작은 화면으로 하나의 스테이지를 외부에서 제공을 하고


풀 게임을 즐기려면 사이트를 이동시키는. 


재미난 발상인거 같습니다.


인터넷 세상은 재밌는거 같네요.




For the better.


ATF는 각 플랫폼(GPU칩셋) 별 최적화된 파일 포맷을 제공합니다.


Windows = DXT1

OS X = DXT1

iOS = PVRTC

Android = ETC1


제가 진행중인 프로젝트에서 캐릭터를 생성시키는 파트만 분리해서 벤치마킹을 해봤습니다.


벤치마킹 환경은 다음과 같습니다.


PC - 몰라요 엄청 좋아요

Android - Samsung Galaxy S II (Mali-400 MP4 266 MHz)

iOS - iPhone 4 (A4)



ATF는 각 플랫폼(GPU칩셋) 별 최적화된 파일 포맷을 제공합니다.


Windows = DXT1

OS X = DXT1

iOS = PVRTC

Android = ETC1


제가 진행중인 프로젝트에서 캐릭터를 생성시키는 파트만 분리해서 벤치마킹을 해봤습니다.


벤치마킹 환경은 다음과 같습니다.


PC - 몰라요 엄청 좋아요

Android - Samsung Galaxy S II (Mali-400 MP4 266 MHz)

iOS - iPhone 4 (A4)


(no-mipmap, no-quantization, 4:4:4 colorspace, using compressed block)

PC

Android

iOS

PNG

DXT

PNG

ETC1

PNG

PVR

File Size 2,836 1,641 72.82% 2,836 1,399 102.72% 2,836 1,330 113.23%
ActionScript Built-In Packages 4 9 56 47 103 136
Stage3D 19 110 323 565 537 2,165
Total 47 133 477 859 3,860 3,191
Display Rendering BitmapData 0 0 0 0 0 0
Text 0 0 0 0 0 0
Decompressing Images 284 0 1,085 0 2,449 0
DisplayList 1 0 1 1 1 1
Total 284 0 1,085 1 2,449 1
Total Frame Time 338 150 125.33% 1,618 993 62.94% 3,881 3,237 19.89%
CPU Memory ActionScript Objects 9 9 8 8 8 8
Bitmap 42 5 39 2 40 3
ByteArrays 0 2 0 2 0 2
SWF Files 4 4 4 4 3 3
Other 33 18 6 7 29 11
Total 89 45 97.78% 57 24 137.50% 82 27 203.70%
GPU Memory Programs 1 1 1 1 1 1
Textures 26 6 26 6 26 6
Index Buffers 1 1 1 1 1 1
Vertex Buffers 1 1 1 1 1 1
Total 26 7 271.43% 26 7 271.43% 26 7 271.43%


표를 하나씩 살펴봅시다.




1. 파일 사이즈


PC

Android

iOS

PNG

DXT

PNG

ETC1

PNG

PVR

File Size2,8361,64172.82%2,8361,399102.72%2,8361,330113.23%


일단 파일 사이즈는 png 보다 무조건 작습니다.


근데 DXT같은 경우는 알파채널에 문제가 좀 있는거 같습니다.


알파 끄트머리가 지글거리네요 -_-a




2. 초기화 성능


PC

Android

iOS

PNG

DXT

PNG

ETC1

PNG

PVR

ActionScriptBuilt-In Packages495647103136
Stage3D191103235655372,165
Total471334778593,8603,191
Display RenderingBitmapData000000
Text000000
Decompressing Images28401,08502,4490
DisplayList101111
Total28401,08512,4491
Total Frame Time338150125.33%1,61899362.94%3,8813,23719.89%


PNG는 Binary로 읽어들인 이미지를 BitmapData로 변환하는 과정이 바로 Decompressing Images 과정이 가장 오래 걸립니다.


반면 ATF는 Binary로 읽어들인 이미지를 GPU Memory로 업로드하는 과정이 가장 오래 걸립니다.


일단 총 해당 프레임의 합계를 내보면


PC와 Android에서는 120%, 60% 이상 확연히 성능이 좋아지는데


iOS에서는 약 20%정도 빨라지네요. (아이폰 실몽)




3. CPU 메모리


PC

Android

iOS

PNG

DXT

PNG

ETC1

PNG

PVR

CPU MemoryActionScript Objects998888
Bitmap425392403
ByteArrays020202
SWF Files444433
Other3318672911
Total894597.78%5724137.50%8227203.70%


메모리에서는 확실히 차이가 납니다.


왜냐면 BitmapData를 생성하지 않기 때문에 ByteArray 뿐만 아니라 BitmapData가 메모리에 없게 되죠.


여기서는 무조건 효율이 좋아지네요 ㅎㅎ




4. GPU 메모리


PC

Android

iOS

PNG

DXT

PNG

ETC1

PNG

PVR

GPU MemoryPrograms111111
Textures266266266
Index Buffers111111
Vertex Buffers111111
Total267271.43%267271.43%267

271.43%


GPU 메모리에 올라가게 되면


ATF 포맷은 압축된 데이터로 존재합니다.


BitmapData 처럼 모든 데이터가 풀어진 상태로 존재하는게 아니라


JPG 처럼 압축된 상태로 올라가 있다는 뜻이죠.


때문에 GPU 메모리는 상당한 효과가 생깁니다.




5. 결론


음청 좋네요!!


ATF 쓰세요.


두번 쓰세요.





For the better.

+ Recent posts