Thursday, April 26, 2012

Corona로 Sprite Sheet Animation 만들기

1. 애니메이션 제작
  1. Photoshop 에서 레이어들로 애니메이션을 만든다.
  2. pivot(anchor)이 되는 위치는 일치하도록 만듬 (중요)
  3. Layer들, 즉 각 프레임을 png 파일들로 export 함
    (전체 네 프레임이고 파일명은 myTest-1.png ... myTest-4.png 라고 하자)
2. Sheet animation 용 data 제작
  1. Zwoptex 에 그들 png 파일들을 끌어넣음
  2. 각각을 배치함. 툴바의 Layout 버튼 누르면 자동으로 되고
    수동으로 배치할 수도 있음 (이때 빨간색 bounding box가 서로 겹쳐서는 안됨)
  3. Document의 width / height 를 적절히 조절해줌
  4. 툴바의 Publish 버튼 누름 (이때 Corona의 lua 포맷 선택)
  5. myTest_default.png 와 myTest_default.lua 라는 두개의 파일이 생성됨
    각각을 myTest.png 와 myTest.lua 라는 이름으로 변경
3. Corona
  1. New Project 함 (template = Blank, 방향은 landscape로)
    프로젝트명 MyAniTest (아무거나 무관)
  2. Zwoptex에서 나온 두 파일을 프로젝트 폴더에 넣음
  3. main.lua 를 다음과 같이 작성
 require "sprite"  
   
 display.setStatusBar(display.HiddenStatusBar)  
   
 local mySpriteSheet = sprite.newSpriteSheetFromData("myTest.png", require("myTest").getSpriteSheetData() )  
 local mySpriteSet = sprite.newSpriteSet(mySpriteSheet, 1, 4)  
 sprite.add(mySpriteSet,"myTest", 1, 4, 1000, 0)  
   
 local spriteInstance = sprite.newSprite(mySpriteSet)  
 spriteInstance:setReferencePoint(display.BottomRightReferencePoint)  
 spriteInstance.x = 400  
 spriteInstance.y = 280  
   
 spriteInstance:prepare("myTest")  
 spriteInstance:play()  
   
레퍼런스 :
Corona Sample에 들어 있는 HorseAnimation
Advanced Animation Using Sprites

No comments:

Post a Comment