Monday, January 21, 2013

AndEngine : TexturePacker

 AndEngine에서 TexturePacker를 통해 작성된 Sprite Sheet를 이용하는 방법, AndEngine의 TexturePacker extension 사용 방법에 대한 이야기랍니다




TexturePacker



현재 만들고 있는 앱에서는 자잘한 이미지를 많이 사용하는데, 이러한 이미지들를 효과적으로 관리할 수 있도록 해주는 게 TexturePacker이다. (링크 http://www.codeandweb.com/texturepacker )
사이트에 가서 어떤 점이 강점인지는 직접 살펴보기로 하고...(해당 사이트의 동영상을 보면 이게 어떤 면에서 강점을 갖는지 쉽게 볼 수 있다)

간단하게 요약하더라도,
아래 그림에 설명되어 있는데로, 그냥  TexturePacker에 내가 원하는 이미지를 가져다 드랍하고 몇 가지 필요한 설정들만 해주면 게임 엔진에서 사용할 수 있는 데이터 파일들로 퍼블리싱 할 수가 있다.





TexturePacker Download and License


사용하려면 먼저 다운로드를 해야할텐데, 사이트에 가서 보면 알 수 있겠지만, '유료'이다. 가격은 얼마 되지 않았던거 같다. 하지만, 돈을 지불하지 않고도 사용할 수가 있는데 'IT관련 업종에 종사하는 블로거임'을 메일로 알려주면 이를 확인하고 무료 라이센스 키를 보내준다. (블로그의 글들이 관련 주제여야 하고 근래에 올린 글이 5개 이상이어야 했던거 같다)

아무튼 그래서, 난 1년간 공짜로 쓰기로 했다. (메일을 보내고 하루 이내에 답변 메일이 왔다)
그냥 시험삼아 써보려면 무료로 7주일간 쓸 수가 있다.




프로그램 실행과 이미지 불러오기


프로그램을 실행하고 이미지를 불러오면, 아래와 같은 모습이다. 좌측 패널이 설정하는 부분, 가운데는 이미지들이 모두 합쳐져 하나의 이미지 파일로 만들어지는데, 그 모습을 보여주는 패널이고, 가장 오른쪽 패널은 로드된 이미지들 목록이다.



맨 좌측 설정 패널에서 output, geometry, layout, advanced 각 항목별로 설정해주면 되는데, 이와 관련한 자세한 것들은 구글링 하거나 배포사이트에서 참고하면 되겠다.

아래그림은 내가 만드는 앱에서 사용할 메뉴를 별도로 Pack 하는 기본 설정내용이다. AndEngine에서 사용할 것이라 알려주고 그 아래에 데이터 파일을 작성할 경로를 파일이름과 함께 알려주면 된다.






 PUBLISHING



그리고 나서,  버튼을 눌러 퍼블리싱하면, 모두 합쳐진 결과 이미지파일, XML파일, 그리고 Java 파일이 작성된다. (AndEngine이 안드로이드용 게임엔진이니 당연히 이렇게 작성되겠지. 다른 엔진용으로는 아직 안돌려봤다)

XML과 Java파일을 열어서 읽어보면, 결과 이미지파일에 개별적인 접근이 가능하도록 각각의 ID값과 위치 정보등이 적혀있다.










AndEngine에서 TexturePacker Extension을 이용해서 스프레드 시트 사용하기



AndEngine에서 여러개의 이미지를 사용하려면  일반적으로  BitMapTextureAtlas 객체를 준비하고, BitmapTextureAtlasTextureRegionFactory.createFromAssets()메소드를 이용해서 ITextureRegion 타입으로 내가 원하는 assets 이미지를 각각 로드한 후에 , 그것들을 개별적으로 사용한다. 

// width와 height는 이미지를 실제 로드해서 탑재할만큼 충분히 큰 크기로 지정해 주면 되겠다.
BitmapTextureAtlas mBitmapTextureAtlas = new BitmapTextureAtlas( myActivity.getTextureManager(), width, height, TexureOptions.BILINEAR);

//가로, 세로 각각 100px의 크기의 이미지 두 개를 로드한다.
ITextureRegion firstRegion = BitmapTextureAtlasTextureRegionFactory.createFromAssets(
                                                                             mBitmapTextureAtlas, myActivity.getAssets(), 
                                                                             "first.png", 0, 0);
ITextureRegion secondRegion = BitmapTextureAtlasTextureRegionFactory.createFromAssets(
                                                                             mBitmapTextureAtlas, myActivity.getAssets(), 
                                                                             "second.png", 0, 100);

//그리고, 나서 atlas객체를 로드
mBitmapTextureAtlas.load();





하지만, TexturePacker extension을 이용하면 각각 개별적으로 로드해줄 필요가 없다.

먼저 여러분이 작성 중인 프로젝트가 이 extension 라이브러리를 사용할 수 있는지 확인하자.
프로젝트의 properties 항목을 열어서... extension 라이브러리를 사용하겠다 설정해놨는지 부터 확인하자.
없다면 add 버튼을 눌러서 포함시켜주자( 여기 블로그에 보면 해당 JIT을 여러분의 workspace에 내려받아서 프로젝트 라리브러리로 사용하는 방법에 대한 포스트가 있다. 참조하자)







그리고, Packer로 작성된 이미지 파일과 XML파일을 프로젝트에 옮기자.


















이제, 적당한 클래스든 메소드든 필요한 부분에서 아래와 같이 작성해주면 된다.
(여기서는 별도의 메소드를 작성한 후에 그 안에서 수행하도록 하겠다)




//1. 인스턴스 변수로 TexturePackTextureRegionLibrary 객체를 선언해준 다음에
protected TexturePackTextureRegionLibrary mMenuLibrary;
........


//2. 리소스를 로드할 (여러분이 원하는) 별도의 장소에서 아래처럼 로드해준다.
public void loadMenuResources(){
   try{
      TexturePack texturePack = new TexturePackLoader(mParentActivity.getTextureManager(),
                              "gfx/spritesheets/").loadFromAsset(mParentActivity.getAssets(), "lineup_background.xml");
      texturePack.loadTexture();
      mMenuLibrary = texturePack.getTexturePackTextureRegionLibrary();

   }catch(TexturePackParseException ex){
   }
}

//3. 그리고, 실제 가져다 쓸 곳에서는 TexturePackTextureRegionLibrary.get(int id) 메소드를 이용하면 된다.
//    여기서 int id 값은 TexturePacker를 통해 작성된 xml파일을 보면 확인할 수 있다. 

public void usingTexturePackLibrary(){
     final ITextureRegion  pFirstRegion = mMenuLibrary.get(0);
     final ITextureRegion  pSecondRegion = mMenuLibrary.get(1);

     Sprite sprite = new Sprite(0,0, pFirstRegion, getVertexBufferObjectManager());
     Sprite sprite = new Sprite(0,0, pSecondRegion, getVertexBufferObjectManager());
}



[TexturePacker를 통해 작성된  XML파일]















No comments:

Post a Comment