WOW-Engine + PV3Dによる3次元物理演算

3Dの物理演算コンテンツのデモを作ることがあったので覚書。
物理演算のライブラリは数あれど、何も分からなかったのでとりあえず3D対応を謳っていたWOW-Engineを選択。
調べていく中で分かりましたが、物理演算系ライブラリは基本内部計算のみ、表示部分は自前か他のライブラリを使用する必要があるため、 例えばよく知られたBox2Dのような2次元物理演算のライブラリを利用して、3Dでの物理表現を実装することも可能です。
比較なんぞしていないですが、表現によってはそちらの方が動作が軽かったりしそうですね。
ここでは導入方法と実装の考え方をざっくりと。
3Dエンジン部分はPapervision3Dを使用しました。

【導入方法】
まず公式サイトからファイルを入手します。
そのままパブリッシュしようとすると、DListNode云々と怒られるので、ここからpolygonalクラスというのを入手して配置する必要があります。データ構造を扱いやすくするライブラリだそうです。

【実装】
まず各クラスの処理を簡略化したものがこちら。WOW-Engine + PV3D による3D物理演算コンテンツ概略図

“WOW-Engine + PV3Dによる3次元物理演算” の続きを読む

Flash間での日本語クエリの受け渡し

Flashで生成した日本語文字列を、
ページ遷移後の別のFlashに受け渡したいという場面がありました。
なるべく簡易な方法ということで、
遷移するページURLにクエリとして日本語文字列をくっつけることに。
そのままブラウザでページ遷移すると文字列がURLエンコードされるので、
JavaScriptのdecodeURI()でデコードしてFlashに渡すということをしたのですが、
ブラウザによって動いたり動かなかったり。
動かないブラウザは2重にエスケープされているっぽい?

きっと何か方法があると思いつつ、Flash側で回避。
JSはクエリ部分を取得してFlashに渡すのみで、余計なことはしない。

送信Flashで送りたい日本語文字列をUTF-8エンコードescape()にかける。
クエリで受け取った文字列をFlash内部でunescape()すると元の日本語に戻ります。

//■送信Flashでエンコード
var str_ori:String = "トライナイン";
var str_esc:String = escape(str_ori);
trace(str_esc); //出力:%E3%83%88%E3%83%A9%E3%82%A4%E3%83%8A%E3%82%A4%E3%83%B3


//■受信Flashでデコード
trace(unescape(str_esc)); //出力:トライナイン

 
【6月28日追記】
外部から読み込んだXML等のテキストをエンコードするとうまくいかない場合が。
 System.useCodepage = false;
を明示的に前に書いてやると直るかもしれません。

このアドオンはFirefox XXX には対応していませんの回避法

このアドオンはFirefox 3.6.3 に対応していないため、インストールできませんでした。

 
Firefox4が今年の秋にリリースされるようです。

Mozilla、「Firefox 4」のビジョンを明らかに 2010年秋リリースへ

Firefoxのバージョンアップが早いのは大変ありがたいですが、毎回困るのが導入している便利なアドオンが軒並み使えなくなること。
新しいバージョンでの動作保証がないだけでそのまま使えるアドオンも多いと思われます。
このようなアドオンを入れるにはxpiファイルのバージョンチェック情報を書き換える方法があるようですが、
その互換チェック自体を簡単にOFFにできるアドオンがあるのでご紹介。

Nightly Tester Tools

タイトルバーのカスタマイズなど他にも機能があるようですが、
このアドオンを入れると強制的に旧バージョンしか対応していないアドオンをインストールすることができます。
稀に本当に互換性がなく不具合を起こし、FF自体起動しないような状態になることもあるようですが、
そのときはセーフモードでアドオンを無効にして起動しましょう。
(スタートメニューのプログラム一覧にMozilla Firefox (セーフモード)が。
またはfirefox –safe-mode をファイル名で指定して実行)

 
書いてて気付いたのはこのアドオン自体4に対応していないと無意味であること。。。

TwitterAPI

Twitterと絡めた案件がありそうなので、TwitterAPIを使ったサンプルを作ってました。
簡単にいろいろデータが取れるんですね。
基本は、

http://twitter.com/xxxxxxx/xxxxxxx/(ID).xml

(ID)にはユーザー名が入り、XML形式の他『.json』とすれば、
JSON形式でデータが返ってきます。

http://twitter.com/statuses/friends/TNKHRYK.json

とすれば、自分がフォローしているアカウントの情報が取得できます。

urlLoader.addEventListener(Event.COMPLETE, jsonLoadComp);
urlLoader.load(new URLRequest("http://twitter.com/statuses/friends/TNKHRYK.json"));

private function jsonLoadComp(e:Event):void {

	var json:String = URLLoader(e.target).data;
	var content_json = JSON.decode(json);
	var total:int = content_json.length;
	for (var i:int = 0; i <total ; i++)
	{
		trace("フォローしている人のサムネイル画像URL" +
		content_json[i].profile_image_url);
	}
}

フォローしている人のサムネイル画像のURLをJSONデータから取り出しています。

http://twitter.com/statuses/friends/TNKHRYK.json?count=50

データの数を制限するには上記のようにクエリを指定します。

 

こちらの日本語訳仕様書を参考にさせていただきました。
Twitter API 仕様書

・・・と、サンプルを制作してアップしたところ、クロスドメインのことを完全に失念していました。
ローカルで動かす分にはFlash単体で支障ないですが、
webにアップすると別ドメインからのデータ参照に制約がかかります。
これを回避するためにデータを中継するPHPを置くなどの対策が必要となるのでした。
以下参考にさせていただきました。
FlashでTwitterの発言を取得してみる

Progression備忘録

先月Progressionをはじめて案件で導入しました。
全画面表示、Macでのマウスホイール、個別ページURLの設定等、Progressionの恩恵を様々授かったのですが、初めてということでいろいろ躓いたことや、反省点も。
それらを備忘録として晒しておきます。
使用したバージョンは3.1.82

■CastButton継承クラスを使わないシーン移動

途中までシーン移動するトリガーボタンはCastButtonを継承したクラスをひとつひとつ作っていました。
が、途中CastButtonを使わなくても”execute()“メソッドでProgressionのコマンドは実行出来ることを教えてもらいました。

//シーンhogeへ移動
new Goto(new SceneId("hoge")).execute();

またテンプレートとなるシーンやボタンクラスを作っておけば、こんな感じでそれらを一括で作成することができます。

for (var i:int = 0; i <= total; i++)
{
	/*SCENE_ARRAYには各シーンIDを格納*/
	var scene:CommonScene = new CommonScene( SCENE_ARRAY[i] );

	/*引数のオブジェクトに自由に値を付加できる
	  initObject.sIdで取り出し移動先を振り分けする*/
	var btn:CommonBtn = new CommonBtn( { sId:SCENE_ARRAY[i] } );
}
 

■シーン遷移時の処理は計画的に

Progressionの肝であるシーン遷移。
自分は各シーンにcontainerというコンテンツの入れ物(CastMovieClip継承)を作っていったのですが、
ただシーン移動をするだけでも前のシーンのcontainerの”_onCastRemoved“やシーンの”_onGoto“,”_onUnload“、次のシーンの”_onLoad“,”_onInit“、さらにこのシーンのcontainerの中などいろんなところに処理を書くことができます。
それぞれきちんと役割や実行される順番があるのですが、これがどうして適当に書いていってもなんとなく動いてしまいます。
結果、必要以上にいろんなところにコードが分散してしまいました。ボタンの処理も中と外にそれぞれロールオーバーの処理が書いてあったり。。。
『作りたいものは、楽しいところだけ作る』のProgressionですが、しっかりそこらへん挙動を把握したうえで最低限プロジェクトでのルール決めはしましょう、当たり前ですが。
下記サイトに書かれているとおり基本”onLoad“と”onUnload“という考え方が良さそうです。
http://www.muraken.biz/blog/2009/06/02/case-study-of-progression-vol2/

■Tweenerのトランジションに注意

細かい動きはフレームアニメーションでつくり、DoTweenerコマンドで実行。
しかし動きが何だか変だ。
これはProgressionというよりTweenerの話ですがtransitionプロパティの初期値は”linear“ではなく”easeOutExpo“となぜか尖った動きとなっています。
このままではせっかく調整したフレームアニメが台無しなので、しっかり”linear“指定してやります。

// 実行したいコマンドを登録します。
addCommand(
	// "end"フレームまで2秒かけてアニメーション
	new DoTweener(this , { _frame:"end" , time:2 , transition:"linear" } )
);
 

■Preloaderの注意

これもProgressionサイトに限った話ではないですが嵌ったこと。
全シーン共通で使用する静的パラメーターを一つのクラスにまとめて管理していたのですが、
そこへ加えた修正が何故か反映されない。
検証するとindex.swf単体で動作させたときは問題なく修正されていることを確認。
原因はpreloaderからもそのクラスを参照していたため、その時点で該当クラスがインスタンス化されていたことによるもの。
preloaderは修正していない状態でパブリッシュしたものをそのまま使用していたため、preloaderを通すと修正が反映されていなかったというわけ。
以降修正のたびにpreloaderも書き出しなおし&アップし直しということになってしまい、設計段階で切り分けはしっかりしましょうねという教訓になりました。

 

とまあいろいろボロボロでしたがその便利さは十分実感できました。
今回はネット上のドキュメントの豊富さからProgression3で制作しましたが、いろいろバグも修正されているようなので次回はProgression4で制作したいと思います。