AIRでのモバイル開発で
必須のATFって何ぞよ？

1-10design.inc 岸 俊介

自己紹介

岸　俊介 @nezilab

1-10design.inc

Flashやってます

最近の事例紹介

PlanetCows

CowChop

きんちょーほぐほぐ

本日のお題

ATFってなんぞよ？

ATF とは

正式名称 Adobe Texture Format

ATFはGPU描画(stage3D)を利用する際、圧縮されたテクスチャを効率よく使う手段を提供するファイルフォーマットです

使うと何がいいの？

テクスチャの保持に必要なメモリ量が少ない

テクスチャのアップロードが短時間で済む

描画が早くなる
（たくさん物を動かすなどの重い処理などのときに感じる）

じゃあATFの中身ってなに？

大きく分けて３つの圧縮フォーマットを含みます。

PVRTC iphone用

ETC1　android用

DXT1/5　win/mac用

（1と5の違いはalpha持ってるかどうか）

ATFってどうやって作るの？

ATF SDKのなかに入ってるpng2atfを使います

これはpngをATFに変換する物です

png2atfをmacならターミナル、winならコマンドで指定して使います

Adobe Gaming SDKの中に入ってます

ATFの書き出し例

3種類の形式を含んで書き出す方法

./png2atf -c -i test.png -o test.atf

iphoneのみの書き出す方法

./png2atf -c p -i test.png -o test.atf

androidのみの書き出す方法

./png2atf -c e -i test.png -o test.atf

書き出した容量の比較 iphone阪

サイズ 2048px

PNG 771k

PVRTCのみ 2.8M

PVRTCのみ -e 2.8M

PVRTCのみ -n 0,0 mipmapなし 2.1M

PVRTCのみ -n 0,1 mipmap1つだけ 2.6M

ATFを作る際の注意点

・２のべき乗の正方形のみです。最大サイズは2048

・2048で作る場合は少なくとも一つの標準mipmapをを作るほうがいいみたいです

なんでかというと特定のデバイスは1024までしか読めない機種があるそうです。

その特定の機種だとFlashランタイムは、必要に応じて、テクスチャサイズを1024に自動変換する機能を持っています。なので1024のmipmapがあるといいみたいです

・圧縮されるので画像が少し汚くなります。
気になるならオプションの-cを外して書き出せば非圧縮で出力されます

mipmapってなに？

こういう各サイズを用意する感じです

当然その画像の分だけ容量増えます。

じゃあ容量減らしたい
場合どうしたらいいの？

オプション-nを使います。
-nの後ろの数字はmipmapのレベルを範囲指定します。
0が元の画像で、１以降がmipmapになります。

./png2atf -c -n 0,1　-i test.png -o test.atf

mipmapを作らない方法

./png2atf -c -n 0,0　-i test.png -o test.atf

でもstarlingは-nを使うのを推奨していないみたいです
mipmapを作らない設定はオプション-eを使えよと言っています。

-eは空のmipmapを作ることができるらしいです。
（容量減らないんだよなぁ？）

ATFのstarlingでの使い方は？

[Embed(source="starling.atf", mimeType="application/octet-stream")]
public static const CompressedData:Class;

var data:ByteArray = new CompressedData();
var texture:Texture = Texture.fromAtfData(data);

var image:Image = new Image(texture);
addChild(image);
                        

これは公式のやり方です。

今回はstarling1.3から導入されたAssetManager使ってみます。

EmbeddedAssets.as

スプライトシートの画像やそれに対応したXMLをembedするクラス

package 
{
	public class EmbeddedAssets 
	{
		[Embed(source="../../../../deploy/images/test.atf", mimeType="application/octet-stream")]
		public static const test:Class;	
		
		[Embed(source="../../../../deploy/motion_xml/testxml.xml", mimeType="application/octet-stream")]
		public static const testxml:Class;
	}
}
                        

GlobalAsset.as

読み込んだスプライトシートを管理するクラス

package
{
	import flash.display.Bitmap;
	import flash.utils.Dictionary;
	import starling.utils.AssetManager;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;

	public class GlobalAsset
	{	
		private static var _textures			:Dictionary = new Dictionary();
		private static var _textureatlas		:TextureAtlas;
		private static var _assetmanager		:AssetManager;
		
		public static function get assetmanager():AssetManager
		{
			return _assetmanager;
		}
		
		/**
		*	スプライトシートからひとつのテクスチャを取り出す。
		* @param
		* @return
		*/
		public static function getTextureAtlasTexture($textureatlasname:String , $texturename:String):Texture
		{
			return assetmanager.getTextureAtlas($textureatlasname).getTexture($texturename);
		}
		
		/**
		*	スプライトシートから複数のテクスチャを取り出す。movieclip用
		* @param
		* @return
		*/
		public static function getTextureAtlasTextures($textureatlasname:String , $texturename:String):Vector.
		{
			return assetmanager.getTextureAtlas($textureatlasname).getTextures($texturename);
		}
		
		public static function load($callBack:Function):void
		{
			if (_assetmanager) 
			{
				$callBack();
				return;
			}
			_assetmanager = new AssetManager();
			_assetmanager.verbose = true;
			_assetmanager.enqueue(EmbeddedAssets);
			_assetmanager.loadQueue(function(ratio:Number):void
			{
				trace("Loading assets, progress:", ratio);
			 
				if (ratio == 1.0)
				{
					$callBack();
				}
			});
		}
	}
}
                        

EmbeddedAssets.as

スプライトシートの画像やそれに対応したXMLをembedするクラス

package 
{
	public class EmbeddedAssets 
	{
		[Embed(source="../../../../deploy/images/test.atf", mimeType="application/octet-stream")]
		public static const test:Class;	
		
		[Embed(source="../../../../deploy/motion_xml/testxml.xml", mimeType="application/octet-stream")]
		public static const testxml:Class;
	}
}
                        

あとでサンプルのファイルをサイトにアップするのでそれで詳しく見てください
starling1.3のAssetManagerの読み込み方の注意点として、
画像の名前とxmlの中のTextureAtlas imagePathの名前は一緒にしないとうまく読み込んでくれないみたいです。
test.atf
test.xml

みたいな感じです。

最後に自分の疑問点

・容量をもっと減らすことは出来ないのか？

・みんなはどんな設定で書き出してるのか？

・外人やほかの人は10倍ぐらい起動速いぜって言うけど
自分のだと３〜４倍しか違わない。なんでやろ？

参考サイト　
この資料読むよりここ見ましょう

starlingのATFについてのページ

AdobeのATF関連

ATFの名圧縮フォーマットの画質を比べてるサイト

おわり