この記事のURL

http://www.dango-itimi.com/blog/archives/2013/001166.html


FLASH tips update Toolkit for CreateJS の出力ファイルを Haxe クラスに変換するアプリ作成中

試作品ができたので中途報告を。
Toolkit for CreateJS から出力される js, html ファイルの内容を解析し、Haxe クラスに変換するアプリを Adobe AIR にて作成しています。

例えば Toolkit for CreateJS から出力された js ファイル内に以下のクラスがあったとします。

(lib.view = function() {
	this.initialize();

	// scene
	this.instance = new lib.shootingsceneGameOverView();

	// guide
	this.instance_1 = new lib.shootingeffectExplosionView();
	this.instance_1.setTransform(67,106);

	this.playerPosition = new lib.shootingplayerView();
	this.playerPosition.setTransform(52,195);

	// game area
	this.gameAreaView = new lib.shootingareaGameAreaView();
	this.gameAreaView.setTransform(0,20);

	// click area
	this.instance_2 = new lib.shootingareaClickAreaView();
	this.instance_2.setTransform(275,200,1,1,0,0,0,275,200);

	this.addChild(this.instance_2,this.gameAreaView,this.playerPosition,this.instance_1,this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,550,400);

作成中のアプリケーションで変換を行うと、以下の様な Haxe 用クラスに変換されます。

class View extends Container {

	public var instance:ShootingsceneGameOverView;
	public var instance_1:ShootingeffectExplosionView;
	public var playerPosition:ShootingplayerView;
	public var gameAreaView:ShootingareaGameAreaView;
	public var instance_2:ShootingareaClickAreaView;

	public var nominalBounds:Rectangle;

	public function new(){
		super();

		nominalBounds = new Rectangle(0,0,550,400);

		js.Lib.eval('this.instance = new lib.ShootingsceneGameOverView();');
		js.Lib.eval('this.instance_1 = new lib.ShootingeffectExplosionView();');
		js.Lib.eval('this.instance_1.setTransform(67,106);');
		js.Lib.eval('this.playerPosition = new lib.ShootingplayerView();');
		js.Lib.eval('this.playerPosition.setTransform(52,195);');
		js.Lib.eval('this.gameAreaView = new lib.ShootingareaGameAreaView();');
		js.Lib.eval('this.gameAreaView.setTransform(0,20);');
		js.Lib.eval('this.instance_2 = new lib.ShootingareaClickAreaView();');
		js.Lib.eval('this.instance_2.setTransform(275,200,1,1,0,0,0,275,200);');
		js.Lib.eval('this.addChild(this.instance_2,this.gameAreaView,this.playerPosition,this.instance_1,this.instance);');
	}
}

Toolkit for CreateJS パブリッシュデータの html ファイル内にある、素材ファイル読み込み用パス manifest もクラス化されます。
また、上記サンプルコードでは確認できませんが、プロパティ名に連番が付与されてしまう問題への対処も行なっています。

変換仕様

あまり見た目が良くない箇所の理由です。

クラス名の先頭は大文字に

Haxe の言語仕様よりクラス名の先頭は大文字にする必要があります。
Flash 内で「shooting.scene.GameOverView」とリンケージ設定後、Toolkit for CreateJS にて出力を行うと「shootingsceneGameOverView」というピリオドが取れたクラス名に変換されます。そこから更に当アプリケーションで「ShootingsceneGameOverView」という先頭大文字変換を行うため、とてもカオスなクラス名になってしまっています。
理想は、アプリケーションで変換する際 「shooting.scene.GameOverView」と Flash で設定したパッケージ構造のクラス名に復元できればよいのですが、Toolkit for CreateJS 1.1 の出力情報のみでは難しい所です。

処理実行コードは eval でくくる

javascript からダイナミックに CreateJS の protected や private メソッドにアクセスしているため、CreateJS-Haxe extern では構文エラーを起こしてしまいます。よって、eval で各所をくくることで対応しました。
くくった箇所は javascript となるため、クラス名呼び出しには 名前空間が必要になったりと変換処理作成の手間が増す事に。

メリット・デメリット

今回のアプリケーションを用いると、Haxe エディタから Flash 上に配置したムービークリップのインスタンス名へのアクセスが可能になり、存在しないインスタンス名にアクセスするとコンパイル時エラーが発生するようになります。
TFCLib のみでの開発に対し、よりいっそう Flash にて swc を利用した開発イメージに近くなります。

デメリットは、Toolkit for CreateJS でのパブリッシュ後、当アプリケーションでの変換処理を行う一手間が増える、という点です。アプリケーション上のボタンひとつで変換を行うことを可能にする予定ではありますが、少々面倒さが増えるかもしれません。

その他、変換されたクラス名がとってもカオスなので、エディタのスペルチェックに引っかかってしまいます。
クラス先頭大文字変換によってバッティングが発生し不具合が生じる可能性もあるため、fla ファイル素材の命名には注意も必要です。

参考)
比較用としまして TFCLib のドキュメントは以下となります。Web 上から閲覧できるようにしました。
https://github.com/siratama/haxelib/tree/master/docs/toolkit_for_createjs

難点

メンテナンスが厳しいです。
js ファイルをテキストファイルとして読み込んだ後、split で文字列内 変数やクラス名を抽出し、必要に応じて変換処理を…といった具合に、処理の言語簡潔化が難しい箇所があるため、3日経てば何を書いているのかわからなくなる記述が多いです。
不具合が見つかった場合や、Toolkit for CreateJS のアップグレードが行われた場合、1から作りなおしたほうが早い、なんて事になる可能性も。

Toolkit for CreateJS の jsfl を改造できれば もろもろの問題は解決しそうですが、今の私には無理っぽいです。今後 Flash CS の jsfl の api に CreateJS 用出力機能がついてくれる事を期待します。

[ FLASH ] [ tips ] [ update ] 投稿者 siratama : 2013年03月04日 19:32

トラックバック

http://www.dango-itimi.com/blog/mt-tb.cgi/1126

コメント

以下コメントを書き込むだけでは、管理人には通知が行われません。通知を行いたい場合、管理人の書き込みに「返信」を押してコメントをしていただくか、あるいは Google+, Twitter へご連絡ください。




[EDIT]