CoronaSDK에서 TexturePacker로 생성한 imagesheet 사용하기

2014. 1. 20. 0:38
프로젝트 다운로드

TexturePacker는 Sprite 이미지를 packing하는 툴이다.  

(http://www.codeandweb.com/texturepacker) 

이 툴은 각각의 Sprite 이미지를 뭉쳐서 하나의 파일을 만들어 주는 기능과 생성된 Sprite들의 좌표를 따서 Mobile 개발에 많이 사용하는 Cocos2d-x , Unity, CoronaSDK등의 툴에서 사용할 수 있게 image sheet를 생성해 주는 기능을 가지고 있다.

아래 URL에서는 각각 툴에서 사용하는 방법들에 대한 설명을 하고 있다.

http://www.codeandweb.com/texturepacker/tutorials#corona

아래는 Corona의 Image Sheet에 맞춰 정보 파일을 만드는 방법을 설명하고 있다.

http://nijibox.jp/smap/2013/03/texturepacker-newimagesheet/

간략하게 TexturePacker를 사용하는 방법을 알아보자.

1. 원하는 이미지들을 Drag & Drop으로 TexturePacker에 떨어뜨린다. 

 

‘탐색기’에서 이미지를 툴의 A부분 Sprites 박스에 떨어뜨린다.  

• 미리 준비한 이미지의 파일번호가 동일해야 그 순서에 맞춰 image sheet의 sprite 정보가 올바르게 저장된다.
• 폴더 별로 이미지를 구분해서 저장해야 위와 같이 구분된 sprite 가 만들어 지며 Sprite sheet도 구분해서 만들어 진다. ( 아래에 image sheet 부분 참고 )
• 위의 A에 있는 이미지는 첨부된 study.zip을 받아서 'data' 폴더를 보면 들어 있는 내용이다.
  
  

2. B의 Data Format을 Corona SDK 로 선택하고 , C의 Publish를 클릭하면 다음과 같이 image sheet가 만들어 진다. ( sprite_set.lua 라고 파일명 지정 , study.zip 내용 참고 ) 

  

내부에 sheet의 정보와(이미지의 좌표등등) 기본적으로 getSheet() , getFrameIndex() 함수가 자동으로 생성됨을 알 수 있다.  

3. Image Sheet 파일 불러오기  

local sprSheetInfo = require("sprite_set")

local sprImageSheet = graphics.newImageSheet( "images/sprite_set.png", sprSheetInfo:getSheet() )

• Require : 외부 파일을 불러 들이는 명령어
• sprSheetInfo는 라이브러리 패키지가 되고 거기 있는 getSheet() 함수를 호출할 때는 sprSheetInfo:getSheet() 이러한 방법을 이용한다. 

4. Sprite 출력

1. local GirlSpr = display.newSprite ( sprImageSheet, {frames={sprSheetInfo:getFrameIndex("girl1")}} )
   
   
2. 이렇게 하면 한장의 이미지를 출력할 수 있다.  
   하지만 이 방법으로 연속된 Sprite 이미지 출력에는 불편함이 있다.
   다음의 코드를 추가하자.

5. Sequence Data 추가 ( sprite_set.lua에 수동으로 추가 )

1. Sprite_set.lua의 마지막 return SheetInfo 위에 아래 코드를 추가 한다.
2. TexturePacker에서는 아래코드를 자동으로 생성해 주지 않기 때문에 이것은 수동으로 추가해야 한다.   
   
   
   SheetInfo.sequenceData = {
       {
       name = "girl",
       start = 1,                -- girl sprite의 시작 위치
       count = 7,               -- 개수
       time = 2200,            -- animation 표시 시간
       loopCount = 0,         -- 반복 횟수 ( 0은 무한 )
       loopDirection = "forward"      -- sprite animation 진행 방향
       },
      
       {
       name = "magic",
       start = 8,                -- magic sprite의 시작 위치
       count = 5,
       time = 2200,
       loopCount = 0,
       loopDirection = "forward"
       }
      
   }
   
   
   function SheetInfo:getSequenceData ()
       return self.sequenceData;
   end 

6. Animation Play

1. 아래의 코드를 보자.
   local GirlSpr2 = display.newSprite( sprImageSheet , sprSheetInfo:getSequenceData() )
   -- Sequence Data를 이용해서 Animation Sprite를 불러 오고 
2. GirlSpr2:setSequence("girl")
   -- 두개의 animation 중에 ‘girl’을 적용 시킨뒤
3. GirlSpr2:play()
   -- animation 을 Play 시킨다.

첨부된 소스 코드를 보면 이해가 쉽게 될것 이다.