devlog [naru design]

プログラミングやテクニカルな内容の覚え書き。

TexturePackerで書きだしたアトラス画像とデータファイルをUnityで使えたら・・・と考えて、まずはデータファイル(JSON)をUnityでアセットとして読み込んで中身を読み取ることを試してみました。

TexturePackerでPublishを行うと、画像ファイルとデータファイルが生成されます。DataFormatをUnity3Dに設定してパブリッシュすると、データファイルは拡張子.txtのJSONファイルになります。

このJSONファイルを解析すれば、
・どの画像がアトラス画像のどの位置に配置されているか?
・それぞれの画像サイズ(Width, Height)はいくつか?
などを知ることができます。

これらの情報からUV値を算出すれば、アトラス画像を使ったテクスチャマッピングが可能になり、Drawcallを抑えた描画の実現に繋がります。

JSONの解析には、Boomlagoon JSONを使用しました。AssetStoreから無料でダウンロードすることができます(2013/7/16現在)。

アトラス画像の作成

TexturePackerに3つの画像を読み込んで、テスト用のアトラス画像を作成します。

rgb

読み込んだ画像は、
・red_100x50.png
・green_200x100.png
・blue_300x150.png
の3つです。

Publishして、アトラス画像(rgb.png)とデータファイル(rgb.txt)を生成します。

Unityのプロジェクト作成

Unityで新規プロジェクトを作成します。JSONの解析用のアセットをAssetStoreからダウンロードしてプロジェクトへインポートします(AssetSoreウィンドウの検索枠にJSONと入力して、Boomlagoon JSONを探してください)。

TexturePackerで生成した、アトラス画像(rgb.png)とデータファイル(rgb.txt)をAssetへ追加します。

スクリーンショット 2013-07-16 0.07.08

rgb.pngを選択して、InspectorウィンドウでImportの設定を行います。

スクリーンショット 2013-07-16 0.08.40

JSONファイルの中身を覗くためのC#スクリプト(TestJSON.cs)を作成します。

8行目:テキストファイル(JSON)はTextAssetとして扱う
12行目:テキストファイルの内容をJSONとしてパースする
14行目:画像(フレーム)部分をオブジェクトとして取り出す
16-26行目:フレーム部分を走査
28行目:メタ部分をオブジェクトとして取り出す

Hierarchyウィンドウに空のGameObjectを作成し、先ほど作成したスクリプト(TestJSON.cs)を追加します。

スクリーンショット 2013-07-16 0.14.20

HierarchyウィンドウでGameObjectを選択し、InspectorウィンドウでTestJSONスクリプトのTextAssetへデータファイル(rgb.txt)を設定します。

スクリーンショット 2013-07-16 0.15.07

シーンを再生します。

Consoleウィンドウに以下のように表示されます。

スクリーンショット 2013-07-16 0.22.46

TexturePackerが生成したデータファイル(JSON)から、指定した情報が読み込まれていることが分かります。
アトラス画像に含まれる、それぞれの画像が、どの位置に、どの大きさで配置されているかを知ることができました。

Pocket

コメントを残す

Trackback URL: