12
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

libGDXでTextureAtlas用パックファイル作る場合は、有料のTexturePackerじゃなくてgdx-toolsのTexture Packer使えば良い

Last updated at Posted at 2015-04-24

地味にQiita初投稿だ!!よろしくお願いします!
ちょっと前置き長いので、既にTexture Packer知ってる方は 本題 まで飛ばして下さい。

Texture Packer

TextureAtlas のお話

libGDX(に限らないと思うけど)で、テクスチャ使うときは、GPUに優しくするため、複数の画像をまとめて一枚の画像にして、リージョン(一枚の画像の矩形範囲)を指定して画像を描画すると思います。

リージョンを指定する方法は、ハードコーディングで指定するなど色々あると思いますが、標準で用意されている仕組みとして、 TextureAtlas クラスを利用する方法があります。これは、予めツールにてテクスチャとリージョンのセットを書き出しておき、そのファイルをプログラムで呼び出すと、リージョンを取得できる、というものです。

SpriteBatch batch = new SpriteBatch();

// ロード
TextureAtlas titleButtonsAtlas = new TextureAtlas("title-buttons.atlas");

// リージョンの取得
TextureAtlas.AtlasRegion btnStart = titleButtonsAtlas.findRegion("btn_start");
TextureAtlas.AtlasRegion btnStartPressed = titleButtonsAtlas.findRegion("btn_start_pressed");

// 描画
batch.begin();
batch.draw(btnStart, 0, 0);
batch.draw(btnStartPressed, 0, 50);
batch.end();

結果はこんな感じになります。

libgdx-ta.png

TextureAtlas.AtlasRegion は、 TextureRegion を継承しているので、SpriteBatchさんのお世話も受けれます。
※ こちらが詳しいです: http://qiita.com/shinsan68k/items/b03f28089b16d57d3418

で、その「テクスチャとリージョンのセット」は上記の例で言うと以下の2つのことなんですが。

  • 元画像( title-buttons.png )
  • パックファイル( title-buttons.atlas )

これらを生成するツールのことを一般に Texture Packer というらしいです。

有料の Texture Packer ?

ググっても上の方にでてくるコレです。

GUIでの操作も出来て、CUIインターフェースも用意されている、万能な感じのTexture Packerです。

しばらく僕も使ってたんですが、割りとすぐ期限が切れてしまって、使えなくなってしまいました。いや、使えなくなったというのは語弊があるんですが…。画像の一部が「有料版購入してね」に変わっちゃうのです。こんなの。

title-buttons.png

まだ本格的にlibGDX勢でない僕は、 Imagemagick でつなげたようなものでもいいから何かないかなあ…とか思ってました。

gdx-tools に、 Texture Packer ついてた!

で、libGDX公式の外部ツールに、TexturePackerがあることに最近気づきました。
IntelliJ IDEA経由で使ってみたら動きまして。で、もっと簡単に動かす方法ないかなあと思って探してたら、できたので、Qiitaで共有しようと思い立ったわけです。

Texture packer · libgdx/libgdx Wiki

本題

gdx-toolsのTexture Packerを利用するには、以下の二つが必要です。

  • gdx.jar
  • gdx-tools.jar

で、これらのjarファイルは nightly にあったので、これをダウンロードして実行してあげれば行けるみたいでした。

なので、まずはダウンロード。

Mac
# gdx.jar と gdx-tools.jar をダウンロード
curl -O http://libgdx.badlogicgames.com/nightlies/dist/gdx.jar
curl -O http://libgdx.badlogicgames.com/nightlies/dist/extensions/gdx-tools/gdx-tools.jar

Windowsの場合はcurlコマンドが標準で入ってないので、Powershell上で下記を入力することでダウンロード。(もちろん手動でダウンロードしてもOK)

Windows
# gdx.jar と gdx-tools.jar をダウンロード
Invoke-RestMethod -Uri "http://libgdx.badlogicgames.com/nightlies/dist/gdx.jar" -OutFile gdx.jar
Invoke-RestMethod -Uri "http://libgdx.badlogicgames.com/nightlies/dist/extensions/gdx-tools/gdx-tools.jar" -OutFile gdx-tools.jar

さらに、TexturePackerでまとめたいファイルをtitle-buttonsフォルダにいれて。
こんなディレクトリ構成になりました。

.
├── gdx-tools.jar
├── gdx.jar
└── title-buttons
    ├── btn_start.png
    └── btn_start_pressed.png

試しに実行してみます。Windowsの場合はjarファイルの区切りが:(コロン)じゃなく;(セミコロン)なので注意。

Mac
$ java -cp gdx.jar:gdx-tools.jar com.badlogic.gdx.tools.texturepacker.TexturePacker

Usage: inputDir [outputDir] [packFileName]
Windows
> java -cp "gdx.jar;gdx-tools.jar" com.badlogic.gdx.tools.texturepacker.TexturePacker

Usage: inputDir [outputDir] [packFileName]

おお、なんかきましたね。実際に使ってみましょう。

Mac
$ java -cp gdx.jar:gdx-tools.jar com.badlogic.gdx.tools.texturepacker.TexturePacker ./title-buttons title-buttons-build title-buttons

title-buttons
Packing......
Writing 512x64: ./title-buttons-build/title-buttons.png
Windows
> java -cp "gdx.jar;gdx-tools.jar" com.badlogic.gdx.tools.texturepacker.TexturePacker ./title-buttons ./title-buttons-build title-buttons

title-buttons
Packing......
Writing 512x64: .\title-buttons-build\title-buttons.png

libgdx-built.png

title-buttons-build ディレクトリができました!!良い感じですね!

pack時のオプション

Texture packer · libgdx/libgdx Wiki みる感じですと、 pack.json なるものを、 inputDir に含めておけば、なんかいろいろ設定ができるみたいです。やってみます。

試しに、画像境界にデバッグ用の線を表示してくれるオプションがあるみたいなので、これを有効にしてみます。

./title-buttons/pack.json
{
    "debug": true
}

こんなツリーになりました。

.
├── gdx-tools.jar
├── gdx.jar
└── title-buttons
    ├── btn_start.png
    ├── btn_start_pressed.png
    └── pack.json

先ほどと同じようにコマンドを入力してみます。

Mac
$ java -cp gdx.jar:gdx-tools.jar com.badlogic.gdx.tools.texturepacker.TexturePacker ./title-buttons ./title-buttons-build title-buttons

title-buttons
Packing......
Writing 512x64: ./title-buttons-build/title-buttons.png
Windows
> java -cp "gdx.jar;gdx-tools.jar" com.badlogic.gdx.tools.texturepacker.TexturePacker ./title-buttons ./title-buttons-build title-buttons

title-buttons
Packing......
Writing 512x64: .\title-buttons-build\title-buttons.png

title-buttons.png

おおお、ピンク色の境界ができてますね!!tanoshii!!11

IDEからも利用可能

この記事ではコマンドラインで実行する方法を書いたんですが、もちろんIDEからでも同様のことが可能です。eclipseから実行する方法を書かれている方が居ました。

12
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?