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.

저작자 표시 비영리 동일 조건 변경 허락
신고
  1. Favicon of http://taewan0530.tistory.com taewanKim 2012.11.15 10:10 신고

    와 정말 좋은 정보입니다!! 머리 아팠는데 !!!

  2. Favicon of http://lpesign.tistory.com LPesign 2012.11.27 21:03 신고

    setTextCoord 는 uvtData의 그것과 같나보네요.
    기존Flash에서는 drawTriangle 로 이용하던..
    Staring을 이용하면 wonderwall같은걸 만들기 편할듯 ㅋㅋ

  3. 2013.01.03 17:33

    비밀댓글입니다


(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.

저작자 표시 비영리 동일 조건 변경 허락
신고
  1. Favicon of http://jjmg.tistory.com 메타콰이어 2012.10.22 17:17 신고

    헐 완전 좋네요 ㄷㄷ
    다음 프로젝트땐 요걸.... 이라고 하고 싶지만 (...)

  2. 마병 2012.10.23 10:34 신고

    하나 여쭤봐도 괜찮을까요? ATF파일로 관리를 하게 되면 반드시 Embed를 해야하지 않나요?
    가령 swf 안에 png파일들을 링키지 걸어서 사용이 가능하지만
    ATF파일 같은경우에는 하나하나 다 관리를 해줘야하지 않나 해서요~
    속도적인 측면에는 꼭 써야할꺼같은데 관리를 어떻게 해야하나 궁금증이 남네요~
    starling으로 작업중에 궁금해서 남겨봅니다~

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2012.10.22 22:28 신고

      굳이 비밀 댓글로 안하셔도 되는데 ㅎㅎ
      그래야 다른 사람들한테도 도움이 되죠
      ATF는 어차피 최종적으로 ByteArray상태로만 던져주면 되기 때문에
      Embed를 하던 URLStream으로 로드를 하건 상관없어요.

      urlStream.load( "http://somewhere.com/texture.atf" );

      // complete
      var bytes: ByteArray = new ByteArray;
      urlStream.readBytes( bytes );

      var texture: Texture = Texture.fromAtfData( bytes );

      라고 쓰면 되요.

    • 마병 2012.10.23 10:35 신고

      아하! 감사합니다~ ㅋㅋ

  3. 모도리 2012.10.23 14:44 신고

    좋은 정보 감사합니다. 페이스북 클럽에서나 블로그에서나 좋은글 항상 감사히 읽고 있습니다.

  4. scarkoo 2012.10.23 15:19 신고

    항상 좋은 정보 감사합니다. 참고로 dxt5는 알파 경계가 고주파인 이미지에 어울리는 압축 포맷입니다. 파티클과 같은 이펙트 텍스쳐에 주로쓰는데 왜 dxt3를 지원안하는지 몰겠네요 atf가 단순 컨테이너이면 dxt3로 넣어도 될듯 싶은데

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2012.10.23 16:17 신고

      가이드 문서에 not support at this time이라고 써있는거 보니까 조만간 되지 않을까 싶긴하네요 ㅎㅎ
      뭔가 툴도 어설프고 찜찜해요

    • scarkoo 2012.10.23 17:41 신고

      저도 이번에 ByteArray 블로그에서 설명하길래 프로젝트에 도입을 결정했는데 말씀대로 툴이 메롱이네요. 뷰어와 생성을 같이할 수 잇는게 필요한데... 이는 TexturePacker가 해줄 것 같기도 합니다.어째든 우야꼬님의 정보가 큰 도움되었네요. 감사합니다. ^^

      개인적으론 PC는 그냥 png로 하는게 속 편할 듯 싶습니다. 모바일 환경과 다르게 피시 화면은 너무 잘 보여서 알파 경계가 은근히 신경쓰일 것 같습니다. 메모리도 머 충분하니깐...

  5. Favicon of http://roart.kr 로아트 2012.10.23 17:24 신고

    좋은 포스팅 고맙습니다!

    그런데 atf 파일은 어떻게 만드나요?

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2012.10.24 11:00 신고

      일단 최근꺼는 https://t.co/zi74VvLH 요 링크에서 다운받을 수 있네요.

  6. 마이티 2012.11.02 15:05 신고

    다운을 받았는데요 이건 어떻게 사용하나용 ?? -_-;; 혹시 참고 페이지 있나요?

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2012.11.02 15:14 신고

      영문이지만 안에 UserGuide.pdf 가 있습니다.
      3페이지 보시면 png2atf 사용방법이 나와있습니당~

  7. neec 2012.11.06 08:36 신고

    알파 채널을 갖는 이미지의 경우 ATF 사용에 신중해야 합니다

    런타임에 RGBA로 변환과 GPU 업로딩이 빈번하게 발생해 점유 메모리와 퍼포먼스에 불필요한 비용이 발생할수 있습니다

    24비트 이미지의 경우 큰 효과를 볼 수 있습니다

  8. 김태완 2012.12.23 20:46 신고

    눈팅만 하다가 질문 올려서 죄송한데여 ㅋ ㅠ

    atf 파일로 변환을 해서 사용했더니 이미지 끝의 알파 처리부분이 뭉개져서 나오는데 혹시 방법을 알고 계신가요?
    그냥 png로 해야하는 부분인가요?ㅜㅡㅜ

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2012.12.24 13:34 신고

      그게 지금은 답이 없는 것 같습니다.
      저도 작게 쓰는 이미지는 상관없이 그냥 쓰고 있는데
      큰 이미지일때는 방법 없이 png로 쓰고 있습니다.

    • 김태완 2012.12.27 15:59 신고

      답변 감사합니다!!!

  9. Favicon of http://kuimoani.tistory.com 귀뫄뉘 2013.04.29 11:19 신고

    매번 좋은 글 감사합니다~

    큰 도움이 되었어요~

  10. 김진혁 2015.08.09 16:13 신고

    안녕하세요 . 제가 어떤 게임을 너무좋아해서 게임 카페에 글을 올리고있어요. 그 게임앱을 디컴파일하면 atf 파일이 추출되는데요.
    이파일을 읽으려면 (즉 , 이미지를 보려면) 어떤 프로그램을 써야하나요? adobe gaming sdk에서 배포하는 atf viewer을 쓰고있엇는데
    갑자기 안되는것도 생기네요.. 궁금합니다. 포토샵을 비롯해서 다깔아보았고. 코드로 하는것은 어떻게하는지 몰라서 잘모르겠습니다.

+ Recent posts