月別アーカイブ: 2013年3月

右クリックから一発で素材SWCが生成できるFlashDevelopプラグイン作った

cats

[FlashDevelop Assets Packager Plugin]


前置き

だいぶ昔ですが、Flash開発での素材管理についてこんな話題がありました。

「Flash 開発の議論 – あなたは Embed 派、SWC 派、Load 派? – Togetter」

Flash開発者にとって素材管理は悩ましい問題です。

タイムライン中心でFlashを作る場合は、Adobe Flash Professionalの素材管理機能をそのまま使えばいいので、問題になるのはFlashDevelop, FlashBuilder, FDTなどのエディタを使ってコードをガリガリ書いてFlashの開発をする場合です。

いろんな管理方法がありますが、それぞれにメリット、デメリットがあります。

自分が知っている主な方法は5種類です。

これまでの素材管理方法

Flash Professionalを使わない方法

① 素材1つ1つをLoaderで読み込み (ひとつづつLoad派)
例: 「FlashゲームPG講座 For AS3.0【ファイルの読み込みについて】」

② 素材1つ1つを[Embed()]タグで埋め込み (ひとつづつEmbed派)
例: 「Flash ActionScript3で画像を表示する ≪ Walk on apps.」

○ メリット

  • 有料ソフトウェアが要らない
  • 素材の変更がすぐ反映される

× デメリット

  • 素材一つ一つのパスやコードを書かないといけない。

Flash Professionalを使う方法

③素材をSWC化して、ライブラリとして使う。(SWC派)
例: 「SWCを利用したFlash制作の分業ワークフロー:FlashとFlash Builder連携開発 | デベロッパーセンター」

④素材をSWF化して、Loaderで読み込み。(SWF Load派)
例:「Flex で別 SWF のシンボルをロードする方法あれこれ – 俺の成長日記」

⑤素材をSWF化して、[Embed()]タグで埋め込み。(SWF Embed派)
例:「馬鹿全 – Flex と Flash CS3 の ハイブリッド SWF について」

○ メリット

  • コードの記述量が減らせる
  • フォントの範囲指定とか、ファイルの圧縮とかの管理機能がついてくる

× デメリット

  • Flash Proが高い(CS6は定価で84000円)
  • Flash Proが重い
  • 素材を編集した際の再設定がめんどくさい
  • 複数の開発ツールをまたぐので、敷居が高い

自分がよく使ってるのは③です。ただ、Adobe Flash Professionalが必要というのはかなりのネックになります。素材変更するごとにいちいち設定しなおしてパブリッシュするのメンドクサイですし、Flash Proが入ってないところで編集したい場合もあります。とはいえ、この中では一番楽なのでFlash Pro持ってる人はこの素材管理をしてる人が多いと思います。


…でもさ、Flash Proを使わなくてもさ、Embedの記述なんて自動化できるし、SWCの生成だってFlex SDKで出来るんだよね。この際、FlashDevelopのプラグインでも作っちゃった方が楽なんじゃねーの?

ってことで作りました。

FlashDevelop + Assets Packager Pluginでラクラク素材管理

Assets Packager PluginはFlashDevelop4用のプラグインです。

特徴

  • フォルダを、右クリックですぐ使える
  • [Embed]タグを記述したAS3ファイル、SWC、SWFが一発で生成
  • ディレクトリ構造とファイル名がそのままパッケージ名とクラス名に(普通のAS3ファイルといっしょ!)
  • png、gif、jpgをBitmapDataとして埋め込み
  • otf、ttf、ttc、dfontをFontとして埋め込み
  • mp3をSoundとして埋め込み
  • svg、svgzをSpriteとして埋め込み。(v1.5から)
  • as、mxmlはそのままのコードを埋め込み。(v1.2から)
  • txt、xml、swfなどその他すべてのフォーマットはByteArrayとして埋め込み
  • フォントファイルを、右クリック>>[フォントの設定]で埋め込む文字の指定が可能
  • Haxeでも使用可。生成されたSWFを-swf-libで指定。

2分ちょっとでわかる。Assets Packagerのインストール法と使い方。

インストール法はSourceForgeから.fdzダウンロードしてきて、ダブルクリックするだけです。

基本的な使い方

素材を放りこんだフォルダをFlashDevelopのプロジェクトマネージャー上で右クリック>>[素材をパッケージ]を選択するだけで、libフォルダ内に[Embed]を記述したAS3、SWC、SWFの3種類のファイルが一度に生成されます。

例えば、assetsフォルダ内に以下の4つのファイルを置いてパッケージ化した場合

  • assets/image/Background.png
  • assets/sound/SoundEffect.mp3
  • assets/font/Pixcell.ttf
  • assets/text/HelloWorld.txt

次の4つのクラスが自動で生成されます。

  • assets.image.Background (BitmapData)
  • assets.sound.SoundEffect (Sound)
  • assets.font.Pixcell (Font)
  • assets.text.HelloWorld (ByteArray)

これらを利用するためにどのようなコードを書けばいいかはサンプルコードを用意してあります。

SourceForgeでexample.zipをダウンロードしてください。

基本的には、生成されたAS3ファイルかSWCの参照を追加して各クラスをnewするだけです。それぞれ、BitmapData、Sound、Font、ByteArrayとして使うことが出来ます。

package {
	import assets.text.HelloWorld;
	import assets.font.Pixcell;
	import assets.image.Background;
	import assets.sound.SoundEffect;
	import flash.display.*;
	import flash.events.*;
	import flash.media.Sound;
	import flash.text.*;
	import flash.utils.ByteArray;
	
	[SWF(width=480,height=360)]
	public class EmbedTest extends Sprite {
			
		function EmbedTest() {
			//Font(ttf)
			var font:Font = new Pixcell();
			var tf:TextField = new TextField();
			tf.autoSize = "left";
			tf.embedFonts = true;
			tf.selectable = false;
			tf.defaultTextFormat = new TextFormat( font.fontName, 48 );
			
			//ByteArray(txt)
			tf.text = (new HelloWorld() as ByteArray).toString();
			tf.height = tf.textHeight;
			tf.x = (stage.stageWidth - tf.width) / 2;
			tf.y = (stage.stageHeight - tf.height) / 2;
			addChild( tf );
			
			//BitmapData(png)
			var g:Graphics = graphics;
			g.beginBitmapFill( new Background() );
			g.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
			
			//Sound(mp3)
			stage.addEventListener( 
				MouseEvent.CLICK, 
				function( e:Event ):void { new SoundEffect().play(); }
			);
		}
	}
}

結果:[example.swf]

フォントの設定

さらに、フォントファイル(ttf,otf,dfont)を右クリック>>[フォントの設定]をクリックでフォントの埋め込み範囲やフォント名に関する設定を行えます。

フォント_small

詳細設定

他のプラグインと同じようにツール>>環境設定>>AssetsPackagerから各種設定が行えます。
ここで拡張子の設定、各出力のオン/オフ切り替え、出力フォルダの指定ができます。

ライセンス

MITライセンスです。

更新履歴

2013/05/13 v1.5.0
– 拡張子設定”Sprite Extentions”,”MovieClip Extentions”を追加
– ‘.svg’,’.svgz’をSpriteとして対応
2013/04/13 v1.4.0
– 拡張子設定”Bitmap Extentions”を追加
– 拡張子’ttc’をフォントとして対応
– フォント設定に”太字”,”イタリック”を追加。
2013/03/18 v1.3.0
– 設定にcompcのコンパイラオプションを追加。
– コンパイル前のファイル名チェックを追加。
– ファイル名のマルチバイト文字に対応。
2013/03/16 v1.2.2
– 大文字の拡張子が無視されていたのを修正。
2013/03/15 v1.2.0
– .as,.mxmlのファイルをクラスとして埋め込まれるように設定。
– さらに、詳細設定で無視されるファイルの拡張子が指定可能に。
2013/03/14 v1.1.2
-C:以外のボリュームのプロジェクトで使用した際のエラーを修正。