[ CATEGORY ] tips…

http://www.dango-itimi.com/blog/archives/flash/


FLASH FLASH tips 特定のフォルダ構成をした時にシンボルが壊れる致命的な不具合: Adobe Animate CC

長らく悩まされていた Flash CC もとい Adobe Animate CC での致命的な不具合の再現方法が判明しました。業務にて再現方法を教えていただいた形となります。Adobe フォーラムのほうへは報告済み。

この不具合は、ライブラリ内で特定のフォルダ構成をした場合、100% 発生します。シンボルが壊れるため、致命的なエラーです。

再現手順は以下の通りです。

1)画像のようなライブラリ構成の fla ファイルを作成

2)symbol1 に bitmap1 を配置
3)ファイルを保存
4)ライブラリの folder1 を削除
5)ファイルを保存して閉じた後、再度 fla を開く
6)symbol1 が壊れる

同名のフォルダが親に存在する場合、発生します。今回の場合は aaa というフォルダが影響しています。

symbol1 には bitmap1 が配置した事にはなっておらず、symbol1 を開こうとしても開けなくなります。私のようなドット絵ビットマップを大量に用いる製作者にとっては脅威の不具合です。

致命的なエラーのため Adobe さんには、早急にこの不具合を修正してくれることを望みます。

[ FLASH ] [ FLASH ] [ tips ] 2017年09月29日 18:47 | コメント (0) | トラックバック

FLASH tips Adobe Animate CC WebGL(Preview) Document の調査と Haxe からの利用サンプル

Adobe Animate CC から利用可能な WebGL Document Preview版の調査と、Haxe からの利用サンプルを作成しました。

サンプル

今回作成した WebGL で表示する簡易ムービーです。5秒ほどのムービーをループさせています。

Adobe Animate CC WebGL Document とは

情報がほとんど無く 自分で使用してみての調査報告となるため、誤っている箇所があるかもしれませんが、その場合はつっこみください。

---

Adobe Animate CC には HTML5 コンテンツを制作するための「HTML5 Canvas Document」と「WebGL Document」の二種類のドキュメント形式があります。

「HTML5 Canvas Document」は CreateJS ライブラリを利用してコンテンツ制作を行います。Adobe Animate CC で作成したムービーの再生も可能です。しかしムービーを WebGL で再生したい場合、MovieClip をスプライトシートで出力する・専用の処理を記述する等 手間が増え、更に複雑な構造のムービーを WebGL で再生するのは難しい状況です。

「WebGL Document」は独自の API により、Adobe Animate CC で作成したムービーをそのまま WebGL 上で再生する事が可能です。複雑な構造のムービーであってもです。ムービー内部で使用されている ビットマップデータは一つの画像に自動的に収められ、ベクターデータは数値として別途出力され描画されます。描画に関しては 「HTML5 Canvas Document」よりも高い機能を持ち合わせています。

以上から WebGL Document は HTML5 版 GAFMedia 的 立ち位置となりそうです。GAFMedia 詳細に関しましては以下の過去記事をご参考ください。
Haxe(Adobe AIR or Flash) から GAFMedia を利用する

Preview 版による問題

現在 WebGL Document は Preview 版となっており、不具合のような動作や問題点が結構あります。これら問題点が解決するまで実用するにはまだ難しいかもしれません。

ビットマップデータを利用すると描画がちらつく

ビットマップデータを利用すると Internet Explorer や Microsoft Edge では描画がちらついてしまいます。Google Chrome ではちらつくことはありません。現状の一番致命的な問題です。

ビットマップデータを拡大すると画像がぼやける

スムージングがデフォルトでかかってしまっています。解除方法がわかりません。解決作としては、初めから拡大したビットマップ画像を利用する等がありますが、データ量に無駄がでてしまいます。

短いサウンドファイルは正常に出力されず

ムービー内に埋め込んだサウンドを再生する事も可能です。しかしサウンドファイルの再生長が短い場合、正常にファイルが出力されず 0KB の mp3 ファイルが出力されてしまいました。

総画像サイズは 2048 x 2048 px まで

コンテンツ内で使用している全てのビットマップを結合した画像サイズが 2048 x 2048 px を超えると、正常に素材出力が行われません。

jQuery との併用の注意

WebGL Document API が記述してある flwebgl-0.2.min.js を定義する前に jQuery 用 js ファイルを読み込んでしまうと、jQuery の $ 記述が認識されなくなってしまいます。併用したい場合は flwebgl-0.2.min.js 定義後に jQuery 利用の記述を行う必要があります。

今回のサンプルで行った問題回避策

サンプルムービーではドット絵(ビットマップデータ)を利用していますが、IE や Edge でも正常に表示するために、一つ一つのビットマップデータをベクターデータ化する、という手間を費やしています。
比較的シンプルなドット絵なのでベクターデータ化しても問題なく、力技とも言えましょう。

Haxe からの利用

WebGL Document をパブリッシュすると、素材用データやライブラリファイルの他、素材を読み込む処理(JavaScript)が記述された html が出力されます。この読み込み処理部分を Haxe で別途記述し github にアップロードしました。JavaScript 処理では イベントハンドラの数珠つなぎ状になっているため、処理を整理しタイマーで順次読み込みを行うような形式に変更しています。

https://github.com/siratama/WebGLDocument

今後 Haxe で WebGL Document コンテンツ制作を行う場合のテンプレート的ファイルとしてご参考ください。

終わりに

WebGL Document が登場してから Preview 版状態が結構長く続いています。今後どうなるのかわかりませんが、今一番に期待できる機能なので、問題点を全て解決し正式版になってほしいものです。

WebGL Document 用 API はそこそこ整っており、ゲームコンテンツにも使用できます。サウンド制御用の API が用意されていない等ありますが、不足分は CreateJS ライブラリを利用する等すれば良しとなりそうです。

Adobe Animate CC WebGL Document API
https://helpx.adobe.com/jp/flash/webgl-runtime-api-help/index.html

[ FLASH ] [ tips ] 2016年09月25日 12:10 | コメント (0) | トラックバック

FLASH tips ShowCase UI サンプル作成と Haxe 利用のポイント

今後の制作物において必要になりそうな UI パーツ Showcase を作成しました。加えて Haxe を利用するポイントを記述します。

■ Showcase 動作サンプル

ボタン押しっぱなしで自動スクロールします。ボタン当たり判定は両側から画面中央近くまであります。

http://www.dango-itimi.com/blog/swf/227/

使用言語・環境

以下の環境で作成しています。

・Haxe/JavaScript
・JQuery
・SCSS

ソースコード一式は以下に公開しています。
https://github.com/siratama/ShowCaseDom

ポイント

DOM構造を処理側から判別可能になるファイル出力ツールがあると良さそう

今回のサンプルの html DOM 構造は以下となっています。
https://github.com/siratama/ShowCaseDom/blob/master/deploy/index.html

上記に対しクラスファイル Root.hx を用意しました。
https://github.com/siratama/ShowCaseDom/blob/master/src/showcase/dom/Root.hx
これにより、以下のようにプログラムから DOM 構造へアクセスできます。

var root = new Root();
var itemsElement:JQuery = root.showcase.screen.items;

難点は、Root.hx を作成するのは面倒であり、開発中 DOM 構造が変化するたびに Root.hx を書き換える必要があります。よって html の DOM 構造を解析して Root.hx を自動的に出力するようなツールがあると便利となりそうです。これは Flash コンテンツ開発でいうところの、swc ファイルに近いです。

※ファイル出力は行わずとも Haxe のマクロ機能で もしかしたらなんとかなるのかなあ、などとも考えています。
http://qiita.com/shohei909/items/c71f9a8774245319d182

近年では様々なフレームワークが出ており、JavaScript 側から DOM 構造を知ることができる仕組みが用意されているものもある、ようです。

描画処理の分離と enum の利用

今回の Showcase UI では、描画とそれ以外の処理は分離して作成しています。肝となるクラスファイルは以下の三点(MVC)です。
Display.hx : View
Operator.hx : Model
Transmitter.hx: Controller

描画が分離していない処理とは 例えば以下となります。DOM の p エレメントを右に30px移動する処理です。(Haxe JQueryExtern を利用)

class View
{
	public function move(){
		var element = new JQuery("p");
		var positionLeft = element.position().left;
		element.css({left: positionLeft + 30});
	}
}

描画処理を分離すると以下のようになります。実データ(描画位置を示す positionLeft)は Model で持ち、データの加工も Model で行います。

class Model
{
	var positionLeft:Float;
	public function move(){
		positionLeft += 30;
	}
}

View は更新された内容を画面に反映するだけとなります。

class View
{
	public function setPosition(positionLeft:Float){
		new JQuery("p").css({left: positionLeft});
	}
}

Model から View へのデータ受け渡しは Controller を介して行います。Contoroller にて、Model 内どのデータに変更があったのか、あるいは View の どの表示更新を行えばよいか の判定を行うには enum を利用すると便利です。

例えば Model を以下のようにします。「どの変更があったのか」「変更されたデータは何であるか」を enum に設定します。

enum Event
{
	NONE;
	MOVE(positionLeft:Float);
}
class Model
{
	private var event:Event;
	public function getEvent():Event
	{
		var n = event;
		event = Event.NONE;
		return n;
	}

	var positionLeft:Float;
	public function new(){
		event = Event.NONE;
	}
	public function move()
	{
		positionLeft += 30;
		event = Event.MOVE(positionLeft);
	}
}

Controller は以下のようにします。Controller の update メソッドは随時呼び出されます。

class Controller
{
	private var model:Model;
	private var view:View;

	...初期化処理 略...

	public function update(){
		switch(model.getEvent())
		{
			case Event.NONE: return;
			case Event.MOVE(positionLeft): view.setPosition(positionLeft);
		}
	}
}

今回 Showcase 用に作成した、Display.hx, Operator.hx, Transmitter.hx は上記 Model, View, Controller の形式で作成されています。

描画分離と Haxe

今回は HTML/JQuery で UI を作成しましたが、Flash Player ターゲットでも、HTML5 Canvas ターゲットでも、その他 Haxe が対応している言語であるならば何にでも Model をソースコードそのままで利用できます。出力ターゲットを変更するには、View の内容を変更すれば良しとなります。これがクロスプラットフォーム言語の面白いところでしょうか。

私は、ブラウザミニゲームは何の出力ターゲットで作ったらよいかなあ、と悩む事がありますが、先に Model だけ先行して作成してしまう、という開発手法も採る事ができ 少々悩みの種がとれたりします。

出力ターゲットを切り替えてのテスト

Haxe 用 UnitTest ライブラリの MassiveUnit では、JavaScript ターゲットや Flash Player ターゲット出力の場合 テストはブラウザを介す事で実行され、テスト結果はブラウザに表示されます。
ブラウザ表示により、テスト結果が html で色分けされて表示されるのはとても見やすい一方、テストの度にアプリケーションがブラウザに切り替わるのはやや面倒な場合もあります。

ここで、Model はどの環境でも利用できるという性質から、ブラウザを介す必要のないターゲット(neko等)でテストを行ってしまう方法が採れます。

コマンドラインツールの同梱している IDE(IntelliJ IDEA の Terminal 機能等)を用いる事で、JavaScript ターゲットのソースコード開発を行いながら テストは Terminal の neko ターゲットで行う、といった具合に、ロジック部分はブラウザ無しでの開発手法が可能です。(出力ターゲットによっては処理結果が異なる場合があるので、その点は注意が必要です。)


[ FLASH ] [ tips ] 2016年05月09日 19:30 | コメント (0) | トラックバック

FLASH FLASH tips Haxe: Photoshop 自動画像アセット生成機能の拡張子記述の手間を省く拡張パネル GenerativeLayerRenaming を公開

Photoshop CC 用拡張パネル GenerativeLayerRenaming を公開しました。Haxe で作成しています。

https://github.com/siratama/GenerativeLayerRenaming

Photoshop から画像出力を行う方法の一つとして、自動画像アセット生成機能があります。

https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

レイヤー名に画像拡張子を設定する事で、自動的にそのレイヤーが画像出力される、といった内容です。

しかしレイヤー名設定ルールはやや使い勝手が悪く、フォルダ分けして画像出力したい場合、絶対パスでレイヤー名を記述する必要があります。フォルダ構造が深いと記述するのは大変で、レイヤー名が長くなる事で見通しが悪くなり、フォルダ構造を変更したい場合 逐一手動でパスを記述しなおす必要が出てきます。

このわずらわしさを解決するために当拡張パネルを作成公開しました。

[ FLASH ] [ FLASH ] [ tips ] 2015年12月13日 21:35 | コメント (0) | トラックバック

FLASH tips Haxe(Adobe AIR or Flash) から GAFMedia を利用する

先日 GAFMedia のフリーライセンス版にて、待望の「Conversion sourceLibrary」機能が利用可能になりました。

これに伴い無料の環境にて、ようやく元来の Flash 制作そのままの流れで、複雑なタイムラインアニメーションを軽快にモバイル端末などで動作させることができます。(Flash Pro CC の料金は別)

当記事では GAF についての簡単な紹介と、Haxe(Adobe AIR or Flash) から利用するための設定方法を記述します。

GAF 説明

Stage3D と Starling

Flash(or Adobe AIR) には Stage3D という 3D 処理を行う機構が用意されています。Stage3D を利用する事で複雑な図形を軽快にモバイル端末で動作させることができます。しかし Stage3D をそのまま扱う事はたいへん難しく何らかのライブラリを通じて利用するのが一般的です。

Stage3D を扱うライブラリの一つに Starling というものがあります。Starling を利用する事で Stage3D 上に 2D の画像を容易に描画する事ができます。しかし Starling は単体の MovieClip を扱うだけならば十分でしたが、複数の MovieClip を組み合わせたアニメーションを表示するのが難しい状況でした。

GAF

http://gafmedia.com

Starling 単体では厳しい状況を解決すべく登場したのが GAF と呼ばれるライブラリとなります。GAF を利用する事で Flash タイムラインアニメーションほぼ全てをそのままに Starling 上で再生できるようになります。

当初は GAF の有効な機能を利用するには有料ライセンス契約が必要で、ここで多くの Flash コンテンツ開発者が足踏みしてしまう状況にありましたが、先日のアップデートでフリーライセンスでも GAF の多くの有効な機能を利用できるようになりました。まだ制限はありますが十二分な機能が用意されています。

当記事記述時に利用制限のある主だった内容は以下となります。
・読み込み画面で GAF のロゴを表示する必要がある
・タイムラインアニメーション上のサウンド再生はサポートされない
・コマンドラインツールが使えない
・儲けは 100K USD まで

Haxe から GAF を利用するための前準備

Haxe から GAF を利用するためには少々前準備を必要とします。

最新の GAF は Starling の他 Feathers という Starling 用 UI ライブラリを利用します。しかし Feathers 用 swc ファイルを Haxe から利用しようとしても動作してくれません。対処として、以下の URL 内情報を元に必要な swc を生成する必要があります。

 https://gist.github.com/tmskst/094d0808a817831181f9

上記 URL 内情報の補足説明を Windows の場合を例に以下に記述します。

compc コマンド実行設定: flex SDK 4.6 のダウンロード

build.bat 内 compc コマンドは flex SDK 内命令を利用するため flex SDK 4.6 をダウンロードします。

 flex SDK 4.6
 http://www.adobe.com/devnet/flex/flex-sdk-download.html

解凍した flex SDK フォルダを適当なディレクトリ(C:\Program Files\Adobe 内等)に配置し、Windows 環境変数設定の Path に flex SDK bin ディレクトリのパスを設定します。

git コマンドをプロンプトで実行可能に設定

Windows git インストール時の設定で、git コマンドをプロンプトで利用できるような設定にしておく必要があります。コマンドプロンプトで「git」を実行しても認識されない場合、再度 Windows git をインストールし中途の設定でコマンドプロンプトからの利用を有効化します。

 Windows git
 https://msysgit.github.io/

playerglobal14_0.swc をダウンロード

playerglobal14_0.swc は過去の FlashPlayer アーカイブページ内にあります。

 Playerglobal.swc アーカイブ(開発者向けライブラリ)
 https://helpx.adobe.com/jp/flash-player/kb/228683.html#id_4219

playerglobal14_0.swc よりも新しい swc ファイルを利用しても、当記事内サンプルは動作しましたが何か問題が発生するかもしれません。また playerglobal14_0.swc を利用しない場合 build.bat 内一部記述の書き換えを行う必要があります。

playerglobal14_0.swc を利用しない場合のバッチファイル(build.bat)内記述変更

playerglobal14_0.swc を利用する場合、この項は無視してください。

・playerglobalXX_X のバージョンに合わせて -swf-version の数値を変更
「swf-version」で Web上を検索すると FlashPlayer 各バージョンに対する swf-version 数値が見つかります。例えば playerglobal17_0.swc(FlashPlayer17)の場合 -swf-version は 28 に設定します。

・playerglobal14_0.swc の記述を playerglobalXX_X.swc に変更

build.bat 実行はコマンドプロンプトから

build.bat をダブルクリックしても動作しない場合、コマンドプロンプトから build.bat を実行します。

Flash Pro CC 拡張パネル FlashToHaxeConverter

インストールしておくと便利な拡張パネル FlashToHaxeConverter の説明です。

Action Script 3.0 での Flash コンテンツ開発時、swc というファイルを利用する事で、Action Script 用 エディタの多くは 読み込み対象 swf 内の以下の情報を知ることができます。

・リンケージ設定した MovieClip
・リンケージ設定した MovieClip 内に定義されている MovieClip プロパティ名

しかし Haxe 用エディタは swc ファイルを利用しても、swf 内クラス構造を知ることができません。この問題を解決するために FlashToHaxeConverter という Flash Pro CC 用拡張パネルを利用します。

 https://github.com/siratama/Flash-To-Haxe-Converter

インストール方法は URL 先の情報をご確認ください。独自配布の拡張パネルをインストールするには専用のコマンドラインツールが必要となっています。

GAFConverter

fla ファイルから出力した swf を GAF 用データに変換するためには GAFConverter を利用します。

 GAFMedia download page
 http://gafmedia.com/downloads

GAFConverter を Free ライセンスで利用するには GAFMedia Web サイトでユーザ登録を行います。ユーザ登録を行わないと Free ライセンスよりも機能が制限された状態になってしまいます。

設定

リンケージ設定した全ての MovieClip をスクリプトから操作するために、GAFConverter には以下の設定をしておく必要があります。

Conversion mode: nesting
Conversion source: Library にチェック

「Conversion mode: nesting」は、入れ子状態の MovieClip を Script から取得可能にするための設定です。
「Conversion source: Library」は、リンケージ設定を行った MovieClip を GAF 用に変換するための設定となります。

Haxe から GAF を利用したサンプルプロジェクト

Haxe から GAF を利用したサンプルプロジェクトファイル一式は以下に配置しています。

 https://github.com/siratama/HaxeSampleUsingGAF

ファイルディレクトリ構成
├ deploy/
│ ├ main.swf
│ ├ view.swf --- 素材 swf ファイル
│ └ view.zip --- view.swf を GAFConverter で変換したファイル
│
├ fla/
│ ├ view.fla --- 素材 fla ファイル
│ └ powered_by_GAF.fla --- GAF ロゴファイル
│
├ lib/ --- build.bat 実行後に生成された各 swc, patch ファイルを配置
│
├ src/
│ ├ app/ --- メイン処理
│ ├ extern/
│ │  ├ com/ --- GAF 用 extern ファイル配置
│ │  ├ feathers/ --- build.bat から出力された Feathers 用 extern ファイル
│ │  └ starling/ --- build.bat から出力された Starling 用 extern ファイル
│ └ extern_fla/ --- FlashToHaxeConverter から出力した view.fla 内クラス構造
│
├ compile.hxml --- コンパイル用ファイル
作業の流れ

当サンプルプロジェクトでの実際に行った作業の流れは だいたい以下のようになります。

・前準備(build.bat 実行)で生成した各ファイルを lib, src/extern ディレクトリに配置
・fla/view.fla ファイルを編集
 ・アニメーションやレイアウト用 MovieClip を作成
 ・スクリプトで操作する対象の MovieClip にリンケージ設定
 ・FlashToHaxeConverter で hx ファイルを src/extern_fla に出力
 ・パブリッシュで deploy/view.swf を出力

・GAFConverter で deploy/view.swf を deploy/view.zip に変換
・src/app/ 内にメイン処理作成
 ・src/extern/com/ 内に必要な GAF 用 extern ファイルを随時作成

・compile.hxml でコンパイル
・出力された deploy/main.swf を実行

GAF-Starling API 用 extern ファイルはサンプル内で使用する最小必要源のものしか用意していません。利用したいプロパティ・メソッド・クラスがない場合、随時 自ら追加します。あるいは有志の方が GAF 用 extern ファイルを全て作成してくれるのを待ちます。

 GAF-Starling API
 http://gafmedia.com/docs/starling/trunk/index.html

ソースコード解説

メイン処理となる src/app/haxegame/Main.hx 内の処理の流れの大まかな解説です。

https://github.com/siratama/HaxeSampleUsingGAF/blob/master/src/app/haxegame/Main.hx

■Starling 用 初期設定

https://github.com/siratama/HaxeSampleUsingGAF/blob/master/src/app/haxegame/Main.hx#L46-L58

■GAFConverter で出力したデータ(view.zip)読み込みと変換

https://github.com/siratama/HaxeSampleUsingGAF/blob/master/src/app/haxegame/Main.hx#L59-L84

読み込み変換したデータは、GAFTimelinesManager クラスへ addGAFBundle メソッドを用いて追加しています。

GAFTimelinesManager.addGAFBundle(gafBundle);

FlashToHaxeConverter で生成したクラスファイルを利用する場合 必須の処理となります。詳細は後述します。

■レイヤー生成と fla 内 MovieClip を GAFMovieClip として生成し配置

https://github.com/siratama/HaxeSampleUsingGAF/blob/master/src/app/haxegame/Main.hx#L87-L116

FlashToHaxeConverter で出力したクラスファイルを new する事で、fla ファイル内で作成した MovieClip を GAFMovieClip として生成できます。プレイヤー用 MovieClip と レイアウト用 MovieClip を生成しています。
たくさん trace 文を記述していますが、これはレイアウト用 MovieClip 内に配置した入れ子状態の MovieClip が GAF にて正常に認識されているか検証しているだけなので無視してください。

■再生

https://github.com/siratama/HaxeSampleUsingGAF/blob/master/src/app/haxegame/Main.hx#L119-L128

FlashToHaxeConverter 用 Haxe スクリプト設定

FlashToHaxeConverter から出力された GAF 用 クラスファイルには、例えば以下の様な記述が行われます。

例)
https://github.com/siratama/HaxeSampleUsingGAF/blob/master/src/extern_fla/gaf/haxegame/player/WalkViewMovieClip.hx

package haxegame.player;
import com.catalystapps.gaf.display.GAFMovieClip;
import com.catalystapps.gaf.core.GAFTimelinesManager;
abstract WalkViewMovieClip(GAFMovieClip){
    public function new()
        this = GAFTimelinesManager.getGAFMovieClip('view', 'haxegame.player.WalkViewMovieClip');
    @:to public function getInstance():GAFMovieClip
        return this;
}

new メソッド内で、GAFTimelinesManager.getGAFMovieClip メソッドを用い GAFMovieClip を生成しています。

よって事前に、読み込み変換した view.zip を GAFTimelineManager.addGAFBundle メソッドにて追加しておく必要があります。

おわりに

今回のフリーライセンスでの機能解放により、私のような無料ゲームを作成している個人開発者でも、気軽に GAF の利用が可能になりました。Action Script 3.0 にて Adobe AIR アプリの効率のよい開発手法を模索されている方は、一度 Haxe からの GAF 利用を試してみてはいかがでしょうか。

[ FLASH ] [ tips ] 2015年08月14日 23:01 | コメント (0) | トラックバック

FLASH FLASH tips Haxe: クラスインスタンスを Serializer にて文字列に変換し、クラスの構造変更後に Unserializer でインスタンスの復元は可能かのテスト

ゲーム制作でのデータ保存処理周りで、動作が不明な箇所があったため、記事タイトル内容の検証を行いました。

クラスインスタンス検証

検証手順

(1)以下の様な gold を保持するための Record クラスがあるとする

class Record{
	public var gold(default, null):Int;
	public function new(){}
}

(2)Record インスタンスを Serializer で文字列化
(3)文字列化したデータを Flash の場合 SharedObject, JavaScript の場合 Cookie などに記録

(4)Record クラスの内容を以下のように変更してコンパイル

//メンバ変数増加
class Record{
	public var gold(default, null):Int;
	public var experience(default, null):Int;
	public function new(){}
}

あるいは以下のように何もメンバ変数がない状態にしてコンパイル

//メンバ変数削減
class Record{
	public function new(){}
}

(5) (3)で保存していた文字列データを取り出す
(6) Unserializer で Record クラスインスタンスの復元は可能かどうか検証

結果

■ JavaScript ターゲット
メンバ変数増減に関わらず復元可能

■ Flash ターゲット
メンバ変数増加: 復元可能
メンバ変数減少: 復元不可能(Unserializer でエラー)

typedef インスタンス検証

クラスインスタンスだけではなく typedef インスタンスの検証も行いました。

typedef Record = {
	var gold:Int;
}

結論としては JavaScript, Flash ターゲット共に、メンバ変数増減に関わらず typedef インスタンスは復元可能でした。

変数をまとめて丸ごと保存したい場合、typedef を利用するのが無難でしょうか?

[ FLASH ] [ FLASH ] [ tips ] 2015年07月22日 19:32 | コメント (0) | トラックバック

FLASH tips update Haxe: 角のない 1px の外枠線を描く Photoshop CC 拡張パネル PixelOutline を公開

角のない 1px の外枠線を描く Photoshop CC 拡張パネル PixelOutline を公開しました。Haxe で制作を行っています。

https://github.com/siratama/PixelOutline

ドット絵制作を行っていると、図に対し 1px の角のない外枠線を引く場面がちょくちょく出てきます。範囲選択ツールなどを用いる事で 1px 外枠線を引く事は可能ですが、微妙に手順が面倒なため、今回の拡張機能を制作しました。

先日公開した PaletteChange よりも内容はとてもシンプルなので、ソースコードも見やすくなっていると思います。Haxe での拡張パネル制作に興味のある方は github の方をご確認ください。

注意点

Adobe による Extension Manager の開発/メンテナンスが終了したことにより、Adobe Extension Manager による拡張機能のインストールが行えなくなりました。かわりに、Extension Manager Command Line tool というものを利用して、拡張機能をインストールする必要があります。
ユーザは少々面倒な作業を行わなくてはインストールができず、あまりよろしくない状況です。 Adobe Add-ons のサイトに拡張機能を登録すれば、このやや面倒なインストール作業は避ける事ができるので、不具合がなくなり安定した頃に登録したいと思います。

その他 メモ

Extension Manager Command Line tool (ExManCmd) :英語
https://www.adobeexchange.com/resources/28
Windows の場合、ExManCmd.exe と同ディレクトリに zxp ファイルを配置し、コマンドプロンプトで ExManCmd.exe 配置ディレクトリに移動後、「ExManCmd.exe /install PixelOutline.zxp」と入力する事でインストールが可能。

Extension Manager サポート終了のお知らせ :日本語情報
https://helpx.adobe.com/jp/creative-cloud/kb/cq06221550.html

Adobe Labs のページからダウンロード可能な、Windows用 Adobe Extension Builder 3 並びに CC Extension Signing Toolkit(ZXPSignCmd.exe) はタイムスタンプ認証エラーが発生し zxp ファイルを制作する事はできない。修正が行われた ZXPSignCmd.exe は github 上からダウンロード可能。修正が行われた Adobe Extension Builder 3 は当記事執筆時はおそらく存在せず。
https://github.com/Adobe-CEP/CEP-Resources

[ FLASH ] [ tips ] [ update ] 2015年07月20日 20:06 | コメント (0) | トラックバック

FLASH tips update Haxe: ドット絵製作者・ドット絵アニメーター向けの Photoshop CC 拡張パネル PaletteChange を公開

Photoshop ドット絵製作者・ドット絵アニメーター向けの、Photoshop CC 拡張パネル PaletteChange を公開しました。Haxe で制作を行っています。

https://github.com/siratama/PaletteChange/

PaletteChange を利用する事で、全てのレイヤーに対し、キャンバス内で使用されているパレットAの色を パレットBの色に塗り替える事ができます。

使用例紹介動画

主な用途

Photoshop のフレームアニメーション機能を用い、制作したアニメーションキャラクターに対して色違いのキャラクターを作りたい、という場合に利用できます。

例えば以下、左が元のアニメーションキャラクターで、右が PaletteChange を利用して着色を変更したアニメーションキャラクターです。

拡張パネルと Haxe

Adobe 製品は jsx または jsfl という JavaScript を記述する事で、任意の処理の自動化を行うことができます。更に拡張パネルを利用すると「jsx の実行結果を元に他の jsx を実行する」といった、jsx 単体では難しかった複雑な処理も可能になります。

Photoshop CC 以降の拡張パネルは html で作成するため、拡張パネルの制御も JavaScript で行います。拡張パネルと jsx(or jsfl) の関係は、例えば Web サイトの、クライアントとサーバの関係と同じようなイメージとなります。2つのプラットフォームをまたがって処理が実行されます。

拡張パネル制御、Photoshop 制御(jsx)、どちらも JavaScript で制御を行い、なおかつクロスプラットフォームプログラミングとなると、altJS として利用可能な Haxe が有用できます。
拡張パネルは、jsx の実行結果を文字列で受け取ります。jsx でどのような処理結果になったのかの判定と、処理結果に伴うデータの取得、いずれも Haxe の enum と Serializer/Unserializer が活躍してくれます。

 Haxe enum イベント監視例
 http://www.dango-itimi.com/blog/archives/2015/001227.html

PaletteChange のソースコードは github に公開しているので、Adobe 製品の拡張パネル制作での Haxe 利用に対し、興味を持たれたら御覧ください。

制作資料

andy hall: CEPスーパー メガ ガイド: HTML5+NODE.JSでADOBEのツールを拡張する

Photoshop JSX API Doc

Adobe Photoshop CC 自動化計画

拡張パネル・jsx 作成において つまずいた点などのメモ

Google+, twitter 等に書いたメモの箇条書きまとめです。

拡張パネル関連

Adobe CC 拡張パネルを開発するには、Extension Builder 3.0 ではなく Creative Cloud Extension Builder for Brackets を利用する方法もあり。ただし Brackets には zxp 形式の出力機能はなく、日本語ユーザ名だとエラーで機能せず。

---
Adobe Extension Builder にて Adobe CC 2014のデバッグを可能にする設定説明ページ内、Step2 にWindows用の設定の説明が抜けている点が注意。

 Adobe Extension Builder and Creative Cloud 2014

私の場合は以下の設定を行いました。

Service Manager Root Folder
C:\Program Files (x86)\Common Files\Adobe\CEP

User-specific Service Manager Root Folder
C:\Users\UserName\AppData\Roaming\Adobe\CEP

---
拡張パネル上では、ネット上からダウンロードした jQuery v1.11.2 min版を使用しても機能してくれず。Adobe Extension Builder 3のプロジェクト生成時に付与される jquery.js(v1.9.1)ならば問題なく動作する。

---
http://aphall.com/2014/08/cep-5-tool-integration/

上記参考 URL には ScriptPath にフォルダを指定できるとありますが、それを行ってしまうと CSInterface.evalScript が呼び出せなくなってしまう模様。フォルダではなく単体の jsx 指定なら問題なし。

---
Haxe/JS Map.exists メソッドは、単体の jsx からの利用は問題無いが、拡張パネル経由で呼び出した jsx ではエラーが発生する。exists ではなく配列演算子でのアクセス map[n] ならば問題無し。ものすごく限定的なエラー。

---
拡張パネル evalScript 経由で jsx 内 Bool 値を取得すると "true" or "false" の文字列が返却される。

jsx 関連

Layers クラスは index メソッドを利用するとエラーに。layers[n]記述で子にアクセスする必要あり。Haxe extern 定義は ArrayAccess を利用する事。jQueryExtern の jQuery クラス参照。

 Layers index メソッド

 作成した Layers extern

Layers クラスと同じような、配列演算子によるアクセスが必要なクラスは他にも多い。

---
Selection.similar メソッドを呼び出すことで、指定座標のピクセルと同等の色を持つ全てのピクセルの選択が可能になる。自動選択ツールの[隣接]指定を解除した状態と同等の動作。

---
Adobe jsx では 数値+単位 を扱う UnitValue クラスオブジェクトでデータのやり取りが行われるようですが、adobe サイトからは詳細情報が見つからず。今のところ見つかったのが以下の URL。

 http://jongware.mit.edu/Js/pc_UnitValue.html

---
Photoshop jsx, $.evalFile での複数ファイル同時読み込みは行わないほうが良い模様?Haxe 出力のやや大きめのファイルを同時に読み込もうとしても、初めのファイルしか読み込んでくれないといった症状が発生。順次読み込みが無難。

---
Haxe の @:expose 指定による JavaScript 出力は jsx ではエラーとなるため、-D js-classic 指定と @:native 指定を活用する。

---
Haxe で -D js-classic 指定を行った jsx ファイルを複数読み込むと、グローバルで干渉しあうクラスが発生するためか、jsx ファイルが正常に動作しなくなる。@:keep 指定を利用し jsx ファイルは一つにまとめることで解決する。

---
Photoshop jsx, Layer.typename で対象レイヤーがレイヤーセットかどうかの判定が可能になりますが、公式(と思われる)ドキュメントには載っていない。

---
ピクセルの色を取得する ColorSampler.color プロパティは、ピクセルが透明の座標にアクセスするとエラーに。try catchでエラーを取得する事でしか透明判定ができない。

---
Haxe/JS try catch にて、catch(error:String) を行うと、出力 JavaScript 内に throw が記述されるが、jsx では throw 記述を行うとエラーになる。catch(error:Dynamic) にする事で catch 内で throw が記述される事がなくなる。

---
ドキュメント内ピクセルの色を一つ一つ取得する処理は、結構時間を要する。100x100ピクセルのドキュメントサイズでも数分以上かかる。jsx の実行途中で終了させる機能はなさそうなため、拡張パネル側から順次 jsx の処理を呼び出し、いつでも中断できるような機能を自前で用意する必要あり。

---
ColorSampler には不具合がある。解決方法は、抽出対象のピクセル座標に0.1を加える、という謎の方法。

Don't Trust PhotoShop's JavaScript ColorSampler

---
ColorSampler にて一度に抽出可能な色数には制限があり?一定値を超えると処理が止まる。随時 ColorSampler.remove を実行する事。

---
Document.activeLayer 周りの不具合と対処法:長くなったため別記事にしました。

Photoshop CC 2014: JSX Document.activeLayer の妙な挙動と対策

Photoshop CS6 用の拡張パネルを swf で作成するも CSXSInterface.instance が null を返す問題が解決できず。世のサンプルはどれも mxml ファイル(Flex)で作られており、素で生成した swf では作成できない?

---
Photoshop の タイムラインウインドウ フレームアニメーション の情報取得・操作を行う機能は標準APIにはない模様。ScriptListener から裏APIを調査する必要がありそう。

参考になりそうなjsx: Animation Exporter v1.5.jsx

---
C:\Users 配下に文字化けしたユーザ名が消しても消しても勝手に作られてしまい困っていましたが、Photoshop CC の Welcome 画面で「Hello 文字化けユーザ名!」と表示された事を確認。日本語ユーザ名のAdobeユーザは同じ症状の人が多いのだろうか。

---
Photoshop CC フレームタイムラインアニメーションでは、レイヤー結合後、結合したレイヤーが全てのフレームに表示されてしまう不具合がある。

Photoshop CC: Layer Merging Behavior with Timeline Animations (Bug?)

このエラーを回避するため、PaletteChange ではややスマートではない方法を採っている。

[ FLASH ] [ tips ] [ update ] 2015年05月31日 12:24 | コメント (0) | トラックバック

FLASH tips Photoshop CC 2014: JSX Document.activeLayer の妙な挙動と対策

Photoshop CC 2014 の自動化スクリプト JSX にて、現在選択されているレイヤーを示す Document.activeLayer 周りの処理がどうもおかしな動作になるため、その現象の報告と対処法をいくつか記述します。

前知識: レイヤー選択状態 三パターン

選択されているレイヤーを元に何か自動化処理を行いたい場合、「一つもレイヤーが選択されていない場合」と「レイヤーが複数選択されている場合」を考慮して JSX を作成する必要があります。

挙動

API Documentation: Document.activeLayer

公式の API ドキュメント Document.activeLayer の項には、「The selected layer.」と書かれていますが、実際は そうではない状況の以下が発生します。

(a)レイヤーが一つも選択されていない場合、Document.activeLayer は psd 内一番上の Layer or LayerSet を返却する

(b)レイヤーが一つも選択されていない状態で Document.activeLayer に任意の Layer インスタンスを設定しても、レイヤーが選択された状態にならない(不具合?)

(c)複数レイヤーが選択されている場合、Document.activeLayer は選択されているレイヤーのうち、一番上の Layer or LayerSet を返却する

単一のレイヤーのみ選択されているかどうかを知る方法

挙動(a)により、Document.activeLayer は必ずしも「選択されているレイヤー」を返却してくれません。
「単一のレイヤーのみ選択されているかどうか」を調べるには、『「レイヤーが一つも選択されていない」or「レイヤーが複数選択されている」場合に実行するとエラーが発生する処理』を用いる事で対処します。

もっと良い方法はあるかもしれませんが、例えば、選択範囲を拡張する命令 Selection.similar メソッドがエラーチェックに利用できます。

function isSelectedSingleLayer() {
	var selectedSingleLayer = true;
	var selection = app.activeDocument.selection;
	try{
		selection.deselect();
		var x = 0;
		var y = 0;
		selection.select([[x, y], [x+1, y], [x+1, y+1], [x, y+1]]);

		selection.similar(0, false);

	}catch(error){
		selectedSingleLayer = false;
	}
	selection.deselect();
	return selectedSingleLayer;
};

Selection.select, Selection.deselect 命令は「レイヤーが一つも選択されていない」or「レイヤーが複数選択されている」状態でも実行できます。一方、Selection.similar メソッドはエラーが発生します。(Selection.similar メソッド実行前には Selection.select メソッドを実行しないと別のエラーが発生します。)

強制的にレイヤーを一つだけ選択した状態にする方法

挙動(b)により、Document.activeLayer にどのレイヤーを設定しても、レイヤーが選択状態になってくれない状況が発生します。「単一のレイヤーのみ選択されているかどうかを知る方法」でアラートを表示して、ユーザに任意にレイヤーを選択してもらうのも良いですが、配布プラグインを作成する上では不親切になってしまう場合もあります。

対処策としまして、裏API を利用する方法があります。Photoshop ScriptListener というプラグインを用いる事で、Photoshop 内のあらゆる操作がどのような 裏API で実行されているのか調べることができます。

ScriptListener 調べでは、選択されたレイヤーを強制的に一つだけにする方法は以下となります。

function selectSingleLayer(layerName) {
	var idslct = charIDToTypeID("slct");
	var desc = new ActionDescriptor();
	var idnull = charIDToTypeID("null");
	var ref = new ActionReference();
	var idLyr = charIDToTypeID("Lyr ");
	ref.putName(idLyr,layerName);
	desc.putReference(idnull,ref);
	var idMkVs = charIDToTypeID("MkVs");
	desc.putBoolean(idMkVs,false);
	executeAction(idslct,desc,DialogModes.NO);
};

それぞれの行が何を行っているのか、API ドキュメントがないため詳しくはわかりません。Photoshop で何らかの操作をすると、一つの操作毎に上記 1ブロック程度の処理が実行されています。

不明点

以下が不明点となります。

・レイヤーが一つも選択されていない状態を知る方法
・レイヤーが複数選択されている状態を知る方法

裏API には恐らく「選択されているレイヤー数を取得する」方法がありそうです。必要に応じて調査したいと思います。

追記)
裏API に関しても、API DOC に記述されていました。
Photoshop JSX API Doc

[ FLASH ] [ tips ] 2015年05月30日 14:31 | コメント (0) | トラックバック

FLASH tips Haxe/JS: 非同期イベント監視に enum を使用: ブラウザにドラッグ&ドロップで画像を表示するサンプル

Haxe の enum 用途例です。
JavaScript ターゲット出力で、ブラウザにドラッグ&ドロップで画像を表示するサンプルを元に解説します。

資料

html への ドラッグ&ドロップで画像を表示する方法は、以下のサイトに解説があります。

JavaScript で File API を使用してファイルを読み取る
http://www.html5rocks.com/ja/tutorials/file/dndfiles/

上記内容を Haxe でもろもろアレンジした内容のソースコード一式は以下に配置しました。外部ライブラリには jQueryExtern を利用しています。
https://github.com/siratama/DragAndDropImageSample

動作サンプルは以下となります。画像ドラッグ&ドロップで表示。画像ファイル以外は alert が表示されます。
http://www.dango-itimi.com/blog/swf/215/

ドラッグ&ドロップするファイルはローカル PC 上で解析・表示が行われます。サーバにアップロードされるわけではないので適当なファイルを放り込んでも大丈夫です。

要所解説

メイン処理となる DragAndDropSample クラス の各所を切り取っての解説です。

初期設定
	private function initialize()
	{
		dropZone = new DropZone();
		imageFileReader = new ImageFileReader();
		imageViewer = new ImageViewer();

		mainFunction = observeDropZone;
		timer = new Timer(100);
		timer.run = run;
	}
	private function run()
	{
		mainFunction();
	}

initialize メソッドでは、各インスタンスの生成と監視用タイマーの設定を行っています。

各クラスは以下の役割があります。

DropZone --- ドラッグ&ドロップ範囲の定義とドラッグ&ドロップされたファイルの探知
ImageFileReader --- ドラッグ&ドロップされた画像ファイル読み込み
ImageViewer --- 読み込まれた画像ファイルを表示

mainFunction は Void->Void のメソッド型です。run メソッドにより mainFunction に設定されたメソッドが 定間隔で実行されます。

ドラッグ&ドロップの監視
	private function observeDropZone()
	{
		var event = dropZone.getEvent();
		switch(event)
		{
			case DropZoneEvent.NONE: return;

			case DropZoneEvent.DROP_FILE_ERROR(message):
				js.Lib.alert(message);

			case DropZoneEvent.DROPPED(file):
				initializeToReadImageFile(file);
		}
	}

observeDropZone は一定間隔ごとに run メソッドから実行されます。 DropZone.getEvent メソッドから event インスタンスを取得する事で、次の行動へ移行するかの判断を行います。 event は 以下の enum インスタンスとなります。

enum DropZoneEvent
{
	NONE;
	DROP_FILE_ERROR(message:String);
	DROPPED(file:File);
}

enum を受け取ることにより、何が起こったかの判断と、それぞれ起こったことに対するデータの取得が一括で行える点がポイントとなります。

ファイル読み込み・表示

ドラッグ&ドロップされたファイルを読み込み表示するまでの処理です。mainFunction の内容を observeToReadImageFile メソッドに変更する事で、次は observeToReadImageFile メソッドが定間隔で実行されるようになります。

	private function initializeToReadImageFile(file:File)
	{
		imageFileReader.start(file);
		mainFunction = observeToReadImageFile;
	}
	private function observeToReadImageFile()
	{
		var event = imageFileReader.getEvent();
		switch(event)
		{
			case ImageFileReaderEvent.NONE: return;

			case ImageFileReaderEvent.READ(data):
				imageViewer.show(data);
				mainFunction = observeDropZone;
		}	
	}

先ほどと同じように、ImageFileReader.getEvent メソッドから event を取得する事で、次の行動に移行するかの判断を行います。event インスタンスは以下の enum 定義となっています。

enum ImageFileReaderEvent
{
	NONE;
	READ(data:String);
}

何も読み込みが行われていない場合は NONE、読み込みが行われたら READ にそのデータが設定される、というシンプルな内容です。読み込みが行われた/行われなかったの正否判断(Bool相当)と、読み込みが行われたファイルのデータの取得が 一つとして扱える点がポイントとなります。

まとめ

ドラッグ&ドロップ・ファイル読み込み どちらも非同期処理となります。処理が終了するまでの状況をを監視し、状況を enum インスタンスで返却することで、とてもすっきりした処理作成が可能となります。

[ FLASH ] [ tips ] 2015年04月25日 11:38 | コメント (0) | トラックバック

FLASH tips Haxe + jQuery で外部 js ファイルを読み込むサンプル

HTML5 Canvas 用ゲーム制作などで JavaScript ファイル容量が大きくなってくると、任意のタイミングで js ファイルの読み込みを行いたい、という場合が出てきます。
今回の記事では Haxe + jQuery で 外部 js ファイルを読み込むサンプルを記述します。

ファイルディレクトリ構成

js ディレクトリ内 file1.js, file2.js, file3.js を外部読み込み対象とします。

├ index.html
└ js/
  ├ index.js --- Haxe から変換された外部 JavaScript ファイル読み込み処理用 js ファイル
  ├ file1.js --- 読み込み対象 js ファイル1
  ├ file2.js --- 読み込み対象 js ファイル2
  └ file3.js --- 読み込み対象 js ファイル3

読み込み対象 js ファイル

file1.js 内には、読み込みが完了した事を示すため以下の一行の記述を行っています。

console.log("file1 loaded");

file2.js, file3.js にもそれぞれ同様の記述を行っています。

index.html

index.html の内容は以下となります。

<html>
	<head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
        <script src="js/index.js"></script>
	</head>
	<body>
    </body>
</html>

Haxe から変換された index.js ファイル利用の旨の他、jQuery ライブラリファイルの利用の旨の記述も行っています。

Haxe ソースコード(index.js)

Haxe の処理は以下となります。js/index.js としてコンパイルします。

package;

import js.Lib;
import haxe.Timer;
import jQuery.JQuery;
import jQuery.JqXHR;

class JavaScriptFilesLoadingSampleUsingJQuery
{
	private static var JAVASCRIPT_FILE_NAME_SET = [
		"file1",
		"file2",
		"file3"
	];
	private static inline var JAVASCRIPT_DIRECTORY = "js/";
	private static inline var JAVASCRIPT_EXT = ".js";
	private static inline var TIMER_INTERAVL = 100; //millisecond

	private var mainFunction:Void->Void;
	private var loaded:Bool;
	private var timer:Timer;
	private var fileIndex:Int;

	public static function main(){
		new JavaScriptFilesLoadingSampleUsingJQuery();
	}
	public function new(){
		new JQuery(function(){ initialize(); });
	}
	private function initialize()
	{
		trace("start");
		fileIndex = 0;

		initializeToLoadJavascript();
		timer = new Timer(TIMER_INTERAVL);
		timer.run = run;
	}
	private function run(){
		mainFunction();
	}
	private function initializeToLoadJavascript()
	{
		loaded = false;
		var fileUri = JAVASCRIPT_DIRECTORY + JAVASCRIPT_FILE_NAME_SET[fileIndex] + JAVASCRIPT_EXT;
		JQuery._static.getScript(fileUri, function(script:String, status:String, jqxhr:JqXHR){
			loaded = true;
		});
		mainFunction = loadJavascript;
	}
	private function loadJavascript()
	{
		if(!loaded) return;

		fileIndex++;
		if(fileIndex < JAVASCRIPT_FILE_NAME_SET.length){
			initializeToLoadJavascript();
		}
		else{
			timer.stop();
			trace("finish");
		}
	}
}

実行・出力結果

index.html を開いた後の ブラウザ console.log 出力結果は以下となります。

start
file1 loaded
file2 loaded
file3 loaded
finish

[ FLASH ] [ tips ] 2015年02月20日 22:12 | コメント (0) | トラックバック

FLASH FLASH tips IntelliJ IDEA File Watchers: 監視対象ディレクトリ範囲は Scope で設定

IntelliJ IDEA の Plugin, File Watchers にて「監視対象ディレクトリ内に配置してはいるが、監視の対象からは外したいファイルディレクトリ」の設定方法です。

(1)
File Watchers の設定画面を開きます。以下の図は Haxe 用の設定となっています。図参考) IntelliJ IDEA: File Watchers で Haxe 自動コンパイル

デフォルトでは Scope 欄は「Project Files」という設定になっています。右側の[…]箇所を押す事で、監視対象の範囲変更ウインドウが開きます。

(2)
緑色の[+]から「my setting」という名前の新規設定を設けた後、監視対象から外したいディレクトリを選択します。

図では、「trunk/src/creatjs/haxegame/」「trunk/src/flash/」という二つのディレクトリを選択し、[Exclude Recursively(ディレクトリ内全てのファイルを対象)]ボタンを押して、監視対象から外しています。

以上で設定は完了です。

自作 Flash CC 用 JSFL "FlashToHaxeConverter" では、fla ファイルの内容によっては 大量の hx ファイルが出力されます。毎回の出力後、IntelliJ IDEA の File Watchers が一つ一つの hx ファイルに対し監視処理を実行し PC に負荷がかかってしまうのが悩みの種でしたが、Scope 設定を行うことで万事解決しました。

参考)
Intellij IDEAでSassとかを個別に自動コンパイルするメモ
http://blog.admage.jp/?p=1169

[ FLASH ] [ FLASH ] [ tips ] 2015年02月15日 10:56 | コメント (0) | トラックバック

FLASH FLASH tips Flash CC ビットマップの画質を PNG化 & スムージングOFF にする JSFL 公開

https://github.com/siratama/BitmapSmoothCut

Flash CC から psd 読み込み機能が縮小され、読み込まれた psd 画像は「スムージングあり」「jpeg画質」の状態となってライブラリに配置されます。

私は大量のドット絵アニメーションを Flash CC に読み込む事が多く、毎回 psd 読み込み後にプロパティウインドウから PNG化とスムージングOFF設定を行うのは面倒だと感じたため、当 JSFL を作成しました。Haxe 産です。

[ FLASH ] [ FLASH ] [ tips ] 2015年01月26日 23:20 | コメント (0) | トラックバック

FLASH FLASH tips 特定の条件で OpenFL swf assets 内 DisplayObject プロパティ値がおかしくなる不具合への対処

現在 OpenFL では 以下の(a)~(c)の条件がそろった時、DisplayObject の rotation, scaleX, scaleY 各値に異常が発生します。

(a) DisplayObject の scaleX or scaleY 値に特定の値を設定する
(b) (a)の DisplayObject に対し更に DisplayObject.transform.matrix にて変形を行う
(c) neko or cpp ターゲット出力を行う

以下の環境で不具合が発生する事を確認しています。

actuate: [1.7.5]
hxcpp: [3.1.39]
lime-tools: [1.5.7]
lime: [1.0.1]
openfl: [2.0.1]
swf: [1.5.2]

この問題に対する対処策としまして、OpenFL github に以下の方法(setMatrix メソッド)が挙げられています。

https://github.com/openfl/openfl/issues/341

以下引用

public function setMatrix(mtx:Matrix) {

    var sx = Math.sqrt(mtx.a * mtx.a + mtx.b * mtx.b);
    var sy = Math.sqrt(mtx.c * mtx.c + mtx.d * mtx.d);
    var r = Math.atan2(mtx.b, mtx.a) * 57.2957795130823;
    var signX = (mtx.a < 0 ? -1 : 1);
    var signY = (mtx.d < 0 ? -1 : 1);

    // use determinant to deal with improper rotations
    var det = mtx.a * mtx.d - mtx.b * mtx.c;
    if (det < 0) {
        if (signX < 0 || signY < 0) {
            sy *= -1;
        } 
    }

    this.x = mtx.tx;
    this.y = mtx.ty;
    this.scaleX = sx;
    this.scaleY = sy;
    this.rotation = r;
}

this は DisplayObject インスタンスを示します。この setMatrix メソッドを利用する事で、DisplayObject.transform.matrix プロパティに matrix 値を適用するのと同様の変形を行うことが可能になります。

OpenFL swf ライブラリへの対処

OpenFL swf ライブラリ内には DisplayObject.transform.matrix を利用して変形を行っている箇所があります。私が確認したのは三箇所で、その内の一箇所が原因で swf assets から取得した MovieClip.rotation 値がおかしい、という状況に遭遇しました。

修正対象ソースコードは format.swf.instance.MovieClip クラスとなります。私の Windows の環境では 以下に修正対象のソースコードが配置されています。

C:\HaxeToolkit\haxe\lib\swf\1,5,2\format\swf\instance\MovieClip.hx

修正手順は以下となります。

(1)setMatrix メソッドを追加

format.swf.instance.MovieClip 内に以下の setMatrix メソッドを追加します。

public function setMatrix(displayObject:DisplayObject, mtx:Matrix) {

	var sx = Math.sqrt(mtx.a * mtx.a + mtx.b * mtx.b);
	var sy = Math.sqrt(mtx.c * mtx.c + mtx.d * mtx.d);
	var r = Math.atan2(mtx.b, mtx.a) * 57.2957795130823;
	var signX = (mtx.a < 0 ? -1 : 1);
	var signY = (mtx.d < 0 ? -1 : 1);

	// use determinant to deal with improper rotations
	var det = mtx.a * mtx.d - mtx.b * mtx.c;
	if (det < 0) {
		if (signX < 0 || signY < 0) {
			sy *= -1;
		}
	}

	displayObject.x = mtx.tx;
	displayObject.y = mtx.ty;
	displayObject.scaleX = sx;
	displayObject.scaleY = sy;
	displayObject.rotation = r;
}
(2)DisplayObject.transform.matrix 利用箇所を修正

transform.matrix でソースコード内を検索すると DisplayObject.transform.matrix に対し matrix 値を適用している箇所が三箇所見つかるので、コメントアウトして setMatrix メソッドを利用するように変更します。

//displayObject.transform.matrix = matrix;
setMatrix(displayObject, matrix);
//mc.transform.matrix = mt;
setMatrix(mc, mt);

以上で修正は完了です。

[ FLASH ] [ FLASH ] [ tips ] 2014年10月13日 09:46 | コメント (0) | トラックバック

FLASH FLASH tips Nape: Box2D との異なる点のメモ

物理演算ライブラリ Nape において、Box2D とは異なる点・つまずいた点をメモします。ActionScript3.0 で利用できた Box2D v2.1a との比較となります。

「延々と同じ高さで跳ねる物体」を作るには Space.worldLinearDrag を 0 にする

Box2D では各物体に対する摩擦係数(friction)を0, 反発係数(restitution)を1 にすることで、延々とほぼ同じ高さで跳ねる物体を設定する事ができました。

Nape では空間に対してデフォルトで空気抵抗値のようなもの(Space.worldLinearDrag)が微量設定されており、この値を 0 にしないと「延々と同じ高さで跳ねる物体」を表現する事ができません。

space = new Space(gravity);
space.worldLinearDrag = 0;

 参考)
 Nape Space クラス
 http://napephys.com/docs/types/nape/space/Space.html

 Nape調査: すべての物体を完全弾性かつ抵抗は0に設定していても、ボールがゆっくり減速する?
 https://github.com/CreateSomethingWithStarling/HagiBreakout/issues/26

Box2D b2RevoluteJoint を Nape で再現するには複数 Joint を組み合わせる

Box2D b2RevoluteJoint とはどういう動作なのか、以下のサイトが参考になります。

 参考) b2RevoluteJointDef で回転ジョイントを作る
 http://flashjp.com/api/box2d_b2RevoluteJointDef.php

Nape では AngleJoint を利用すれば、b2RevoluteJoint と同じような事ができそうな事がわかります。b2RevoluteJoint と同じく回転角度の限界値を設定可能な jointMax, jointMin プロパティが用意されています。

 参考)Nape AngleJoint クラス
 http://napephys.com/docs/types/nape/constraint/AngleJoint.html

しかし AngleJoint では 物体をどこか座標にとどめておくことができないため、更に PivotJoint クラスを利用します。

まず Nape Joint サンプルページを見てみると、以下の様なソースコードがある事がわかります。

 参考) Nape Joint サンプルページ
 http://napephys.com/samples.html#swf-Constraints

Nape Joint サンプルページ内 Haxe ソースコード一部引用

var pin = new PivotJoint(space.world, body, body.position, Vec2.weak(0,0));

PivotJoint コンストラクタの第一引数に Space.world を指定する事で、空間内特定座標(body.position)に BodyType.DYNAMIC な物体(body)をピン止めするイメージとなります。

上記から、Box2D b2RevoluteJoint を Nape で表現するには以下の様なソースコードを記述すればよしとなります。

var pivotJoint = new PivotJoint(space.world, body, anchor1, anchor2);
space.constraints.add(pivotJoint);

var angleJoint = new AngleJoint(space.world, body, ANGLE_MAX, ANGLE_MIN);
space.constraints.add(angleJoint);
注意点: Body ローカル座標内 アンカーまでの距離に注意

言葉で説明するのは難しいですがメモ書きとして。
画面での見た目上 同じような Joint 設定でも、body を構成する物質のローカル座標位置や anchor までの距離によって回転速度が異なってきます。どうも回転速度がおかしいと思われる場合は、ローカル座標(0, 0) からアンカーまでの位置を調整すると解決するかもしれません。

その他メモ

・物体ピクセル移動では Body.position.add ではなく Body.position.addeq を利用すると良し

Body.position.add は加えた値を適用した Vec2 が返却されるだけ?なのに対し、Body.position.addeq は Body.position の値が直接書き換わる模様

・重力に逆らってピクセル移動する物質に、自由落下する物質が正面衝突すると、互いがピッタリと吸い付く妙な動作になる

衝突時のイベントを調査して、反射する等の処理を組み込む必要あり

・メモリに関して気になる記述
http://docs.tatsuya-koyama.com/dev-log/adobe-air-tools/
Adobe AIR 以外をターゲット(OpenFL等)にした時や、現在の Nape のバージョンでもそうなるかは不明

[ FLASH ] [ FLASH ] [ tips ] 2014年08月17日 14:36 | コメント (0) | トラックバック

FLASH GRAPHIC tips Haxe 産 ゲームZombieDelivery 公開 & OpenFL 開発メモ

Haxe と Flash Professional CC を利用して開発を行ったゲーム ZombieDelivery を公開しました。

http://www.deeg-entertainment.jp/zombie_delivery/

内容はとてもシンプルな仕分け系ゲームとなっています。Web(Flash, HTML5) / Android / iOS で遊べます。

それぞれのプラットフォームへは、以下の機構を利用して出力しています。

・Flash(Haxe)
・HTML5 Canvas(Haxe & CreateJS)
・Android(Haxe & OpenFL)
・iOS(Haxe & Adobe AIR)

入り口のみ異なるだけの、ゲームロジックはワンソースという、Haxe の変態機能もとい特性をふんだんに活かした内容となっています。

Adobe AIR や OpenFL はクロスプラットフォーム向けアプリケーションの出力が可能なのに、何故 色々な出力機構を選択しているのか、の理由としては以下が挙げられます。

・Flash
Flash コンテンツの再現が 100% 可能な Haxe のデフォルト機能である swf 出力機構を選択

・HTML5
OpenFL は HTML5 ターゲット出力が可能だが swf 内 MovieClip の 1フレーム目までしか表示できないため、Flash Professional CC の HTML5 Canvas ドキュメント出力 + CreateJS を選択

・Android
Adobe AIR の Android アプリではパフォーマンスが悪いため OpenFL を選択

・iOS
Windows でも ipa ファイルを作成可能&パフォーマンスが良い Adobe AIR を選択

開発メモ

twitter 等に記述したメモ書きを羅列していきます。

OpenFL

OpenFL は Android 2.3 端末以降が対象。

swf アニメーション再現度は 100% ではないため、規模が大きいプロジェクトでは 使用 MovieClip を一覧できる OpenFL アプリビューアを別途作成するとよさそう。

Flash Professional CC 内でマスクを設定した MovieClip を生成すると、Android 2.3 端末では非常にパフォーマンスが落ちるため なるべく利用は避ける必要あり。

OpenFL 2.0.0 では flash ターゲット出力にて openfl-bitfive タグ指定を行うとエラーが発生する。これを避けるために<haxelib name="openfl-bitfive" if=html5" /> と条件指定を行う必要あり。

OpenFL 2.0.0 では flash.* パッケージが openfl.* パッケージに移動されたが、いままでどおり flash.* パッケージ も利用可能。継続してクロスプラットフォームプログラミングを行うことができる。

OpenFL native 出力では DOMAIN という定数名を利用しているとコンパイルエラーが発生する。その他 C言語での予約語を変数名やパッケージ名に利用していると native 出力時にコンパイルエラーが発生する。

Haxe @:enum 変数に設定された値を利用する際、ただの cast ではなくきちんと cast() でくくってやらないと、出力ターゲットによっては値が正常に取得できないらしき動作を確認。

OpenFL での AdMob 表示は以下の方が公開されている拡張機能を利用
https://github.com/mkorman9/admob-openfl

Android ターゲットの OpenFL では、スプラッシュスクリーンはスクリプト側で表示制御が可能
http://www.openfl.org/forums/#!/general:preloader-screen-on-android

OpenFL + Nape + Neko 問題の対処策。
https://github.com/openfl/openfl/issues/158

OpenFL では画像が真っ黒化する不具合あり、条件は不明、ZombieDelivery でも端末によって真っ黒化を確認
http://www.openfl.org/forums/#!/bugs:android-black-random-black

その他 開発メモ

Adobe AIR iOS アプリ ApplicationVerificationFailed エラー対処策その1。Development 用 プロビジョニングファイルを用いたアプリを先に iPhone にインストールする事で、Distribution 用 プロビジョニングファイルを用いたアプリでエラーが発生しなくなる。

Google Play へベータ版の apk ファイルをアップロードして表示を確認したところ、対象端末をAndroid 2.3以降としているのに Android要件 1.6 と表示されてしまう。現状では仕様の模様。http://qiita.com/kagerou_ts/items/44fca04a4eda5f653bd7

Google Play のアルファ・ベータ版のテストは、Google+ のサークル機能を利用して第三者に配信できるためとても便利。

[ FLASH ] [ GRAPHIC ] [ tips ] 2014年06月05日 19:00 | コメント (0) | トラックバック

FLASH GRAPHIC tips 図解: Flashとはなんぞや? その他 関連技術(Adobe AIR, Haxe, OpenFL)について

Flash は終わったという声が挙がる一方、現場では使われ続けている Flash。第三者からすると何だかよくわからない。いったいこの「Flash」とは何なのか、簡単に図付きで説明します。

様々な Flash

主要ツール・ファイル

Flash を語る上で欠かせない主要ツール・ファイルは以下の三点です。

・オーサリングツール Flash Professional CC
・グラフィクス・サウンド・アニメーションデータ・スクリプトが一つに凝縮された swf ファイル
・swf ファイルを再生表示する Flash Player

swf ファイル

swf ファイル内には、グラフィクス・サウンド・アニメーション・スクリプト といった様々なデータがぎゅっと凝縮されています。

全てを一つの swf ファイル内に凝縮する事もできますし、それぞれバラバラに swf ファイルにする事もできます。よくある手法としましては、スクリプトのみ別に swf を作成します。そうすることで開発効率がアップします。

Flash Player

Internet Explorer, Google Chrome, Firefox, Opera, Safari といったブラウザには Flash Player というプラグインがインストールされています。「Flash Player」は省略されて「Flash」と呼ばれることがあります。

Flash Player は swf ファイルを読み込んで表示・再生します。ゲームや Web サイトで用いられています。「Flash ゲーム」「Flash サイト」等と呼ばれ、総称して「Flash コンテンツ」と呼ばれたりもします。

「Flash ゲーム」「Flash サイト」「Flash コンテンツ」はそれぞれ省略されて「Flash」と呼ばれることがあります。

Flash Professional CC

Flash Professional CC はオーサリングツールと呼ばれるソフトウェアです。Flash Professional CC に画像や音楽ファイルを読み込み、アニメーションを作成したりスクリプトを組み込んで動きをつけることが可能です。

作成したアニメーションデータは様々な形式に出力する事ができます。出力可能な形式の一つに swf ファイルがあります。

「Flash Professional CC」は省略されて「Flash」と呼ばれる事があります。

その Flash はどの Flash?

スマートフォンで禁止されたのは Flash Player

iOS では Flash Player はインストールできません。Android 4.4 以降でも Flash Player はサポートされなくなりました。これにより、iOS と Android 4.4 以降では swf ファイルを再生する事ができず、Flash コンテンツを表示する事ができなくなりました。

「スマートフォンでは Flash(Flash Player または Flash コンテンツ) はサポートされなくなった」と言えます。

Adobe AIR

ここで新たなソフトウェア Adobe AIR の説明を行います。

Adobe AIR を用いることにより、swf ファイルをあらゆるプラットフォーム向けアプリケーションに変換する事ができます。 iOSアプリ, Androidアプリ, Windowsアプリ 等々です。

Adobe AIR SDK は無料で公開されており、Flash Professional CC にはデフォルトで Adobe AIR が搭載されています。よって、「スマートフォンアプリは Flash(Flash Professional CC) で作ることができる」と言えます。

省略が原因で咬み合わない事が

「Flash」という単語が 色々な製品・場面・ものに対して呼ばれるようになっているのが現状です。

「それ Flash 使えば可能ですよ。」とあらゆるものをひっくるめて魔法の言葉のようにも使えるのは便利ですが、逆に「Flash はスマホで見れないのでは?」と思われてしまう事があるのが難点でもあります。

Flash にまつわる最近の技術

Flash Professional CC は アニメーション制作万能ツール

Flash Professional CC には swf ファイルの他に、動画出力・連番 png 出力・スプライトシート作成機能等が用意されています。Flash Professional CC で作成したアニメーションデータを他のツールに利用する事が可能です。
近年では HTML5 Canvas 用データの出力も可能になっています。これにより「Flash Professional CC で HTML5 Canvas コンテンツが作成可能」になりました。

Flash Professional CC からは WebGL 出力サポート予定もありますが、過去 予定されていたものが搭載されなかったことがあるため、どうなるかは不明です。

Haxe

最近私が最も利用している言語 Haxe に関してです。

Flash は Action Script というプログラミング言語を用いて制御を行います。
Haxe はあらゆる言語に変換可能なプログラミング言語で、Action Script に変換する事も可能です。また、Haxe から直接 swf ファイルを出力する事もできます。

Flash Professional CC から出力された 素材 swf ファイルと Haxe から出力された スクリプト swf ファイルを利用することにより、Action Script と同等の作業工程で Flash コンテンツを作成できます。

Haxe は Javascript にも変換可能です。前項で挙げた HTML5 Canvas は Javascript で制御するため「Flash Professional CC から出力された HTML5 Canvas 用のデータを、Haxe(Javascript)で操作する事ができる」と言えます。

Flash Professional CC とHaxe を利用する事で、「Flash コンテンツ」「HTML5 Canvas コンテンツ」両者を同時に制作できてしまうという、クロスプラットフォーム開発を行う事も可能です。

「ちょんまげゲーム」はこの同時制作モックアップ作品デモサイトとなっています。


http://www.deeg.jp/mage/

OpenFL

OpenFL は Adobe AIR に立ち位置は近いです。Haxe で記述して、あらゆるプラットフォーム(Windows, Mac, Linux, iOS, Android...)向けのアプリケーション制作が可能となります。

特徴の一つとしまして、swf ファイルを利用できるという点にあります。つまり以下の様な作業工程が可能です。

現在のところ OpenFL では swf アニメーションの再現度は 100% ではありません。swf アニメーションムービー再現度重視ならば Adobe AIR、処理速度重視なら OpenFL を選択するのがよさそうです。

終わりに

当記事を見て 世に言われている「Flash」とは何なのか、なんとなくでもわかっていただけたら幸いです。

結構端折って説明したため、疑問点などありましたらコメントをお気軽にどうぞ。以下のコメント欄の私の書き込みに「返信」をしていただくと、質問内容等が私に通知されます。

[ FLASH ] [ GRAPHIC ] [ tips ] 2014年05月25日 21:17 | コメント (0) | トラックバック

FLASH tips Haxe: Dynamic は typedef へキャスト

Haxe の Dynamic インスタンスにはどのような値も設定できます。

 参考: Haxe 動的型(Dynamic)
 http://haxe.org/ref/dynamic?lang=jp

どのような値も設定できるが故 バグを抱えやすく、使用は推奨されていません。しかしそれでも利用する場合がでてきます。

SharedObject.data プロパティ

Flash 制作ではお馴染みの、ゲームデータや設定を記録することが可能な SharedObject クラスというものがあります。SharedObject は OpenFL でも利用できます。

SharedObject クラスには、開発者が任意のデータを設定できる Dynamic 型の data プロパティが設けられています。例えば以下のように利用します。

var sharedObject:SharedObject = SharedObject.getLocal("key");
sharedObject.data.testString = "aaa"; //データ設定

var testString = sharedObject.data.testString; //データ取得
trace(testString); //aaa

ここで以下のような問題が発生します。

プロパティ名をタイポしてもコンパイルエラーにならない

sharedObject.data.testString の testString という文字をタイポして textString としてもコンパイルエラーになってくれません。

sharedObject.data.testString = "aaa";
var testString = sharedObject.data.textString; //typo
trace(testString); //null
エディタの補完が効かない

sharedObject.data.testString の testString というプロパティ名を別の何かに変更したい場合、sharedObject.data.testString と記述している箇所を全て手動で変更する必要があります。Refactor Rename コマンドで一括で変換する事ができず、仮に修正漏れがあったとしてもコンパイルエラーとならないため不具合をかかえる原因となります。

typedef で対処

上記問題の対処としまして以下の様な typedef を定義します。

typedef SharedObjectData = {
	var testString:String;
}

sharedObject.data を以下のようにキャスト後、testString を設定します。

var sharedObjectData:SharedObjectData = cast sharedObject.data;
sharedObjectData.testString = "aaa";

データを取り出す場合も同じくキャストします。

var sharedObjectData:SharedObjectData = cast sharedObject.data;
var testString = sharedObjectData.testString;
trace(testString); //aaa

エディタのコード補完も効くようになりますし、testString を Rename コマンドで変更した場合、全ての使用箇所で testString プロパティが別名に変更されます。testString を textString とタイポするとコンパイルエラーが発生します。

保存したいデータ種別を増やしたい場合、SharedObjectData 内にプロパティを追加していけば良しとなります。

typedef SharedObjectData = {
	var testString:String;
	var testInt:Int;
	var mySaveData:MySaveData;
	…
}

 Try Haxe: 実際に動作するサンプル
 http://try.haxe.org/#351a5

今回の例の場合は cast 記述は無くてもよいようです。(無い方がよい?)

 参考: Haxe 高度な型
 http://haxe.org/ref/type_advanced?lang=jp

[ FLASH ] [ tips ] 2014年05月13日 17:10 | コメント (0) | トラックバック

FLASH GRAPHIC tips update Haxe で作成した Flash & HTML5 ミニゲームサイト「ちょんまげゲーム」公開中

Haxe で作成した Flash & HTML5 ミニゲームサイト「ちょんまげゲーム」公開中です。HTML5 版はスマートフォンでも遊べます。

http://www.deeg.jp/mage/

ちょんまげゲームでは主に以下の二通りのゲームがあります。

・神経衰弱やブロック崩しといった 簡単なミニゲーム
・脱出系ゲーム

ミニゲームは、試しに作ってみたゲームに最低限のグラフィクスや演出を加えた内容となっています。Google Play Game Services により ゲーム結果ランキング登録が可能なため、多少遊べるものにはなっているかと思います。
脱出系ゲームはストーリー仕立てで そこそこ凝った内容となっています。専用の BGM もいくつか作成しており、後にミュージックボックス的にどこかページを設けたいところです。

ゲームピックアップ

おむすびデリバリー

最新ミニゲームです。物理演算ライブラリ Nape を初めて利用してみました。

カラクリ城からの脱出 2F

物理演算ライブラリ Box2D + 脱出系要素を取り入れたゲームです。ちょんまげさむらいを操ってカラクリ城からの脱出を目指します。

とある仕事人の一日

オーソドックスな脱出系ゲームです。カラクリ祭の裏で起こった とある仕事人の脱出劇となります。

使用技術

ちょんまげゲームは、昨年調査した内容を実践したサイトとなります。

・Haxe によるクロスプラットフォームプログラミング(Flash & HTML5 canvas)
・Flash コンテンツ開発工程に沿った CreateJS コンテンツ開発
・Toolkit for CreateJS(現 HTML5 canvas ドキュメント出力) と Haxe との連携
・Flash CC JSFL拡張機能 関連
・Google Play Game Servieces

上記全てに Haxe が関わっています。その他サイト構築としましては以下を利用しています。

・静的 HTMLサイト制作用 自作 Adobe AIR 製アプリケーション
・一部に Google App Engine/Python

静的 HTML サイト制作用 AIR アプリは ActionScript3.0 で作成していますが、今後 Haxe に移植したいところです。

数値

Flash と HTML5 Canvas ゲームアクセス割合

脱出系ゲームは、特に国内で人気のあるジャンルで、公開後すぐに 1~2万人くらいの人が遊びにきてくれます。Flash と HTML5 Canvas ゲーム両方を公開して、どれくらい HTML5 Canavs 版がプレイされるのか調べてみたところ、一番アクセスの高いゲームでは以下のようになっています。(数値はページビュー)

 Flash : HTML5 = 60500 : 4500

だいたい 100人中 7人が HTML5 Canvas 版をプレイした事になります。iPhone 以外はデフォルトで Flash ゲームを表示するようにしているため、この数値が高いのか低いのかの参考にはならないかもしれません。

より多くの人に取りこぼし無く遊んでもらうために HTML5 Canvas ゲームも同時に制作するのはありだと思います。ただし、Flash 制作と同じ工程で同じものを作れるようになるまでには準備や学習に対するコストがかかります。また、HTML5 Canvas では表現が難しい or 制作が大変なものが多いです。
例えば、脱出ゲームの文字表示として利用している ビットマップフォント「美咲ゴシック」を表示するのは Flash では容易いですが、HTML5 Canvas では結構な労力を使います。他のビットマップフォントを表示してほしい、と言われたら別途表示する方法をゼロから考える必要がでてきたりします。

Google Play Game Services のログイン数

現在までのちょんまげゲームでの Google アカウントログイン ユニークユーザ数は、だいたい 1000人ほどです。
初めての脱出ゲーム制作後、何万人とアクセスされたものの、Google Play Game Services にログインしてまでプレイしてくれる人はほとんど無い状況でした。ログインする事によりゲームヒントがもらえるようにしてみたところ、少しずつログインしてくれる人が増えた形となります。
Google アカウントは多くの人が所持しているであろう事から、アカウントをゼロから作成してもらう手間は省けますが、それでもログインしてもらうには多くの工夫が必要となりそうです。

アプリ化

各脱出系ゲームは iPhone アプリ化も行っています。HTML5 Canvas で遊べるのだから、アプリ化する必要性はあまりないかもしれませんが、多少の流入を目的として制作しました。
Haxe で制作しているという事から、モバイルアプリ化には以下の選択肢があります。

 (a)Flash 版を Adobe AIR を介してアプリ化
 (b)Flash 版を OpenFL を介してアプリ化
 (c)HTML5 Canvas 版を WebView を利用してアプリ化(ガワネイティブ)

ちょんまげゲームの作業工程上 一番手間がかからない、という事から(c)を選択し Adobe AIR の StageWebView を利用してアプリ化しました。

Android に関しましては、Adobe AIR の StageWebView では以下の問題があるためアプリ化は見合わせています。

 CreateJS 製コンテンツを Android WebView で表示するも問題発生
 http://www.dango-itimi.com/blog/archives/2013/001197.html

[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2014年04月14日 19:00 | コメント (0) | トラックバック

FLASH FLASH tips update FlashToHaxeConverter 4.0.2 OpenFL 用出力不具合修正

FlashToHaxeConverter の OpenFL 用出力の不具合修正を行った ver 4.0.2 を公開しました。

https://github.com/siratama/Flash-To-Haxe-Converter

Flash CC のパブリッシュ設定にて、swf 出力先を fla ファイルと同一ディレクトリ以外に設定した場合、FlashToHaxeConverter から swf ファイル名を正常に取得できていなかったため修正しました。

swf ファイル名は OpenFL 用出力 hx ファイル内のコンストラクタの箇所で使われます。例えば、パブリッシュされる swf が assets.swf という名前の場合、以下の様なファイルが出力されます。

package sample;
import flash.display.MovieClip;
import flash.text.TextField;
import openfl.Assets;
abstract CircleView(MovieClip){
    public function new()
        this = Assets.getMovieClip('assets:sample.CircleView');
    @:to public function getInstance():MovieClip
        return this;
}

assets.swf ファイルが swf ディレクトリに配置されている場合、OpenFL の project.xml ファイルには以下の記述を行うことで、上記 CircleView クラスを利用する事が可能となります。

<library id="assets" path="swf/assets.swf" type="swf"/>
Assets.loadLibrary("assets", function(_){

	var circleView = new CircleView();
});

FlashToHaxeConverter の OpenFL 用出力は 半年以上前に制作し それ以降 利用していませんでしたが、swf 出力パスの問題以外はそのまま動作してくれて一安心です。

その他

最新の OpenFL 環境を構築したところ、Android NDK 64bit 版の場合 実行コマンドでエラーが発生する問題は解決していたようなので、以下の記事に追記を行いました。

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

OpenFL 制作にて懸念点であった Admob 表示をどうするか、に関しまして、拡張機能が以下で公開されているようなので、試してみたいと思います。

https://github.com/mkorman9/admob-openfl

[ FLASH ] [ FLASH ] [ tips ] [ update ] 2014年04月01日 12:43 | コメント (0) | トラックバック

FLASH TOOL tips IntelliJ IDEA 13: File Watchers: Output pathes to refresh

IntelliJ IDEA を 12 から 13 にアップグレードしてみたところ、自動化用プラグイン File Watchers の一番下の項目名が「Output pathes to refresh」となっているのに気づきました。

以前は「Output pathes」としか書かれておらず、何を記述すればよいのかわかりませんでしたが、「refresh」 の文字を見てピンと来ました。どうやら File Watchers の自動化処理実行後、この項目に設定したファイル or ディレクトリの更新(Synchronize コマンド)が行われるようです。

使用例

IntelliJ IDEA には html の Live Preview を行うための Live Edit というプラグインがあります。html や css, javascript の修正を行うと、即座にブラウザ(Google Chrome)内に変更が反映されます。

 参考)PhpStorm の Live Edit
 http://blog.jetbrains.com/jp/2013/09/12/170

しかし、File Watchers により、Sass(scssファイル)から css ファイルを出力した場合、Live Edit は css ファイルの変更を感知してくれません。出力された css ファイルを配置しているディレクトリを Synchronize コマンドで更新する必要があります。

これでは面倒なので、はじめに載せた図にあるとおり、Output paths to refresh の項目を設定します。すると、scss → css ファイル出力後 css ファイルを配置したディレクトリの更新が自動的になされ、Live Edit は css 変更を探知し、ブラウザに変更が反映されるようになります。

[ FLASH ] [ TOOL ] [ tips ] 2014年03月12日 23:16 | コメント (0) | トラックバック

FLASH tips update Flash CC のシンボル内データを 物理演算ライブラリ用に抽出する Haxe ライブラリ FlashToPhysicsObjectParser を公開

Flash CC のシンボル内データ(x, y, width, height, rotation, vertices)を 物理演算ライブラリ用に抽出する Haxe ライブラリ FlashToPhysicsObjectParser を公開しました。

https://github.com/siratama/FlashToPhysicsObjectParser

ドキュメントは日本語と英語を別々に用意しています。

特徴

以下ドキュメントより抜粋

■ 匿名シンボルの解析

プロパティ名を設定したシンボルの他、プロパティ名を設定していない匿名シンボルの解析も行えます。ゲームの障害物といった、スクリプト操作を行う必要のない ただ配置するだけの静的なオブジェクト等に利用できます。

■ HTML5 Canvas ドキュメントから出力されたデータの解析

swf の他、やや独特なフォーマットの HTML5 Canvas 用出力データ(CreateJS用データ)の解析を行えます。

FlashToBox2dConverter との違い

以前作成した「Flash CC 内シンボルを Box2D オブジェクトに変換するライブラリ」は独自ルールが多く、また Box2D と強く結びついてしまっており他の物理演算エンジン(Nape等)で扱えないという難点もありました。

よって今回作成したライブラリは、コンパクトに、尚且つ独自ルールはほぼ皆無の、2D物理演算ライブラリで汎用的に利用できる内容にしました。気軽に扱えるよう、ドキュメントは みっちり記述しています。

[ FLASH ] [ tips ] [ update ] 2014年03月09日 19:03 | コメント (0) | トラックバック

FLASH tips update FlashToHaxeConverter 4.0.1 不具合修正

FlashToHaxeConverter の各不具合を修正した ver4.0.1 を公開しました。

https://github.com/siratama/Flash-To-Haxe-Converter

不具合修正内容

■ 拡張パネル(zxp)版・ダイアログ版 両方

・HTML5 Canvas ドキュメントで FlashToHaxeConverter を実行すると無限ループエラーになってしまう不具合を修正

Flash のドキュメント形式が、AS3 と HTML5 Canvas とで別れてしまったことにより発生してしまった不具合でした。 今回の修正により、HTML5 Canvas ドキュメントでは OpenFL 用 hx ファイル出力は不可となりました。

■ 拡張パネル(zxp)版

・ドキュメントファイルを切り替えると fla ファイルに変更がかかったものとして扱われてしまう不具合を修正

・複数のドキュメントを素早く切り替えると テキストフィールドに 他のドキュメントの値が設定されてしまう不具合を修正

残る不具合

fla ファイルを開いた際、あるいは複数 fla ファイルを開いてドキュメントを切り替えた際、FlashToHaxeConverter テキストフィールド欄が空になってしまう不具合を確認しています。どうも fla ファイルに記録している FlashToHaxeConverter 用データが読み込めない場合があるようです。発生条件がわからず修正ができない状況です。

こちらの PC では 拡張機能書き出し後 Flash CC 自体が不安定になる事があり(フリーズ寸前になる)、それが何らかの原因となっているのか、あるいは Haxe から出力された Javascript ファイル内の何か記述が悪さをしているのか、もしくは単純にプログラミングのミスなのか。原因が判明次第修正したいと思います。

[ FLASH ] [ tips ] [ update ] 2014年03月07日 19:35 | コメント (0) | トラックバック

FLASH tips Haxe ジェネリック関数 Generic functions を使ってみた

Haxe のジェネリック関数というものを利用してみました。利用してみたのは初めてに近いので、使用方法が誤っていたり もしくはもっと良い利用方法があるかもしれません。

まず以下の様な Polygon クラスがあるとします。

#if js
import createjs.easeljs.Point;
#else
import flash.geom.Point;
#end

class Polygon {

	private var vertices:Array<Point>;

	public function new(){

		vertices = [
			new Point(0, 0),
			new Point(10, 0),
			new Point(10, 10),
			new Point(0, 10)
		];
	}
}

Polygon クラス内には、頂点座標 Point クラスの配列 vertices があります。Point クラスは、AS3 あるいは CreateJS のクラスです。

ここで、物理演算ライブラリ Box2D や Nape から上記 Polygon.vertices の座標情報を利用したい場合、Point クラスを B2Vec2 クラス(Box2D)、あるいは Vec2 クラス(Nape)に変換する必要が出てきます。

まずは深く考えず、以下の様なメソッドを Polygon クラス内に設けるとします。

	public function convertVerticesToB2Vec2():Array<B2Vec2>{

		return [
			for(vertex in vertices) new B2Vec2(vertex.x, vertex.y)
		];
	}
	public function convertVerticesToVec2():Array<Vec2>{

		return [
			for(vertex in vertices) new Vec2(vertex.x, vertex.y)
		];
	}

上記二つのメソッドの難点としましては、Polygon クラス内に Box2D と Nape の専用のクラスが記述されてしまっているという点にあります。例えば Box2D のみ利用したいのに Nape のクラスファイルもインポートしなくてはならない、という事態が発生してしまいます。

この問題を解決するために、convertVerticesToB2Vec2 と convertVerticesToVec2 は削除し、以下の様なメソッドに変更します。

	public function convertVertices<T>(convertedClass:Class<T>):Array<T>{

		return [
			for(vertex in vertices) Type.createInstance(convertedClass, [vertex.x, vertex.y])
		];
	}

これにより以下のように利用できます。

var polygon = new Polygon();
var vertices = polygon.convertVertices(B2Vec2); //Box2D
//var vertices = polygon.convertVertices(Vec2); //Nape

Polygon クラスを利用する側で、Box2D あるいは Nape といったライブラリのインポートを選択できるようになります。

しかして上記 convertVertices メソッドは、Array や String クラスを指定する事もできてしまいます。Int を指定するとコンパイルエラーになります。

var polygon = new Polygon();
polygon.convertVertices(Array); //ok
polygon.convertVertices(String); //ok
polygon.convertVertices(Int); //error

本来は String クラスのコンストラクタ第二引数は指定できませんが、Type.createInstance 経由ですと指定可能となってしまうようです(第二引数は破棄されます)。

Type.createInstance 前にコンパイルエラーチェックはできないかと考えた所、以下の記述でいけました。


	@:generic public function convertVertices<T:{function new(x:Float, y:Float):Void;}>(convertedClass:Class<T>):Array<T>{

		return [
			for(vertex in vertices) Type.createInstance(convertedClass, [vertex.x, vertex.y])
		];
	}

これにより convertVertices には、「コンストラクタ引数に 二つの Float 型を指定するクラス」のみ指定が可能になります。(多分)

polygon.convertVertices(B2Vec2); //ok
polygon.convertVertices(Vec2); //ok
polygon.convertVertices(Array); //error
polygon.convertVertices(String); //error

@:generic 指定に関しましては以下のサイトの Generic functions の項で説明がありますが、難しい英単語が多くてよくわかっていません。

参考)Haxe 3 New Features
http://haxe.org/manual/haxe3/features

[ FLASH ] [ tips ] 2014年03月05日 19:36 | コメント (0) | トラックバック

FLASH tips Flash CC 拡張パネル版 FlashToHaxeConverter ver 4.0 公開

Flash CC 内構造を Haxe クラスに出力する、拡張パネル版 FlashToHaxeConverter ver 4.0 を公開しました。

 FlashToHaxeConverter 
 https://github.com/siratama/Flash-To-Haxe-Converter

今回のバージョンアップは、ツールの使い心地の向上を図っています。Haxe ファイル出力機能には変化はありません。

ダイアログタイプから 新しい拡張パネルタイプに変更

ダイアログ表示中は Flash CC が操作できないという難点があったため、パネルタイプのものに変更しました。パネルをどこかにドッキングさせておくことで、気軽に Haxe ファイル出力が可能となります。
また、インストール・アンインストールも簡単になりました。今後は zxp ファイルをダウンロード後実行するだけでインストールが可能です。(拡張機能インストールには別途 Adobe Extension Manager CC が必要です。)

jsfl 処理呼び出し分散化

処理行数などが多く負荷の高い jsfl を実行すると、Flash CC 本体がプチフリーズ化してしまう事があります。そして一定時間 Flash CC からの応答がないと警告ダイアログが表示されたりします。
これを防ぐために、jsfl 内処理を分散して呼び出すような作りに変更しました。(とはいえ、ライブラリ構造が結構複雑な fla ファイルですと、ライブラリ解析時 やはり微妙にプチフリーズしてしまいます。)

開発メモ

jsfl 処理呼び出し分散化は 作りが大変に

jsfl 処理呼び出し分散化を行いたい場合、今までの AS3 で作成していた拡張機能制作よりも、おそらく作るのは大変になっています。

AS3 からは jsfl API を呼び出したら即戻り値を取得する事ができました。しかし今回の HTML と javascript で制作可能な新しい拡張機能では、jsfl API の呼び出し結果を コールバック関数経由で取得する必要があります。直に結果を取得できないため、それだけ作りが複雑になってしまいます。

Twitterメモ

Twitter でメモ書きした内容を以下につらつらと。

Flash CC 拡張機能パネルにて、jQuery の slideUp といったアニメーション系の命令はユーザの何らかの画面操作をトリガーとしないと発動されない模様?素で呼び出しても動作しません。

Flash CC 拡張パネルのテキストフィールド内にフォーカスがある状態で、直に Flash のステージ上をクリックすると、フォーカスは外れるものの javascript の change イベントは発動しません。テキストフィールド内文字列変更探知はタイマー等で監視する必要あり。

Haxe にて、Flash CC 拡張機能側から jsfl 内関数の戻り値を取得する際、Bool値が「Boolのようなクラス?」に変換されてしまう(事がある)。Serializer を利用してこの現象を回避する事に。

Flash CC 拡張パネルは Adobe AIR でも利用されている Webkit でレンダリングされている模様? CSSグラデーション設定は -webkit-linear-gradient を指定しないと有効になりませんでした。

[ FLASH ] [ tips ] 2014年02月23日 19:21 | コメント (0) | トラックバック

FLASH TOOL tips IntelliJ IDEA: File Watchers で Haxe 自動コンパイル

IntelliJ IDEA のプラグイン File Watchers を利用して、Haxe の自動コンパイルを行うためのメモです。

設定方法としましては、File Watchers インストール後、Project Settings から以下の図の設定を行うだけとなります。

File Watchers にはデフォルトで Haxe の項目はないので、図右上の + ボタンから custom を選択します。

Arguments 欄には hxml ファイルを指定し、Working directory 欄には hxml ファイルを配置しているディレクトリを指定します。Output paths 欄には何を設定すればよいのかよく分かっていません。

設定が問題なく行われた後 hx ファイルに変更がかかると、 hxml によるコンパイルが自動で行われます。

確認している現象としましては、ファイル修正が行われても File Watchers がうんともすんとも言わなくなることがあります。私の使用してる IntelliJ IDEA がまだバージョン12 でプラグインもやや古いため、それが原因の可能性もあります。

以下追記

ファイル出力は行わない設定

ソースコード編集ごとにファイルが生成され、生成されたファイルによってその他 自動処理が走ってしまい負荷が気になる場合、Haxe コンパイラのコマンドライン引数 --no-output を利用するとよいかもしれません。

通常コンパイルするための compile.hxml と、コンパイル(エラーチェック)は行うがファイルは生成しない用の compile_no_output.hxml を用意し、File Watchers では compile_no_output.hxml の方を指定するようにします。
例えば compile.hxml の内容が以下だとします。

-js extension_content/index.js
-main Main
-cp src/extension/app
-lib jQueryExtern

--next

-swf download/main/FlashToHaxeConverter/main.swf
-main jsfl_panel.Main
-swf-version 11
-swf-header 300:300:24:ffffff
-cp main/src

--next

...

compile_no_output.hxml には以下のように --no-output を記述します。

-js extension_content/index.js
-main Main
-cp src/extension/app
-lib jQueryExtern
--no-output

--next

-swf download/main/FlashToHaxeConverter/main.swf
-main jsfl_panel.Main
-swf-version 11
-swf-header 300:300:24:ffffff
-cp main/src
--no-output

--next

...

ファイル生成を行いたい時のみ IndelliJ IDEA の Make コマンド(Ctrl + F9等)を実行します。

追記)
Show console の値は Always に設定するとエラー表示ウインドウが常に表示されるようになり、ウインドウ開閉のうっとおしさが無くなります。

追記2)
compile.hxml の内容そのままにファイル出力を行いたくない場合、compile_no_output.hxml には以下の二行のみの記述で良いようです。

compile.hxml
--no-output

[ FLASH ] [ TOOL ] [ tips ] 2014年02月15日 21:33 | コメント (0) | トラックバック

FLASH TOOL tips windows IntelliJ IDEA: FileWatchers Sass 設定メモ

windows IntelliJ IDEA にて Sass を利用するまでにつまずいた点等をメモします。

まずは Sass のインストール。これはネット上でたくさん見つかるので省略します。
次に以下のサイトを参考に IntelliJ IDEA の plugin「LiveEdit」「File Watchers」をインストールしました。

 参考)intelliJ で sass を編集すると LiveEdit で動的に反映されるように
 http://blog.44uk.net/2013/05/25/intellij-sass-and-liveedit/

LiveEdit、このツールはもっと早く知りたかった。便利ですね。
File Watchers は自動化ツールです。ファイルに何らかの変更があった場合、コンパイル作業等を行ってくれます。もしかして Haxe も hxml ファイルを指定する事で自動コンパイルが可能になるのかな?まだ試していません。

次に File Watchers の設定です。IntelliJ IDEA Project(もしくは Module?)毎に行えます。画像で説明します。

(1)Program 欄

ruby インストールディレクトリが C\ruby の場合 C:\ruby\bin\scss.bat と指定します。
参考サイトの図では Unix(Mac) 用の設定方法が書かれており、C:\ruby\bin\scss と設定したところ動作せず、少々はまりました。

(2)Arguments 欄

scss ファイルと異なるディレクトリに css ファイルを出力したい場合、設定を行います。SASS に関してではありませんが File Watchers の設定方法として以下のサイトが参考になりました。

 PHPStorm: How do I setup LESS to output to CSS directory with file watcher?
 http://stackoverflow.com/questions/15960810/phpstorm-how-do-i-setup-less-to-output-to-css-directory-with-file-watcher

例えば scss を配置するディレクトリが以下のようになっているとします。

Project
└ trunk/
  └ scss/
    ├ style.scss
    └ test/
      └ test.scss

Arguments 欄には上記図の用に設定すると、以下のようなファイルディレクトリが出力されるようになります。

Project
└ trunk/
  └ scss_test/
    ├ style.css
    └ test/
      └ test.css

コピペ用

--no-cache --update $FileName$:$ProjectFileDir$/trunk/scss_test/$FileDirPathFromParent(scss)$$FileNameWithoutExtension$.css

(3)Environment variables 欄

scss 内に日本語があると以下のエラーが発生します。font-family に日本語を指定した Web サイトを作成する上で、誰もがひっかかるであろうエラーです。

Encoding::UndefinedConversionError: "\xEF\xBC" from Windows-31J to UTF-8

検索してみると、Ruby 2.0 からは環境変数 RUBYOPT に -EUTF-8 を指定すればよいとの事です。多く見つかる情報として、LANG に ja_JP.UTF-8 を指定するとありますが こちらはもう情報が古いようです。

 参考)てっく煮ブログ: Windows で Jekyll 1.3 を動かすまでの手順
 http://tech.nitoyon.com/ja/blog/2013/11/14/jekyll-win/

プロジェクトごとに環境変数設定を行うのが面倒な場合、上記サイトにあるように、実行ファイル内に記述してしまうのがよいのかもしれません。

[ FLASH ] [ TOOL ] [ tips ] 2014年02月15日 17:17 | コメント (0) | トラックバック

FLASH tips Flash CC 13.1 カスタムパネルから jsfl 内の値を参照する

先日書いた「Flash CC 13.1 カスタムパネルから jsfl を呼び出す」の関連記事となります。

前提

jsfl 処理内容を次の二通りに分けるとします。

 (a)単独で開始~終了する jsfl
 (b)外部から適時呼び出される jsfl

(a)は例えば「Flash CC 13.1以降対応 リンケージ設定 GUI版公開」で利用している jsfl が該当します。
jsfl を呼び出す(読み込む)と自動的に処理が開始し、処理終了まで全て単独で行ってくれるタイプのものです。多くの jsfl がこれに該当するかと思います。

(b)は jsfl 呼び出し後、呼び出し側(拡張機能側)から jsfl 内処理を適時 呼び出すタイプのものとなります。jsfl 内変数を参照したり、jsfl 内メソッドを呼び出し、jsfl 内処理結果に応じて 呼び出し側での行動を変化させます。

今回は (b) の jsfl に関しての内容となります。

Adobe Extionsion Project manifest.xml 設定

Flash CC 13.1 カスタムパネルから jsfl を呼び出す」の方法では、呼び出し側から jsfl 内の変数やメソッドにアクセスする事ができないようです。
代わりに、Adobe Extionsion Project manifest.xml 内に 読み込みたい jsfl の指定を行うことで、呼び出し側から jsfl 内変数やメソッドにアクセスする事が可能となります。
※偶然に見つけた手法なので、正しい方法かどうかはわかりません。

読み込み対象 jsfl 指定方法

プロジェクト内 隠しディレクトリにある manifest.xml を開きます。プロジェクトルート 右クリックから[Adobe Extension Builder 3]-[Bundle Manifest Editor] を選択しても開くことができます。

Extension タブ内 右ページの「Startup」タブを選択し、Script path に読み込みたい jsf を指定します。

このようにすることで、呼び出し側から、jsfl 内 変数やメソッドに自由にアクセスが可能となります。fl.runScript による jsfl 読み込みは必要ありません。

独自変数・メソッドの呼び出し

例えば jsfl の内容が以下だとします。

var helloText = "hello!";

function hello2(){
	fl.trace("hello2");
}

呼び出し側からは以下のコードで jsfl 内変数やメソッドを利用できます。

new CSInterface().evalScript("fl.trace(helloText);");
new CSInterface().evalScript("hello2();");

jsfl 内の任意の値を 呼び出し側から取得するには CSInterface.evalScript 第二引数の callback を利用します。

例えば jsfl の内容が以下だとします。

function getHello(){
	return "hello!";	
}

拡張機能側からは、以下のように記述する事で、jsfl 内 メソッドの戻り値を取得する事ができます。

new CSInterface().evalScript("getHello();", function(n){ 
	alert(n); //hello!
});

function の引数 n の値が jsfl の getHello メソッドの戻り値となります。

jsfl API 戻り値取得

jsfl API 呼び出しの戻り値も取得できます。

new CSInterface().evalScript("document.getPlayerVersion();", function(n){ 
	alert(n); //FlashPlayer11.8
});

以下の様な jsfl API の Document オブジェクト取得は undefined になります。

new CSInterface().evalScript("fl.getDocumentDOM();", function(n){ 
	alert(n); //undefined
});

プロパティアクセスも undefined が返ってきます。

new CSInterface().evalScript("document.frameRate;", function(n){ 
	alert(n); //undefined
});

jsfl fl.addEventListener で設定したイベントを探知

jsfl の API fl.addEventListener で設定したイベントを拡張機能側から探知するには少々工夫が必要になります。まず jsfl 内に以下のメソッドを用意します。

function registerExtensionFunction(extensionFunction){
	callbackFunction = extensionFunction;
}


拡張機能側には例えば以下の記述を行います。

new CSInterface().evalScript('registerExtensionFunction(' + execute + ')');
new CSInterface().evalScript(
	'fl.addEventListener("documentNew", function(){ callbackFunction("new!"); });');

function execute(value){
	
	alert("called:" + value);
}

拡張機能側からは、jsfl に execute メソッドを登録し、jsfl 側でイベントが発行されると 登録されているメソッドを callbackFunction 変数経由で実行する、という形を採ります。
上記サンプルでは、fla ファイルの新規作成が行われると、called:new! という文字列がアラートで表示されます。

※サンプルということで CSInterface クラスを new しまくっていますが、実際には CSInterface インスタンスを生成して使いまわしたほうが良いと思われます。

追記2)
以下の方法でもいけました。直接変数にメソッドを登録します。

new CSInterface().evalScript('callbackFunction = ' + execute);
new CSInterface().evalScript(
	'fl.addEventListener("documentNew", function(){ callbackFunction("new!"); });');

...

[ FLASH ] [ tips ] 2014年02月15日 15:29 | コメント (0) | トラックバック

FLASH tips update Flash CC 13.1以降対応 リンケージ設定 GUI版公開

Flash CC 13.1 より利用可能な html によるカスタムパネル機能を用いて、リンケージ設定 GUI 版を作成しました。

 https://github.com/siratama/Linkage

Flash CC メニュー「ウインドウ」->「エクステンション」内にある「Linkage」の項目を選択すると以下のパネルが表示されます。

パネルはライブラリウインドウの上部あたりに配置しておくと便利です。

カスタムパネルは html を利用して作成可能という事で、画面内ボタン操作時の処理 は Haxe(javascript) を利用して記述しています。ボタンや背景色は Flash CC のデフォルトカラーを元に設定しているので、カラーテーマを変更していると、とても浮いた色になってしまうかもしれません。

開発メモ

現在 Adobe Extension Builder 3 では、プロジェクトルートディレクトリ直下に、html ファイル等を配置する ExtensionContent ディレクトリが作成されます。この ExtensionContent ディレクトリの名前を変更する、あるいは他のディレクトリへ移動する等行うと、zxp ファイルの出力や Run テストが行えなくなってしまいます。(.setteing/.jsdtscope ファイル内の ExtensionContent への path を変更すると、eclipse 上では認識されますが zxp ファイル出力はエラーとなってしまいます。)

任意のディレクトリに ExtensionContent ディレクトリの内容を配置したい場合、シンボリックリンクを設定する事で解決できます。

上図では、trunk/extension_content 内に html や js ファイルなど配置し、プロジェクトディレクトリ直下に ExtensionContent というシンボリックリンク設定を行っています。trunk ディレクトリ内には github へアップロードを行うファイル群を配置しています。

[ FLASH ] [ tips ] [ update ] 2014年02月09日 22:14 | コメント (0) | トラックバック

FLASH tips Flash CC 13.1 カスタムパネルから jsfl を呼び出す

Flash CC 13.1 から htmlで カスタムパネルが作成可能になったとの事です。

 参考: CCツールExtensionをHTML5で作る、part 1 // andy hall
 http://aphall.com/2013/08/html5-extensions-for-cc-jp/

以下 zxp ファイル経由でインストールされたカスタムパネルから、zxp ファイル内に同梱されていた jsfl ファイルの呼び出し方法を記述します。

※まだ情報があまりなく試行錯誤中で、もっと良い方法がどこかに用意されている可能性があります。また、Mac ではまだ検証できていません。

サンプル

Adobe Extension Builder のチュートリアルに習ってプロジェクトを作成して行き、例えば以下の様なファイルディレクトリ構成にしたとします。index.html と、呼び出したい test.jsfl を同一のディレクトリに配置します。

Javascript としては以下を記述する事で test.jsfl の呼び出し(fl.runScript実行)が可能となります。

var htmlUri = String(location);

var arr = htmlUri.split("/");
arr.pop();
var jsflUri = arr.join("/") + "/" + "test.jsfl";

var jsfl = 'fl.runScript("' + jsflUri + '");';
evalScript(jsfl);

function evalScript(script, callback) {
    new CSInterface().evalScript(script, callback);
}

fl.runScript に指定する URI は file:/// から始まる絶対パスである必要があります。よって、javascript の location インスタンス変数から index.html の URI を取得し、同一ディレクトリにある test.jsfl の URL を割り出しています。

Javascript の location インスタンス変数や alert が機能するなど、インターネットブラウザと同じくそのまま Javascript が機能するようです。

追記)
new CSInterface().getSystemPath(SystemPath.APPLICATION);
あるいは
new CSInterface().getSystemPath(SystemPath.EXTENSION);
という記述で Extension ディレクトリを参照できる事がわかりました。

SystemPath.APPLICATION と SystemPath.EXTENSION の違いがわかりませんが、リファレンスには 「SystemPath.EXTENSION :The path to current extension.」と書かれているので、EXTENSION を使ったほうがよいのかもしれません。

var jsflUri = "file:///" + new CSInterface().getSystemPath(SystemPath.EXTENSION) + "/" + "test.jsfl";

[ FLASH ] [ tips ] 2014年02月09日 11:39 | コメント (0) | トラックバック

FLASH tips Android 2.x: css overflow scroll sample: Haxe

Android 2.x 系では CSS で overflow: scroll; 指定を行っても hidden 扱いになってしまう、という不具合(仕様?)があります。この問題に対し Javascript を用いてスクロール制御を行います。

以下は Haxe を利用した簡単なサンプルです。スクロールさせたい要素を OverflowScrollHack クラスのコンストラクタ引数に指定します。現在 Haxe の JQuery用 Event クラスには originalEvent が定義されていないようなので、untyped を利用しています。

import js.html.TouchEvent;
import jQuery.Event;
import jQuery.JQuery;

class OverflowScrollHack{

	private var touchStartY:Int;

	public function new(element:JQuery, preventDefault:Bool = false){

		var userAgent = UserAgent.create();
		if(!userAgent.isAndroid() || userAgent.getAndroidVersion() >= 3) return;

		element.on("touchstart", function(event:Event){

			var touchEvent:TouchEvent = untyped event.originalEvent;
			touchStartY = touchEvent.touches[0].pageY + element.scrollTop();
		});

		element.on("touchmove", function(event:Event){

			if(preventDefault)
				event.preventDefault();

			var touchEvent:TouchEvent = untyped event.originalEvent;
			element.scrollTop(touchStartY - touchEvent.touches[0].pageY);
		});
	}
}

モバイル 端末・バージョン判定用クラス

class UserAgent {

	public static inline var ANDROID = "Android";
	private var userAgentString:String;

	public static function create(){

		var userAgent = null;

		#if js
		userAgent = new UserAgent(js.Browser.navigator.userAgent);
		#end

		return userAgent;
	}

	public function new(userAgentString:String){
		this.userAgentString = userAgentString;
	}
	public function isDocomo():Bool{
		return ~/^DoCoMo/.match(userAgentString);
	}
	public function isSoftbank():Bool{
		return ~/^J-PHONE|^Vodafone|^SoftBank/.match(userAgentString);
	}
	public function isAu():Bool{
		return ~/^UP.Browser|^KDDI/.match(userAgentString);
	}

	public function isAndroid():Bool{
		return ~/Android/.match(userAgentString);
	}
	public function isIPhone():Bool{
		return ~/iPhone/.match(userAgentString);
	}
	public function isIPod():Bool{
		return ~/iPod/.match(userAgentString);
	}
	public function isIPad():Bool{
		return ~/iPad/.match(userAgentString);
	}

	public function isSmartPhone():Bool{
		return isAndroid() || isIPhone() || isIPod();
	}

	public function getAndroidVersion():Float{

		return Std.parseFloat(userAgentString.substr(
			userAgentString.indexOf(ANDROID) + '$ANDROID '.length, "*.*".length));
	}
}

[ FLASH ] [ tips ] 2014年01月22日 22:16 | コメント (0) | トラックバック

FLASH tips SoundJS 0.5.2 Sound.alternateExtensions プロパティ

最近公開された SoundJS 0.5.2 から Sound.alternateExtensions プロパティが利用可能になりました。このプロパティを利用する事で、読み込むサウンドフォーマット指定を簡単に行えるようになりました。

 Sound.alternateExtensions
 http://www.createjs.com/Docs/SoundJS/classes/Sound.html#property_alternateExtensions

SoundJS 仕様

SoundJS では、Web Audio API でサウンドを再生する事が可能です。しかし Web Audio API では再生可能なサウンドフォーマット(mp3, ogg 等)はブラウザごとに異なる状況となっています。例えば Google Chrome では mp3 ファイルの再生が可能ですが、Firefox, Opera では mp3 ファイルは再生できず、その他サウンドフォーマット(ogg 等)を指定する必要があります。

対処としまして SoundJS では、読み込むファイルを「|」区切りで複数指定する事で自動的に読み込まれるファイルが選択されるようになります。

test.mp3, test.ogg ファイル読み込み指定例

var manifest = [
	{src:"test.mp3|test.ogg", id:"test"}
];

問題点

Flash CC の HTML5 Canvas ドキュメントでは、パブリッシュされた js ファイル内に以下の様な 記述が行われます。

lib.properties = {
	…略…
	manifest: [
		{src:"sounds/test.mp3", id:"test"}
	]
};

test.mp3 の他、test.ogg ファイルを読み込ませたい場合、以下のように js ファイル内ソースを書き換える必要があります。

lib.properties = {
	…略…
	manifest: [
		{src:"sounds/test.mp3|sounds/test.ogg", id:"test"}
	]
};

しかしこの記述を行っている js ファイルは パブリッシュを行う度に書き換わってしまうため、パブリッシュ毎に test.ogg ファイルの記述を追加する必要が出てきてしまいます。

Sound.alternateExtensions で解決

上記問題は Sound.alternateExtensions プロパティを利用する事で解決します。先ほどの例と同じく HTML5 Canvas 出力でパブリッシュされた js ファイルに以下のような内容が書かれているとします。

lib.properties = {
	…略…
	manifest: [
		{src:"sounds/test.mp3", id:"test"}
	]
};

js ファイルの他、同時に出力可能な html ファイル内には以下の変更 or 記述を追加します。

…略…
//バージョン 0.5.2 移行を指定
<script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>
…略…
function init() {
	canvas = document.getElementById("canvas");

	createjs.Sound.alternateExtensions = ["ogg"]; //追加

	var loader = new createjs.LoadQueue(false);
	loader.installPlugin(createjs.Sound);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(lib.properties.manifest);
}
…略…

これにより、test.mp3 が再生されないブラウザでは test.ogg ファイルが読み込み・再生されるようになります。

[ FLASH ] [ tips ] 2014年01月20日 19:26 | コメント (0) | トラックバック

FLASH tips Haxe で JSFL を作成する際の注意点

前回の記事にて、自作 JSFL を実行すると Flash CC の JSFL 実行環境がおかしくなってしまう、と記述しました。

 Flash CC 13.1 CreateJS・JSFL 出力関連不具合
 http://www.dango-itimi.com/blog/archives/2013/001198.html

調査してみたところ、問題箇所と対処策が判明したので以下に記述します。

Haxe から出力される特定のコードが JSFL 実行環境に悪影響を及ぼす

自作 JSFL である FlashToHaxeConveter は Haxe を用いて作成しました。そして、Haxe から出力される javascript 内 以下のコードが、Flash CC の JSFL 実行環境に悪影響を及ぼしていることがわかりました。

String.prototype.__class__ = String;
Array.prototype.__class__ = Array;

試しに上記二行のみを記述した jsfl ファイルを作成し、その jsfl を実行後、Flash CC のメニューから「ドキュメント形式を AS3 から HTML Camvas に変換」JSFL コマンドを実行するとエラーが発生します。

Flash CC の JSFL は、実行の度に実行環境が初期化されるような事はなく、以前に実行した JSFL の実行結果が後にまで影響を及ぼすようです。Flash CC を再起動することで、初期化されます。

対策

delete 文を実行し、代入をなかったことにすればエラーが発生しなくなりました。以下の 4行の jsfl ファイルを実行してみると、その後「ドキュメント形式を AS3 から HTML Camvas に変換」コマンドを実行してもエラーは発生しません。(代入式前の String.prototype.__class__, Array.prototype.__class__ の値は undefined であることは確認済みです。)

String.prototype.__class__ = String;
Array.prototype.__class__ = Array;

delete String.prototype.__class__;
delete Array.prototype.__class__;

Haxe から出力される javascript ファイルを見てみると、String.prototype.__class__ と Array.prototype.__class__ への代入処理は JSFL 起動時に実行される事がわかります。よって、Haxe のソースコード内の JSFL 処理終了時に、以下の記述を行えば問題は解決します。

untyped __js__("delete String.prototype.__class__");
untyped __js__("delete Array.prototype.__class__");

実際のソースコードに記述してみた例は以下となります。
https://github.com/siratama/Flash-To-Haxe-Converter/blob/master/main/src/Main.hx

今回の調査では、Haxe の Map クラスを利用する事で String.prototype.__class__, Array.prototype.__class__ への代入式コードが出力される事がわかりました。必ずしも今回の代入式コードが出力されるわけではないので、Haxe で JSFL を作成される方はご注意ください。

JSFL用 Haxe extern

JSFL 用の Haxe extern ライブラリは、以前は lib.haxe.org で公開されていたのですが、内容は古く、Haxe3 になってから現在は非公開状態となってしまっています。現状 JSFL 用 extern は自作する必要がありそうです。

FlashToHaxeConverter 最新版

今回の問題対処を行った FlashToHaxeConverter を github に反映させました。これで FlashToHaxeConverter を実行してもエラーは発生しなくなります。
また、コード内インデントがタブであったりスペースであったりとガタガタになっていたので修正を行い、github 上でソースコードを見やすくしています。

 FlashToHaxeConveter
 https://github.com/siratama/Flash-To-Haxe-Converter

[ FLASH ] [ tips ] 2013年12月07日 09:00 | コメント (0) | トラックバック

FLASH tips Flash CC 13.1 CreateJS・JSFL 出力関連不具合

昨日 Flash CC の バージョン 13.1 へのアップデートが行われました。
今までのバージョンの Flash CC では、自作 JSFL「FlashToHaxeConverter」を実行すると、Toolkit for CreateJS のパブリッシュコマンドが機能しなくなる、という不具合がありました。今回のアップデートで何か変化はあっただろうかと調べてみたところ、新たな不具合が発生する事となりました。

FlashToHaxeConverter は fla ファイル内全てのシンボルを網羅しファイル出力を行うという内容で 結構負荷が高く、それが原因かどうか、Flash インストールディレクトリ内 JSFL 実行関連ファイルの何かがおかしくなってしまうようです。一度 Toolkit for CreateJS のパブリッシュが不可能になると Flash CC を再起動しただけでは直らず、正常の状態に戻すには少々手間を要しました。

自作 JSFL FlashToHaxeConverter 実行による不具合

アップデートされた Flash CC 13.1 では CreateJS 出力関連機能が新しくなっており、新規で HTML5 Canvas ドキュメントとして fla ファイルを作成する事で CreateJS 関連のデータ出力が可能となります。
fla ファイル一つで、Flash コンテンツと HTML5 Canvas コンテンツ両方の素材出力ができなくなってしまったのは個人的には結構痛手です。将来的には Adobe AIR と Flash をパブリッシュ設定で切り替えることができるように、HTML5 Canvas ドキュメントへも切り替え可能になってほしいところでもあります。

既存 fla ファイルから HTML5 Canvas ドキュメントに移行する方法としましては、メニューのコマンド内「ドキュメント形式を AS3 から HTML Camvas に変換」を選択すると良いとのことです。このコマンドはおそらく JSFL で実行されるものと思われます。

 参考) Adobe Flash Professional CC 13.1 アップデート公開 : akihiro kamijo
 http://cuaoar.jp/2013/12/adobe-flash-professional.html

ここで、FlashToHaxeConverter を事前に実行していた場合、「ドキュメント形式を AS3 から HTML Camvas に変換」コマンドを行うと 出力ウインドウに以下の文字化け ERROR が発生します。(環境 Windows7)

ERROR : Error: addItem: a??a?°c?aa?・ 2 a? ̄c?!a?1a?§a??a€?

JSFL 処理が途中で止まってしまっているのか、妙なガイドレイヤーが作られたりと、変換が正常に行われない状態で fla ファイルが生成されてしまいます。

この状況になってしまったら Flash CC を一度再起動する必要があります。再起動しないと、「ドキュメント形式を AS3 から HTML Camvas に変換」コマンドを何度実行しても ERROR が発生します。(以前のバージョンの Flash CC では再起動しても直らなかったので、状況は多少改善されたとは言えます。)

FlashToHaxeConverter.jsfl 内のどの処理が原因で、Flash 本体の JSFL 機能がおかしくなってしまうのかは検証できていません。ただ、こういう事例があるということで blog に記述しておきます。

今後の Flash 本体側のアップデートで改善されるようになればよいのですが、そうはならない事を考え、FlashToHaxeConverter 側の負荷を下げるような処理にしてみる等、対処を採っていこうとは思います。

既存ドキュメントから HTML5 Canvas ドキュメントへ移行に対する不具合

ここからは、FlashToHaxeConverter の不具合とは関係ない現象についての記述となります。

新規 HTML5 Canvas ドキュメントへのコピー&ペーストではサウンドファイルリンケージ設定がおかしい状況になる

Flash コンテンツ用 fla ファイルから HTML5 Canvas ドキュメントへ移行したい場合、「ドキュメント形式を AS3 から HTML Camvas に変換」コマンドを用いずに、新規で HTML5 Canvas ドキュメントを作成し、そこにコピー&ペーストでライブラリ内ファイルを移動させようとすると、サウンドファイルの内容(後述)によっては、リンケージ設定がおかしな状況になります。
サウンドファイルに対してリンケージ設定が中途半端に設定されたような状態となり、この状況でパブリッシュを行おうとしても、何もファイルがパブリッシュされなくなります。
この状況になってしまった場合の対処としましては、一度 HTML5 Canvas ドキュメントを保存して fla ファイルを開き直すと良いようです。fla ファイルを保存し開き直すことで、サウンドファイルに中途半端に設定されたリンケージ設定が解除されます。

 参考) jsfl からのリンケージクラス設定解除が効かない場合は fla ファイルを保存して起動し直す
 http://www.dango-itimi.com/blog/archives/2012/001131.html

プロジェクトの内容によっては、HTML5 Canvas ドキュメントのパブリッシュ先のパス等 設定する必要が出てくるため、都度「ドキュメント形式を AS3 から HTML Camvas に変換」コマンドを実行するわけにもいかず、一度作った HTML5 Canvas ドキュメントに対して、Flash コンテンツ用 fla ファイルの内容をコピー&ペーストする作業は多々発生する事になりそうです。

「ドキュメント形式を AS3 から HTML Camvas に変換」コマンド用 JSFL に手を加える事ができるのであれば、もう少し手順が簡略化できそうではあります。あるいは移行用 JSFL を自作するかどうかです。

HTML5 Canvas ドキュメント対応 リンケージ設定 JSFL

「ドキュメント形式を AS3 から HTML Camvas に変換」を実行してみると、サウンドファイルのリンケージ設定が解除されるものとされないものとがあります。タイムライン上で使用しているサウンドファイルはリンケージ設定そのままとなり、タイムライン上では使用していない スクリプトから呼び出すだけのサウンドファイルはリンケージ設定が解除されてしまいます。解除されてしまう理由は色々とありそうです。ただ、私の開発手法としましては解除されると問題が起こってしまうので、HTML5 Canvas ドキュメント上でリンケージ設定を再度行う必要があります。

ここで、Flash コンテンツ用ドキュメントで使用していた自作の「リンケージ設定を一括で行う JSFL」を用いてみると、HTML5 Canvas ドキュメント上ではエラーが発生する事がわかりました。HTML5 Canvas ドキュメントでは、不要な JSFL 処理は利用できなくなっているようです。
よって、「リンケージ設定を一括で行う JSFL」を HTML5 Canvas ドキュメントでも利用できるよう新たに制作を行いました。

 https://github.com/siratama/Linkage

ドキュメントの形式が「HTML5 Canvas ドキュメント」であるかどうかの判定方法としましては、jsfl の document.exportPublishProfileString メソッドを利用する事でひとまず解決しました。パブリッシュプロファイル内に「JavaScript/HTML」という文字列が存在する場合、「HTML5 Canvas ドキュメント」として判定し処理を切り分けています。(今後の Flash 側の仕様変更でこの判定方法が利用できなくなる可能性があります。)

また、今回新たに JSFL を作り直す上で再度検証してみたところ、リンケージ解除設定時 linkageClassName の値を空にする事で、長年の懸念点であった「リンケージ解除が中途半端に行われてしまう問題」がなくなりました。

item.linkageClassName = "";
item.linkageExportForAS = false;

Flash CS4 あたりから悩んでいた問題でしたが、これで簡単にリンケージ解除を行うことができます。

[ FLASH ] [ tips ] 2013年12月05日 09:23 | コメント (0) | トラックバック

FLASH tips CreateJS 製コンテンツを Android WebView で表示するも問題発生

記事タイトルの内容のことを行ってみるも、問題が解決しなかったためメモします。以下主な流れです。

(1)CreateJS にてスマートフォンブラウザからでも遊べる html5 canvas ゲームを作成
(2)Adobe AIR を用いて iOS, Android アプリ化にする事に
(3)Adobe AIR製の Android アプリにて viewport の問題発生
(4)Java製の Android WebView アプリを作成する事で viewport の問題を解決
(5)Android WebView では CreateJS 製コンテンツが意図通り動作しない箇所が発覚

html5 canvas ゲームをアプリ化

スマートフォンのブラウザで遊べる CreateJS を用いた html5 canvas ゲームという事で、アプリ化する必要性はあまりないのですが、Apple App Store や Google Play にて公開すると多少の宣伝になるため、制作してみる事にしました。

Adobe AIR を利用すれば、簡単に iOS アプリと Android アプリ両方を作ることができます。html を表示するだけの ガワネイティブ等と呼ばれる形態のアプリとなります。しかし Android アプリにて問題が発生しました。

StageWebView を利用した Android アプリでは html metaタグ viewport 指定の解決は不可能?

まずは問題の発生した viewport 指定に関して少々記述します。

html の meta タグ viewport 指定をしておく事で、その html 内コンテンツの幅は何 px であるかを指定する事ができます。例えば、以下の記述を行う事で、この html 幅は 800px であるとブラウザに指示することができます。

<meta name="viewport" content="width=800" />

上記記述があるとスマートフォンのブラウザは、ページ幅が 800ピクセルであるものとして、ブラウザ幅ピッタリに収まるように 幅 800px ページのレンダリングを行います。

iOS の UIWebView でも同じく、viewport 指定があれば、UIWebView の幅ぴったりに html を表示してくれます。Android WebView は viewport 指定を無視してしまいますが、設定を行うことで解決できます。

Adobe AIR StageWebView

Adobe AIR の StageWebView は、iOS アプリでは UIWebView, Android アプリでは WebView として起動されるという、クロスプラットフォーム仕様となっています。しかし UIWebView、あるいは WebView からアクセスするプラットフォーム独自の機能を利用する事はできません。

よって、Android WebView に対し viewport の指定を無視しないような設定を行いたいのですが、StageWebView にはその機能が用意されておらず、Adobe AIR 製の Android WebView アプリでは意図した表示を行うことができない状況です。

プラットフォーム独自の機能にアクセスするためには ANE(Adobe Native Extention) を用いますが、Android WebView 用の ANE は見つかりませんでした。ANE を個人的に作れればよいのですが、ANE に対する知識がほとんどなく、そもそも WebView 用の ANE を作れるものなのかどうかも不明です。

Java 製 Android WebViewアプリを作るも別途問題が見つかる

Android アプリに関しては Adobe AIR からではなく Java を用いて制作してみる事にしました。しかし viewport の問題は解決しましたが、次の CreateJS に関する新たな問題が見つかりました。

・正常に音が鳴らない
・画面タップ処理がおかしい

はじめての Java製 Android アプリという事で、私が何か間違っている可能性は高いですが、メモしておきます。

正常に音が鳴らない

Web Audio API が有効になっていないような動作となりました。ある程度の音は鳴ります。CreateJS 製のコンテンツという事で SoundJS を用いての音再生となりますが、どうやら audio タグによる音再生が行われているようです。

考えられる原因としましては以下となります。

・Android WebView では Web Audio API は使えない
・SoundJS で何か判定が誤っている
・WebView や CreateJS に対して何か設定が足りない

もちろん Android Chrome では正常に音は再生されます。

クリック判定がおかしい

一回画面をタップしただけなのに、常にダブルクリックしているような状態となってしまいます。Android WebView 以外の環境では正常に動作します。WebView に対して何か指定が誤っているのか等、詳しく調べていないのでちょっと原因がわかりません。マウスダウンイベントとタッチイベント2つが実行されてしまっているのかな、という感じはあります。

CreateJS 製コンテンツの Android WebView アプリは ひとまず見送り

問題の原因がどこにあるかがわからず、調査する時間もないため、ひとまず制作は見送りに。時間のある時に調査していこうと思います。今回の問題は、今後の CreateJS や Android のバージョンアップによって解決される可能性もあります。

[ FLASH ] [ tips ] 2013年10月27日 11:03 | コメント (0) | トラックバック

FLASH tips GAE/Python : 外部画像読み込み&PIL画像加工&htmlへの画像出力

Google App Engine は python2.7 から PIL が利用できるようになっており、使い方を少々調査しました。

以下は、外部 URL から画像を読み込み、読み込んだ画像を PIL で加工し、加工した画像を html へ出力するためのサンプルソースコードです。

# -*- coding: utf-8 -*-
import webapp2
import urllib2
from cStringIO import StringIO
from PIL import Image

class MainHandler(webapp2.RequestHandler):
	def get(self):

		#外部 URL から読み込み
		url = "http://www.dango-itimi.com/blog/image/sub_banner/1.png"
		filePointer = urllib2.urlopen(url)
		data = filePointer.read()
		filePointer.close()

		#PILで加工
		image = Image.open(StringIO(data))
		rectangle = (5, 5, 35, 35)
		image = image.crop(rectangle)

		#出力用加工
		output = StringIO()
		image.save(output, format="png")
		imageLayer = output.getvalue()
		output.close()

		#出力
		self.response.headers["Content-Type"] = "image/png"
		self.response.write(imageLayer)

app = webapp2.WSGIApplication([
	('/', MainHandler)
], debug=True)

参考 stackoverflow)

How do I read image data from a URL in Python?
http://stackoverflow.com/questions/7391945/how-do-i-read-image-data-from-a-url-in-python

Using PIL to draw image on App Engine
http://stackoverflow.com/questions/15433252/using-pil-to-draw-image-on-app-engine

[ FLASH ] [ tips ] 2013年09月29日 16:39 | コメント (0) | トラックバック

FLASH tips Haxe enum を使ってみる

「Haxe の enum は便利だ」とよく目にします。しかし公式の説明を見るものの、どういった場面に使えばよいのか理解できていませんでした。

 Haxe: 列挙型(enum)
 http://haxe.org/ref/enums?lang=jp

実際に利用してみて、きっとこういう事なのだろう、と少々理解できたので、以下にその内容を記述します。使い方が間違っていたらごめんなさい。

▽続きを読む

[ FLASH ] [ tips ] 2013年08月24日 19:38 | コメント (0) | トラックバック

FLASH tips Google+ インタラクティブ投稿ボタン: JavaScript origins 設定注意事項メモ

Google+ インタラクティブ投稿ボタンをサイトに設置し、ボタンを押してみると、投稿用ウインドウがすぐ閉じてしまい、以下のエラーが発生する状況に遭遇しました。

Claimed origin not in whitelist: https://www.dango-itimi.com

どうやら、Google apis の 以下の箇所の設定が悪かったようです。

URL の最後にスラッシュがあると上記エラーが発生します。

スラッシュを削除してみたところ正常に動作します。

インタラクティブな投稿の共有
https://developers.google.com/+/web/share/interactive?hl=ja

[ FLASH ] [ tips ] 2013年08月06日 21:32 | コメント (0) | トラックバック

FLASH tips update FlashToHaxeConverter 3.2.2 バグ修正・他 jsfl Instance オブジェクトに関して

Flash ライブラリ内の構造をそのまま Haxe extern ファイルに出力を行う、FlashToHaxeConverter のバグ修正を行いました。

https://github.com/siratama/Flash-To-Haxe-Converter

主な修正内容は以下となります。

・ガイドレイヤーを無視するよう修正
・レイヤーがロックされている、あるいは非表示の場合エラーが発生していた不具合を修正
・ライブラリフォルダ構造ではなくリンケージ設定を元にファイル出力を行うよう変更
・ステージ上に配置されているリンケージ設定を行なった MovieClip への出力対応

ライブラリフォルダ構造ではなくリンケージ設定を元にファイル出力を行うよう変更

今まではライブラリフォルダ構造を元にファイル出力を行なっていたため、ライブラリフォルダ構造とリンケージ設定構造が異なる場合、意図しないファイル出力が行われてしまう問題がありました。
今回の修正では、リンケージ設定を元にファイル出力が行われるようになったため、自由なライブラリフィルダ構造設計が可能になります。

ステージ上に配置されているリンケージ設定を行なった MovieClip への出力対応

今までステージ上に配置されていた MovieClip は、リンケージ設定がされていようと MovieClip として出力していました。しかしそれが原因で、動的に swf を読み込むと強制型変換エラーが発生したため、対処を行いました。

ステージ上に配置されている MovieClip からはリンケージ名は取得できないものかと思っていましたが、そんな事はなく、Layer オブジェクトから取得可能な Element オブジェクトの elementType が "instance" の場合、Element オブジェクトは Instance オブジェクトとして扱うことが可能な事がわかりました。

 Instance オブジェクトの概要
 http://help.adobe.com/ja_JP/flash/cs/extend/WSd6d4f896b3a8801b68f3c0d913cb56242ea-8000.html

この Instance オブジェクトは libraryItem というプロパティを持ち、そこからリンケージ名の取得が可能となります。

以下は Layer オブジェクトインスタンスから ステージ上に配置されている MovieClip のリンケージ名を取得するまでの流れとなります。Haxe で記述しています。

var layers:Array<Layer> = Flash.getDocumentDOM().getTimeline().layers;

for(layer in layers){

	for(element in layer.frames[0].elements){

		if(element.elementType == "instance"){

			var linkageClassName = untyped element.libraryItem.linkageClassName;
		}
	}
}

untyped を利用しているのは、element を Instance オブジェクトに cast しようとしてもコンパイルエラーが発生してしまったためとなり、暫定的にエラーを回避させています。きちんと変換する方法はありそうです。

[ FLASH ] [ tips ] [ update ] 2013年07月18日 11:22 | コメント (0) | トラックバック

FLASH tips Haxe: Flash, JavaScript間 非同期通信サンプル

Flash から JavaScript 内処理を呼び出すには ExternalInterface を利用します。

ここで、JavaScript 側に非同期通信を行う処理(jQuery の ajaxメソッド呼び出し 等)があり、通信処理終了後の通信結果を Flash 側に返却したい場合、どういう処理にすればよいかのサンプルを作成しました。ActionScript, JavaScript どちらも Haxe で記述しています。

Google Play Game Services といった、JavaScript 用 API は用意されているものの、Flash 用 API は用意されていない、そんな場合に今回のような記述を利用します。

サンプル

簡単な処理の流れとしては以下となります。

 (1)Flash から JavaScript の処理を呼び出す
 (2)JavaScript 側で jQuery の ajax メソッドによるテキストファイル読み込み
 (3)JavaScript 側でファイル読み込み完了後 Flash 側のメソッド呼び出し

最後に Flash 側の処理が呼び出されると、swf 領域内に「called!」という表示が行われます。

以下がサンプルとなります。
http://www.dango-itimi.com/blog/swf/197/

サンプルファイル一式は以下の URL からダウンロードできます。セキュリティ関連の設定を行わないとローカル環境上では動作しません。

http://www.dango-itimi.com/blog/swf/197/trunk.zip

▽続きを読む

[ FLASH ] [ tips ] 2013年07月15日 17:21 | コメント (0) | トラックバック

FLASH tips update FlashToHaxeConverter アップデート: OpenFL・swf動的読み込み・IDE補完用出力

Flash ライブラリ内の構造をそのまま Haxe extern ファイルに出力を行う、FlashToHaxeConverter のアップデートを行いました。

https://github.com/siratama/Flash-To-Haxe-Converter

新規機能は以下となります。

・OpenFL 用 hx ファイル出力
・swf 動的ロード用 hx ファイル出力
・リンケージ設定の無い MovieClip 内プロパティへの IDE 補完用処理出力

出力用ダイアログは以下のようになりました。今までの flash 用出力は「flash(extern)」欄となり、swf 動的ロード用 hx ファイル出力は「flash」欄が対応しています。

OpenFL に対応した新しい制作の流れの図は以下となります。

OpenFL に対応したとはいえ OpenFL 自体に制限事項が多く、出力された hx ファイルを利用しても null がかえってくるものもあります。ビットマップ関連 hx ファイルがそれにあたります。OpenFL 出力機能はまだ α版だとお考えください。詳しくは FlashToHaxeConverter のページをご参考ください。

リンケージ設定を行なっていない MovieClip 内プロパティへの IDE 補完用処理出力

こちらに書かれている内容を参考に、IDE 補完用出力を行うようにしています。

 http://qiita.com/tail_y/items/9d7f8cf903613c1037e6

これにより MovieClip がどれだけ入れ子構造になろうとも、補完機能を持つ IDE ならば、深い階層へのプロパティへのアクセスが容易となります。

例えば以下は、リンケージ設定を行なっているのは View クラスのみとなりますが、内部に配置している MovieClip や TextField への補完が行われます。

var view = new View();
view.circleMC.cardA.numberData.x = 50;
view.circleMC.cardB.blackMC.numberText.text = "testText";

今までの Flash 開発では無かった機能かと思われるため、今後 Flash オーサリングに関して新たな手法を編み出す事が可能になるかもしれません。

OpenFL 入力補完用出力詳細

OpenFL 用出力に関しましては、abstract を数珠つなぎにするようにして補完機能を実現させています。例えば以下の様な構造を持つ game.View クラスがあったとします。

View.circleMC.memoText
View.circleMC.cardSetMC.cardA
View.circleMC.cardSetMC.cardB

circleMC ムービークリップ内には memoText という TextField と cardSetMC というムービークリップを配置しており、cardSetMC 内には cardA と cardB というムービークリップを配置しています。

これを OpenFL 向けに出力を行うと以下の様なファイルが展開されます。

package game;

import flash.display.MovieClip;
import openfl.Assets;

abstract View(MovieClip){
	public function new()
		this = Assets.getMovieClip('test:game.View');
	@:to public function getInstance():MovieClip
		return this;

	public var circleMC(get, never):View_circleMC;
	function get_circleMC(){
		return new View_circleMC(cast this.getChildByName('circleMC'));
	}
}
abstract View_circleMC(MovieClip){
	public function new(mc:MovieClip)
		this = mc;
	@:to public function getInstance():MovieClip
		return this;

	public var memoText(get, never):flash.text.TextField;
	function get_memoText(){
		return cast(this.getChildByName('memoText'), flash.text.TextField);
	}
	public var cardSetMC(get, never):View_circleMC_cardSetMC;
	function get_cardSetMC(){
		return new View_circleMC_cardSetMC(cast this.getChildByName('cardSetMC'));
	}
}
abstract View_circleMC_cardSetMC(MovieClip){
	public function new(mc:MovieClip)
		this = mc;
	@:to public function getInstance():MovieClip
		return this;

	public var cardA(get, never):flash.display.MovieClip;
	function get_cardA(){
		return cast(this.getChildByName('cardA'), flash.display.MovieClip);
	}

	public var cardB(get, never):flash.display.MovieClip;
	function get_cardB(){
		return cast(this.getChildByName('cardB'), flash.display.MovieClip);
	}
}

その他

JSFL にて、ステージ上に配置されたシンボルが リンケージ設定をされている MovieClip であるかどうかを判別する方法は見つかりませんでした。よって、ステージ上に配置されている MovieClip にリンケージ設定が行われていようと、ただの MovieClip として出力されます。しかし今回の IDE 補完機能により、その欠点は克服されたかと思います。

[ FLASH ] [ tips ] [ update ] 2013年07月10日 13:22 | コメント (0) | トラックバック

FLASH tips Haxe OpenFL Box2D 動作速度検証・他

自作 Haxe ライブラリの OpenFL への対応が完了しました。とはいえ OpenFL は Flash API 準拠という事から、ほとんど修正は必要ありませんでした。as3 の文字があるディレクトリは今後、Flash or OpenFL 用のライブラリとなります。

 https://github.com/siratama/haxelib/tree/master/src

OpenFL 対応に伴い、以下のデモページを作成しました。Flash CC のステージ上に配置したシンボルを html5 canvas or flash box2d オブジェクトに変換するライブラリとなりますが、今後はあらゆるプラットフォーム(windows, mac, ios, android, etc)にて利用が可能となります。

 http://www.dango-itimi.com/flash_to_box2d/

また、以下は Box2D を用いた Android アプリの動作速度比較用のものとなります。アプリの内容は Box2D の四角形のオブジェクト 100個を表示するだけのものです。

 http://www.dango-itimi.com/blog/swf/195/

Androd 2.3 端末と Nexus7 とで検証した所、結果はそれぞれ以下となりました。

■ Android 2.3
Adobe AIR : fps 14~16
OpenFL : fps 25~30

■ Nexus7
Adobe AIR : fps 25~28
OpenFL : fps 55~58

Nexus7 に関しましては圧倒的な差がでています。

OpenFL が速い理由は Android NDK にて出力が行われる、という点にあります。C++ で出力が行われるため、Java で作られた Android アプリより高速に動作するとの事です。

オーサリングツール Flash で編集した素材データ(swf)を利用しつつ、あらゆるプラットフォーム向けにソースコード一つで高速に動作するアプリを生成できる、なんともすごい内容ではあります。しかし先日記事にした通り、OpenFL には懸念点はまだまだあるのも事実です。速度を必要としないアプリならば、Adobe AIR で作成したほうがよい状況もあるため、適材適所で使用していきたい所です。

クロスプラットフォーム向け記述

OpenFL で処理を記述する際の注意事項です。

cast ではなく Std.parseInt or Std.parseFloat or Std.string を利用

Flash, js ターゲットの場合 cast で済む文字列←→数値変換も、native ターゲットの場合エラー(コンパイル時のエラー)が発生するため、Std クラス経由での変換が必要となります。

Flash API 準拠に関して

OpenFL では 出力ターゲットに合わせて「openfl」「openfl native」「openfl html5」のいずれかのライブラリが自動的に選択されます。「openfl native」「openfl html5」は Flash API から機能が削られているので注意が必要です。

例えば「openfl native」 の場合 flash.display.MovieClip.currentLabel プロパティが存在しません。swf バイナリ解析で取得可能な情報のみのメソッドやプロパティが用意されていそうです。

MovieClip へのプロパティアクセス

OpenFL の Assets 機能を利用する場合、「MovieClip 内に配置した MovieClip」にアクセスするためには MovieClip.getChildByName メソッドを使用する必要があります。同様に「MovieClip 内に配置している MovieClip 数」を取得したい場合、MovieClip.numChildren を使用する必要があります。Reflect.fields メソッド経由では取得できません。

Reflect.fields(mc).length // NG
mc.numChildren // OK

その他

あらたにわかった点や懸念点等です。

native extension

OpenFL では Adobe AIR と同じように、ネイティブ拡張と呼ばれる機能を利用する事でデバイス独自の機能にアクセスする模様。nme native extension といったキーワードで結構見つかります。
例えば以下の様なページが見つかります。

 http://haxeflixel.com/wiki/native-extensions

スマートフォンアプリからのカメラ機能利用に関しては有力な情報が見つからず。カメラ機能実装は難しい可能性も。

 nme forum: camera 検索結果
 http://www.nme.io/community/forums/search/?search_paths%5B%5D=/community/forums&query=camera&submit=Search

windows ターゲット出力の場合の fps

60 fps に設定しているのに、50 fps で固定されてしまう現象が発生することがあります。発生しない事もあり、条件が不明。

 http://www.nme.io/community/forums/installing-nme/windows-build-capped-at-50fps/

swf 内ベクターデータのアンチエイリアス描画

コンパイル用 xml ファイル内 windows タグでの antialiasing 指定を行うとよしとなります。

<window width="400" height="400" antialiasing="4" />

OpenFL の説明ページには書かれておらず、NME antialiasing という単語で検索すると情報が見つかります。

 OpenFL 用 project.xml format
 https://github.com/openfl/openfl/wiki/Project-format

今後の予定

サンプルを作ってみて大きな問題はなさそうなので、FlashToHaxeConverter に OpenFL 用 abstract クラス出力機能を実装します。

 https://github.com/siratama/Flash-To-Haxe-Converter

また、こちらで指摘のあった、Flash 用 extern 無しクラス出力機能も実装します。
http://qiita.com/tail_y/items/9d7f8cf903613c1037e6
ミニゲームばかり作っていて、swf 動的ロードに関しまして検証を行なっておらず、extern クラス出力だけで問題ないものと考えてしまっていました。

後は同じく指摘のあった「リンケージ設定を行なっていないムービークリップ内部のプロパティへの IDE 補完用 内部クラス出力機能」(長い)に関しまして、余裕があれば実装したいと思います。MovieClip は Dynamic のため、内部クラスは typedef ではなく extern でも swf動的ロードで問題は発生しなさそうではありますが、コンパイルオプションで strict を利用した場合どうなるのか等、検証が必要となりそうです。

その他、内部クラス出力機能の前に、リンケージ設定が行われているムービークリップも現在は MovieClip として出力されてしまうため、まずはこちらの機能実装が先かもしれません。

[ FLASH ] [ tips ] 2013年07月08日 12:40 | コメント (0) | トラックバック

FLASH tips Haxe OpenFL: Android 出力設定

OpenFL のインストール & 設定作業を行なっていく中、少々わかりずらかった点と、エラーが発生するも公式サイトに解説が見つからなかった点を以下に記述します。Windows での Android 用出力設定の話となりますが、Mac の場合でも適用できます。

 公式 OpenFL インストール方法解説ページ
 https://github.com/openfl/openfl/wiki/Get-Started

openfl setup android コマンド

openfl setup android コマンドを実行すると、以下の四つのソフトのインストールを促されます。

・Android SDK
・Android NDK
・Apache Ant
・Java JDK

ソフトインストール後は、それぞれのソフトをインストールしたディレクトリパス指定を促されます。ここで、ソフトをインストールしたディレクトリ内にある bin ディレクトリ等へ指定すると後にエラーが発生します。

私の場合は以下のように設定しました。

JREではなくJDK

これは私が勘違いしてしまっていただけの話となります。

Java 関連のソフトウェアのインストールの文字を見て「すでに JRE がインストールされているから必要ないだろう」と考えてしまいましたが、JRE(Java Runtime Environment) ではなく JDK(Java Development Kit) のインストールが必要となります。

インストール後、環境変数からの bin ディレクトリのパス設定はたぶん必要ありません。

Android NDK 64bit 版の場合 実行コマンドでエラーが発生

いざ android をターゲットとしたファイル出力を行なってみようとすると、以下のエラーが発生しました。

arm-linux-androideabi-g++: command not found

arm-linux-androideabi-g++.exe ファイルは Android NDK をインストールしたディレクトリ内にいくつか存在しますが、どうもその exe ファイル位置が特定できずコマンドが実行されないというエラーとなります。

原因は Android NDK の 64bit 版をインストールしたため、となります。Windows 32bit 版の場合、arm-linux-androideabi-g++.exe を配置しているディレクトリの中途パスに「windows」というディレクトリがあるのに対し、64bit 版の場合は「windows-x86_64」というディレクトリとなります。

しかし OpenFL からは 32bit 版のディレクトリを見に行ってしまうようで、arm-linux-androideabi-g++.exe が見つからず実行できない、というエラーが発生してしまいます。

対処法としましては以下のファイルの編集を行います。

C:\Users\ユーザー名\.hxcpp_config.xml

xml ファイル内最後に、以下のように setenv タグを追加します。

<xml>
	<section id="vars">
		...
	</section>
	<section>
		...
	</section id="exes">
	<setenv name="ANDROID_HOST" value="windows-x86_64" />
</xml>

これで OpenFL は 64bit 版ディレクトリを見に行ってくれます。

 参考) Mac OS 64bit 版の情報
 https://plus.google.com/107757129156852236156/posts/C4Uu8SvFy44

追記 2014年4月1日

新たに OpenFL の環境構築を行ってみると「Android NDK 64bit 版の場合 実行コマンドでエラー」の問題は解決されているようで、.hxcpp_config.xml の編集を行う必要はなくなりました。
また、新たに OpenFL の環境構築を行う場合、以前の .hxcpp_config.xml ファイルは一旦削除した後、「lime setup android」コマンドで再度 Android 用環境構築を行う必要があるようです。以前の .hxcpp_config.xml ファイルが残ったままだと build コマンドでエラーが発生してしまいました。

[ FLASH ] [ tips ] 2013年07月05日 23:46 | コメント (0) | トラックバック

FLASH tips Haxe OpenFL 調査

NME もとい OpenFL に関して調査を行いました。OpenFL とは何かと言いますと、こちらの方の言葉をお借りするのであれば「DisplayObject のクロスプラットフォーム化ライブラリ」となります。Haxe で記述し、最近 NME という名前から OpenFL という名前に変わりました。

実際に利用してみて、どういったものなのか理解できた点を記述します。

 OpenFL Get Started
 https://github.com/openfl/openfl/wiki/Get-Started

外部 swf を組み込んでの開発が可能

Haxe で Flash コンテンツを制作する場合、外部 swf を利用しての開発(オーサリングツール Flash CC を起点とした開発)が可能となります。

OpenFL ではどうだろうかと調べてみたところ、同様に 外部 swf を利用しての開発が可能な事がわかりました。ただし利用するにあたって条件や制限事項があります。

出力ターゲット

OpenFL の出力対象は大きく以下の三つに分けられます。

・Flash(swf)
・native(windows, mac, ios, android, etc...)
・html5

Flash をターゲットとした出力は、Haxe で Flash コンテンツ開発を行うそのままの方法を採れます。開発もしやすく、外部 swf も内容そのままに利用できます。

一方 native, html5 をターゲットとした場合は、OpenFL の Assets 機能を利用して外部 swf 内データにアクセスする形となります。-swf-lib コンパイラオプション指定での swf の利用はできないようです。

 NME Assets (NME 時代のドキュメントにつき情報が古いため注意)
 http://www.nme.io/developer/documentation/key-concepts/assets/

もちろん Flash をターゲットとした出力の場合でも、native, html5 ターゲット出力と同じくAssets 機能からの外部 swf 利用も可能です。

Assets 機能

Assets 機能を利用するための Assets クラスの内容を見てみたところ、コンテンツ実行時 swf を読み込み バイナリ解析して swf 内の情報を再現する方法を採っているようです。どの位置に何が配置されていて、何ピクセルの線の太さで描画を行う、等など swf 内の構造が Flash 以外ののプラットフォーム向けに再構築される形となります。(完全にソースを解析したわけではないので、誤っていたらごめんなさい。)

こういったことから、swf 内情報の再現度は 100% ではなく、例えば native ターゲットでの出力の場合 ベクターデータが欠けてしまう、といった問題を確認しました。また、html5 をターゲットとした出力の場合 エラーでほとんど機能してくれないようです。

また、swf 内から情報を取り出す際 MovieClip として抽出されるため、MovieClip 内に配置した MovieClip にアクセスするためには MovieClip.getChildByName メソッドでアクセスする必要がある等、少々手間がかかります。詳細は後述します。

ベクターデータ欠け実例

丸や三角といった簡単な形状ではなく、複雑なベクターデータで検証を行なってみました。

最初の画像が元ベクターデータ、次の画像が OpenFL android 上で出力されたデータです。目の部分が欠けてしまってます。またアンチエイリアスがない状態で描画されています。

アンチエイリアスをかける方法(画質設定)は OpenFL のどこかの設定で行える可能性があります。ベクターデータ欠けに関しましては、ベクターデータを分解する、画像にする、あるいはベクターデータ自体に色々工夫をこらす事で解決できる事もあります。ここらへんは Flash 開発に長らく関わってきた人はおなじみの対処ともなりそうです。

ベクターデータが欠けてしまうとはいえ、swf バイナリ解析でここまで再現できてしまうとは、いやはやすごいものです。

html5 は Toolkit for CreateJS の利用を

html5 をターゲットとした出力の場合、外部 swf の利用はほとんど無理のようです。現在のところ Flash CC を用いて html5 canvas コンテンツを作成したい場合、Toolkit for CreateJS を利用するのがよしとなります。OpenFL の html5 出力機能は今後に期待といったところでしょうか。

その他 制限事項や不具合

まだちょっと検証しただけですが 以下の様な現象を確認しています。

・Flash CC 上で設定したテキストフィールドは再現されず
・MovieClip totalFrames が正常な値を返さない

数少ない NME 時代の日本語情報を見ても、その他 不具合があるようです。ただし、OpenFL になってからこの不具合解消はどんどん行われるのではないかと思います。開発者の人が丁寧にフォーラムや twitter 等の各所で対応されているのを見ます。

追記:2013年7月7日)
currentFrames, totalFrames が正常な値を返さないのは「Assets 機能を利用した Flash ターゲット出力」の場合となります。native ターゲット出力の場合、正常な値を返す事がわかりました。Assets 機能を利用して、なおかつ Flash ターゲット出力を行いたい場合、format.swf.instance.MovieClip 内にある get_currentFrame or get___totalFrames メソッドを利用すれば、正常な値を取得できます。これらメソッドは暫定的に用意されている可能性があります。

追記:2013年7月10日)
_ゴシックといったデバイスフォントを指定した場合、OpenFL でも利用できることがわかりました。他にも利用できる条件があるかもしれません。

クロスプラットフォーム向け処理作成

Flash API 準拠に

NME 時代では nme.display.Sprite といったパッケージ構造だったものが、OpenFL では flash.display.Sprite という Flash API 準拠になりました。今まで Haxe で Flash コンテンツを開発していた人がそのまま OpenFL に移行しやすい形となっています。

Assets 機能を利用した場合と そうでない場合との比較

そのまま OpenFL に移行しやすいとはいえ、native をターゲットとした出力を行いたい場合、Assets クラスを利用しての独特な記述による 外部 swf 内情報へのアクセスが必要となります。

例えば、外部 swf(view.swf) 内 test.View というリンケージ設定を行ったムービークリップを生成するには以下のような記述を行います。

var testView = Assets.getMovieClip("view:test.View");

testView インスタンスは test.View クラスとしてではなく MovieClip として抽出されるため、test.View 内に配置したムービークリップ testPoint にアクセスするためには、以下の様な方法を採ります。

var testPoint = cast(testView.getChildByName("testPoint"), MovieClip);
trace(testPoint.x, testPoint.y);

一方 Haxe で Flash コンテンツを作成する場合、以下の用に記述すればよしとなります。あらかじめ swf の情報を外部クラスとして出力し、-swf-lib パラメータによる外部 swf の埋め込みを利用します。

var testView = new test.View();
var testPoint = testView.testPoint;
trace(testPoint.x, testPoint.y);

native をターゲットとした出力を行いたい場合も、このようにシンプルな記述でムービークリップを生成し、ムービークリップ内のプロパティにアクセスしたいものです。生成するシンボルが多くなると、条件付きコンパイル指定等で処理を書き分けるのも大変です。

何か方法はないだろうかと考えた所次の方法を思いつきました。

Haxe の 抽象型(abstruct)を利用して処理共通化を図る

swf からクラス情報を出力した場合の test.View クラスの内容が以下だったとします。(自作 JSFL の FlashToHaxeConverter からの出力です。)

package test;
extern class View extends flash.display.Sprite{
	var testPoint : flash.display.MovieClip;
}

対して、native ターゲット出力を行う場合、利用する test.View クラスが以下のように定義されていれば良しとなります。

package test;

import flash.display.MovieClip;
import openfl.Assets;

abstract View(MovieClip) {
	public function new()
		this = Assets.getMovieClip("view:test.View");

	@:to public function getInstance():MovieClip
		return this;

	public var testPoint(get, never):MovieClip;
	function get_testPoint(){
		return cast(this.getChildByName("testPoint"), MovieClip);
	}
}

Flash ターゲット出力の場合でも native ターゲット出力の場合でも、以下の記述で test.View クラス、test.View.testPoint プロパティにアクセスできます。

var testView = new test.View();
var testPoint = testView.testPoint;
trace(testPoint.x, testPoint.y);

Haxe の抽象型については以下に書かれています。

 http://haxe.org/manual/abstracts

結構難解で、どういう場面で利用すればよいのかわからなかった抽象型ですが、試しに上記クラスを作ってみたら動いたので、なるほどこういう時に使えばよいのか、と何となく理解できた次第です。もっと上手い書き方はあるかもしれません。

FlashToHaxeConverter を OpenFL 対応に

test.View を抽象型クラスにする手順・方法はどうするのか、という話となります。swf 出力の度に毎回上記 抽象型クラスを手書きで作成するわけにもいきません。そこで JSFL の出番となります。

Flash コンテンツと CreateJS による html5 canvas コンテンツ並行開発用として以下の JSFL を公開していますが、これに OpenFL 用抽象型クラス出力機能を実装しようかと考えています。

 FlashToHaxeConverter
 https://github.com/siratama/Flash-To-Haxe-Converter

想定通りならば、Flash, html5 canvas 並行開発の作業そのままに、OpenFL による native コンテンツの並行開発も可能になりそうです。

抽象型クラスより もっとよい方法が見つかる可能性もありますし、抽象型クラスで問題が発生する可能性もあるため、もう少しの検証後に実装を予定したいと思います。

制限事項

abstract test.View クラスは MovieClip を親として定義されていないため、以下はエラーとなります。

var testView = new test.View(); //using abstract test.View
trace(testView.x); //error

よって一度キャストを行う必要があります。

var testView = new test.View();
var mc:MovieClip = cast testView;
trace(mc.x);

私が作成している Flash & CreateJS 並行開発用 Haxe ライブラリでの MovieClipUtil クラスでは、一度キャストを行うように作っているため、上記 abstract MovieClip の利用もそのまま行えそうではあります。

 参考)Haxe Box2D を利用した html5, Flash 並行開発コンテンツサンプル
 http://www.dango-itimi.com/blog/archives/2013/001178.html

追記:2013年7月7日)
抽象型クラスは Type.createInstance メソッド経由での生成が意図通り行えません。

var testView = Type.createInstance(test.View, []);
addChild(testView); //eror

クラスを引数にし、内部で Type.createInstance によるインスタンス生成を行うようなライブラリ等は利用できなくなるため注意が必要です。自作ライブラリの場合、あらかじめ外部でインスタンスを生成し、そのインスタンスを引数にして渡すような作りにする必要があります。

Adobe AIR を介さない 外部 swf を利用しての native アプリ開発が可能に

制限事項や不具合はまだあるものの、OpenFL を利用する事で、Flash CC はすでにクロスプラットフォーム向けのオーサリングツールになっている、と言えましょう。swf を素材ファイルとして Adobe AIR を利用する事無く、直で native(windows, mac, Android, iOS, etc)アプリが開発できてしまいます。

Flash コンテンツは Adobe AIR を用いれば、そのまま iOS, Android アプリに変換できましたが、懸念点がありました。Android アプリの場合、AIR ランタイムで間接的に動作するという事から、native アプリに比べ処理速度が遅くなってしまいます。

 参考)box2dFlash v2.1a を用いた AIR アプリが nexus7 でどれくらいの動作速度になるかの検証
 http://www.dango-itimi.com/blog/archives/2012/001136.html

AS3 の Box2D は C で書かれたものに対し四倍ほど遅くなるとのことです。

 http://j15r.com/blog/2013/04/25/Box2d_Revisited

OpenFL ならば C++ によって Android アプリが出力されるため、Box2D も本来の威力を発揮してくれるのではないかと思います。

リスク

今まで不可能だと思えたことが可能になってしまった OpenFL ですが、まだまだ検証が足りていません。特に mac, iOS をターゲットとした出力は Xcode が必要であり、私は Mac を所持していないため検証ができていません。安く購入できるのであれば 検証用に一台欲しいところです。

OpenFL はどういうコンテンツ向けにまで対応できるかも考える必要があります。スマートフォンアプリ制作が可能だが、ここにカメラ機能を実装してほしい、と言われた時、可能なのかどうなのかもわからず、ネット上の英語の資料を探すしかありません。(Adobe AIR なら可能)

今後実際にサンプルコンテンツ制作を行なっていき、どれくらいのものなのかじっくりと見極めていきたいと思います。

別途 インストール設定等、android 出力設定に少々つまずいた箇所があるため後日記事にしたいと思います。

[ FLASH ] [ tips ] 2013年07月05日 16:21 | コメント (0) | トラックバック

FLASH tips Haxe & Toolkit for CreateJS: サンプルミニゲーム四種作成

Haxe と Toolkit for CreateJS を用いて、ミニゲームを四つほど作成しました。グラフィクスや演出は最低限の見た目を確保したもの程度となります。

以前 blog に記述した通り、今回のサンプルミニゲームも ほぼ一つの Haxe ソースコードでのクロスプラットフォーム・コンテンツ制作となっています。「html5 canvas コンテンツ」「Flash コンテンツ」「Android アプリ」として出力しています。(iOS アプリは独自配布ができないため出力は行なっていません。)

 神経衰弱
 http://www.dango-itimi.com/blog/swf/192/1/

 ブロック崩し
 http://www.dango-itimi.com/blog/swf/192/2/

 15パズル
 http://www.dango-itimi.com/blog/swf/192/3/

 三択クイズ
 http://www.dango-itimi.com/blog/swf/192/4/


短い時間でミニゲームを作るには、どのような工夫をすればよいか、どれくらい手を抜けばよいかの練習を行う上での制作となりました。また、html5 canvas と Flash コンテンツ並行開発用 自作ライブラリの洗練化も兼ねています。

Adobe AIR

出力しているAndroid アプリは、Flash コンテンツをそのまま Adobe AIR で変換しただけのものとなります。アプリ内ブラウザでの html5 canvas コンテンツ表示ではありません。

html5 canvas コンテンツと Flash コンテンツを同時に出力できるとなると、どちらを スマートフォンアプリとして採用すればよいかですが、以下が考えられます。

パフォーマンス重視の場合 : Flash(swf)変換

html5 canvas コンテンツは性質上 処理速度が遅くなってしまい、2013年現在 サウンド再生周りはまだまだの状況です。パフォーマンス重視のゲームコンテンツ等では、Adobe AIR を用いて Flash(swf) をそのまま Android アプリや iOS アプリに変換したほうが良しとなります。

ただパフォーマンス重視とはいえ、Adobe AIR ランタイムで動作する Android アプリはネイティブアプリに比べ、動作は遅くなります。

更新性重視の場合 : html5 canvas コンテンツ表示

アプリ内ブラウザでの html5 canvas コンテンツ表示を行うアプリの場合、メリットとして取り上げられるのが「更新性の良さ」となります。Apple の審査無しで iOS アプリを更新する事が可能になります。

Toolkit for CreateJS でのテキストフィールドデータ出力

テキスト中心の「三択クイズ」では html5 canvas コンテンツと Flash コンテンツとで少々処理切り分けが必要となりました。

Toolkit for CreateJS から出力されたテキスト関連のデータからでは、Action Script と CreateJS とで同じ感覚で扱えない箇所が多いためとなります。よって、html5 canvas コンテンツでは jQuery による DOM 操作にてテキストを扱っています。

ただし Action Script と同じ感覚で扱える箇所が少ないとはいえ、フォントサイズやテキスト表示位置等、可能な限り Flash Professional CC(以下 fla) ファイル内で扱うようにはしています。

例えば三択クイズ用の fla ファイルでは、以下の様な配置を行なっているムービークリップ GuideView を用意しています。どこに何が配置されるのかの位置情報を扱うムービークリップとなります。

取得可能なデータ

Toolkit for CreateJS では、テキストフィールドの表示位置・文字サイズ・フォント情報の出力が可能です。上記例では各テキストフィールドに 16pt のメイリオを指定しており、メイリオがインストールされている PC では、上記図そのままのフォントとフォントサイズで問題文・解答欄が表示されます。(ブラウザの設定によってはフォント指定が適用されません。)

取得できないデータ

Toolkit for CreateJS ではテキストフィールドの幅の出力は行われないため、CreateJS からは、図内 紫色の枠表示を行なっているムービークリップをテキストフィールドの幅として扱っています。テキストフィールド内の文字列の幅は取得できますが、テキストフィールドの幅よりも微量小さくなってしまいます。

また、テキストフィールド内文字をセンタリングすると、Toolkit for CreateJS では表示位置情報がずれて出力されてしまいます。よって html5 canvas コンテンツでは CSS によるセンタリング指定で対処しています。

その他 図説明

左上小さな赤点は得点表示位置となります。本来は空のムービークリップにしたいところですが CreateJS では空のムービークリップは扱えないため赤点にしています。◯×◯は◯や×が表示される位置となります。ここらへんは Flash コンテンツ制作そのままとなります。


Flash Professional CC による html コンテンツのオーサリング

制限はまだあるものの、Toolkit for CreateJS を用いる事で fla ファイル上のフォントサイズやテキスト表示位置等をそのまま html に反映する事が可能となります。

今後 Flash Professional CC はこういった、クロスプラットフォーム向けのオーサリングソフトとしてシフトしていくとの事なので、より一層の機能向上を期待していきたいところです。

 akihiro kamijo : Flash Professional CC のほんの始まり
 http://cuaoar.jp/2013/06/flash-professional-cc-1.html


関連)

Haxe Box2D を利用した html5, Flash 並行開発コンテンツサンプル
http://www.dango-itimi.com/blog/archives/2013/001178.html

Haxe & CreateJS: html5 canvas に美咲フォント PNG 版を表示 + CeVIO を利用してみた
http://www.dango-itimi.com/blog/archives/2013/001182.html

[ FLASH ] [ tips ] 2013年06月30日 15:47 | コメント (0) | トラックバック

FLASH tips Toolkit for CreateJS: 入れ子状態のムービークリップで gotoAndStop 命令が効かない場合の対処

どちらかのサイトで同じような問題の記事を見たことがあったような気がしますが、メモする意味で記述します。

Toolkit for CreateJS にて入れ子状態のムービークリップを出力後、スクリプトから制御しようとした所、入れ子内部のムービークリップに gotoAndStop 命令が効かない、という現象が発生しました。

解決方法としましては、大本のムービークリップに対して gotoAndStop or gotoAndPlay 命令を記述すればよし、となりました。

詳細は以下となります。

CreateJS バージョン

検証で利用した CreateJS のバージョンは以下となります。

easeljs-0.6.1
tweenjs-0.4.1
movieclip-0.6.1

状況確認用 サンプル作成

オーサリング

まず card というムービークリップを作成しました。number レイヤー 1フレーム目には数字の 1、2フレーム目には数字の 2 といった数字連番のベクターデータを配置しています。

次に View というムービークリップを作成し、card レイヤーに先ほど作成した card ムービークリップを配置しました。プロパティ名も card にしています。

View ムービークリップではクラシックトゥイーンを用いて card ムービークリップを左右に動かす内容となっています。

Toolkit for CreateJS での書き出し

View ムービークリップをルートのステージ上に配置し、Toolkit for CreateJS で出力を行なったものが以下となります。

http://www.dango-itimi.com/blog/swf/191/1/

card ムービークリップには stop 命令を入れていないので、すごい勢いで数値がループしています。

gotoAndStop が効かない例

card を任意の数値の表示で停止したいので、sample.View.card に対し gotoAndStop 命令を実行します。例えばカード番号 5 を表示するには gotoAndStop(4); と記述すればよいはずです。(createJSではフレーム番号は 0 から始まる)

Toolkit for CreateJS から出力された js ファイル内 以下の箇所に gotoAndStop 命令を追加してみます。

	this.view = new lib.sampleView();
	this.view.setTransform(56,77,1,1,0,0,0,35,45);

	this.addChild(this.view);

	this.view.card.gotoAndStop(4); //記述追加

結果は以下となります。数字の 5 にはなってくれず、1フレーム目の数字の 1 になってしまっています。

http://www.dango-itimi.com/blog/swf/191/2/

親となる lib.sampleView 生成直後では this.view.card.timeline.position が null になっていたりと、なんだか正常な状態ではないようです。それがため gotoAndStop 命令が正常に実行してくれないのかもしれません。

試しに 2, 3 フレームほど待機すると、gotoAndStop 命令が正常に実行されるようになりました。

gotoAndStop を即有効にする方法

何フレームか待機しなくてはならない というのは使い勝手が悪いので、どうにかならないだろうかと色々と検証してみた所、親となる lib.sampleView ムービークリップに対し gotoAndStop or gotoAndPlay 命令を実行すると、子の card ムービークリップに対しても gotoAndStop 命令が有効となる事がわかりました。

	this.view = new lib.sampleView();
	this.view.setTransform(56,77,1,1,0,0,0,35,45);
	this.view.gotoAndPlay(0); //記述追加

	this.addChild(this.view);

	this.view.card.gotoAndStop(4);

http://www.dango-itimi.com/blog/swf/191/3/

親に対して gotoAndPlay or gotoAndStop 命令を実行することにより、子のムービークリップに何らかの初期化処理のようなものが実行されたのでしょうか。詳細はわかりませんが、ひとまずの解決としておきます。

今回の検証で作成した fla ファイルは以下となります。
http://www.dango-itimi.com/blog/swf/191/sample.zip

今後の CreateJS のバージョンでは動作が異なる可能性があります。

[ FLASH ] [ tips ] 2013年06月22日 16:01 | コメント (0) | トラックバック

FLASH tips update FlashToHaxeConverter ver 3.0 リリース

Flash ライブラリ内の構造をそのまま Haxe extern ファイルに出力を行う、FlashToHaxeConverter のアップグレードを行いました。今まで扱いにくかった箇所をなるべく取っ払い、使いやすさ向上を図っています。

 https://github.com/siratama/Flash-To-Haxe-Converter

設定画面をダイアログ表示に変更

今までは FlashToHaxeConverter を利用するために、別途設定ファイル用 jsfl を用意する必要がありましたが、ver 3.0 からは必要ありません。Flash コマンドメニュー内 FlashToHaxeConverter を選択すると、設定用ダイアログウインドウが表示されます。

設定した値は fla ファイル内に記録されるため、ノートPC等 別作業環境に移してもそのまま利用できます。
ファイル出力先は fla ファイルを基準とした相対パスで指定します。

出力処理見直し

今までは 出力対象となる ライブラリ内フォルダを事前にクリックする必要がありました。ver 3.0 からは自動でリンケージ設定が行われているムービークリップを判定するため、煩わしいクリックの手間がなくなりました。

FlashToHaxeConverter の特色

Toolkit for CreateJS 用として出力される Haxe extern クラスファイル内には、以下のプロパティが付与されます。

・Sound.manifestId
・Bitmap.manifestId

・Bitmap.nominalBounds
・Container.nominalBounds
・MovieClip.nominalBounds
・MovieClip.frameBounds

manifestId は Toolkit for CreateJS から出力される html ファイル内 manifest 配列に記述されているものとなります。
nominalBounds, frameBounds は Toolkit for CreateJS から出力される js ファイル内 各クラスに付与される Rectangle 型の情報です。

廃止した機能

意図しないファイル削除が行われてしまう事を避けるため、Haxe ファイル出力ディレクトリの自動クリア機能は削除されました。

よって、fla ファイル内ライブラリの構造に変更を行った場合、Haxe 出力ディレクトリ内には以前の無駄なファイルが残ってしまう事があります。

無駄なファイルの削除を行いたい場合、手動で Haxe 出力ディレクトリの削除をお願いします。出力ディレクトリは自動的に生成されますので、出力ディレクトリを丸ごと削除してしまっても問題ありません。

その他

toolkit-supporter さんのように 格好良い パネル形式のものにしたかったのですが作り方がわからなかったため、ダイアログ表示となりました。

動作検証は Windows 7 で行なっているため、Mac 上で動作しない等ありましたらお気軽にご連絡ください。

[ FLASH ] [ tips ] [ update ] 2013年06月19日 20:30 | コメント (0) | トラックバック

FLASH tips Google Play Game Services を利用した html5 canvas サンプルゲーム作成

Google Play Game Services を利用した html5 canvas サンプルゲームを、Haxe と CreateJS を用いて開発しました。弾を避けるだけの簡単な内容です。

http://www.dango-itimi.com/gpgss/

キーボードでの操作のほか、ゲーム画面右側の矢印ボタンを押すことでプレイヤー機体を操作できます。スマートフォン用として設けましたが、このゲーム内容でボタン操作はちょっと難しいですね。

400点以上で実績が一つアンロックされ、MY PAGE の一番右側の実績アイコン「TEST」が表示されます。それ以外の実績はダミーで設定しており解除されません。

また実績解除と同時に Google+ へ「実績取得の旨のアクティビティ」を送信し、Google+ のプロフィール内アプリケーションアクティビティ一覧表示箇所に表示されます。アクティビティはとても見つけにく場所にあります。
Google+ プロフィールページの、基本情報内「アプリ」表示箇所の「Google Play Game Services SampleGame」という項目をクリックする事で、アプリ内アクティビティ一覧の確認が可能です。

実装におけるメモ

技術的な内容は、前回の記事も合わせてご参考ください。

 Google Play Game Services 調査メモ
 http://www.dango-itimi.com/blog/archives/2013/001183.html

設定したドメイン内ならば どのディレクトリにゲームファイルを設置しても良い?

Google Play Game Services の説明通り設定を進めていくと、アプリを起動するための URL 設定を行う箇所があります。今回のアプリでは、「http://www.dango-itimi.com/gpgss/」という URL を設定しました。

よって「http://www.dango-itimi.com/gpgss/」という URL からしかサインイン認証処理やハイスコアといったデータ送受信はできないのだろうか、と考えていましたが、どうやらそうではないようです。

「http://www.dango-itimi.com/gpgss/」以外のディレクトリ、例えば「http://www.dango-itimi.com/gpgss/aaaaa/」「http://www.dango-itimi.com/aaaaa/bbbbb/」といった dango-itimi.com ドメイン内ならば、どのディクレクトリにファイル一式を配置しても、サインイン認証処理や、サーバとのデータ送受信は可能でした。

Google Play Game Services の設定途中で「Google apis」というページにて アプリの設定を行う箇所があるのですが、そのページ内 JavaScript origins に設定したドメイン内ならば、どのディレクトリにファイルを配置しても有効になる?のかもしれません。詳しい検証は行なっていません。


一つのアプリ設定で N 個のゲームの設定が可能に

Google Play Game Services のアプリ設定は現在 20 個までしか行えません。なので 20 個のゲームにしか Google Play Game Services の設定を適用できないのだろうか、と考えていました。
しかし上述したように、設定したドメイン内ならば どのディレクトリでも認証が可能になるので、一つのアプリ設定に対し 沢山のゲームを結びつけることが可能になります。

例えばランキング機能を実現するためのリーダーボードは 100 個まで作成可能となっており、一つのリーダーボードに対し一つのゲームを割り当てる、という方法を採れます。

実績は、一つの実績に対し 1000 ポイント中 最低 5ポイントを割り振る必要があるため、最大でも 200 個までしか設定できません。この 200 個の実績を多くのゲームに割り当てようとすると、少々実績数が足りなくなってしまいます。
ただし、実績には「増分実績 Incremental achievements」という設定を行う事が可能で、特定のステップ数を踏まないと実績を取得できないようにする事ができます。これを利用することで、実績数不足は少々解消できそうです。

ゲーム得点や実績の他、任意のデータをクラウド上に保存できる機能(States)もありますが、おそらく同一ドメイン内のゲーム全てでデータの共有を行うことが可能になります。(States 機能に関しては未検証)


他人のデータ閲覧は制限される

今回のサンプルで作成した「MY PAGE」(画面右上ボタンリンクから遷移可能)は、同一ドメイン内ならば どのディレクトリでも認証可能である事を示した例ともなります。MY PAGE を閲覧したユーザのゲームの結果を表示します。

ここで、「MY PAGE」内に自分のデータではなく、他の人のゲーム結果を表示する事はできないだろうか、と試してみました。しかし制限がかかっているのか、他人のデータはほとんど取得できないことがわかりました。

他人のユーザ ID(playerId) を指定しての取得可能なデータは、「Player: get」メソッドのみとなりました。アプリに認証されているユーザの、Google+ ページID, 名前、アバター画像 URL を取得できます。

 Player: get
 https://developers.google.com/games/services/web/api/players/get

他人のユーザ ID を指定しての、ハイスコアや実績アンロック状況の取得はできませんでした。「The viewer can only view their own data.」という error が返ってきてしまいます。

 Scores: get
 https://developers.google.com/games/services/web/api/scores/get

 Achievements: list
 https://developers.google.com/games/services/web/api/achievements/list

パラメータに playerId を指定する箇所があるのですが、実質 現在閲覧中のユーザの ID のみが有効となるようです。

他人のユーザ ID を指定してのハイスコア取得できないとは書きましたが、「Scores: list or listWindow」メソッドならば、リーダーボードに記録されているユーザ得点の取得は可能です。

ユーザごとに任意のデータをクラウドに保存可能な States 機能に関しましては、ユーザ ID を指定してのデータ取得メソッドは用意されていません。閲覧できるのは自分のみ、となりそうです。

その他

ソーシャルボタン

ゲームオーバー時に表示されるボタンに関しまして、少々工夫をしています。

まず Google+ の SHARE ボタンは、前回の blog にも書きました「インタラクティブ投稿ボタン」となっています。

 インタラクティブな投稿の共有
 https://developers.google.com/+/web/share/interactive?hl=ja

Open Graph Protocol を用い、投稿コメントの他、ページ内概要などを表示させています。

 参考)Google+とOpen Graph Protocol 前編
 http://ant-eater.com/public/305/

一方 Facebook のシェアボタンは Open Graph 設定を行なっていますが、ページ内概要は表示されません。いいね(Like)ボタンにしなくてはならないのかもしれません。

Twitter の Tweet ボタンは、URL リンクのシェア機能(twitter.com/share)で簡単にコメント投稿を行わせることができるのですが、スマートフォンから試してみたところ機能してくれませんでした。なので、公式の Tweet ボタンを設置しています。しかして、公式の Tweet ボタン設置の場合、投稿コメント内容をゲーム内容によって変化させるような事は通常はできないようです。解決法としましては以下の URL を参考にしました。

 stack overflow : Dynamically change Tweet Button “data-text” contents
 http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents

チート対策

今回はサンプルということで何も対策をとっていません。詳しい方ならば、得点変更を行いランキング操作を行うことが可能となってしまいます。

今後 Google Play Game Services を利用したゲームを制作する場合、色々と対策を練っていきますが、ブラウザゲームという事で完璧な対策は難しいです。チートはあるものとして考えたほうがよいかもしれません。

今回の記事に書きました通り、Google Play Game Services の現在の仕様上、ランキングくらいしか他人に対し影響はでるものはないため、そこまで問題にはならないかとも思います。全体のランキングの他、自分の設定したサークル内のみで有効になるようなソーシャルランキング機能も用意されているので、そちらを中心に見てもらう方法を採ることもできます。

まとめ

利用できる機能は限られているものの、ミニゲーム程度ならば十分すぎる機能です。こういった機能を実装するために以前は Google App Engine を利用する事を考えていましたが、今後はサーバ不要となりました。サーバ側の処理作成が不要になった事で、より一層クライアント側の処理作成に集中でき開発効率も向上します。

無料で利用できるとはいえ、サーバとの通信量に制限はあるようで、どれくらいで制限いっぱいになるのかは不明です。Google App Engine の時は、後に通信料に応じて有料になったりしましたが、Google Play Game Services はどうなるのか気になるところでもあります。

[ FLASH ] [ tips ] 2013年06月16日 22:29 | コメント (0) | トラックバック

FLASH tips Google Play Game Services 調査メモ

Web 版 の Google Play Game Services を少々利用してみての、現在までになんとなく理解できた点を以下にメモします。

利用した機能

Google Play Game Services の Web Client-Only 版を利用した html5 canvas サンプルゲームを作成しました。ゲームはまだまだ適当な内容なので、もう少しまともな形なったらば公開したいと思います。

 Google Play Game Services : Web Client-Only
 https://developers.google.com/games/services/web/clientsetup

Google Play Game Services(& Google+ Platform)の試してみた機能は以下となります。

・Google+ へ接続する認証処理
・現在プレイ中のユーザのプレイヤーデータ取得
・ゲームスコアをサーバ(リーダーボード)へ送信
・インタラクティブ投稿
・アクティビティの利用

メモ

前準備

Google Play Game Services は Google Play Developer Console にアクセスして設定を行うため、登録費 $25 が必要です。過去 Android アプリを Google Play へ公開した事がある人ならば すでに登録費は払っているため すぐ利用する事ができます。Google Play Developer Console への登録費は一度払えば恐らく一生利用可能です。

 Google Play Developer Console
 https://play.google.com/apps/publish/

Google Play Developer Console は日本語に対応しており、Google Play Game Services 用の設定は とどこおりなく行えます。ただし以下の点に注意が必要です。

Google Play Developer Console: リンク済みアプリ内説明引用

合計で最大 20 個のアプリをリンクすることができます。
アプリをリンクし、後で再び削除しても、そのアプリは最大数の対象としてカウントされます。

20個より多くのゲームを作りたい場合、別途 Google Play Developer Console へ登録する必要が出てきそうです。

取得実績一覧表示やリーダーボード表示機能実装は 開発者が行う

Google Play Game Services を利用する事で、自分の作ったゲームに実績機能やランキング機能を導入できる、との事なので、PS3 や XBOX360 にあるような 過去取得した実績等を Google+ あたりで一覧で見ることができるのだろうか?と考えました。しかし、どうやらそのような便利な表示システムは用意されていないようです。

Google Play Game Services に用意されているのは、サーバとのデータ送受信を行う API のみとなり、開発者は自分で 実績一覧表示やリーダーボード表示機能を実装する必要があります。

ただし、Google+ にはアクティビティと呼ばれる機能があり、これを工夫して利用する事で、過去の実績を Google+ アクティビティ表示欄に表示する、といった事はできそうです。

アクティビティ

アクティビティを利用すれば、Google+ 上で取得実績の確認が行えそう、とはいえ、現在 Google+ のアクティビティ表示箇所はとっても見つけにくい所にあります。

日本では Google+ はまだまだ流行っていないという事もあってか、アクティビティに関する解説ページはほとんど無く、単にゲーム内でアクティビティ機能を利用しただけでは誰の目にも止まりそうもありません。

アクティビティを利用するゲームを作ったらば「アクティビティは Google+ のこの場所から見ることができます。」といったヘルプページを用意したいと思います。

 Google+ Platform: アプリのアクティビティ
 https://developers.google.com/+/features/app-activities?hl=ja

インタラクティブ投稿ボタン

Google Play Game Serviece を利用したアプリにログインすると、Google+ Platform のシステムも同時に利用可能になります。Google+ Platform では上記アクティビティシステムの他、インタラクティブ投稿ボタン機能の利用が可能です。

 New Google+ Platform Features
 https://developers.google.com/games/services/common/concepts/newPlusPlatform

インタラクティブ投稿ボタンを利用する事で、ゲームオーバー時等にゲームで取得した得点を Google+ へ投稿できるボタンの設置が可能となります。twitter や Facebook ではこの投稿機能は簡単に利用できますが、インタラクティブ投稿ボタンは ユーザが Google+ Platform というシステムにログインしなくてはならず、ゲーム得点結果を投稿する といった用途には少々使い勝手が悪い内容でした。

Google Play Game Serviece が登場した事により、インタラクティブ投稿ボタン機能はぐっと利用頻度が増しそうです。

実装におけるメモ

Scopes

インタラクティブ投稿ボタンの項で述べた通り、Google Play Game Serviece は Google+ Platform の機能を兼ねているとの事なので、Google Play Game Serviece 認証用 URL の利用の旨の宣言を行えば、Google+ Platform 認証用 URL の利用の旨の宣言は必要ありません。

Google Play Game Serviece 認証用 URL
https://www.googleapis.com/auth/games

Google+ Platform 認証用 URL(こちらの宣言は不要)
https://www.googleapis.com/auth/plus.login

ただし、インタラクティブ投稿ボタンと Google+ ログインボタンを利用するには、Google Play Game Servieces 用 javascript(https://apis.google.com/js/client.js) の他、Google+ Platform 用 javascript(https://apis.google.com/js/client:plusone.js) の利用の旨の宣言が必要でした。

<script src="https://apis.google.com/js/client.js"></script>
<script src="https://apis.google.com/js/client:plusone.js"></script>

client:plusone.js の利用の旨の宣言を行わないとエラーが発生します。

アクティビティ機能を利用するためには Google+ ログインボタン経由の接続が必要?

この項の内容は私の検証が足らず間違っているかもしれませんが、とりあえずメモしておきます。

Google Play Game Serviece の設定解説ページ内には、Google+ ログインボタンを配置してアプリへの接続を行う方法の他、以下の ゲームアプリへの接続を行うための処理が書かれています。

gapi.auth.authorize({client_id: '1234567890.apps.googleusercontent.com',
    scope: 'https://www.googleapis.com/auth/games',
    immediate: true},
  callbackToHandleTheResult);

この記述にてアプリへ接続を行なってみたところ、Google Play Game Serviece 内機能の プレイヤーデータ取得やスコア送信等は問題なく行えました。しかしアクティビティ機能の利用ができませんでした。アクティビティ機能を利用するためには、事前に利用の旨の宣言が必要との事です。

 Google でのアプリ アクティビティの管理
 https://developers.google.com/+/web/app-activities/?hl=ja

上記 URL 記事を参考に、アクティビティの利用の旨の宣言の記述を加えてみましたが、400 バッドリクエストエラーが発生してしまいました。その他 色々と試してみましたが、アクティビティ送信がどうやってもうまく行きませんでした。

解決方法がわからないため、次に Google+ ログインボタンを設置する方法で試してみたところ、すんなりとアクティビティ機能が動作しました。

 Google+ ログイン
 https://developers.google.com/+/web/signin/?hl=ja

よって現状は、アクティビティ機能は Google+ ログインボタン経由からでないと利用できないかもしれない、と記述しておきます。

ログインボタン配置用処理は 以下のように記述しました。Haxe で書いています。

var parameters = {
	clientid: "client_id",
	scope: "https://www.googleapis.com/auth/games",
	cookiepolicy: "single_host_origin",
	requestvisibleactions: "http://schemas.google.com/AddActivity"
};
untyped parameters["class"] = "g-signin";
untyped parameters["callback"] = finishAuthorization;

untyped gapi.interactivepost.render("login_button", parameters);
Google+ ログインボタンには バックグラウンドログインを自動で行う機能あり

上記スクリプトで Google+ ログインボタンをレンダリングした瞬間、バックグラウンドで Google Playe Game Services に認証が行われます。ユーザーが過去にこの Google+ ログインボタンにてアプリへの接続が完了している場合、バックグラウンドでの認証処理は成功します。そうでない場合はエラーが発生するので、Google+ ログインボタンを表示してユーザに接続を促す、という手順を踏む事になります。

この動作は、以下の Google Play Game Servieces の設定手順内に書かれている通りとなります。

 Client-Only Setup
 https://developers.google.com/games/services/web/clientsetup

[ FLASH ] [ tips ] 2013年05月28日 21:52 | コメント (0) | トラックバック

FLASH GRAPHIC tips update Haxe & CreateJS: html5 canvas に美咲フォント PNG 版を表示 + CeVIO を利用してみた

前回に引き続き Haxe & CreateJS を用いて、美咲フォント PNG 版 を html5 canvas(or Flash)に表示するテキストビューア的なものを作成しました。加えて今回は CeVIO を利用して台詞に音声を付けてみました。

http://www.dango-itimi.com/des2/sample/1/

以前報告したとおり、html5 ではブラウザ毎の音声再生具合はまちまちです。Flash 版が本来再生したい音声処理となります。

今回は iPhone でも音が鳴るような設定にしていますが、iPhone 3GS では Bitmap 表示&キャッシュ処理で不具合が発生し、正常に描画再生されません。

Android では音が鳴ったり鳴らなかったりします。Android はなんだかんだで Flash Player の配布は継続されているので、Flash 版で見たいただくのが一番かもしれません。

CeVIO から出力された音声は サウンド編集ソフトで色々と加工しており、わざとノイズが入る感じにしています。

■ CeVIO
http://cevio.jp/

[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2013年05月15日 10:18 | コメント (0) | トラックバック

FLASH tips Haxe: html5 canvas に美咲フォント PNG 版を表示

以前作成した Flashゲーム 探偵脱出物語 にて利用させていただいた「美咲フォント」を html5 canvas で表示するための調査を行いました。

 美咲フォント
 http://www.geocities.jp/littlimi/misaki.htm

今回作成したサンプルは以下となります。html5 canvas と Flash(swf) ステージ内に文字列一行の美咲フォントが表示されます。フォントサイズは原寸表示(8x8ピクセル)にしているので小さくて少々見にくいかもしれません。

 サンプル
 http://www.dango-itimi.com/blog/swf/186/

▽続きを読む

[ FLASH ] [ tips ] 2013年04月19日 21:15 | コメント (0) | トラックバック

FLASH tips Haxe Box2D を利用した html5, Flash 並行開発コンテンツサンプル

制作している Haxe ライブラリの現在までの まとめとしまして、以下のサンプルを作成しました。

http://www.dango-itimi.com/blog/swf/185/

画面上部が html5 canvas、画面下部が Flash コンテンツとなります。html5 canvas 部分はスマートフォンでも動作確認が可能です。(スマートフォンでは音は鳴る設定にはしていませんが、Android では鳴る端末もあるかもしれません。)

■ 操作方法

画面クリック位置にキャラクターが移動します。キャラクターの頭より上のほうをクリックするとジャンプします。キャラクター足元より下のほうをクリックすると特殊床(後述)から降りることができます。

Box2D 特殊床

宙に浮いている長方形の床は特殊な当たり判定をしており、ジャンプして下から突き抜ける事が可能です。また、特殊床に接地している場合、キャラクター足元より下の方をクリックすると床から降りることができます。

今回のサンプルは Box2D の特殊床制作の習作ともなっています。作りの考え方は簡単で、以下の方法を採りました。

・キャラクターの最下部(足元)が特殊床最上部よりも下にある場合
 特殊床の当たり判定を消去

・キャラクターの最下部(足元)が特殊床最上部よりも上にある場合
 特殊床の当たり判定を復活

▽続きを読む

[ FLASH ] [ tips ] 2013年04月16日 12:44 | コメント (0) | トラックバック

FLASH tips Box2D: B2Contact.getFixtureA, B2Contact.getFixtureB メソッドの内容順序に注意

Box2D での衝突判定処理を行なっていたところ、どうもたびたび実行結果が異なる、という状況が発生しました。私の考えが抜けていたことが原因であり、まとめてみますと大した内容ではないのですが、一応としてメモしておきます。

調査内容

Box2D にて、衝突し合っている物体に関する調査を行うためには B2Contact クラスを利用します。例えば Haxe では以下のように記述して B2Contact インスタンス一式を取得し、衝突し合っている二物体の取得調査を行ないます。

var b2Contact:B2Contact = b2world.getContactList();
while(b2Contact != null){

	var fixtureA = b2Contact.getFixtureA();
	var fixtureB = b2Contact.getFixtureB();

	b2Contact = b2Contact.getNext();
}

衝突し合ったニ物体はそれぞれ、fixtureA と fixtureB どちらに代入されるかはわかりません。「丸い物体」と「四角い物体」が衝突し合ったとして、丸い物体が fixtureA に 四角い物体が fixtureB になる事もあれば、丸い物体が fixtureB に 四角い物体が fixtureA になる場合もあります。

ここで、fixtureA と fixtureB の内容が逆になると B2Contact から得られる衝突詳細データも逆になる点に注意が必要です。

B2Contact.getManifold().m_localPlaneNormal の値を調べることで、fixtureA が fixtureB に対しどの方向から衝突しているのか判定できますが、fixtureA と fixtureB の内容が逆になると どの方向から衝突しているのかの結果も逆になります。

例えば 丸い物体が上から衝突、四角い物体が下から衝突し、fixtureA に丸い物体、fixtureB に四角い物体が代入されると、結果は以下となります。

 丸い物体(fixtureA)は四角い物体(fixtureB)に対し「上」から衝突している

対して、fixtureA に四角い物体、fixtureB に丸い物体が代入されると結果は以下となります。

 四角い物体(fixtureA)は丸い物体(fixtureB)に対し「下」から衝突している

まとめ

fixtureA と fixtureB には、どちらに何が入るのかわからないという点と、fixtureA と fixtureB が逆になると得られる結果も逆になる、という考慮を行わず処理を作成したため、たびたび実行結果が異なる、という事態が発生してしまいました。

以前 b2Manifold に関する調査を行いましたが、今回の内容を考慮せず行ったものなので、すみません おそらく内容に誤りがあります。

 Box2DFlash v2.1a 調査3 : b2Manifold 調査
 http://www.dango-itimi.com/blog/archives/2011/001082.html

[ FLASH ] [ tips ] 2013年04月12日 14:18 | コメント (0) | トラックバック

FLASH tips Haxe から出力される swf のデバッグには FlashDevelop を利用

html5 canvas コンテンツを Haxe にて開発する場合、出力された javascript に対し Haxe ソースコード内のどの部分でエラーが発生したのか等の調査を行うにはソースマップを利用します。

 机上のにゅーろん: HaxeやTypeScriptで使えるソースマップが便利。
 http://spheresofa.net/blog/?p=733

一方、Flash コンテンツを Haxe にて開発する場合、FlashDevelop のデバッグ機能を利用すれば、出力された swf に対し Haxe ソースコード内のどの部分でエラーが発生したのかの調査が簡単に行えます。

エディタ IntelliJ IDEA にも Haxe アプリケーションのデバッグ機能もあるようなのですが、調べてみるも デバッガーの起動(接続)方法がわからず、調査は保留状態となっています。

手順

デバッグ用コンパイル

hxml ファイルを利用して Haxe ソースコードをコンパイルする場合、例えば以下のように記述します。

-swf9 trunk/fla/debug.swf
-main Main
-swf-version 11
-swf-header 550:400:24:000000
-swf-lib trunk/fla/view.swf
-cp trunk/src
-lib box2D
-debug
-D fdb

最後の -debug と -D fdb という二行を付け加えることにより、FlashDevelop にてデバッグ用 swf として利用できます。

hxml 記述完了後はコンパイルを行い、上記例の場合 debug.swf を出力しておきます。

FlashDevelop で swf を実行

私の場合 Haxe は IntelliJ IDEA にて開発を行なっているため、FlashDevelop の New Project から Haxe AS3 Project を選択し、IntelliJ IDEA で作成したプロジェクトディレクトリを Location に指定しています。

その後 Project ウインドウ上から debug.swf をダブルクリックする事で、debugger が起動しデバッグが可能になります。

trace 記述内容は Output ウインドウ内に表示されるようになり、Error が発生した場合、Error 発生箇所の Haxe ソースコードが表示されます。試しに swf 内画面をクリックすると Error を throw するようにしてみると、見事 Error 発生箇所がハイライトで表示されました。


[ FLASH ] [ tips ] 2013年04月09日 16:38 | コメント (0) | トラックバック

FLASH tips Haxe: 条件付きコンパイル記述を型宣言部分に利用

前回の記事を書いておきながら、条件付きコンパイル記述を行わないと厳しい箇所が出てきたため 部分的に利用していく事に。今後まだまだ揺れそうですが一つの方針としてメモしておきます。

 前回の記事) Haxe: CreateJS と Flash API 共通する箇所は interface を作成して記述を簡略化
 http://www.dango-itimi.com/blog/archives/2013/001174.html

条件付きコンパイル記述における懸念点の一つとして、以下がありました。

・条件付き記述で囲まれた行はリファクタリングの対象とはならない

例として、以下の様なソースコードを挙げました。

package shooting.enemy;

#if flash
import flash.display.DisplayObjectContainer;

#elseif js
import createjs.easeljs.Container;
#end

class Enemy {

	private var view:View;

	public function new(
		#if js
		layer:Container

		#elseif flash
		layer:DisplayObjectContainer

		#end
	){
		view = new View();
		layer.addChild(view);
	}
}

これを以下のように変更する事にします。

package shooting.enemy;

#if flash
import flash.display.DisplayObjectContainer;

#elseif js
import createjs.easeljs.Container;
#end

class Enemy {

	private var view:View;

	public function new(
		layer:#if js Container #elseif flash DisplayObjectContainer #end
	){
		view = new View();
		layer.addChild(view);
	}
}

このようにすることで、layer 変数はリファクタリングの対象となり、Rename での名前変更対象ともなります。

問題点としましては、ソースコードが見にくいという点と、エディタ IntelliJ IDEA 上でエラー表示がされてしまう、という点が挙げられます。上記例ではエラー表示はなされませんが、以下の様な記述ではエラー表示がなされます。

・フィールド変数での記述

private var layer:#if js Container #elseif flash DisplayObjectContainer #end;

・メソッド引数での Class 型指定

public function new(viewClass:Class<#if js Container #elseif flash DisplayObjectContainer #end>){
}

エディタ上でエラー表示はされてしまいますが、コンパイルは通ります。

[ FLASH ] [ tips ] 2013年04月09日 10:39 | コメント (0) | トラックバック

FLASH tips Haxe: CreateJS と Flash API 共通する箇所は interface を作成して記述を簡略化

Haxe にて html5 canvas と Flash コンテンツ並行開発時「似たような API を持つが 利用しているクラスが異なるため、やむを得ず専用のプラットフォーム用クラスファイルを作成し処理を切り分ける」という方法を採ることがあります。

例えば以下のようなクラス切り分けを行います。

親クラス

package shooting.enemy;

class Enemy {

	private var view:View;

	public function new(){

		view = new View();
	}
}

Flash用クラス

package shooting.enemy;

import flash.display.DisplayObjectContainer;

class EnemyForFlash extends Enemy{

	public function new(layer:DisplayObjectContainer){

		super();
		layer.addChild(view);
	}
}

javascript(CreateJS)用クラス

package shooting.enemy;

import createjs.easeljs.Container;

class EnemyForJS extends Enemy{

	public function new(layer:Container){

		super();
		layer.addChild(view);
	}
}

View クラスは Flash To Haxe Converter で作成された、flash.display.MovieClip あるいは createjs.easeljs.MovieClip を継承した extern クラスです。

上記 EnemyForFlash, EnemyForJS コンストラクタ内では同じ内容の処理を行なっていますが、layer インスタンスのクラスが異なるため、EnemyForFlash, EnemyForJS と各プラットフォーム用クラスに切り分けて記述しています。

Flash の DisplayObjectContainer クラスと CreateJS の Container クラスの役割は同じようなもので、持ち合わせているプロパティやメソッド名はとても似ています。addChild の引数には DisplayObject という名前のクラスを追加する、という点まで一緒です。

ここで、DisplayObjectContainer クラスと Container クラスを同じクラスとして扱う事ができれば、EnemyForFlash, EnemyForJS クラスを用意する事はなくなるのではないかと考えたところ、以下の方法を編み出しましたので順に記述します。

interface を作成

flash.display.DisplayObjectContainer と createjs.easeljs.Container クラス両方に共有のメソッド addChild を持つことを示すための interface IDisplayObjectContainer を作成します。

package sample.display;

#if js
import createjs.easeljs.DisplayObject;

#elseif flash
import flash.display.DisplayObject;

#end

interface IDisplayObjectContainer {

	public function addChild(child:DisplayObject):DisplayObject;
}

上記 interface は、IntelliJ IDEA のエディタ上では「DisplayObject が見つかりません」といったエラー表示がされてしまいます。これはエディタ側で DisplayObject が何であるのか判定できていないだけで Haxe のコンパイルは問題なく通ります。

プラットフォームデフォルトクラスの継承と IDisplayObjectContainer を interface に持つ独自クラスの作成

flash.display.DisplayObjectContainer と createjs.easeljs.Container それぞれを親に持つクラスを作成し、更に IDisplayObjectContainer を implements します。

Flash には DisplayObjectContainer の子クラスとして Sprite と MovieClip クラスがありますが、今回は Sprite クラスを継承したクラスの作成を行います。

package sample.display.as3;

class Sprite extends flash.display.Sprite, implements IDisplayObjectContainer{
}
package sample.display.createjs;

class Container extends createjs.easeljs.Container, implements IDisplayObjectContainer {
}

拡張したクラスを利用

上記必要な拡張クラス制作が完了したら、Enemy クラスは以下のように記述できます。

package shooting.enemy;

import sample.display.IDisplayObjectContainer;

class Enemy {

	private var view:View;

	public function new(layer:IDisplayObjectContainer){

		view = new View();
		layer.addChild(view);
	}
}

EnemyForJS, EnemyForFlash クラスの制作は必要ありません。呼び出し側で、拡張した Sprite or Container クラスインスタンスどちらかを指定すればよしとなります。

Flash 用 呼び出し側記述例

var layer = new sample.display.as3.Sprite();
new Enemy(layer);

CreateJS 用 呼び出し側記述例

var layer = new sample.display.createjs.Container();
new Enemy(layer);

課題

addChild のみの例では結構良い見た目で記述できている感じがしますが、例えば removeChild を IDisplayObjectContainer に持たせる場合 以下の一行を追加します。

public function removeChild(child:DisplayObject):#if js Bool #elseif flash DisplayObject #end;

CreateJS の場合は 戻り値が Bool であるのに対し、Flash の場合 戻り値は DisplayObject です。Haxe の条件付きコンパイル記述で切り分ける必要があります。

Haxe の条件付きコンパイル記述で処理切り分けを行うのであれば、わざわざ interface を用意せず Enemy クラス内に CreateJS と Flash 用処理の全てを記述してしまう、という方法もあります。しかし条件付きコンパイル記述で囲まれた箇所は、エディタ IntelliJ IDEA でリファクタリング対象にならない、というデメリットがあります。interface 内のみの 条件付きコンパイル記述指定で済むのであれば、プログラミングの負担は軽減され良しと考えます。

参考)条件付きコンパイル
http://haxe.org/ref/conditionals?lang=jp

[ FLASH ] [ tips ] 2013年04月05日 16:52 | コメント (0) | トラックバック

FLASH tips Flash CS のステージ上に配置したシンボルを Flash Box2D オブジェクトに変換する Haxe ライブラリ公開

先日公開した「Flash CS のステージ上に配置したシンボルを html5 canvas Box2D オブジェクトに変換する Haxe/js ライブラリ(FlashCS To CanvasBox2D Converter)」に引き続き、今回は「Flash CS のステージ上に配置したシンボルを Flash Box2D オブジェクトに変換する Haxe ライブラリ(FlashCS To FlashBox2D Converter)」を作成し github にて公開しました。

 haxelib リポジトリ
 https://github.com/siratama/haxelib

 ファイル一式ダウンロードページ
 https://github.com/siratama/haxelib/tags

FlashCS To FlashBox2D Converter を用いる事で、Haxe にて FlashCS のステージ上のシンボルを Box2D オブジェクトに再現する swf の生成が可能となります。FlashCS To CanvasBox2D Converter と合わせて使用する事で、html5 と Flash コンテンツ並行開発に有用できます。

ドキュメントは未作成ですが、サンプルソースコードは前回よりも見やすく改善されたため、内容を確認していただければ何となく使い方がわかっていただけるかと思います。

サンプルでは別途制作している Flash To Haxe Converter も利用しているので、合わせてそちらもご確認ください。

 Flash To Haxe Converter
 https://github.com/siratama/Flash-To-Haxe-Converter

[ FLASH ] [ tips ] 2013年04月03日 18:42 | コメント (0) | トラックバック

FLASH tips update Flash CS から Haxe用 extern クラスを出力する JSFL 公開

Flash CS から Haxe用 extern クラスを出力する JSFL を公開しました。

 github
 https://github.com/siratama/Flash-To-Haxe-Converter

 ファイル一式ダウンロードページ
 https://github.com/siratama/Flash-To-Haxe-Converter/tags

なんだか似たようなことばかり行なっていますが、少しずつ機能改善を行なっています。先日公開した「swf から CreateJS-Haxe用 extern クラスを生成するアプリ」は少々問題があったため開発を中止しました。以後は、同等の機能を持つ 当JSFL をご利用ください。

以下は前回から少々変わった遷移図です。

JSFL により、Flash CS から直接 Haxe 用 extern クラスの出力を行うようになりました。AIR アプリケーションのインストール作業等無くなったため、準備にかかる工程も減り、よりとっつきやすくなったかと思います。

代わりに Flash CS から生成されるクラス群の内容は独自のものであり、機能的に足りない箇所があるかもしれません。最低必要限の実装は行ったつもりです。何か抜けがありましたらお知らせください。

また、JSFL は javascript である、という事から JSFL 自体も Haxe で作成してしまいました。Template 機能を利用して かなり見やすいソースコードでクラス生成部分の処理作成が行えました。

 Haxeのテンプレートシステムが便利。
 http://qiita.com/items/887e506baf60bd6713f8

Haxe はヒアドキュメント的な記述も可能との事で試してみましたが、こちらは IntelliJ IDEA のエディタ側がサポートしていないのか、エラー表示がなされてしまうため Template クラスの利用のみを行なっています。

 http://qiita.com/items/d18f441abb5467357a19

jsfl 用 extern クラスは以下のものを利用しました。

 http://lib.haxe.org/p/jsfl

ただし、結構内容が古いのかそのまま利用できず、3,4 つほどクラスを修正を行う必要があります。

[ FLASH ] [ tips ] [ update ] 2013年03月19日 19:33 | コメント (0) | トラックバック

FLASH tips update swf から CreateJS-Haxe用 extern クラスを生成するアプリ公開

swf から CreateJS-Haxe用 extern クラスを生成するアプリケーションを公開しました。

 github
 https://github.com/siratama/Swf-To-CreateJS-Haxe-Converter

 ファイル一式ダウンロードページ
 https://github.com/siratama/Swf-To-CreateJS-Haxe-Converter/tags

以下ドキュメントから概要を引用します。

Swf-To-CreateJS-Haxe-Converter

Swf-To-CreateJS-Haxe-Converter は、swf から CreateJS-Haxe 用 extern クラスを生成するアプリケーションです。

Haxe と当アプリケーションの機能を用いる事で、Flash CS のライブラリ内で設定したファイル構造をそのまま Haxe クラス群に出力できます。これらクラス群は、Haxe での Flash コンテンツや html5 コンテンツ開発に有用できます。

制作の流れと当アプリケーションの役割箇所

Flash CS と Haxe を利用することで、Flash コンテンツ, html5 canvas コンテンツ, Desktop アプリケーション, Android アプリ, iOS アプリ といった様々なプラットフォーム向けのコンテンツ並行制作が可能となります。制作の流れは以下の図のようになります。

図内 左半分が全体の制作の流れ、右半分側が当アプリケーション(SwfToCreateJSHaxeConverter)役割箇所を抽出したものとなります。別途制作しているライブラリ TFCLib に関しましては後述します。

まず、Photoshop や Illustrator を用いて画像素材を作成し、また、サウンド編集ソフトで音声ファイルを作成後、Flash CS に取り込みます。

Flash CS では、各素材を利用してアニメーションを作成したり、各素材データをスクリプトから操作できるよう 素材に命名(リンケージ設定)を行います。編集作業完了後、Flash コンテンツを制作する場合は swf をパブリッシュ、html5 コンテンツを制作する場合は Toolkit for CreateJS でのパブリッシュを行います。

パブリッシュされた swf からは、Haxe の生成機能を利用して、Flash 内構造そのままの hx クラス群(図内 Flash-Haxe)の出力を行います。そして当アプリケーションを利用することで Flash-Haxe から CreateJS-Haxe 用 hx クラス群に変換を行います。

出力された Flash & html5 用のデータは共通の構造を持つため、クロスプラットフォーム用言語 Haxe にて処理することにより、より少ない手間で Flash コンテンツや html5 canvas コンテンツの同時制作が可能となります。

更に、Flash コンテンツ用 swf に多少の処理を付け加えることで、そのまま Adobe AIR に変換する事もできます。(Adobe AIR 専用の機能を利用する場合は図内「Flash(swf)」の他 Adobe AIR 用の swf 出力が必要となります。)

TFCLib は Toolkit for CreateJS のパブリッシュデータをスクリプト(javascript or Haxe)から利用しやすくするためのもので、別途制作しているライブラリです。当アプリケーションで出力される 図内 CreateJS-Haxe クラス群は無くても利用できますが、利用すると更に効率よく開発を進めることが可能となります。

 TFCLib その他ライブラリを配置しているディレクトリ
 https://github.com/siratama/haxelib

--- 引用ここまで ---

補足

図の説明は少々端折っている箇所がいくつかあります。例えば、Haxe から出力した swf のデバッグ方法であったり、iOS 向けアプリを制作するのであれば Haxe からは swf ではなく AS3 を出力したほうがよいのかもしれない、等など。
ともあれ、fla ファイル一つとプログラミング言語 Haxe があれば、様々なプラットフォーム向けのコンテンツ制作が行える、という事が何となくわかっていただけるのではないかと思います。

前回 前々回の記事もよろしければご参考ください。以下の点について書かれています。

・当アプリケーションを制作する事になった経緯
・アプリケーション仕様
・当アプリケーションを利用しマルチプラットフォーム向けの実装を行なって気付いた点

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

[ FLASH ] [ tips ] [ update ] 2013年03月16日 12:55 | コメント (0) | トラックバック

FLASH tips swf から CreateJS-Haxe用 extern クラスを生成するアプリ制作 其ノ二

 前回の記事
 http://www.dango-itimi.com/blog/archives/2013/001168.html

上記アプリケーション制作がほぼ完了しました。残り作業は ドキュメント制作と github への公開となります。公開後は、アプリケーション説明図付きで再度 blog に記述したいと思います。

以下、今回のアプリケーション制作において考えが抜けていた点と、アプリケーションを用いての Flash + html5 開発を同時に行なってみた感想を記述します。

▽続きを読む

[ FLASH ] [ tips ] 2013年03月13日 19:37 | コメント (0) | トラックバック

FLASH tips swf から CreateJS-Haxe用 extern クラスを生成するアプリ制作開始

先日 Toolkit for CreateJS の出力ファイルを Haxe クラスに変換するアプリを公開しました。しかし、メンテナンスの難さがあったり クラス構造がイマイチであったりと、やや問題が残る状況でもあります。

 Toolkit for CreateJS の出力ファイルを Haxe クラスに変換するアプリ公開
 http://www.dango-itimi.com/blog/archives/2013/001167.html

色々考えた結果、別途アプリケーションを制作し、問題解決 + 更なる開発のし易さ向上を図ることにしました。

▽続きを読む

[ FLASH ] [ tips ] 2013年03月10日 02:07 | コメント (0) | トラックバック

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

Toolkit for CreateJS から出力される js, html ファイルの内容を解析し、Haxe クラスに変換するアプリケーションを Adobe AIR にて作成し、github で公開しました。

 TFC-JS-To-Haxe-Converter
 https://github.com/siratama/TFC-JS-To-Haxe-Converter

 ファイル一式 ダウンロードページ
 https://github.com/siratama/TFC-JS-To-Haxe-Converter/tags

使い方等、詳しくは上記 TFC-JS-To-Haxe-Converter ページ内に記述しています。

出力されるクラスの形式に少々変更がかかっていますが、先日の記事もご参考ください。

 Toolkit for CreateJS の出力ファイルを Haxe クラスに変換するアプリ作成中
 http://www.dango-itimi.com/blog/archives/2013/001166.html

当アプリケーションから出力された Haxe クラスを用いての簡単なサンプルが問題なく動作したので公開しましたが、不具合がある可能性は高いです。これから何か簡単なゲームでも作って問題箇所はないか調査したいと思います。

[ FLASH ] [ tips ] [ update ] 2013年03月07日 20:25 | コメント (0) | トラックバック

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 ] 2013年03月04日 19:32 | コメント (0) | トラックバック

FLASH tips Flash CS のステージ上に配置したシンボルを html5 canvas Box2D オブジェクトに変換する Haxe/js ライブラリ公開

先日の TFCLib に引き続き、記事タイトルの内容のものを github にて公開しました。

 haxelib リポジトリ
 https://github.com/siratama/haxelib

 ファイル一式ダウンロードページ
 https://github.com/siratama/haxelib/tags

Flash CS 上に、四角いシンボル(Box)、丸いシンボル(Circle) 緑色の点の集合(Polygon) を配置後、Toolkit for CreateJS にてパブリッシュを行うと…

以下の図のように html5 canvas 上に Box2D オブジェクトとして再現されます。

再現された Box2D オブジェクトは勿論 スクリプトから制御が可能になります。

上記図のものとはオブジェクトの配置位置など異なりますが、動作サンプルは以下の URL より確認可能です。
http://www.dango-itimi.com/html5/2/

▽続きを読む

[ FLASH ] [ tips ] 2013年03月02日 01:39 | コメント (0) | トラックバック

FLASH tips Toolkit for CreateJS: プロパティ名に連番が付与されてしまう問題への対処

追記 2013/4/5)Toolkit for CreateJS 1.2 で当記事の問題は解決されました。

Toolkit for CreateJS 1.1 から出力したデータには、条件によってはインスタンスプロパティ名に連番が自動的に付与されてしまう、という問題が発生します。

例えば、Flash CS6 上でステージに配置したムービークリップのプロパティ名を「test」としたのに、Toolkit for CreateJS で出力された js ファイル内を見ると「test_1」というプロパティ名になってしまう場合があります。

何らかの理由からこのような仕様になっているのかもしれません。あるいは Toolkit for CreateJS のアップグレードで解決する問題かもしれません。
取り敢えずの現状の対処としまして、スクリプト側で問題を解決することにします。

▽続きを読む

[ FLASH ] [ tips ] 2013年02月25日 20:04 | コメント (0) | トラックバック

FLASH tips TFCLib 公開

Toolkit For CreateJS のパブリッシュデータを スクリプトから利用しやすくするためのライブラリ「TFCLib」を github にて公開しました。

 haxelib リポジトリ
 https://github.com/siratama/haxelib

 ファイル一式ダウンロードページ
 https://github.com/siratama/haxelib/tags

TFCLib は、個人的 haxe 用 ライブラリ(haxelib)の中の一機能、としていますが、Haxe 用ライブラリの他、javascript から直接利用可能な js ファイルも用意しています。 よって、Haxe 以外の javascript 変換言語からも利用が可能です。

TFCLib の特徴は以下となります。

・Toolkit For CreateJS パブリッシュデータ読み込みの自動化
・ogg 形式のサウンドファイル手動配置に対応
・サウンドファイル手動配置ディレクトリを任意に設定可能
・タイムライン上に配置したサウンド含む サウンドファイルの再生における SoundInstance の再利用化
・fla ファイル分割化対応

TFCLib は簡単なスクリプト記述で利用が可能です。 例えば Haxe からは以下のような記述で Toolkit for CreateJS からパブリッシュされた素材の読み込みが完了します。

private function initialize(){

    Ticker.setFPS(24);
    Ticker.addEventListener("tick", run);

    initializeToLoadTFC();
}
private function run(){

    mainFunction();
}
private function initializeToLoadTFC(){

    tfcLoader = new TFCLoader("tfc", "tfc_sounds", true);
    tfcLoader.addMaterialDirectory("view");
    mainFunction = loadTFC;
}
private function loadTFC(){

    tfcLoader.run();
    if(tfcLoader.isFinished()){
        //読み込み完了
    }
}

TFCLoader クラスコンストラクタ引数に Toolkit for CreateJS のパブリッシュ先ディレクトリ等 指定した後、 TFCLoader.run メソッドを定期的に呼び出します。 TFCLoader.isFinished メソッドが true を返せば読み込み処理は完了です。

その他、TFCLib の利用方法を記したドキュメントは以下に配置しています。
docs/toolkit_for_createjs/index.html

TFCLib は、今後の Toolkit for CreateJS のアップグレードにて無用のものとなるかもしれません。Toolkit for CreateJS がアップグレードされ、機能が拡充されるまでの繋ぎ用ツールとしてご利用ください。

[ FLASH ] [ tips ] 2013年02月24日 13:08 | コメント (0) | トラックバック

FLASH tips SoundJS 0.4.0: iOS6 でサウンドを再生する方法

SoundJS 0.4.0 にて iOS6 でサウンドを再生する方法です。
PreloadJS でサウンドファイルを読み込んだ後、以下の javascript 処理の記述を行なってください。

var canvas = document.getElementById('canvas');
canvas.addEventListener('touchstart', function(){
	createjs.Sound.play('soundId');
	this.removeEventListener('touchstart', arguments.callee);
}, false);

'soundId'の箇所は任意に書き換えてください。

上記 touchstart イベントが実行されることで、'soundId' に指定したサウンドが再生され、同時に Web Audio API の音声ミュート状態が解除されます。以後は自由なタイミングで音声再生が可能になります。touchstart イベント内ではダミーの無音サウンド等を再生させたりするのが良いかもしれません。

iOS6 の Web Audio API での音声再生ですが、iPhone 3GS では結構な負荷がかかるようで、ものによっては処理速度がガタ落ちしてしまいます。むしろ音は鳴らさないほうが良い、なんて事もありそうです。

補足)Haxe では JQueryExtern の bind メソッドでタッチイベント定義を行えます。

private function test(){

	new JQuery("#canvas").bind("touchstart", "", this.onTouchStart);
}
private function onTouchStart(event){

	Sound.play('soundId');
	new JQuery("#canvas").unbind("touchstart");
}

追記 2013/6/23)
Haxe サンプルコードを Haxe 3 バージョンに変更

[ FLASH ] [ tips ] 2013年02月20日 20:54 | コメント (0) | トラックバック

FLASH tips update Toolkit for CreateJS 1.1 から出力される html から最新版 CreateJS を利用するための修正箇所

現在の Toolkit for CreateJS 1.1 から出力される html ファイルを元に 最新版 CreateJS(EaselJS 0.6.0, TweenJS 0.4.0, SoundJS 0.4.0, PreloadJS 0.3.0)を利用したい場合、以下の各箇所の修正を行います。

最新版 CreateJS は、音周りやその他もろもろ改善されている箇所があるとの事なので、次バージョンの Toolkit for CreateJS が登場する前に試してみたい、という方向けの内容となります。

まず、音と画像を配置しただけの fla ファイルを Toolkit for CreateJS でパブリッシュすると以下の様な html ファイルが出力されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.3.0.min.js"></script>

<script src="test.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	images = images||{};

	var manifest = [
		{src:"images/_1.png", id:"_1"},
		{src:"sounds/Explosion.mp3", id:"Explosion"}
	];

	var loader = new createjs.PreloadJS(false);
	loader.installPlugin(createjs.SoundJS);
	loader.onFileLoad = handleFileLoad;
	loader.onComplete = handleComplete;
	loader.loadManifest(manifest);
}

function handleFileLoad(o) {

	if (o.type == "image") { images[o.id] = o.result; }
}

function handleComplete() {
	exportRoot = new lib.test();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(24);
	createjs.Ticker.addListener(stage);
}

function playSound(name, loop) {
	createjs.SoundJS.play(name, createjs.SoundJS.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
	<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>

これを以下のように修正します。修正前のものはコメントアウトしています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>

<!--
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.3.0.min.js"></script>
-->
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>

<script src="test.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	images = images||{};

	var manifest = [
		{src:"images/_1.png", id:"_1"},
		{src:"sounds/Explosion.mp3", id:"Explosion"}
	];

	//var loader = new createjs.PreloadJS(false);
	//loader.installPlugin(createjs.SoundJS);
	//loader.onFileLoad = handleFileLoad;
	//loader.onComplete = handleComplete;
	var loader = new createjs.LoadQueue(false);
	loader.installPlugin(createjs.Sound);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(manifest);
}

function handleFileLoad(o) {

	var item = o.item;
	var type = item.type;
	if (type == "image") { images[item.id] = o.result; }
	//if (o.type == "image") { images[o.id] = o.result; }
}

function handleComplete() {
	exportRoot = new lib.test();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(24);
	createjs.Ticker.addListener(stage);
}

function playSound(name, loop) {
	//createjs.SoundJS.play(name, createjs.SoundJS.INTERRUPT_EARLY, 0, 0, loop);
	createjs.Sound.play(name, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
	<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>

主な変更内容は以下の通りです。

・head タグ内 各js ファイルのバージョン番号の変更
・PreloadJS クラスを LoadQueue クラスに変更
・LoadQueue で読み込まれたファイルの解析処理変更(handleFileLoadメソッド)
・SoundJS クラスを Sound クラスに変更

[ FLASH ] [ tips ] [ update ] 2013年02月20日 00:01 | コメント (0) | トラックバック

FLASH tips update CreateJS-Haxe: EaselJS 0.6.0, TweenJS 0.4.0, SoundJS 0.4.0, PreloadJS 0.3.0 に対応

先日公開された最新版 CreateJS に合わせて、Haxe 用 CreateJS extern の修正を行いました。github にて元制作者の方の元にマージ済みです。
 
 https://github.com/nickalie/CreateJS-Haxe

修正したすべてのファイルの動作検証は行なっておらず、誤っている箇所はあるかと思われますので、随時 github 経由で修正していただけたらと思います。CreateJS 公式の API リファレンスがそこそこ誤っている箇所もあるため、修正の際はご注意ください。

以下は、先日公開した html5 canvas ゲームを最新の CreateJS-Haxe を利用して修正したものとなります。
http://www.dango-itimi.com/html5/1/

見た目の動作的にはほとんど変化はありません。サウンド周りは Web Audio API が利用されるようになっているはずなので、iOS6 でも音が聞こえるようになっているのではないかと思います。鳴らなかったらごめんなさい。
Web Audio API に対応している PC版 Google Chrome で検証してみたところ、BGM のループは音が途切れることはなくなったような感じはあります。しかし音のにじみ方がややひどくなってしまいました。

今回の修正に沿った Toolkit for CreateJS 用 Haxe ライブラリは後日 github にて公開予定です。現在の Toolkit for CreateJS にある問題点をなるべく緩和するためのライブラリとなります。Haxe を変換して js ファイル用ライブラリとしても公開できたらと思います。

追記)
iOS6 でも音が鳴らない、と教えていただきました。
どこかこちらの設定ミスがありそうです。

[ FLASH ] [ tips ] [ update ] 2013年02月19日 23:26 | コメント (0) | トラックバック

FLASH tips Google App Engine(GAE/python): DataStore内 None値以外を取得し日付で並び替え

記事タイトルの方法がわからず、某巨大掲示板で質問したところ解決方法を教えていただいたのでメモです。

以下の様な 文字列と日付だけをデータストアに記録する MyModel があったとします。

class MyModel(ndb.Model)
	message = ndb.StringProperty()
	date = ndb.DateTimeProperty(auto_now_add=True)

message は None 値が挿入される場合があり、message が None 値ではないデータを取得するために、以下の記述を行なっていました。

q = MyModel.query(MyModel.message > None)

ここで更に MyModel.date による並び替えを行う条件式を付け加えたい所ですが、データストアの制約上 次の記述ではエラーとなってしまいます。

#error
q = MyModel.query(MyModel.message > None).order(MyModel.date) 

等式以外の条件式を利用した場合等、結構制限事項があります。ややこしくてあまり理解していません。

 参考) Google App Engine クエリに関する制限
 https://developers.google.com/appengine/docs/python/datastore/queries?hl=ja#Restrictions_on_Queries

上記解決する方法としまして、MyModel を以下のように変更します。

class MyModel(ndb.Model)
	message = ndb.StringProperty()
	message_exists = ndb.BooleanProperty(default=False)
	date = ndb.DateTimeProperty(auto_now_add=True)

message にデータを挿入する際、message が存在するのであれば message_exitst を True に設定します。

そして message が存在するデータを日付で並び替えるには、以下の様な条件式を記述すればよしとなります。

q = MyModel.query(MyModel.message_exitst == True).order(MyModel.date) 

[ FLASH ] [ tips ] 2013年02月16日 15:51 | コメント (0) | トラックバック

FLASH tips update Toolkit for CreateJS & Haxe : html5 シューティングゲームサンプル

Toolkit for CreateJS 1.1 と Haxe を用いて、html5 canvas で動作するシンプルなシューティングゲームの制作を行いました。リンク先には QR コードを配置しています。スマートフォンでの動作確認にご利用ください。

http://www.dango-itimi.com/html5/1/

ローディング画面は制作していないため、初めは少々真っ暗な画面が表示されたままとなります。

サウンド再生周りに関して

Windows7 上では、html5 audio タグによるサウンド再生周りは以下の様な結果になりました。左に行くほど良い結果となります。

 IE9 > Opera > Google Chrome > Firefox

なんと音周りでは IE9 が一番良く、ほぼ問題なく再生されました。(ただし、スクリプトによる音量調節は不可能)
Opera はサウンドループ時 微妙な間が空きます。
Google Chrome は BGM のループサウンドがにじんで聞こえます。
Firefox は BGM のループサウンドはにじみ、弾の発射音等 連続再生されると音が聞こえなくなります。
Android や iOS 上では、以前の報告通り音はほぼ鳴りません。

Flash ゲーム制作との比較

私の Flash ゲーム制作にかかる手間を 1 とすると Toolkit for CreateJS & Haxe による html5 ゲーム制作にかかる手間は 1.5 倍くらいでしょうか。今までの調査と、先日記事にした IntelliJ IDEA のおかげで、かなり Flash 制作と同等の制作工程に近づけたと思います。IntelliJ IDEA の Refactor 機能が無いと、制作物の規模が大きくなればなるほど比例して制作の手間は増加していきそうです。
(一点ほど新たに Toolkit for CreateJS 1.1 での出力データに関して やや面倒な仕様があることに気付いたため、別途記事にするかもしれません。)

制作の手間は 1.5倍ほどとはいいましたが、あくまでその制作物が 再生側で正常に動作してくれれば、の話となります。
今回のゲームはマウスドラッグ処理を用いている箇所があり、端末によっては こちらの意図通り動作してくれない恐れがあります。よって、端末によって異なる動作に対応するための調査時間など、通常制作以外で別途時間が必要になってきます。
マウスドラッグを必要とはせず、マウスダウン処理のみで済むゲームであるならば、あらゆる端末で同じ動作となってくれそうではあります。

html5 制作

今回は html5 canvas ゲーム制作を行いましたが、html のレイヤー機能を用い canvas の上に DOM を表示する等行えば、ウネウネ動作する html5 サイトや html5 アプリケーションの制作が可能になります。

 参考) canvas と HTML のハイブリッド実装をする
 http://www.ibm.com/developerworks/jp/web/library/wa-htmlmark/index.html#N10282

ただしネット上で見る感じ、レイヤー機能はレイヤー機能でまた色々な問題がありそうです。

その他、バグが多いらしく採用されるかどうかはわかりませんが、次期バージョンの CreateJS では 直接 DOM を操作する事が可能になるクラスが実験的に用意されているようです。端末間の動作の違いを吸収してくれるのであれば、こちらにも期待したい所です。

今後

そろそろ次期バージョンの CreateJS が出るらしい、という点と、最近 Haxe の新バージョンが公開されたので、それらに対応した Toolkit for CreateJS & Haxe 用ライブラリ制作を行う予定です。
追記)すみません、まだ Haxe 新バージョンは公開されておらず仕様が公開されただけかもしれません。

個人的に Toolkit for CreateJS & Haxe で何か html5 関連の制作を行うかどうかは未定です。AIR によって、Flash ゲームとモバイル端末(Android, iOS)向けのアプリケーション制作が同時に行えるため、制作するなら Flash or AIR 優先となりそうです。

Haxe は Javascript 以外にも、Action Script(AS3) に変換したり、swf を出力する機能も持ち合わせているので、初めからすべて Haxe で作ってしまう、という手もありますが、これは場合によりけりとなりそうです。Flash 制作には AS3 用エディタ FDT があり、このツールの存在は大きいです。

Android, iOS でもブラウザ上で遊べる Web ゲームや Web アプリ制作を行いたい、という事になったらば、Toolkit for CreateJS & Haxe は活躍してくれそうです。

[ FLASH ] [ tips ] [ update ] 2013年02月11日 20:38 | コメント (2) | トラックバック

FLASH tips IntelliJ IDEA Haxe plugin 使用感と FDT Haxe エディタとの比較

前回の記事「IntelliJ IDEA Haxe」を書いた後、IntelliJ IDEA Haxe plugin (& Python plugin)にて じっくりとコーディングを行なってみての使用感です。

Haxe plugin に関する日本語の情報はあまり見つからず、果たしてどこか設定を行えば解決するのか、あるいはそういう仕様であるのかが分からない部分もあります。間違った箇所がありましたら ご指摘ください。

Refactor 機能は完璧ではない

Haxe には型推論機能があります。

 Haxe 型推論
 http://haxe.org/ref/type_infer?lang=jp

このおかげで、あらゆる箇所で型の宣言を省略した記述が可能になります。しかし省略してしまうとエディタ側(もしくはコンパイラ?)で推論できない箇所が出てきてしまうようで、Refactor の Rename コマンドが機能しない場合があります。

例えば以下の様な三つのクラス User, Human, Sample があったとします。コンストラクタ等の記述は略しています。

class User{

	public function execute(){

		var human = new Human();
		human.getSample().run();
	}
}
class Human{

	public function getSample(){
		return new Sample();
	}
}
class Sample{

	public function run(){
	}
}

ここで、Rename 機能を用いて Sample.run メソッドを Sample.test に変更したとします。
Rename に合わせて human.getSample().run(); の行は human.getSample().test(); に変更される事を期待しますが、何も変わってくれず human.getSample().run(); のままとなってしまいます。

Rename 機能を確実に動作させるためには Human.getSample メソッドの戻り値の型を省かずきちんと記述する必要があります。

class Human{

	public function getSample():Sample{
		return new Sample();
	}
}

もしくは以下のように受け取り側で型を指定します。

	public function execute(){

		var human = new Human();
		var sample:Sample = human.getSample();
		sample.run();
	}


コーディング中のエラーチェックはあまり厳しくない箇所がある

FDT Haxe エディタの場合、Live error checking 機能により存在しない変数やメソッドの利用を行った際 エラー表示を即行なってくれます。例えば適当に「aaa」と入力すると、「aaa は存在しない」といったエラー表示が行われます。

対して、IntelliJ IDEA Haxe plugin では「aaa」と入力してもコーディング中は何も起こらず。コンパイル時にエラー表示が行われます。これはそういう方針・仕様なのかもしれません。もしくは設定によってはエラーチェックが厳しくなるような機能が用意されている可能性もあります。

IntelliJ IDEA のエラーチェック周りの設定は調べてみるも、ちょっとわからずです。

コンパイルされたファイルの出力ディレクトリ設定が変更不可

色々設定を探してみたりネットで調べてみるも、どうしても解決できていない問題です。
IntelliJ IDEA では Haxe ソースコードをコンパイルし js ファイルに出力する際、出力先ディレクトリの指定を行えます。しかし、その指定したディレクトリ内に release というディレクトリが作成されてしまい、その release ディレクトリ内に js ファイルが出力されます。release というディレクトリを無くしたい、もしくは名称を変更したい場合 どうすればよいのか分かりませんでした。

Ant 機能があるので、コンパイルと同時に出力された js ファイルを任意のディレクトリに移動する、といった方法はあるかもしれません。

他プログラミング言語開発環境で使用可能な機能が使えるとは限らない

Refactor 機能があるからといって、IntelliJ IDEA の他のプログラミング開発環境で使用可能な機能が haxe plugin でも使用できる、という事はないようです。これは eclipse にも言える事でした。

変数をフィールド変数に変更する機能が使用できれば嬉しかったのですが、ないのでやや残念。メソッドの返り値をローカル変数に割り当てる、といった機能はありました。
メニューの Refactor -> Extract -> Variable がその機能となります。こちらの windows 環境では Alt + Shift + L で利用でき、そこそこ便利な機能です。

まとめ : FDT Haxe エディタと IntelliJ IDEA Haxe plugin の併用が良い

まだまだ欲しい機能はあるものの Refactor 機能のおかげで、FDT Haxe エディタよりも IntelliJ IDEA Haxe plugin のほうが より効率よく開発が行えます。

コーディングは IntelliJ IDEA Haxe plugin にて行ない、背後では FDT Haxe エディタを立ち上げておき、IntelliJ IDEA では足りないエラーチェックは FDT Haxe エディタで行う、とするのが今のところの私の開発スタイルとなっています。

両ツール共に自動更新機能があるため、IntelliJ IDEA で存在しない変数やメソッドの利用を行った場合 FDT 側でエラーを探知してくれます。そして FDT Haxe は任意のディレクトリへ js ファイルの自動コンパイル出力を行なってくれるため、IntelliJ IDEA 側でコンパイルする必要はありません。

IntelliJ IDEA Haxe plugin は有料版でないと利用できない、との事ですが、個人ライセンス(商用可)ならさほど高くない値段($199)です。Haxe での開発効率を上げてみたい方は、一度試用をおすすめします。
一年程度の間隔でアップデートがあり アップデートには料金がかかるとの事ですが、アップデートしなくても使えるのかどうかはちょっと不明です。使えるのであれば、必要時にアップデートするという方法で充分といえる内容でもあります。


追記)twitter より
https://twitter.com/cellfusion/status/300454035432013824
FDT では js ファイル出力設定には hxml というものが利用されている、との事です。
FDT の haxe プロジェクト作成時に生成される compiler.hxml を IntelliJ IDEA の Project Setting から指定すれば、js ファイル出力先ディレクトリに release ディレクトリが生成されることはなくなりました。ありがとうございます。

[ FLASH ] [ tips ] 2013年02月09日 16:32 | コメント (0) | トラックバック

FLASH tips IntelliJ IDEA Haxe

最近では createjs 関連の他、Google App Engine(GAE/python) 絡みで Haxe を利用しています。

以前「FDT の Haxe エディタ機能について調査」という記事を書きましたが、その時の結論としては、FDT の Action Script 開発に対し Haxe での開発は効率が落ちてしまう、といったものでした。

 FDT の Haxe エディタ機能について調査
 http://www.dango-itimi.com/blog/archives/2012/001124.html

ここで、FDT 以外の Haxe 開発用エディタとして最近目にして気になっていた IntelliJ IDEA (有料版) というものを試用してみました。ざっと使ってみた感想としましては、IntelliJ IDEA を使えば FDT で不満に感じていた点はかなり解決する事になりそう、といったところです。

決め手はは、Refactor(Rename, Move)機能があるという点です。これだけで開発効率は飛躍的に向上します。Vim プラグインもあり、他 Haxe 開発環境に比べて一歩抜き出ているのではないでしょうか。

少々使っただけで機能の良さが理解できたため、他の言語に対しても eclipse に対し より良い開発環境が用意されているのかもしれないと期待してしまいます。python Plugin がどれほどのものか早速調査してみる予定です。


IntelliJ IDEA
http://www.jetbrains.com/idea/

vim plugin
http://plugins.jetbrains.com/plugin/?id=164

haxe plugin
http://plugins.jetbrains.com/plugin/?pluginId=6873

追記)
python plugin を一日ほど利用してみたところ、これまたかなり良い、という感想となりました。
eclipse では pydev というプラグインを利用していましたが、Refactor 機能はほぼ無いといっていいくらいの性能でした。同一クラス内のメソッドや変数の変更に対応している程度です。
対して IntelliJ pyton plugin 版は Refactor 機能完備で、他クラスに設定されている変数・メソッドに思いのままにジャンプできます。
今日現在では、haxe と python の開発は IntelliJ で行うのがベストかな、といったところです。

[ FLASH ] [ tips ] 2013年02月07日 03:40 | コメント (0) | トラックバック

FLASH tips CreateJS MouseEvent が意図通り機能しない場合 Touch クラスからマルチタッチ有効化を

CreateJS で制作しているサンプルゲームを Android nexus7 Chrome にて動作検証していたところ、どうも MouseEvent の動作がおかしいという状況に。マウスプレスイベント(onPress)と同時にマウスアップイベント(onMouseUp)が発生してしまい、マウスムーブイベント(onMouseMove)はまったく発生してくれません。

どうしたものかと、何となく Touch クラスからマルチタッチを有効化してみたところ、意図通り動作するようになりました。以下の一行を付け加えただけです。

Touch.enable(stage);

次期バージョンの EaselJS ではどのような動作になるかまだ未検証ですが、とりあえずのメモということで。

[ FLASH ] [ tips ] 2013年01月31日 23:46 | コメント (0) | トラックバック

FLASH tips モバイルブラウザ サウンド再生周り調査: HTML5 audio, Web Audio API, SoundJS

Android や iOS のブラウザ上ではサウンド再生周りに制限がある、という情報は以前から少々目にしていましたが、まずは深くは考えず PC 優先で CreateJS にてサンプルゲーム制作を進めていました。
大まかな形になってきた所で、Android nexus7 にて動作確認をしてみたところ、案の定まったく音が再生されないという状況に。

何が問題なのかを理解するために、現時点での Android と iOS 端末のブラウザ上では サウンド再生に関する制限事項がどのようなものなのか、サウンド再生用ライブラリ SoundJS を通じて調査を行いました。

SoundJS

次期バージョンドキュメント

現在の SoundJS のバージョンは 0.3.0 です。次期バージョン 0.4.0 は SoundJS の github のサイトにて公開されており、仕様は以下の URL 内のファイルをダウンロードする事で確認できます。SoundJS_docs-NEXT.zip が次期バージョンの SoundJS ドキュメントとなります。

 https://github.com/CreateJS/SoundJS/tree/master/docs

SoundJS 0.4.0 のドキュメント内容を見てみると、サウンド再生用クラスに WebAudioPlugin というものが追加された事がわかります。WebAudioPlugin を利用する事で「Web Audio API」と呼ばれるブラウザの仕組みでのサウンド再生が可能との事です。SoundJS 0.3.0 でも利用していた HTMLAudioPlugin は html5 の audio タグでサウンドを再生します。

SoundJS 0.4.0 のデフォルト設定では、WebAudioPlugin が優先的に利用され、Web Audio API に対応していない環境では HtmlAudioPlugin が利用されるようになります。

html5 audio タグ

私が作成していたサンプルゲームでは現状で最終リリース版の SoundJS 0.3.0 を利用しているため、サウンド再生は html5 の audio タグを用いて行われていた事になります。SoundJS 0.4.0 の HTMLAudioPlugin の項を見てみると、既知の問題として Android では以下の点が挙げられていました。

・スクリプトによる音量調節は不可
・ユーザーの何かの操作をトリガーとした場合のみサウンド再生が可能
・サウンドをループさせることは不可能

iOS の html5 audio タグに関してましては結構問題が多いようで、以下のサイトが参考になります。

 iOS における HTML5 の audio 要素に関する制約を克服する
 http://www.ibm.com/developerworks/jp/web/library/wa-ioshtml5/

これら Andorid と iOS の制限事項から、html5 audio タグ(HtmlAudioPlugin)でのサウンド再生は PC のようにはいかない、という事がわかります。

Web Audio API

SoundJS 0.4.0 の WebAudioPlugin の既知の問題の項を見てみると、以下の iOS6 に関しての記述のみが挙げられています。

・サウンドは初めはミュート状態で ユーザが画面タッチを行うとミュートが解除される

問題点がこれだけなので、Web Audio API を用いれば、PC での html5 audio タグでのサウンド再生とほぼ同じ事が可能なのではないか?と考えられます。

Web Audio API はどれくらいの環境でサポートされているのか、以下の URL に挙げられてました。

 http://caniuse.com/audio-api

現在の所 モバイル端末では iOS6 の Safari のみ、との事で Android での利用はできません。Android で利用できるようになったとしても、制限無しで Web Audio API すべての機能が利用できるようになるかどうかは不明です。

まとめ

Android の html5 audio タグによるサウンド再生制限事項から、現状 PC 版 モバイル版 全てで同じ動作を行うものを作ることは難しい状況です。工夫すればなんとかなりそうではあります。ゲームの BGM はイントロのみを流す感じにして、スタートボタンを押した時のみ再生するようにする、等。

iOS に関しましては iPhone 3GS といった古い端末でも iOS6 といった最新の OS へのアップデートは可能なのでしょうか?可能ならば Web Audio API を利用していけばよさそうです。不可能な場合、iOS6 より前のバージョンの OS は サウンド再生周りは諦めるか、上述で挙げた URL「iOS における HTML5 の audio 要素に関する制約を克服する」内にある「オーディオ・スプライト」と呼ばれる方法を採るしかなさそうです。

[ FLASH ] [ tips ] 2013年01月25日 12:31 | コメント (0) | トラックバック

FLASH tips Toolkit for CreateJS & Haxe : シンボルの初期表示サイズ・位置情報取得 nominalBounds

CreateJS の Container クラスには width や height といったプロパティは用意されていません。なんとか width や height を取得する方法はないものかと調べてみたところ、「Toolkit for CreateJS 1.1」によって出力された javascript ファイル内の各 Container.nominalBounds プロパティを利用すれば、ある程度代用が効くことがわかりました。

nominalBounds プロパティ

Toolkit for CreateJS によって出力された javascript ファイルの内容を見てみると、以下の様な記述を目にします。

(lib.sample = function() {
	…略…
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,20,550,360);

lib.sample.nominalBounds プロパティが lib.sample クラスの初期表示サイズ・位置情報となります。「初期」のデータという事で、スクリプトによってこの sample クラス内に何か別のシンボルが配置されたり 位置が移動したとしても nominalBounds の値が変わることはありません。

nominal の意味を調べてみると「わずかな」という意味のようですが、わずかながらでも大変助かる仕組みでありがたいです。素材データの画像の大きさに変更がかかったり、fla ファイル内シンボルの表示サイズを変更したりする際、逐一 haxe 側にて手動で表示サイズの数値変更を行う必要は無くなります。

注意事項としましては、仕様なのか不具合なのかはわかりませんが、Bitmap クラスに対しては以下の様な記述になってしまっており、lib.sample2 の表示サイズが取得できない状況となっています。

(lib.sample2 = function() {
	…略…
}).prototype = new cjs.Bitmap(); //変数 p への代入が抜けている
p.nominalBounds = new cjs.Rectangle(0,0,36,34);

今後の Toolkit for CreateJS のバージョンアップで改善されるかもしれません。

hexe での対応

nominalBounds プロパティは「Toolkit for CreateJS」によってダイナミックに Container クラスインスタンスに付与されたものであり、「CreateJS」でサポートしているプロパティではありません。
Container.hx 内に nominalBounds フィールド変数を定義してしまえばコンパイルが楽ではありますが、以下のように別途変換用クラスを設けて対応します。

package lib.toolkit_for_createjs.utils;

import createjs.easeljs.Rectangle;

class ContainerUtil {

	public static function getNominalBounds(container:Dynamic):Rectangle{
		
		return container.nominalBounds;
	}
}

生成した Container インスタンスを ContainerUtil.getNominalBounds メソッドの引数に指定する事により、Container インスタンスの初期表示サイズ・位置情報を取得できます。

[ FLASH ] [ tips ] 2013年01月22日 12:23 | コメント (0) | トラックバック

FLASH tips Toolkit for CreateJS & Haxe : フレームに配置したサウンドへの対応

Flash CS にてムービークリップのタイムライン上にサウンドファイルを配置したとします。その後 Toolkit for CreateJS 1.1 を用いてパブリッシュを行い、出力された素材データを Haxe で操作しようとすると一点問題が発生する事に気づきました。
今回はその問題に対する対処法を記述します。

▽続きを読む

[ FLASH ] [ tips ] 2013年01月18日 16:35 | コメント (0) | トラックバック

FLASH tips CreateJS & Haxe : MovieClip.hx, Timeline.hx, Point.hx 修正・処理追加

後々の CreateJS と Haxe 側のアップデートで解決される問題となりますが、現段階での利用者側としての対応を記述。

createjs.easeljs.MovieClip.hx

FDT の Haxe エディタにて CreateJS 用プログラミングをしていたところ、createjs.easeljs.MovieClip の記述を行った段階でコンパイルエラーが発生しました。エディタのバグだろうかと調べてみたところ、ちょうど何日か前に Haxe 用 createjs.easeljs.MovieClip.hx のバグ修正が行われていた模様。

以下の MovieClip.hx と差し替えることで正常に動作するようになりました。

 https://github.com/nickalie/CreateJS-Haxe/blob/master/createjs/easeljs/MovieClip.hx

createjs.tweenjs.Timeline.hx

上記 URL でも公開されている Haxe 用 createjs.tweenjs.Timeline.hx クラスはどうやら最新の API に対応していないようで、以下のものに変更を行いました。プロパティとメソッドを公式の API 通り追加しただけとなります。

package createjs.tweenjs;

@:native("createjs.Timeline")
extern class Timeline
{

public var duration:Int;
public var ignoreGlobalPause:Bool;
public var loop:Bool;
public var onChange:Dynamic;
public var position:Dynamic;

public function new(tweens:Array<Tween>, labels:Array<String>, props:Dynamic):Void;
public function addLabel(label:String, position:Int):Void;
public function addTween(tween:Tween):Void;
public function gotoAndPlay(positionOrLabel:Dynamic):Void;
public function gotoAndStop(positionOrLabel:Dynamic):Void;
public function removeTween(tween:Tween):Void;
public function resolve(positionOrLabel:Dynamic):Int;
public function setPaused(value:Bool):Void;
public function setPosition(value:Int, actionsMode:Dynamic):Void;
public function tick(delta:Int):Void;
public function toString():String;
public function updateDuration():Void;

}

 参考) 公式 Timeline クラスのAPI
 http://createjs.com/Docs/TweenJS/Timeline.html

Action Script 3.0 で利用可能な MovieClip.currentFrameLabel 機能は Createjs の MovieClip には現在ありませんが、MovieClip.timeline.resolve メソッドを利用する事で解決できます。

createjs.easeljs.Point.hx

Action Script 3.0 の Point クラスに用意されている各メソッドを CreateJS でも利用するため、以下のサイトで公開されているソースを Haxe 用に移植させていただきました。

 EaselJSのPointクラスをFlashライクに拡張しよう | kudox.jp
 http://kudox.jp/java-script/createjs-point-extended

createjs.easeljs.Point クラスを拡張した lib.utils.PointUtil クラス

package lib.utils;
import createjs.easeljs.Point;

class PointUtil extends Point{

	public function getLength(){
		return Math.sqrt(x * x + y * y);
	}
	public function add(v:PointUtil){
		return new PointUtil(x + v.x, y + v.y);
	}
	public function subtract(v:PointUtil){
		return new PointUtil(x - v.x, y - v.y);
	}
	public function equals(toCompare:PointUtil){
		return x == toCompare.x && y == toCompare.y;	
	}
	public function normalize(thickness:Float){
		var length = getLength();
		if(length == 0 || thickness == 0){
			x = 0;
			y = 0;
		}
		else{
			var scale = thickness / length;
			x *= scale;
			y *= scale;
		}
	}
	public function offset(dx:Float, dy:Float){
		x += dx;	
		y += dy;	
	}
	public static function distance(pt1:PointUtil, pt2:PointUtil){
		return Math.sqrt(Math.pow(pt2.x - pt1.x, 2) + Math.pow(pt2.y - pt1.y, 2));
	}
	public static function interpolate(pt1:PointUtil, pt2:PointUtil, f:Float){
		return new PointUtil((pt1.x - pt2.x) * f + pt2.x, (pt1.y - pt2.y) * f + pt2.y);
	}
	public static function polar(len:Float, angle:Float){
		return new PointUtil(Math.cos(angle) * len, Math.sin(angle) * len);
	}
}


上記 URL でも公開されている Haxe 用 createjs.tweenjs.Timeline.hx クラスはどうやら最新の API に対応していないようで、以下のものに変更を行いました。プロパティとメソッドを公式の API 通り追加しただけとなります。

追記)
Haxe Code Snippets の項に PointUtils クラスがすでにありました。
http://haxe.org/doc/snip/pointmanipulation

[ FLASH ] [ tips ] 2013年01月17日 19:21 | コメント (0) | トラックバック

FLASH tips Toolkit for CreateJS & Haxe : パッケージ名取得からのクラス生成処理共通化

Action Script 3.0(AS3) では getQualifiedClassName メソッドや describeTypea メソッドを用いる事で、インスタンスやクラスのパッケージ名を取得できます。Haxe ではどうすればよいかと調べた所、Type.getClass メソッドや Type.getClassName メソッドを用いればよいとの事です。

この Haxe によるパッケージ名を取得する方法を用い、Toolkit for CreateJS から出力されたクラスのインスタンス化を行う共通処理のメモを記述します。

仕様確認

以下の様な fla ファイルを作成したとします。

Toolkit for CreateJS を用いてこの fla ファイルをパブリッシュすると、「shooting.player.View」クラスは「lib.shootingplayerView」というクラスに変換されます。パッケージ名を区切るピリオド(.)が無くなり一文字に繋がっていることがわかります。

Haxe からは js.Lib.eval メソッドを用い以下の様な記述を行うことで lib.shootingplayerView の生成が可能となります。

var view:Container = Lib.eval("new lib.shootingplayerView()");

開発を進めていくと、パッケージ構造やクラス名に変更がかかる場合があり、その都度 shootingplayerView の記述を変更する必要があります。この修正をもう少し簡単に行えるよう、今回 Instance.hx というサンプルクラスを作成しました。

Instance.hx の使い方

まずは、Flash 側で設定したパッケージ構造 shooting.player.View クラスと同じパッケージ構造の shooting.player.Player クラスを Haxe で作成します。
作成後、Player クラス内で以下のように Instance クラスを利用する事で、lib.shootingplayerView クラスの生成が可能となります。

Player.hx

package shooting.player;

import createjs.easeljs.Container;
import lib.toolkit_for_createjs.Instance;

class Player {
	
	private var view:Container;

	public function new(){
		
		view = Instance.createWithSamePackageInstance("View", this);
		//view = Instance.createWithSamePackageClass("View", Player);
	}
}

インスタンス(this) or クラス(Player) と同一パッケージ内の View クラス(lib.shootingplayerView)を生成する、という命令となります。

クラスの内容

Instance.hx では別途作成した ClassUtil.hx を利用しています。

Toolkit for CreateJS から出力されたクラスを Haxe にてインスタンス化する Instance.hx

package lib.toolkit_for_createjs;

import js.Lib;
import lib.utils.ClassUtil;

class Instance {
	
	private static inline var NAMESPACE_SYMBOL = "lib";

	public static function createWithSamePackageInstance(
		createdClassName:String, samePackageInstance:Dynamic, ?symbolNameSpace:String):Dynamic{
		
		var packageNames = ClassUtil.getPackageNamesWithInstance(samePackageInstance);
		return create(createdClassName, packageNames, symbolNameSpace);
	}
	public static function createWithSamePackageClass(
		createdClassName:String, samePackageClass:Class<Dynamic>, ?symbolNameSpace:String):Dynamic{
		
		var packageNames = ClassUtil.getPackageNamesWithClass(samePackageClass);
		return create(createdClassName, packageNames, symbolNameSpace);
	}
	public static function create(createdClassName:String, packageNames:Array<String>, ?symbolNameSpace:String):Dynamic{
		
		if(symbolNameSpace == null) symbolNameSpace = NAMESPACE_SYMBOL;
		
		return Lib.eval([
			"new ", symbolNameSpace, ".",
			packageNames.join(""),
			createdClassName,
			"()"
		].join(""));
	}
}

インスタンス or クラスからパッケージ名を取得する ClassUtil.hx

package lib.utils;

class ClassUtil {

	public static function getPackageNamesWithInstance(instance:Dynamic):Array<String>{
		
		var cls:Class<Dynamic> = Type.getClass(instance);
		return getPackageNamesWithClass(cls);
	}
	public static function getPackageNamesWithClass(cls:Class<Dynamic>):Array<String>{
		
		var className = Type.getClassName(cls);
		var packageNames = className.split(".");
		packageNames.pop();
		return packageNames;
	}
}

開発体制やコーディングスタイルにより、同一パッケージ内のクラスインスタンス生成だけでは機能が足りない場合、処理を付け足していく必要があります。

[ FLASH ] [ tips ] 2013年01月15日 18:38 | コメント (0) | トラックバック

FLASH tips Toolkit for CreateJS と Haxe による Flash 開発工程の流れに沿った html5 サイト開発手順 : 其ノ三

前回の記事では、サウンドファイルを Toolkit for CreateJS からパブリッシュして利用するサンプルを作成しました。しかし Toolkit for CreateJS は mp3 を出力する機能しか無く、mp3 再生に対応していないブラウザではサウンドを再生する事ができませんでした。

 参考)
 其ノ一
 http://www.dango-itimi.com/blog/archives/2012/001146.html

 其ノ二
 http://www.dango-itimi.com/blog/archives/2013/001147.html

今回は mp3 再生に対応していないブラウザへの対応と、その対応を含めた総括的な Haxe ライブラリ作成に関する内容を記述します。

▽続きを読む

[ FLASH ] [ tips ] 2013年01月12日 17:28 | コメント (0) | トラックバック

FLASH tips Toolkit for CreateJS と Haxe による Flash 開発工程の流れに沿った html5 サイト開発手順 : 其ノ二

Flash で何かを制作する場合、swf を一つにまとめてしまうと容量が大きくなってしまう等の理由から、fla ファイルを複数に分割して作成する事があります。

前回の記事では fla ファイルは一つの場合を前提として話を進めましたが、今回は fla ファイルが複数になる事を考慮した上での開発手順を記述します。
同時に、前回解決できていなかった「素材データを読み込むためのファイスパス一覧記述をどうするか」の問題を解決する方法を思いついたので、その対処策を記述します。

 参考)前回の記事
 http://www.dango-itimi.com/blog/archives/2012/001146.html

▽続きを読む

[ FLASH ] [ tips ] 2013年01月10日 15:27 | コメント (0) | トラックバック

FLASH tips Toolkit for CreateJS と Haxe による Flash 開発工程の流れに沿った html5 サイト開発手順

Flash 開発を通して培った Webサイト(ゲーム)開発工程の流れを、html5(canvas)サイト開発に生かすにはどうすればよいか、調査した内容を記述します。

制作の流れ

Flash 制作の流れは大体以下のようになります。

 (1)素材データ作成
  ・画像データを Photoshop や Illustrator で作成
  ・BGM や効果音を音楽作成ソフトで制作

 (2)素材データを Flash CS に読み込み編集・管理(オーサリング)
  ・アニメーション作成
  ・スクリプトで制御しやすい形に命名・調節

 (3)オーサリングした素材データを swf と swc に出力
  ・Action Script からオーサリングしたデータの制御が可能に

 (4)プログラミング
  ・Action Script 専用エディタを利用

html5 で上記工程をなぞる場合、(2)(3)と(4)をどうするかが問題となります。

前知識から、Flash CS6 にある機能「Toolkit for CreateJS」を用いれば(3)はなんとかなるのかな、と予測を立てました。「Toolkit for CreateJS」が有用できるのであれば、(2)は Flash 制作と同じ事をすればよしとなりそうです。

(4)に関しては javascript を用いる事になりますが、どうせなら FDT からも利用可能な Haxe で記述できたらいいよね、と思い、「Toolkit for CreateJS」で出力された素材データを Haxe で制御する方法の調査を行う事にしました。

CreateJS と Toolkit for CreateJS

本題に行く前に簡単な前知識となります。
CreateJS とは何であるのか、とてもわかりやすく説明をされている記事があります。

 リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog
 http://clockmaker.jp/blog/2012/04/createjs-com/

端的に説明しますと CreateJS は、html5 と canvas で行いたい表現の種類を より少ない手間で増やすことができるための javascript ライブラリ、といったところでしょうか。

次に Flash CS6 の機能「Toolkit for CreateJS」ですが、これを利用する事で、Flash CS6 上でオーサリングした素材データを CreateJS で簡単に扱うことができるように変換出力をしてくれます。

Flash CS6 がない場合、CreateJS 公式サイトからダウンロード可能な ZOE というツールを用いると同等の事ができるかと思われます。

▽続きを読む

[ FLASH ] [ tips ] 2012年12月29日 01:08 | コメント (0) | トラックバック

FLASH tips FlasCC : Box2D.swc, Box2D.swf : Android 上での動作パフォーマンスの比較

前回の記事の後に思いついた、補足的な検証となります。

 前回の記事)
 Android での FlasCC box2d(v2.2.1) と box2dFlash(v2.1a) の動作パフォーマンスの比較
 http://www.dango-itimi.com/blog/archives/2012/001144.html

予想の一つとして「FlasCC で出力された swc を AIR で再コンパイルするのだから意味が無いのでは」と考えました。その後、それならば AIR で再コンパイルされないようにしてみるのはどうだろう、と思いつきました。

FlasCC/samples/Example_Box2D にて、swc(Box2D.swc) と同じ内容の swf ファイルを同時に出力し(Box2D.swf という名前にしました)、Android アプリからは その swf ファイルを外部読込で利用するようにします。外部読込扱いならば Box2D.swf の内容は多分書き換わることはありません。(違っていたらごめんなさい。)

検証結果

Box2D.swf を外部読込にした前回と同じサンプルアプリを制作し動作検証してみたところ、残念な事にパフォーマンスは下がりました。FPS は 1~2 ほど落ちてしまう感じです。Android nexus7 では FPS 35 前後を上下する形となりました。(前回のサンプルでは FPS36~38付近を上下)

FlasCC のリファレンスを見てみると、「最適化」といった項目があり、swf 出力パラメータ設定が誤っている可能性もありますが、取り敢えず調査はここまでという事で。また何か思いついたら再度調査したいと思います。

[ FLASH ] [ tips ] 2012年12月11日 12:30 | コメント (0) | トラックバック

FLASH tips Android での FlasCC box2d(v2.2.1) と box2dFlash(v2.1a) の動作パフォーマンスの比較

box2d の物体を 100 個ほど落下させるだけの処理を、FlasCC box2d(v2.2.1) と box2dFlash(v2.1a) それぞれを用いて作成し、Adobe AIR を用いて Android アプリに変換後、端末上にて動作比較を行いました。

比較結果は、両者ほぼ動作速度に差は無し、となりました。

FlasCC box2d(v2.2.1) 版のほうが多少 FPS1~2 程高く安定するかな…?程度です。作成したサンプルは、記事内最下部に表示します。

予想・仮説

FlasCC 版 box2D を用いたが、box2dFlash に対しよい結果を得られなかった理由は何であるか、いくつか考えてみました。

FlasCC で出力された swc を AIR で再コンパイルするのだから意味が無い

高速で動作するように最適化されたファイルが、AIR のコンパイルにて 最適化されないように再変換されてしまったのでは、という考えです。

FlasCC によって直に出力された swf にしか、高速化の恩恵は授かれないのではないのかもしれない、とも考えました。FlashCC によって出力された swc はあくまで C/C++ プログラムを Flash にて利用する事ができるようになるためのものであり、高速化としての用途は無いのかもしれません。

AIR の最適化能力が上がっていて FlasCC の最適化能力と大差なくなっている

すでに AIR のアプリ制作能力は、FlasCC と同等の高機能なものになっており、FlasCC で最適化された swc を利用したところでさほど変化は起こらない、という考えです。

私の何か手順ミス

FlasCC で出力された Box2D.swc を利用する上での何か必要な設定を飛ばしている可能性あり。あるいは私の何かの単純なミス。何日か経った後にミスに気づく、なんて事はよくあります。

実は結構よい結果になっている

今回の大量に物体を落下させるだけのサンプルプログラムでは よい結果は得られませんでしたが、joint 機能など box2d の別の機能を用いた処理では、より良い結果になる可能性もあります。

FlasCC 版 box2d を利用する事により、結果が悪くなったという事はないので(AS3エディタの quickfix 動作で少々つまずきましたが)、今後は FlasCC 版 box2d を利用していこうとは思います。

デモ

以下は AIR で動作検証したものと同じ内容の swf です。FlasCC box2d を用いて作成したものです。

▽続きを読む

[ FLASH ] [ tips ] 2012年12月09日 16:09 | コメント (0) | トラックバック

FLASH tips FlasCC Box2D.swc を使用する前のメモ

FlasCC/samples/Example_Box2D 内にあるサンプル Boxes.as, Box2DSprite.as ファイルの中身を見つつ、気付いた点をメモしていきます。box2dFlash は ver2.1a, Box2D.swc は ver2.2.1 となっており、バージョンによる変化の違いも記述します。

インスタンスは create メソッドで生成するクラスがある

new で生成せず、static メソッドの create を用いて生成しているクラスが結構あります。

メモリ効率化のためなのか、または変換されたプログラムの仕様上そうなのか、もしくはそれほど意味は無いのか、理由は色々考えられますが詳細は不明。

例)重力設定用 b2Vec2 インスタンスの生成

gravity = b2Vec2.create();

インスタンスの参照渡しは swigCPtr という変数を通して行う

C/C++ から AS3 への変換に SWIG というツールを用いられているという事からか、box2d クラス内処理に変更がかかっているようです。

new で生成しなくなった点と合わせて、Box2D.swc を利用する場合どのように記述を行うのか、以下比較用コードとなります。

box2dFlash v2.1a

gravity = new b2Vec2();
world = new b2World(gravity, ~);

FlasCC Box2D.swc

gravity = b2Vec2.create();
world = b2World.create(gravity.swigCPtr)

swigCPtr という変数は多くの box2d クラスフィールド内に設けられています。swigCPtr 変数は int 型です。
今までインスタンスを渡していたものに比べて型チェックが緩くなり、バグも生まれやすくなる点に注意が必要です。

sample 内 as ソースコードの Y軸方向の数値が逆

サンプル as ファイル内 Y軸方向の数値の正負が逆になっており、サンプルを参考に制作しようとすると動作がおかしいことになってしまいます。

例えば Boxes.as 内の重力を設定する箇所では、Y軸方向の数値に -10 が指定してあります。

gravity.Set(0.0, -10.0);

その他、地面となる物質の配置位置が画面外の上に設定されていたりします。

groundBodyDefPos.Set(0.0, -5.0);

C/C++ で扱う座標と Flash 上の座標とでは Y軸正負の扱いがおそらく逆なのではないかと思われます。Boxes.as 内では box2d 関連以外のクラスを利用している箇所があり、そこで Y軸反転処理を行なっているのかもしれません。よく内容は見ていないので詳細は不明です。

デバッグ表示方法に変更

v2.2 では b2DebugDraw クラスがなくなり、別の方法で デバッグ表示を行うようになったようです。

ネット上で調べてみると GLESDebugDraw クラスというものを利用するようですが、Box2D.swc 内にはそのようなクラスは存在しません。サンプルの Box2DSprite.as を見る感じ 独自に物体を描写している、という事から、デバッグ表示を行う方法は Box2D.swc には用意されていないのかもしれません。

デバッグ表示を行う方法の調査はとりあえず保留に。

その他参考

SWIGとは
http://ja.wikipedia.org/wiki/SWIG

Box2D API Reference for Kobold2D developers
http://www.learn-cocos2d.com/api-ref/1.0/Box2D/html/annotated.html

[ FLASH ] [ tips ] 2012年12月08日 19:47 | コメント (0) | トラックバック

FLASH tips FlasCC : Box2D_for_quickfix.swc 作成

前回 FlasCC からコンパイルされた Box2D.swc にクラスパスを通すと、FDT が重くてまともに動作しないと記述しました。

このままでは FlasCC box2d の動作検証用のコーディングもままならない、という事から、Box2D.swc 内の box2d 関連用クラスのみを抜き出した、Box2D_for_quickfix.swc というものを作成しました。

ダウンロード Download

http://www.dango-itimi.com/blog/swf/171/download.zip

Box2D_for_quickfix.swc はその名の通り、FDT(その他 AS3 用エディタ) の quickfix を快適に動作させるためだけのものとなります。Box2D_for_quickfix.swc 内のクラスはすべてダミーであり、メソッドの中身はほぼ何も記述していません。よって、Box2D_for_quickfix.swc の内容を swf に埋め込んで利用しようとしてもエラーが発生します。

Box2D_for_quickfix.swc ファイルの他、参考用としまして、設定したダミーのクラスファイル一式を上記ダウンロードファイル内 src ディレクトリに配置しています。


使い方 how to use

コーディング中は Box2D.swc にはクラスパスは通さず、Box2D_for_quickfix.swc にクラスパスを通します。そして、swf パブリッシュ時にコンパイルオプションで Box2D.swc を swf 内に埋め込み、Box2D_for_quickfix.swc は swf 内には埋め込まないような記述を行います。

FDT の場合は Run Configurations の設定画面で swc の埋め込み/除外設定を行います。

[Auto add project SWCs to arguments] のチェックを外すことで、パブリッシュ時 Box2D_for_quickfix.swc は埋め込まれなくなります。
そして、Launcher specific compiler arguments テキストエリア内に -include-libraries の行を追加する事で、Box2D.swc が swf 内に埋め込まれます。


本当は、[Auto add project SWCs to arguments] のチェックは外さずに、-external-library-path の記述を行うことで 利用しない swc の埋め込み指定を行いたいのですが、どうも Box2D.swc からエラーが発生してしまい断念しました。

[ FLASH ] [ tips ] 2012年12月07日 22:40 | コメント (0) | トラックバック

FLASH tips FlasCC Box2D.swc にクラスパスを通すと FDT の quickfix がやたら遅くなる

ぼちぼち性能のよいメイン PC Windows7 と、ノート PC Windows8 両方とで確認。
FDT は最新の eclipse JUNO スタンドアローン版を使用。

FlasCC サンプル(FlasCC/samples/Example_Box2D)内 box2d を swc にコンパイルした Box2D.swc ファイルに対し、FDT からクラスパスを通すと、そのクラスパスを通したプロジェクトの quickfix の動作がとても遅くなってしまいます。その遅さは致命的なもので毎度二秒ほどかかります。

何かを入力する度に quickfix のウインドウ表示で画面描画が二秒ほど停止するため、ろくにコーディングできない状況です。Box2D.swc へのクラスパスを外せば通常通りサクサク動作します。

FlasCC で作成された swc ファイルは以前のバージョンの FDT では読み込むことができず、最新バージョンの FDT を使用すれば万事解決、と思いきやこれは落とし穴でした。


遅くなる原因は何であるのかの検証としまして、FlasCC/samples/05_SWC ディレクトリ内サンプルから出力される MurmurHash.swc へ FDT からクラスパスを通してみたところ、quickfix の動作は 0.5 秒ほどの遅延が発生する事となりました。やや入力が引っかかる程度の遅さです。

Box2D.swc のファイル容量は 690KB, MurmurHash.swc のファイル容量は 385KB。
MurmurHash.swc に配置されている class や interface の数は結構な量(1000くらい?)となっていますが、Box2D.swc はその更に倍以上の数となっています。

以上から察するに、単純に swc 内の class や interface が多すぎるための遅延なのかもしれません。解析に時間がかかってしまっていそうです。Flash Builder では遅延は発生するのかどうかが気になる所ではあります。
改善できるものか、ダメ元でFDTサポートに連絡したいと思います。

追記)
対処用 swc の作成を行いました。
http://www.dango-itimi.com/blog/archives/2012/001142.html

[ FLASH ] [ tips ] 2012年12月07日 03:15 | コメント (0) | トラックバック

FLASH tips Flash C++ Compiler(FlasCC) のサンプルを少々コンパイルしてみた

FlasCC はどのような感じで利用できるのか、いくつかサンプルのコンパイルを試してみました。

開発者なら FlasCC の実行可能な環境(64-bit Java や Flex SDK のインストール)はほぼ事前に整っているであろうことから、FlasCC 用ファイルをダウンロードするだけで即利用は可能かと思われます。

FlasCC で使用される Cygwin に関してははこちらまったく馴染みがありませんでしたが、FlasCC 用ファイル内に必要な Cygwin ファイルは全て入っているようで、後は readme の手順に従っていけば、サンプルはさほど問題なく動作させる事ができました。

特徴

http://www.adobe.com/jp/joc/gaming/flascc.html

FlasCC は C/C++ のプログラムを変換し FlashPlayer で動作させることができるという代物です。ActionScript で作成したプログラムよりもどうやらかなり速く動作する、というのが特徴です。(それほど速くはないかもしれない、という検証をされている記事も見つかります。)

以前 FlasCC は Alchemy の名で呼ばれており、Alchemy 版 box2d は AS3 版 box2d よりも軽快に動く、という情報がありました。また、最近制作してみた Android AIR アプリにて AS3 版 box2d の動作速度があまり速く動作してくれなかった、という事から、早速調査に乗り出してみた次第であります。

検証準備

サンプルのコンパイル検証を行った環境は メインPC の Windows7 64bit とノートPC の Windows8 64bit です。

メインPC でサンプル C言語ファイルのコンパイル(変換)を試してみると、Java Virtual Machine(JVM)の起動ヒープメモリが足りない的なエラーメッセージが表示され失敗してしまいます。よって gcc.exe を実行する際は「-jvmopt=-Xmx1G」というコンパイラオプションの記述の追加を行いました。

例えば FlasCC の readme.html 内には以下のようなサンプル命令文があります。

/cygdrive/c/flascc/sdk/usr/bin/gcc.exe hello.c -emit-swf -o hello.swf

これを以下のような記述にすることで実行可能になりました。

/cygdrive/c/flascc/sdk/usr/bin/gcc.exe -jvmopt=-Xmx1G hello.c -emit-swf -o hello.swf

ノートPC の Windows8 では上記記述は不要でした。JVM のどこかのデフォルト設定でヒープメモリの設定とか行えるのでしょうかね。

追記1)
メイン PC には 32bit版 と 64bit 版二種類の JVM がインストールされてしまっており、これが原因でヒープメモリ設定を行わなくてはならなかった模様。32bit版をアンインストールしたらエラーが発生しなくなりました。


また私は、flex sdk は Cドライブ直下ではなく以下のディレクトリに配置しています。

C:\Program Files (x86)\Adobe\flex_sdk\flex_sdk_4.8_air3.4

make コマンド実行時 flex sdk へのパスを指定する所は以下のように記述することで実行が通りました。

FLEX=/cygdrive/c/PROGRA~2/Adobe/flex_sdk/flex_sdk_4.8_air3.4

サンプル5 SWC 生成

FlasCC/samples/05_SWC ディレクトリ内サンプルは、C/C++ のソースコードを swc 化するサンプルのようです。

生成された swc の中がどうなっているのか確認すべく FDT でクラスパスを通してみましたが、何故か swc の中身を見ることができません。生成がうまくいかなかったのだろうかと、Flash CS6 で試しに生成された swc を利用してみたところ、問題なく利用可能でした。

FlasCC から生成された swc は何か通常のものとフォーマットが異なるのでしょうか。Flash Buider では確認できるのかもしれません。あるいは利用している FDT は一つ前のバージョン(FDT5.6)のものなので、最新版では見ることが可能であるか、あるいは今後改善される可能性があります。

サンプル box2d

FlasCC/samples/Example_Box2D ディレクトリ内には、おそらく私の本目的である C言語版 box2d がそのまま配置されているようです。Makefile を実行する事で C言語版 box2d が swc に変換される事でしょう。

しかし…! 試してみたところ、エラーが発生してコンパイルできません。うぬぬ、口惜しい。コンパイル済みの swc を配置しておいてくれてもいいのに…!

エラー内容を見ると、たくさんメッセージが表示されていて問題が何なのかまだ解読できておりません。-jvmopt=-Xmx1G の指定が足りない的なメッセージもあります。ノート PC のほうでもこのメッセージが表示されましたが、どこにこの記述を追加すればよいのか、わからない状況です。
(どなたかコンパイルに成功した方がおられましたら、生成された swc を私めに恵んでくだせえ…!)

追記2)
追記1の対処によりサンプル box2d のコンパイルも通りました。いやっほう!!

追記3)
FDT Free の最新版をダウンロードし、swc にクラスパスを通してみたところ、見事 swc の内容が確認できました。というわけで、ためらっていた最新版 FDT の購入が決定しました。

FDT Download Page
http://fdt.powerflasher.com/buy-download/

[ FLASH ] [ tips ] 2012年12月05日 00:32 | コメント (0) | トラックバック

FLASH tips nexus7 AIR3.4 for Android: CameraRoll UncaughtErrorEvent

Android 端末 nexus7 のカメラロール周りの動作にて、二点ほどキャッチできないエラーが発生する事を確認。nexus7 に限ったことではないのかもしれませんが、以下に状況を記述します。

前提

nexus7 では、以下のプロパティはどちらも true を返します。

・CameraRoll.supportsBrowseForImage
(カメラロールから画像を取得できるかどうかの判別用プロパティ)

・CameraRoll.supportsAddBitmapData
(カメラロールへ画像を保存する事が可能かどうかの判別用プロパティ)

問題点1 ギャラリー内 Google+ に投稿された画像を選択するとエラー

nexus7 端末設定内にて Google アカウントがひもづけられているせいか、Android のギャラリーを開くと Google+ で投稿した画像を閲覧する事ができます。CameraRoll.browseForImage メソッドから、この Google+ 投稿画像データを Loader.loadFilePromise メソッドで読み込もうとすると、以下のエラーが発生します。

CameraRoll.browseForImage -> Google+ image -> Loader.loadFilePromise 

Error #2044: Unhandled IOErrorEvent:. text=Error #2032: Stream Error.

端末には存在しないネットワーク上の画像データを読み込もうとするのだから、エラーが発生しているのだろうと思います。端末に保存されているギャラリー内の画像では、上記エラーは発生しません。

問題点2 カメラロール(ギャラリー)へ画像を保存しようとするとエラー

前提で挙げました、nexus7 では CameraRoll.supportsAddBitmapData が true なのだから CameraRoll.addBitmapData メソッドでの保存は問題なく行われそうですが、以下のエラーが発生してしまいます。

CameraRoll.addBitmapData

Error #2044: Unhandled ErrorEvent:. text=Error #2038: File I/O Error.

nexus7 では 背面カメラが無く CameraUI クラスにてカメラアプリ呼び出しが不可という事もあり、「カメラロール」の判定が少々おかしいのかもしれません。

対処

上記二つの問題から発生する ErrorEvent は AIR で意図されていない動作なのかどうか、try catch でキャッチできないようです。グローバルエラーをキャッチするための UncaughtErrorEvent.UNCAUGHT_ERROR ハンドルでは探知できたので、そちらでなんとか対処することに。

loaderInfo.uncaughtErrorEvents.addEventListener(UncaughtErrorEvent.UNCAUGHT_ERROR, onUncaughtError);

private function onUncaughtError(event:UncaughtErrorEvent):void {
 …
}

AIR のバージョンは 3.4 で検証しましたが、バージョンが異なれば別の動作になる可能性もあります。また、今後のバージョアップで上記問題が解決する可能性もあります。

追記1

検索して調べてみたところ、Android 端末と Google アカウントを同期することで、Android ギャラリー内に Picasa ウェブアルバムの画像データが表示されることがわかりました。nexus7 以外の Android スマートフォン端末で試してみると、CameraRoll.browseForImage から Google+ の画像データ読込みではやはりエラーが発生しますが、意図可能なエラーとなりました。以下の記述で探知できます。

cameraRoll = new CameraRoll();
cameraRoll.addEventListener(ErrorEvent.ERROR, onError);
cameraRoll.browseForImage();

private function onError(event:ErrorEvent):void {
 …
}

エラー処理を色々と切り分けて作成する必要がありそうです。

追記2

カメラロールへの保存に関するエラーは、nexus7 でも以下の記述によってハンドリング可能な事がわかりました。

cameraRoll = new CameraRoll();
cameraRoll.addEventListener(ErrorEvent.ERROR, onError);
cameraRoll.addBitmapData(bitmapdata);

private function onError(event:ErrorEvent):void {
 …
}

残るは、nexus7 でギャラリーに表示される Picasa の画像読み込み時のエラーがハンドリングできない問題のみとなります。

追記3 問題解決

MediaPromise.file プロパティを調査する事により、ギャラリーから選択されたファイルがアプリケーションにアクセス可能かどうか判断可能なことが判明。

MediaPromise.file プロパティ説明ページより

基礎となるデータソースがファイルベースで、ファイルからアプリケーションにアクセス可能な場合、このプロパティは File オブジェクトを表します。それ以外の場合、プロパティは null です。

以上から、nexus7 を考慮したカメラロール(ギャラリー)からの Picasa データ読み込み対応版処理は以下となります。

cameraRoll = new CameraRoll();
cameraRoll.addEventListener(MediaEvent.SELECT, onSelectImage);
cameraRoll.addEventListener(Event.CANCEL, onCansel);
cameraRoll.addEventListener(ErrorEvent.ERROR, onError); 
cameraRoll.browseForImage();

private function onError(event:ErrorEvent):void {
	//通常スマホ用エラー処理
}

private function onSelectImage(event:MediaEvent):void {
	var mediaPromise:MediaPromise = event.data;
	if(!mediaPromise.file){
		//nexus7 用 Error処理
		return;
	}
	
	loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onMediaPromiseLoaded);
	loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
	loader.loadFilePromise(mediaPromise);
}
補足

API リファレンスには書かれていませんが、CameraRoll.addBitmapData でのカメラロールへのデータ保存後は Event.COMPLETE イベントが発行される模様。
よって、保存が完了したか、もしくはエラーが発生したかを調査するためには以下のように記述すればよしとなります。

cameraRoll = new CameraRoll();
cameraRoll.addEventListener(Event.COMPLETE, onComplete);
cameraRoll.addEventListener(ErrorEvent.ERROR, onError);
cameraRoll.addBitmapData(bitmapdata);

private function onComplete(event:Event):void {
 …
}
private function onError(event:ErrorEvent):void {
 …
}

[ FLASH ] [ tips ] 2012年10月26日 14:39 | コメント (0) | トラックバック

FLASH tips box2dFlash v2.1a を用いた AIR アプリが nexus7 でどれくらいの動作速度になるかの検証

box2dFlash v2.1a を用いた AIR for Android アプリは、Android タブレット端末 nexus7 上でどれくらいの動作速度がでるのか検証し、動画に撮影しました。

検証として用いた Android アプリは、先日公開した「キャンドル博士とシガレッタ2」です。

 http://www.dango-itimi.com/dcac2/

結論としまして、デフォルト設定では fps 24 で動作する所、nexus7 では体感 fps 12~15 くらいでしょうか。nexus7 は結構最新のスマートフォン並の性能のようですが、それでもかなり動作速度が落ちます。

box2d にて表示されるオブジェクト数は約80ほど。continuous collision detection(CCD) 設定は行なっておらず。表示オブジェクトが減れば減るほど動作速度はデフォルト設定に近づきます。

現在は Android 2.2~2.3 あたりの端末が多数という事から、box2dFlash にて沢山のオブジェクトを表示する Android アプリ制作は当面厳しそうです。表示するオブジェクトが少ないのであればありです。

以下 撮影した動画です。

▽続きを読む

[ FLASH ] [ tips ] 2012年10月01日 20:04 | コメント (0) | トラックバック

FLASH GRAPHIC tips update ミニゲーム「キャンドル博士とシガレッタ」を公開

ミニゲーム「キャンドル博士とシガレッタ」を公開しました。
http://www.dango-itimi.com/dcac/

今回のゲームは AIR for Android を利用して、Android アプリとしても公開しています。Google Play(Android market) からの配布ではなく、当サイトで勝手に配布しているため、ダウンロードしていただくには Android 側で多少設定が必要となります。

次回作以降で、Android アプリとして十分な内容のゲームが制作できたらば、Google Play に登録して配布してみたいと思います。

Android アプリを公開した、とはいえ Flash 版と内容はまったく一緒であり、Android は現状 Flash の閲覧が可能でもあるため、アプリとして公開する意味合いはあまり高くないかもしれません。

どうせなら Flash Player が搭載されていない iPhone アプリとして公開したいところですが、Apple に登録して審査に通らなくてはなりません。作ったら気軽に公開というわけにはいかず、個人での iPhone アプリの公開は少々敷居が高いところです。

なんにせよ、Flash ゲームをそのままスマホアプリ等に変換可能になった今は、技術者にとって とてもよい時代になったと感じます。

---
以下制作工程の画像等

タイトル画面

キャラクター制作落書き

落書きからベクターデータへの書き起こし


[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2012年09月05日 19:57 | コメント (4) | トラックバック

FLASH tips jsfl からのリンケージクラス設定解除が効かない場合は fla ファイルを保存して起動し直す

苦節二年半、今までの面倒は何だったのでしょうか。
本日ふと思いついた方法で、jsfl によるリンケージ設定まわりの一つの問題が解決しました。

---

過去以下の記事を書きました。

 Flash CS4 上でリンケージクラス設定を行うと jsfl からリンケージクラス設定変更は不可となる

何かのタイミングで、jsfl によるリンケージクラスの解除が中途半端な状態になってしまう、という問題です。

簡単な再現方法としましては、以下の手順で行えます。
Windows Vista, Flash CS 5.5 で検証しています。

(1) リンケージ設定解除用 jsfl を用意 ※
(2) 新規で fla ファイル(test.fla)を作成し ムービークリップ「Sample」をライブラリに作成
(3) Sample ムービークリップにリンケージ設定を行う
(4) test.fla を保存後 閉じる
(5) test.fla を起動する
(6) jsfl から Sample ムービークリップに対し リンケージ解除を実行

この段階で 上記記事の問題の再現が可能です。Sample ムービークリップは 上記記事内図3 の「リンケージ設定の解除が完全に行われていない状態」となります。

Sample ムービークリップが一つだけなら大した問題ではありませんが、実際はかなりの数のムービークリップが存在する事となります。結局一つ一つ手作業で解除を行わなくてはなりませんでした。

しかし!ここから本日ふと頭をよぎった方法が以下に続きます。

(7) test.fla を保存後閉じる
(8) test.fla を起動する

手順(6)の状態で test.fla を保存し起動しなおすと、見事「リンケージ設定の解除が完全に行われている状態」となりました。めでたしめでたし



リンケージ設定用 jsfl ファイルがない場合は以下をご利用ください。
jsfl ファイルの配置場所や使用方法に関しては省略します。
http://www.dango-itimi.com/blog/swf/163/linkager.zip

linkager.zip
├ LinkageCanceler.jsfl --- リンケージ一括解除
└ Linkager.jsfl --- リンケージ一括設定

[ FLASH ] [ tips ] 2012年08月10日 17:10 | コメント (0) | トラックバック

FLASH tips Haxe : メソッド同士の比較には比較演算子ではなく Reflect.compareMethods メソッドを用いる

私は変数にメソッドを代入する方法をよく用います。
例えば Acsion Script 3.0(AS3)では以下のように mainFunction という変数を用意し、コンストラクタ内で mainFunction にメソッド(の参照?) testA を代入します。、次に外部から run メソッドを定期的に呼び出す事で、testA→testB→finish といった順番でメソッドを自動的に実行させます。

//AS3
public class Sample{
	private var mainFunction:Function;

	public function Sample(){
		mainFunction = testA;
	}
	public function run():void{
		mainFunction();
	}
	private function testA():void{
		mainFunction = testB;
	}
	private function testB():void{
		mainFunction = finish;
	}
	private function finish():void{
	}
	public function isFinished():Boolean{
		return mainFunction == finish;
	}
}

Sample クラスの処理終了を示す finish メソッドが実行されたかどうか判定するためには、isFinished メソッドを用います。mainFunction 変数と finish メソッドの値が等しければ終了している、としています。

ここで上記 AS3 で書かれた処理をそのまま Haxe に移植してみると以下の様になります。

//Haxe
class Sample{
	private var mainFunction:Dynamic;

	public function new(){
		mainFunction = testA;
	}
	public function run(){
		mainFunction();
	}
	private function testA(){
		mainFunction = testB;
	}
	private function testB(){
		mainFunction = finish;
	}
	private function finish(){
	}
	public function isFinished(){
		return mainFunction == finish;
	}
}

しかし、この Haxe プログラムを Javascript に変換してみたところ、isFinished メソッドが true を返すことはありませんでした。
Haxe から出力された Javascript 内のソースコードを見てみると、行末に .$bind(this)といった記述が追加されており、単純な変数とメソッドとの比較にはなっていない事がわかりました。

//Javascript
,isFinished: function() {
	return this.mainFunction == this.finish.$bind(this);
}

どうしたものかと「haxe compare method」といった単語で調べてみた結果、Reflect.compareMethods メソッドというものが見つかりました。以下のように記述すれば問題は解決します。

//Haxe
public function isFinished(){
	return Reflect.compareMethods(mainFunction, finish);
}

今回の問題は Haxe にて Dynamic 型を利用しているため発生したと言えます。AS3 で言うところの Function クラスみたいなものがあればよいのですが、Dynamic 以外にどういう記述をすればよいかの方法はまだ見つかっていません。

Haxe API のページを見てみると haxe.macro.Function というクラスがあり、これが使えるのだろうか?とも思いましたが、エラーで使うことができず。macro と書かれているので、恐らく期待しているものとは異なりそうです。

[ FLASH ] [ tips ] 2012年06月25日 17:14 | コメント (0) | トラックバック

FLASH tips Flash CS6 海外版 jsfl ドキュメント

日本語版 Flash CS6 jsfl に関するドキュメントはまだ存在していないようですが、 海外版用のドキュメントのほうは いつのまにか出来上がっていた模様です。

 Flash CS6 Extending Flash Professional
 http://help.adobe.com/en_US/flash/cs/extend/index.html

CS6 にはいくつか新しいメソッドが追加されているのがわかります。

 What’s new in the JavaScript API
 http://help.adobe.com/en_US/flash/cs/extend/WS5b3ccc516d4fbf351e63e3d118a9024f3f-7fe7.html

ちなみに以前から存在している以下の不具合に関してですが、CS6 の体験版を試してみた限りではまだ直っていません。(CS5, CS5.5 でも直っていない)

 Flash CS4 上でリンケージクラス設定を行うと jsfl からリンケージクラス設定変更は不可となる
 http://www.dango-itimi.com/blog/archives/2010/001012.html

過去 上記不具合に関して Adobe に報告したことがありますが、放置されてしまっているようなのでもう一回報告してみますかなあ? これを修正してくれたら CS6 をささっと購入してもいいくらいなほどの個人的優先度が非常に高い内容でもあります。

[ FLASH ] [ tips ] 2012年06月22日 02:42 | コメント (0) | トラックバック

FLASH tips FDT の Haxe エディタ機能について調査

はてなブックマークを眺めていた所、JSX というものが話題になっており、比較として Haxe が挙げられていました。
私は FDT を利用しているという事もあり、Haxe に関しては後々調査予定としていましたが、丁度業務にて Haxe が利用できそうな状況になったため、FDT でサポートされている Haxe エディタ機能がどれくらい有用できるか簡単に調査してみました。

 FDT5
 http://fdt.powerflasher.com/

 Haxe
 http://haxe.org/

前提

PC 向け Flash ゲームを開発した後、そのゲームをスマートフォンのブラウザでも遊べるように移植する事を求められています。スマートフォンのブラウザということで、HTML と Javascript で制作する事となります。

通常の開発手順としては以下が考えられます。

 (1) Action Script 3.0 にて Flash ゲームを開発
 (2) (1) で開発したものを Javascript にてスマホブラウザゲームとして移植

ここで、初めから Haxe を用いれば (1)と(2)の開発手順を ある程度ひとまとめにできるのではないかな?と考えました。Haxe は「マルチプラットフォーム言語」をうたっており、Haxe で書いたものは AS3 や Javascript 等に変換する事が可能です。

ゲームでは 例えばボードゲームの AI 部分等、どの言語で書こうともアルゴリズムの内容は一緒であり、AS3 と Javascript で二度 AI 処理を書く手間を Haxe なら一度で済みます。更に、FDT の Haxe エディタ機能が優れたものであるならば、処理共通部分はおろかビューを操作する部分まで Haxe で開発できるのではなかろうか、とも考えました。

使用結果

FDT の Haxe エディタ機能を利用してみたところ、上記前提の考えはやや微妙である事がわかりました。FDT の Astion Script エディタ機能が大変優れたものであるのに対し、Haxe エディタ機能はそこまで優れた内容のものではありませんでした。

現在の FDT の Haxe Support 状況は以下となっています。
http://fdt.powerflasher.com/docs/An_Overview_of_haXe_%26_FDT

Refactor (Rename, Move)機能が存在しない、というのが一番のネックかもしれません。

Haxe を用いて AS3 と Javascript 両開発を同時に行うよりも、FDT の AS3 エディタ機能をフル活用して開発を進め、AS3 での開発完了後 Javascript に移植する、といった手順をとったほうがよい場面が多そうです。小規模の開発ならば、活用できる場面もでてくるかもしれません。

Javascript 単体開発用としては優れている

現状の FDT の Haxe エディタ機能は、AS3, Javascript 同時並行開発手段としては微妙かもしれません。しかし Javascript 単体の開発手段としては、他と比べて優れているものと思われます。エラーチェック ライブビュー機能・パッケージ切り分け・継承記述の分かりやすさ等々、素晴らしい機能でいっぱいです。

AS3 で開発したものを Javascript に移植する際、この Javascript 移植作業箇所を Haxe で開発する、といった手法がベターかと感じました。

まだちょっと試してみた感想なので、使い方等 誤っている箇所があるかもしれません。今後少しずつ使っていき、活用できそうな場面を増やしていきたいと思います。

[ FLASH ] [ tips ] 2012年06月05日 12:02 | コメント (0) | トラックバック

FLASH tips FDT5.5 がリリース

FDT 5.5 now released
http://fdt.powerflasher.com/2012/05/fdt-5-5-now-released/

先日記述した「eclipse : FDT5 : ソースコード整形周り不具合や要望」の記事に書いた、以下の不具合修正や要望を反映してもらえたようです。

・Advanced Refactoring にて文末のセミコロンが消える不具合
・Advanced Refactoring にてクラス名が変数に変換されるよう改善

一方 FDT5.5ベータ版にて どうも動作がおかしいとフォーラムに報告した箇所は、まだ改善されていません。

Advanced Refactoring 実行時のマウスカーソル位置に注意

FDT5 と同じ間隔で Advanced Refactoring を用いると、以下の動画のような動作になってしまいます。
 FDT5.5: Advanced Refactoring

対処法として、対応行を一行まるごとハイライトした後 Advanced Refactoring を実行、あるいは「new」の位置にマウスカーソルを合わせて Advanced Refactoring を実行すれば解決します。

getter/setter 変換仕様変更

個人的にとても痛い変更点。すごい昔の記事ですが、私は以下の getter/setter 記述方法を採っています。

http://www.dango-itimi.com/blog/archives/2005/000765.html

FDT5.5 では getter/setter 変換を行うと 強制的にフィールド変数のほうにアンダースコアが付与されるようになってしまいました。以前の仕様も選択できるようにしてほしい、と要望を出してみたところ FDT5.6 で反映してくれるとかどうとか。

また現行仕様の場合、フィールド変数から getter のみを生成すると以下の動画のような動作になってしまう、という問題があります。

FDT5.5: Automatically rename fields when create getters.

ひとまずの対処としまして、eclipse FDT の設定 Preferences から [FDT][COdeStyle]の項目内 Code Style「Getter/Setter」のチェックを外しています。

その他 気になった点

新機能「SWF Bridge」は Action Script にて FDT の機能を拡張できるとのこと。

 参考:FDTたん
 https://twitter.com/#!/fdttan

例えば Quick Fix の拡張が可能とのことで、独自 Advanced Refactoring の実装なんてことができるのでしょうか。FDT ではこの動作がいまいち、という点が改善できるのかもしれません。時間のある時にチェック予定。

[ FLASH ] [ tips ] 2012年05月11日 01:18 | コメント (0) | トラックバック

FLASH tips update 漢字が使用可能なフリーのビットマップフォント三選

漢字が使用可能なフリーのビットマップフォントはないものかと調べてみたところ、以下の三点が見つかりました。それぞれフォントを埋め込んでみた swf ファイル容量と特徴など合わせて記述します。

美咲フォント

http://www.geocities.jp/littlimi/misaki.htm

JIS第一・第二水準をサポートしているとのことで、このフォントを用いれば表示できない文字はほとんどなさそうです。

Flash のフォント埋め込み設定で「日本語 漢字 - JIS第一水準(3174文字)」を設定して swf を出力してみたところ、swf ファイル容量は 131KB という結果に。対比として MS ゴシックを同設定で埋め込むと swf 容量 630KB という結果となります。現代において 131KB ならば充分に実用範囲内となります。

じゃっきーふぉんと

http://nonty.net/item/font/jackey.php

現在までにサポートされている漢字は 1300 文字ほど。かわいい平仮名カタカナが特徴です。

「日本語 漢字 - JIS第一水準(3174文字)」設定でのフォント埋め込みを行った swf 容量は 92KB という結果に。サポートされていない文字を指定すると swf 上では空白として表示されます。足りない漢字はカタカナで表記する等して利用できそうです。

88 Zen

http://akashicdesign.net/ja/88-zen/

漢字1000文字ほどサポート。「日本語 漢字 - JIS第一水準(3174文字)」設定でのフォント埋め込みを行った swf 容量は 47KB という結果に。

サポートされていない文字を指定すると swf 上ではMSゴシックとして表示されました(Windows)。小さいフォントサイズ指定の場合、パッとみどのフォントがMSゴシックに置き換わっているのか判別が難しいため注意が必要となりそうです。

swf 上でのフォント表示サンプル

スクリプトで処理制御を行ったフォント表示サンプルです。美咲フォントを用いています。
OK ボタンを押すと、テキストフィールドに入力された文字列が次々と表示されます。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2012年04月21日 13:43 | コメント (0) | トラックバック

FLASH tips update Box2DFlash v2.1a : X軸ピクセル移動 Y軸自由落下 接地時のみジャンプ可能 サンプル

次回ミニゲーム用に Box2DFlash v2.1a を用いたサンプル作成中。
X軸はピクセル移動、Y軸は自由落下を行い、接地時のみジャンプ可能という作りにしました。サンプル swf はページ最下部に表示します。

以前調査した Box2D によるピクセル移動方法は以下の通りです。
http://www.dango-itimi.com/blog/archives/2011/001084.html

body.SetLinearVelocity メソッドは、物質に働いている力(速度)を指定した値に強制変更するため、上記 URL 内処理例をそのまま使用すると、Y軸方向の移動速度が 0 になってしまうという問題が発生します。この問題を解決するためには、上記 URL 内処理例を以下のように変更します。

body.SetLinearVelocity(new b2Vec2(5 * FRAME_RATE / BOX2D_SCALE, body.GetLinearVelocity().y));

接地時のみジャンプ処理は以前調査した 以下の URL の内容を元に作成しています。
http://www.dango-itimi.com/blog/archives/2011/001082.html

「m_localPlaneNomal.y の値が 1 の時、プレイヤーが背景オブジェクトに接地している」と判定しています。

以下はサンプル swf です。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2012年04月19日 21:12 | コメント (0) | トラックバック

FLASH tips update Flash Player 11.2 右クリック実装記念 ZOMBIE ISLAND 公開

先日 Flash Player 11.2 が正式公開され、ついに swf 領域内での右クリックイベント処理が可能となりました。
いやはや長かった。私が Flash と出会ってから 10年以上経ちます。

早速の記念として右クリックを利用する簡易ゲーム「ZOMBIE ISLAND」を制作しました。
よろしければ一度お遊びください。

http://www.dango-itimi.com/zombie_island/

マウスだけではなく、キーボードを利用してもプレイできるようにしています。

[ FLASH ] [ tips ] [ update ] 2012年04月06日 01:31 | コメント (1) | トラックバック

FLASH tips eclipse viPlugin 2.x のビジュアルモードはマウス選択ハイライトと同等に

昨年年末あたりに eclipse viPlugin のバージョンが 1.x から 2.x に変更がかかりました。

 http://www.viplugin.com/

私はしばらく 1.x を使い続けていたのですが、先週新しいライセンスを購入し 2.x にアップグレードしてみたところ、ビジュアルモードに変更がかかっている点に目が行きました。

バージョン 1.x でのビジュアルモードは特殊なハイライト方式がなされていましたが、最新版の viPlugin のビジュアルモードではマウスでハイライトを行うのと同等の選択方式に切り替わっています。

これに伴い、先日記事にした FDT の不満点が多少緩和されました。
キーボードホームポジションから手を移動することなく、フォーマットの崩れた箇所をビジュアルモードで選択し、「ソースコードフォーマットの実行」が可能となります。

その他、FDT5 の Advanced Refactoring の「選択された複数行をメソッドに変換」する機能においても同様に、ホームポジションから手を移動する事なく、ビジュアルモードでの複数行選択から実行することが可能になっています。

[ FLASH ] [ tips ] 2012年04月02日 12:47 | コメント (0) | トラックバック

FLASH tips eclipse : FDT5 : ソースコード整形周り不具合や要望

最近 twitter にて FDT と FlashBuilder の比較をされている方がいて、FDT を利用している私としては「ああ、そこらへん不便だなあ」と感じる箇所も挙げられています。

 http://togetter.com/li/267668

FDT は設定によっては Windows だと不安定だ、という話ですが、こちら FDT をメインPCとノートPCで長らく併用しているものの あまり気になった事はないかもしれません。もしくは、自然とそうならないような手順を踏んでいるだけなのかも?

問題点 problem

コードフォーマットに関しては、挙げられている通りの不便な箇所があります。

FDT の自動補完機能は大変便利だったりしますが、その機能経由でコード出力を行うと、任意で行ったコードフォーマット設定が無視され、FDT デフォルトのコードフォーマットで出力されてしまう場合があります。

例えば FDT5 で新たに追加された「ローカル変数をフィールド変数にコンバートする機能」を用いると、以下のようにフィールド変数名とクラス名の間にスペースがある状態で変換されてしまいます。

・変換前

package pingball {
	public class Test {
		public function Test() {
			var arr:Array = new Array();
		}
	}
}

・変換後

package pingball {
	public class Test {
		private var arr : Array;

		public function Test() {
			arr = new Array();
		}
	}
}

上記変数名とクラス名の間のスペースを削除するには、自分で削除するか、ソースコード整形機能(Ctrl + Shift + F)を利用します。

private var arr : Array;
 ↓
private var arr:Array;

ただし Ctrl + Shift + F を実行するとソースファイル内全てが整形対象となるため、「長い行なので任意で改行している」といった箇所が一行にまとめられてしまう問題が別途発生します。これを避けるためには、マウス(または Shiftを押しながら矢印キー操作)で整形を行いたい範囲をハイライトした後、Ctrl + Shift + F コマンドを実行すればよしとなります。
ハイライト範囲指定からの整形コマンド実行は面倒なので、デフォルトでサポートして欲しい所です。

不具合 bug

FDT5の「ローカル変数をフィールド変数にコンバートする機能」(Advanced Refactoring)ですが、「コンバート対象行末のセミコロンが消える」という不具合があります。おそらく次のバージョン FDT5.1 で対応されるのではないかと思われますが対応されなかったらメール予定。
公式の図にも見事消えている様が確認できるため、何かそのようになっているのには意図があるのだろうかとも思ってしまいました。以下 URL 内の図「new ExtractMe()」の行でセミコロンが消えている箇所があります。

 Advanced Refactoring & FDT 5

要望 request

上記触れている Advanced Refactoring にて、「値から変数名を自動生成する機能」があります。

new MyClass();
 ↓
var extracted:MyClass = new MyClass();

値がクラス生成の場合 extracted という変数名が自動的に割り振られるのですが、この変数名は クラス名の頭文字を小文字にしたものにして欲しい、という要望があります。

new MyClass();
 ↓
var myClass:MyClass = new MyClass();

現在の私のコーディングスタイルとしては、クラスインスタンス名は クラス名の頭文字を小文字にしたものを利用する事が大半となっています。変数名は多少冗長になろうとも、ソースコードを文章として読む際それがベターかな、という考えからです。

この変換処理で何か問題がなければ、是非とも実装してほしいなあと考えており、要望を出す予定です。

その他

FDT のアップグレードに伴う機能拡大は喜ばしい一方、私のノートPC のスペックでは動作が非常に重くなってきてしまっている、という難点があります。

ノートPCではテキスト入力(プログラミング)を行う程度だから、スペックはそんなに高いものでなくても良く、何年も使えるだろう、と考えていましたが、ここまで重くなるのはまったくの考慮外でした。

動作が遅いため、タイピング速度に補完表示機能が追いつかず、単語を打つ度に少々の待ち時間が発生する等、結構なストレスとなってしまっています。なんとも悩ましい問題です。

[ FLASH ] [ tips ] 2012年03月13日 19:42 | コメント (0) | トラックバック

FLASH tips jQuery animate method hack : setInterval problem

jQuery には animate というメソッドがあります。
DOM 要素にマスクをかけつつのスライド機能など、いったいどういう処理で実現しているんだ?!といった表現を簡単に行うことが可能です。

しかし私はこのメソッドの利用はなるべく避けたいと考えていました。animate メソッドを実行すると、jQuery 処理内部でアニメーション描画用の setInterval が実行されてしまい、メインプロセスとは別のプロセスが発生してしまうからです。

複数のプロセスを制御するのはとても面倒で、何かにつけてコストが上がります。

なんとか jQuery 内部でプロセスが発生しないよう animate メソッドを制御する方法はないものかと、jQuery のソースを解読してみたところ、こちら意図通り利用できる方法が見つかりましたので以下に記述します。

jQuery version 1.7.1 で検証しています。

ソースコード

今回のサンプルでは、画面上に「test」と「test2」という文字が縦に並ぶようにした HTML と CSS を用意しました。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="index.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="Index.js"></script>

		<script language="javascript">

$(function(){
	new Index();
});	
		</script> 

	</head>
	<body>
		<div id="box">test</div>
		<div id="box2">test2</div>
	</body>
</html>

index.css

#box{
	position: absolute;	
}
#box2{
	top: 50px;
	position: absolute;	
}

以下は jQuery の animate メソッドを利用する Index.js ファイルの内容です。

Index.js

function Index(){

	this.init.apply(this, arguments);
}
Index.prototype.init = function(){

	//start animation 
	var box = $("#box").animate({"left": "+=500px"}, "slow");
	var box2 = $("#box2").animate({"left": "+=500px"}, "slow");

	//clone animation data 
	this.timers = [];
	var tmpTimers = jQuery.timers;	
	for(var i=0; i < tmpTimers.length; i++){
		this.timers[i] = tmpTimers[i];
	}

	//stop animation
	box.stop();
	box2.stop();
	
	//run animation
	var sc = this;
	this.mainFunction = this.run;
	this.timerId = setInterval(function(){ sc.mainFunction(); }, 10);
};
Index.prototype.run = function(){

	for(i = 0 ; i < this.timers.length; i++ ){
		var timer = this.timers[i];
		if(!timer() && this.timers[i] === timer) {
			this.timers.splice(i--, 1);
		}
	}
	if(this.timers.length == 0){
		this.mainFunction = this.end;
	}
};
Index.prototype.end = function(){

	alert("end");
	clearInterval(this.timerId);
};

animate メソッドでアニメーションを実行したら、即 アニメーションデータの配列(jQuery.timers)のクローンを行い、アニメーションを停止しています。

後は任意のタイミングでアニメーション処理を実行してあげるだけです。今回のサンプルでは run メソッドで全てのアニメーションを再生しています。すべてのアニメーションが終了したら end アラートが表示されます。

サンプル

http://www.dango-itimi.com/blog/swf/152/

上記例では問題なさそうに動いていますが、まだあまり検証を行なっていないため多分穴は結構ありそうです。随時埋めていくという形で。

追記:穴1)
どの timer インスタンスがどの DOM 要素に対応しているのか判別できるようにしないと、用途が広がらないかもしれない。

追記:穴1解決)
timer.elem 変数経由で DOM 要素にアクセス可能な事が分かりました。

[ FLASH ] [ tips ] 2012年03月03日 02:00 | コメント (0) | トラックバック

FLASH tips update Box2DFlash v2.1a : ピンボール 其の六 ゲームテンポ上昇と動作対象オブジェクトのすり抜け対策(CCD)

「ピンボールゲームの楽しさとは何たるか」を調査するために、無料で遊べるピンボールゲームを片っ端からプレイしてみました。結果 一番楽しめたのは、長いフリッパーで勢いよく次々とボールを弾きまくるピンボールゲームでした。ふんわり浮くボールが画面内で弾かれる様を長く眺めているよりも、自分で頻繁に弾いて操作するほうが遊んでいる感が強いのかもしれません。

というわけで今回のサンプルでは、ボール落下速度を上げフリッパーの長さを増加し、ゲームテンポの向上を行なってみました。

動作対象オブジェクトのすり抜け対策

ボール落下速度を上げてみると、ボールがフリッパーをすり抜けてしまうという問題が発生。
何か設定が足りないところはないか ネット上で「Box2D すり抜け」といった単語で調べてみたところ、以下の情報が見つかりました。

動作対象オブジェクト(b2Body)の b2BodyDef.bullet プロパティを true に設定すれば解決との事です。

bodyDef.bullet = true;

すり抜け対処のための衝突判定を continuous collision detection(CCD) と呼ぶ模様。Box2DFlash v2.1a 用のマニュアルではありませんが、以下の Box2D manual の Bullets の項目に説明がありました。

 Box2D v2.2.0 User Manual
 http://www.box2d.org/manual.html

ただし、この機能を利用すると負荷が増えるため、フレームレートが下がる原因となります。低スペックなPCほど影響がでてきます。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2012年01月16日 16:14 | コメント (0) | トラックバック

FLASH tips GAE 1.6.0 : python 2.7 PyCrypto ImportError

最近 Google App Engine(GAE) では python 2.7 が利用可能になったため、新しく python 2.7 用にアプリケーションを作成してみたところ、PyCrypto のモジュールをインポートする箇所でエラーが発生してしまう事がわかりました。

例えば以下の一行を記述するだけで、GAE のサーバ上では ImportError が発生してしまいます。

import Crypto.Cipher

python 2.5 のアプリケーションでは上記記述を行なっても問題なく動作します。GAE python 2.7 では何か別の記述が必要なのでしょうか?

行なった検証手順は、以下の URL にある「Hello, World!」を表示するだけのアプリケーションの二行目に「import Crypto.Cipher」を追加しただけ、となります。

http://code.google.com/intl/en/appengine/docs/python/gettingstartedpython27/helloworld.html

Dashboard から確認可能なログに出力されたエラー内容

Traceback (most recent call last):
  File "/base/python27_runtime/python27_lib/versions/1/google/appengine/runtime/wsgi.py", line 168, in Handle
    handler = _config_handle.add_wsgi_middleware(self._LoadHandler())
  File "/base/python27_runtime/python27_lib/versions/1/google/appengine/runtime/wsgi.py", line 206, in _LoadHandler
    handler = __import__(path[0])
  File "/base/data/home/apps/s~test-crypto/1.355228157185667132/helloworld.py", line 2, in <module>
    import Crypto.Cipher
ImportError: No module named Crypto.Cipher

現状解決策が見つからないため、python 2.5 用のアプリケーションを別途作成しそちらで開発を進めることに。

追記)
GAE フォーラム「1.6.1 Pre-release SDKs are live」のスレッド内記述に以下の項目を発見。

- Fixed an issue in the SDK where importing Crypto.Util.Counter caused an
  ImportError.

今回の ImportError は次回バージョンで解決されるのかな?

追記2 2011/12/14)
本日 GAE 1.6.1 がリリースされたとのことで再度検証してみましたが、同じエラーが発生。
ちなみに Windows ローカル開発環境上では import Crypto.Cipher という記述ではエラーは発生しませんが、import Crypto.Cipher.DES という記述を行なうとエラーが発生します。

追記3 2011/12/14)
問題ほぼ解決。
python2.7 では外部ライブラリを用いる際、app.yaml に追記が必要なことがわかりました。
今回の場合、以下の記述を行えばサーバ上で ImportError は発生しなくなりました。

libraries:
- name: pycrypto
  version: latest

GAE ドキュメントをしっかり読んでいなかった私のミスでした。
残りの問題は、Windows ローカル開発環境上での ImportError のみ、となります。
Windows Vista 上での ImpoerError は以下のような記述になっています。

ImportError: DLL load failed: %1 は有効な Win32 アプリケーションではありません。

ファイル権限が関係している感じがします。引き続き調査を行います。
もしかしたら「GAEローカル開発環境では python 2.7 はまだサポートされていない」という事に対するエラーの可能性あり。

[ FLASH ] [ tips ] 2011年12月08日 16:20 | コメント (0) | トラックバック

FLASH tips update GAE : Google アカウントによる Flash(swf) 内データ保存から ユーザ独自の URL 発行

Google App Engine(GAE)にて、以下の処理動作を行うサンプルアプリケーションを作成しました。

・swf 内データを Google アカウントを用いて GAE のデータストアに記録
・記録されたデータを元に Google アカウントユーザ毎の独自 URL の発行

サンプルアプリケーション URL
http://dango-itimi.appspot.com/crypto_test/

SCORE 欄 に最大 5桁の数値を入力し登録ボタンを押すと処理が開始します。使用しているブラウザで Google アカウントにログイン中の場合、GAE サーバ上に入力した数値が記録され、ログインしていない場合 ログインを促す画面が表示されます。

数値を登録した Google アカウントには アプリケーション上で ユニークID が割り振られ、http://dango-itimi.appspot.com/crypto_test/home/ユニークID/ という URL で、記録された数値を誰からも閲覧することができるようになります。

Google アカウント情報から取得可能な情報(ユーザID)はハッシュ化(暗号化)して利用しており、どの Google アカウントがこのサンプルアプリケーションを利用したのか等の情報は 管理人の私でもわからないようにしています。数値を登録するだけの大した内容ではありませんが、お気軽にご利用ください。

GAE と Google アカウント

GAE には Google アカウントと紐付けたアプリケーションの作成を比較的簡単に行うことができる仕組みがあります。何かユーザサービスを作成したい場合、GAE と Google アカウントを利用する事で、アプリケーション作成者はユーザのアカウント管理システムを作成する必要はなくなります。私のようなサーバ側の知識はほとんどない Flash 開発者にとっては、この仕組は非常に大きいです。アカウント管理は Google にまかせ、コンテンツ制作に力をそそぐことができます。

現在 Google アカウントを取得するには電話番号確認が必須となっています。(IP によっては電話番号は必須にならないケースもあるとの情報も見かけます)
Web サービスに Google アカウントを利用するメリットとして、ユーザの唯一性が保ちやすいという点が挙げられます。例えば何かの投票サービスを作成する場合、一人が多数のアカウントを利用してたくさんの投票を行う、という事態を避ける事ができます。
デメリットとしては、電話番号が必須のため アカウント作成にやや手間がかかるという点が挙げられます。サービスにログインしようとしたら、Google アカウントが必須な事がわかり、アカウントを取得するには電話番号が必須、となると「これはめんどうだ」という事で、ユーザを逃してしまう可能性がでてきます。簡単なゲーム等では、ログインはしなくても遊ぶことは可能で、スコア登録を行う場合のみログインが必要である、といった工夫が必要となりそうです。

暗号・難読化

Flash(swf) とサーバ(GAE)とで通信を行う箇所では、調査した以下の記事の内容を元に暗号化通信を行なっています。

暗号化調査
暗号化調査2 : as3crypto ←→ PyCrypto : DES, AES, RSA
暗号化調査3 : Crypto.getCipher メソッドの利用 : DES, AES 修正版

また、secureSWF を導入し、swf の難読化を行なっています。(現在円高なので secureSWF は割とリーズナブルなお値段になっているかもしれません。)

python 側(PyCrypto)で RSA 暗号化したデータを as3 側(as3Crypto)で復号可能であれば もう少し安全な暗号化通信を行えそうなのですが、ここは残念なところです。

今回行なった通信内容のデータ改ざん対策の他、ゲーム等ではメモリ操作によるチート対策も必須となりそうです。

 参考 : Flashゲームのチート対策 | NJF
 http://njf.jp/?p=999

今後

複数の swf からでもデータ登録を可能にするシステムへ修正予定。汎用性をもたせたライブラリ化を図ります。

サーバ・ユーザアカウント管理問題や swf 解析問題により、今までは諦めてしまっていた事が多々ありました。「それを行うにはサーバ側を専門としている会社が必要」であったり「swf は解析されてしまうから、それを Flash で行うには避けたほうがよい」等々。
GAE の利用や、暗号・難読化により、これら問題は解決してきているのではないかと思います。

[ FLASH ] [ tips ] [ update ] 2011年12月02日 17:26 | コメント (0) | トラックバック

FLASH tips 暗号化調査3 : Crypto.getCipher メソッドの利用 : DES, AES 修正版

前回の記事「暗号化調査2 : as3crypto ←→ PyCrypto : DES, AES, RSA」を元に、as3 と python とで暗号化通信を行うサンプル制作を進めていた所、PyCrypto 側で DES 暗号化したデータを as3crypto 側で DES 復号できないケースがある事に気づきました。
8 byte 丁度の文字列は DES 復号可能でしたが、16 byte といった 8 byte より大きな文字列の復号が正常に行われませんでした。

調査の結果、AS3 版 SymmetricCrypter クラス内に問題があったため以下のように修正を行いました。


package com.dango_itimi.crypto {

	import com.hurlant.crypto.symmetric.IPad;
	import com.hurlant.crypto.symmetric.NullPad;
	import com.hurlant.crypto.symmetric.ICipher;
	import com.hurlant.crypto.Crypto;
	import com.hurlant.util.Base64;
	import com.hurlant.util.Hex;
	import flash.utils.ByteArray;
	
	public class SymmetricCrypter {

		private var crypter:ICipher;

		public static function createDESCrypter(key:String):SymmetricCrypter {
			
			return new SymmetricCrypter("des-ecb", key, new NullPad());
		}
		public static function createAESCrypter(key:String):SymmetricCrypter {
			
			return new SymmetricCrypter("aes-128-ecb", key, new NullPad());
		}
		public function SymmetricCrypter(cipherName:String, key:String, pad:IPad = null) {
			
			var keyBin:ByteArray = Hex.toArray(Hex.fromString(key));
			crypter = Crypto.getCipher(cipherName, keyBin, pad);
		}
		
		public function encrypt(plainText:String):String {
			
			var textBin:ByteArray = Hex.toArray(Hex.fromString(plainText));
			crypter.encrypt(textBin);
			
			var cipherText:String = Base64.encodeByteArray(textBin);
			return cipherText;
		}
		public function decrypt(cipherText:String):String {
			
			var decodedTextBin:ByteArray = Base64.decodeToByteArray(cipherText);
			crypter.decrypt(decodedTextBin);	
			
			var decryptedText:String = Hex.toString(Hex.fromArray(decodedTextBin));
			return decryptedText;
		}
	}
}

DESKey, AESKey クラスインスタンスを直接作成するのではなく、Crypto クラスの getCipher メソッド経由で DES, AES 処理を行うためのクラスインスタンスを取得するように変更を行なっています。

Crypto.getCipher メソッド第一引数

Crypto.getCipher メソッド第一引数にどういった文字列を指定すればよいかは Crypto.getCipher メソッドのコメントに記述があります。

引用 : com.hurlant.crypto.Crypto クラス getCipher メソッドコメント


/**
 * Things that should work, among others:
 *  "aes"
 *  "aes-128-ecb"
 *  "aes-128-cbc"
 *  "aes-128-cfb"
 *  "aes-128-cfb8"
 *  "aes-128-ofb"
 *  "aes-192-cfb"
 *  "aes-256-ofb"
 *  "blowfish-cbc"
 *  "des-ecb"
 *  "xtea"
 *  "xtea-ecb"
 *  "xtea-cbc"
 *  "xtea-cfb"
 *  "xtea-cfb8"
 *  "xtea-ofb"
 *  "rc4"
 *  "simple-aes-cbc"
 */
public static function getCipher(name:String, key:ByteArray, pad:IPad=null):ICipher {
	…
}

python 側では、DES 暗号化モード? に MODE_ECB と設定したので、as3 側でも同じく ECB モードに設定するために "des-ecb" という文字列を指定しました。

Crypto.getCipher メソッド第三引数の注意点

Crypto.getCipher メソッド第三引数には Padding 方法を指定します。

AS3 Crypto Demo page」の Secret Key タブ内 Padding: 選択フォームを見ると「PKCS#5」「NONE」二種類の Padding 方法を選択できる事がわかります。Padding: に「NONE」を選択すると、前回作成した python 側での DES 暗号化した文字列の復号が可能となります。

Padding は「NONE」なのだから、Crypto.getCipher メソッド第三引数にデフォルトで設定されている null を指定すればよいのではないか、と考えてしまいそうですが、null を指定すると「PKCS#5」方式が選択されてしまう点にご注意ください。Padding に「NONE」を指定するには、NullPad クラスインスタンスを設定すればよいようです。


引用 : com.hurlant.crypto.symmetric.ECBMode クラスコンストラクタ 注意点


public function ECBMode(key:ISymmetricKey, padding:IPad = null) {
	this.key = key;
	if (padding == null) {
		padding = new PKCS5(key.getBlockSize());
	} else {
		padding.setBlockSize(key.getBlockSize());
	}
	this.padding = padding;
}


[ FLASH ] [ tips ] 2011年12月01日 10:53 | コメント (0) | トラックバック

FLASH tips 暗号化調査2 : as3crypto ←→ PyCrypto : DES, AES, RSA

前回の「暗号化調査」記事の続きです。
Action Script 3(AS3), python 双方向に暗号化通信を目的とした、共通鍵暗号方式(DES, AES)と公開鍵暗号方式(RSA)のプログラミングに関する調査が完了しました。

環境

AS3 側は as3crypto という暗号化用ライブラリを用いています。as3crypto.swc バージョン 1.3 と、svnリポジトリにある最新バージョンのソースファイル一式 両方で検証しました。

python 側は Google App Engine がデフォルトでサポートしている PyCrypto という暗号化ライブラリを用いました。python のバージョンは 2.5.2, PyCrypto のバージョンは 2.0.1 となります。最近 GAE でサポートされた python 2.7, PyCrypto 2.3 でも動作検証を行っています。

 as3crypto
 http://code.google.com/p/as3crypto/

 PyCrypto
 https://www.dlitz.net/software/pycrypto/

 windows 用 PyCrypto 2.0.1 ダウンロード URL
 http://www.voidspace.org.uk/python/modules.shtml#pycrypto

調査結果

AS3, python 共にネット上にサンプルソースが載っていた、共通鍵暗号方式(DES, AES)と公開鍵暗号方式(RSA)についてプログラミング調査を行ないました。共通鍵暗号方式の AS3, python 双方向暗号化に対しては、特に問題は発生せず、意図通りの動作となりました。

しかし公開鍵暗号方式(RSA)で問題が発生。AS3 側で暗号化したデータを python 側で復号する事は成功しましたが、python 側で暗号化したデータを AS3 側で復号する事ができませんでした。as3crypto の復号処理でエラーが発生してしまいます。

何が問題か as3crypto, PyCrypto 両方共に調査を行なってみましたが、ネット上の資料はあまり多くは見つからず、はっきりとした原因はわかりませんでした。どうも、RSA 暗号化方式にはパディング処理という物がいくつかあり、PyCrypto の採用しているパディング処理に対し as3crypto の復号処理が対応していないっぽい、という感じがします。それらしきキーワードが書かれていた英語の質問フォーラムの記述を断片的につなげてみただけなので、めちゃくちゃ言ってしまっているかもしれません。PyCrypto の RSA 暗号処理は PKCS#1 v1.5?方式で、as3crypto ではそれは解析できないとかどうとか、まだよく分かっていません。

「環境」の項目に記述した as3crypto, PyCrypto 二種類のバージョンで検証を行いましたが、動作の違いはなく問題は解決しませんでした。

as3crypto の復号処理で、「どういう復号処理を行うか」を指定できる箇所(RSAKey.decrypto メソッドの第四引数)があり、そこに pycrypto で暗号化したデータを復号するための独自のメソッドを指定すれば問題は解決しそうではあります。しかし別途、復号アルゴリズムの勉強を行わなくてはならなそうなので、python → AS3 への RSA 暗号化通信に関しては保留としたいと思います。

参考サイト

 ■ AS3
 AS3で暗号/復号化 : suz-lab
 AS3で暗号/復号化(RSA版) : suz-lab
 RSA暗号化して通信経路途中での改ざんを防止 : KYUCON*BLOG
 
 ■ python
 Pythonでの暗号化/復号化(AEC-DES,RSA) : YutaKikuchiのTechBlog
 PyCryptoで暗号化する : Pythonメモ

 ■ ツール
 AS3 Crypto Demo page

サンプルソースコード

暗号化・復号用クラスと検証用クラスのソース一式は以下となります。AS3, python 共にロジックはほぼ同じです。

暗号化対象の文字列を暗号化し Base64エンコードするまでを encryptメソッドで行い、Base64エンコードされた暗号化文字列を 暗号化されていない文字列にまで復号するまでの処理を decrypt メソッドで行なっています。

▽続きを読む

[ FLASH ] [ tips ] 2011年11月10日 13:39 | コメント (0) | トラックバック

FLASH info tips Adobe 製品インストール・アンインストールエラーでの対処 : Error 1325. ******* is not a valid short file name

ものすごく状況が限定される情報です。世の中同じような状況で Adobe 製品がインストール出来ない…!なんて人の方のための解決へのヒントになれば幸いです。

Windows にて、近年の Adobe 製品のインストーラで発生します。インストール(アンインストール)時のエラーメッセージとして「Error 1325. ******* is not a valid short file name」といった「ショートファイル名が有効でない」といった意味の文言が表示された時の対処となります。

原因の可能性

上記エラーメッセージが表示される原因として、以下の Windows 上での以下の(a)~(b)の操作が問題である可能性があります。

(a)ドキュメント(マイドキュメント)ディレクトリの場所を任意に設定

私は外部ハードディスクにドキュメントディレクトリを設定するよう変更していました。私の場合、外部ハードディスクは Gドライブだったので「G:\MyDocument」というパスを設定していました。

(b)ドキュメントディレクトリのドライブを変更

関東大震災時いろいろ作業環境を変更していた際、外部ハードディスク名が変わってしまった事があります。Gドライブから Hドライブに変更がかかりました。「H:\MyDocument」へと変わりました。

いきさつ

本日、購入した Adobe Flash Professional CS5.5 アップグレード版が家に届いたのですが、インストールエラーが発生。たくさん表示されるエラーと警告文の中に気になるエラー文言が見つかります。

 Error 1325. MyDocument is not a valid short file name

このエラーメッセージは半年前くらいに DreamWeaver 体験版のインストールや Adobe Reader のアンインストールを行おうとした際にも表示されました。近年の Adobe 製品のインストーラで発生するかと思われます。

購入した Adobe Flash Professional CS5.5 でも同じエラーメッセージが表示されインストールできないのはまずい、という事で再度調査を開始しました。

解決手順

エラーメッセージの内容は「『MyDocument』という文字列を含むディレクトリパスが見つからない」という事かと予測し、任意に変更していたドキュメントディレクトリの場所をまずはデフォルトに戻してみようと思いました。しかし戻し方が思い出せない。
おかしいなとネット上で調べてみると「ドキュメントディレクトリのプロパティに[場所]タブで設定が可能」との事ですが、プロパティウインドウ内に[場所]タブが見つからない。更に検索してみると以下の情報がありました。

 Vistaのドキュメントプロパティから[場所]タブが消えた
 http://lufia.org/notes/2008/0808.html

上記記事を参考に、レジストリのドキュメントディレクトリの位置を調べてみると「G:\MyDocument」となっていました。「H:\MyDocument」になっていなくてはならないのに、ドライブ名は G のままでした。よって、「G:\MyDocument」を「H:\MyDocument」に編集し PC を再起動。(レジストリの書き換えには十分にご注意ください。)

これにより万事解決。エラーメッセージは表示されることなく無事 Flash CS 5.5 へのアップグレードを行うことができました。ドライブが変わったがレジストリは書き換えられていなかった、というのが主原因だったようです。

[ FLASH ] [ info ] [ tips ] 2011年11月04日 15:38 | コメント (0) | トラックバック

FLASH tips update 暗号化調査

暗号化通信 並びに swf の暗号化についての調査を少しずつ開始。

暗号化通信

いくら暗号化通信を行おうとも swf 自体を解析されてしまえば意味が無い、といった認識がありました。ざっと調査した結果 その認識は変わらず。とはいえ暗号化しないと、誰でも簡単に不正なリクエストを行うことが可能となってしまうため、重要なデータを扱う swf では暗号化は必須となります。

swf は Google App Engine 上で動作させることを予定しており、AS3 ←→ Python 双方向に暗号化通信を可能にすることを第一の目標とします。

暗号化の方法を調べてみると、共通鍵暗号方式と公開鍵暗号方式、そして両者を組み合わせたハイブリッド暗号方式等が見つかります。以下はハイブリッド暗号方式に関しての参考 URL です。

 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1065429575
 http://itpro.nikkeibp.co.jp/article/COLUMN/20060620/241303/

共通鍵暗号化通信、公開鍵暗号化通信それぞれサンプルを制作した後、ハイブリッド暗号方式に挑戦してみようと思います。ハイブリッド式にするのは、上記 URL 内にあるような両者の利点をとるため、というのではなく、スクリプト難読化のため(不正なリクエストを送り難くするため)の対処といえます。

AS3, python 共に暗号化に関する情報は検索すると結構見つかります。MD5, RSA あたりがキーワードになるでしょうか。

Adobe のサイトでも少々解説がありました。

 より安全なSWF Webアプリケーションの作成
 http://www.adobe.com/jp/devnet/flashplayer/articles/secure_swf_apps_12.html

ただし、上記 URL の以下の文章は誤りではないでしょうか。

非対称暗号化方式を使用する場合は、SWFファイル内に公開鍵を格納しても、
脅威にさらされることはありません。

第三者がSWFファイルを逆コンパイルして鍵を盗んだとしても問題はありません。
攻撃者が不正な暗号化済みデータをサーバに送りつける可能性もありますが、
サーバ側で、暗号化が行われているかどうかにかかわらずデータの検証を行うよう対策を施していれば、
問題はありません。

サーバ側でデータの検証を行えばよい、とありますが、データを作る側のロジックは swf 内に存在するため、ロジックが解析されてしまえば不正なデータは作れてしまうような気がします。

swf 暗号化

まず、どれくらいの精度で解析可能なんだろうかと、世にある swf の解析ソフトを試用してみました。
swf バイナリ解析を勉強していた時、相当これはややこしいな、と感じていたため、解析ソフトも大した解析はできないのではないか?などと思っていましたが、いやはや実際に試用してみてびっくり。クラスパッケージ構造そのまま、ソースファイルの内容ほぼそのままに解析されました。あまりのそのままさに、ブーッと吹いてしまいました。暗号化通信対処を行なっても、その処理箇所がどうなっているのか知識のある人ならばすぐに見ることができてしまいます。

これは手詰まりか、と思いましたが、次に「swf 難読化ソフト」の試用を行って見ました。ソフト名は secureSWF です。試用してみた結果、解析ソフトで解析したとしてもソースファイルの内容は何が書かれているのか分からないような難読化が行われました。ディレクトリ構造やらクラス名やら何から何まで解析結果はめちゃめちゃな状態になり、これを解読するのは無理と言ってもいいような状況ではないでしょうか。

ただし、secureSWF によってクラス名等変更されているのが原因かどうか、外部 swf を読み込む箇所で動作が停止してしまう現象が発生しました。secureSWF の Identifiers Renaming タブに、クラス名や変数名等 rename 設定を任意に行うことができるような箇所があるので、その設定によってこの問題は解決するかもしれません。

secureSWF のデモダウンロードページを見てみると、FDT Plugin バージョンというものも用意されている模様。これはなんとか上記問題を解決し、導入を検討してみたいところです。

まとめ

暗号化通信並びに swf 暗号化、双方が問題なく可能になれば、サーバと swf とのデータのやりとりを行う処理にて、最低限の対策はとった と言うことができそうです。

[ FLASH ] [ tips ] [ update ] 2011年10月31日 16:23 | コメント (0) | トラックバック

FLASH info tips FDT5 リリース

AS3 用エディタとして利用している FDT の新しいバージョン FDT5 が昨日登場しました。

 http://fdt.powerflasher.com/

早速導入してみようと eclipse プラグイン設定から http://fdt.powerflasher.com/update/ へアクセスしてみるも、FDT4 までしか見つからない状況。twitter の情報を追ってみると、プラグイン版はまだとの書き込みを発見。プラグイン版が出るまで、うずうずしながら使用はしばらく待ちたいと思います。

コード補完機能の向上

ざっとどのような機能があるのか見てみたところ、一番に目についたのはエディタのコード補完機能が向上したという点。

 Advanced Refactoring & FDT 5

値から変数と型宣言を自動で補完してくれたり、ローカル変数定義を直でフィールド変数定義に変換してくれたり、値をフィールド定数値に変換してくれたりと、かゆい所にまで手を届けてくれた感じの機能向上です。コーディング時で薄々不便に感じていた点を補完してくれるようになり、開発効率も微量ながらアップすることでしょう。

メソッドの戻り値に対する変数と型宣言も補完してくれそうな気もしますが、上記サイト内にはその説明がなかったので試してみないとわからないところです。例えば「test.run();」という記述を「var *:int = test.run();」と補完してくれるのならば、とても効率がアップします。

haXe サポート

以前 FDT の blog で文字を目にしたことはありましたが haXe とはなんぞや状態でノーチェックでした。haXe のサイト内説明を見てみたところ、なんとも面白そうなプログラミング言語であることがわかりました。

 haXe の紹介

javascript でのゲーム開発、といったソースコード量が大変多くなりそうな時に、代行手段として haXe を用いることができるのではないかな?と感じました。現行の javascript を記述していて一番問題に感じるのは、eclipse の Refactor 機能(Rename, Moveコマンド)を用いる事が可能なエディタが存在しない、という点です(存在していたらごめんなさい)。大規模開発にて javascript の利用が厳しいと感じるのは、これが理由です。
しかし FDT の Refactor 機能を haXe に用いることが可能ならばこの問題は解決します。AS1 の利用をやめ AS2 を利用するイメージと同等となります。とはいえまだ試してもいないので、FDT の Refactor 機能が haXe に利用できなかったらごめんなさい。

haXe にて jQuery といった外部ライブラリを利用したい場合、どのように記述するのだろうか、それとも同等の API が用意されているのだろうか、等 疑問は多々ありますが、時間があるときに簡単に調査したい所です。

フリー版

FDT5 には機能を制限したフリー版があります。フリー版では肝と言える Refactor 機能の利用はできませんが、基本となるコード補完機能の利用は可能のようなので、eclipse + FDT によるコーディングがどのようなものか、これを機に試してみてはいかがでしょうか。

 ダウンロードページ
 http://fdt.powerflasher.com/buy-download/

vi 使いの方には合わせて viPlugin for Eclipse (有料)の導入もお勧めします。

[ FLASH ] [ info ] [ tips ] 2011年10月27日 11:09 | コメント (0) | トラックバック

FLASH tips TortoiseSVN 1.7 の WC-NG で eclipse Refactor (Rename, Move)機能が問題なく利用可能に

先日 TortoiseSVN 1.7 がリリースされ、それに伴い WC-NG(Working Copy Next Generation) というファイル管理方法に変更がかかりました。

 参考)Subversion 1.7が出たので、TortoiseSVN 1.7でWC-NGやってみた
 http://d.hatena.ne.jp/lino/20111014/1318597181
 
引用

Subversion 1.7の新機能の中でも個人的に嬉しいのが、WC-NG(Working Copy Next Generation)です。WC-NGは作業コピーのメタデータ変更で、フォルダの中にたくさんあった.svnフォルダがルートフォルダだけに集約されます。

今までは各ソースディレクトリ内毎に .svn ができてしまっていたため、eclipse(FDT) の Refactor コマンド(Rename, Move)を用いて「ディレクトリ名の変更」や「ディレクトリを他ディレクトリへ移動」を行うと、作業コピー内ディレクトリの構造が壊れてしまうという問題がありました。しかしこれからはその問題は発生しなくなります。


TortoiseSVN 1.6 以前の問題点

例えば以下のような Subversion 管理のディレクトリ構造があったとします。testA ディレクトリ内には AS3 ソースファイルの SampleA.as と SampleB.as が存在します。

root/
├ testA/
│ ├ SampleA.as
│ └ SampleB.as
├ testB/
└ testC/

実際には以下のように、各ディレクトリ内には隠しディレクトリ .svn/ が存在します。

root/
├ .svn/
├ testA/
│ ├ SampleA.as
│ ├ SampleB.as
│ └ .svn/
├ testB/
│ └ .svn/
└ testC/
  └ .svn/

Refactor Move コマンドを用いて testA ディレクトリを testB ディレクトリの下に移動させると以下のようになります。

root/
├ .svn/
├ testB/
│ ├ .svn/
│ └ testA/
│   ├ SampleA.as
│   ├ SampleB.as
│   └ .svn/
└ testC/
  └ .svn/

FDT の Refactor Move コマンドでは testA/SampleA.as と testB/SampleB.as の内容は自動で書き換えてくれますが、testA/.svn/ ディレクトリ内の内容を書き換える機能はありません。上記のように Move コマンドで root/testB/testA/.svn/ に移動しても Subversion 上では root/testA/.svn/ 上に存在している事となり、不整合が発生してしまいます。よって今までは、任意に root/testB/testA/ 内の .svn/ ディレクトリを削除したりしなくてはなりませんでした。

TortoiseSVN 1.7 以降

上記ディレクトリ構造例を TortoiseSVN 1.7 に適用すると以下のようになります。

root/
├ .svn/
├ testA/
│ ├ SampleA.as
│ └ SampleB.as
├ testB/
└ testC/

Refactor Move コマンドを用いて testA ディレクトリを testB ディレクトリの下に移動させると以下のようになり、ディレクトリ構造の不整合は発生しません。

root/
├ .svn/
├ testB/
│ └ testA/
│   ├ SampleA.as
│   └ SampleB.as
└ testC/

[ FLASH ] [ tips ] 2011年10月20日 15:32 | コメント (0) | トラックバック

FLASH tips update Box2DFlash v2.1a ピンボール1

過去 AS2 で製作し中途で止まっていたピンボールゲームを、Box2DFlash v2.1a にて動作させてみることに。

「Flash オーサリング環境上で製作したシェイプデータを Box2DFlash の物体として再現するライブラリ」の精錬化と、Box2D を用いてのゲームプログラミングの練習の意味も兼ねての制作となります。

過去製作したピンボールゲームの背景データと、Flash オーサリング上で背景用グラフィックスシンボルを配置したイメージは以下となります。

まだまだお粗末ですが Box2D debug モードでの動作は以下となります。

 http://www.dango-itimi.com/blog/swf/145/0/preloader.swf

画面クリック後、左右キーでフリッパーを操作することが可能です。ゲーム中スペースキーを押すと PAUSE となります。どこかくぼみにボールがはまるとゲームは停止してしまいます。

PAUSE 機能を実装してみて、Box2DFlash v2.1a では内部で何か独自のスレッドを持ってはいないことが確認できました。b2World.Step メソッドを実行することで 1フレーム分の処理が実行されるような内容になっているようです。


背景グラフィックスや、ボールとフリッパーのグラフィックスを合わせたものが以下となります。

 http://www.dango-itimi.com/blog/swf/145/1/preloader.swf


b2RevoluteJointDef 制限角度注意点

フリッパーの動作は b2RevoluteJointDef クラスのモーター機能を利用しています。

 参考サイト)
 http://flashjp.com/apiindex.php
 http://d.hatena.ne.jp/matsu4512/20090110/1231585208

b2RevoluteJointDef を利用してみた所、b2RevoluteJointDef.lowerAngle, b2RevoluteJointDef.upperAngle の値を設定したとしても、その値 丁度には停止してくれない、という点に気づきました。制限値に近い角度になっている状態で更に大きなチカラを加えたり モーターを回したりすると、一瞬大きく角度がはみ出てしまいます。よって、制限角度を超えたらそれ以上にチカラを加えたりモーターを回したりはしないようにするための制御を別途行うようにしています。

[ FLASH ] [ tips ] [ update ] 2011年10月13日 16:56 | コメント (2) | トラックバック

FLASH info tips Flash による HTML サイト開発

業務にて HTML 主体の Web サイト制作がいくつか続き、ようやく一息つける段階になりました。

HTML 主体なので Flash はまったく利用していないのか、というとそんな事はなく、むしろメインで使っています。Flash を用いている箇所は「ブラウザ上の表示」ではなく「開発の段階」でとなります。

端的に言えば「Flash による HTML サイト開発」となり、詳しく言うならば「オーサリングソフト Flash Professional CS5 にて利用可能な Adobe AIR 出力機能を用いての HTML サイト開発」です。

Adobe AIR のファイル入出力機能を利用して 簡易的な CMS(コンテンツマネジメントシステム) を構築し、システム内の機能を用いて Web サイトを運用します。

Adobe AIR から出力されたアプリケーションには Dreamweaver にあるようなテンプレート機能が用意されており、更新者は最小必要減のデータを入力後、アプリケーションの出力ボタンを押すだけで、データが反映された 静的 HTML が出力されます。当 blog で用いている Movable Type の内容にも近いです。条件によって変化する複雑な HTML レイアウト等 テンプレート機能だけでは補えないものは、AS3(Action Script 3) で HTML レイアウトタグを出力する処理を記述します。

作成したシステムは、以後流用が可能となり、専用のソフトウェアを購入する必要はありません。システムを 1 から構築しているので、ルール付けも自由。難しいレイアウト変更など、クライアントの要望にも答えやすいです。


こういったシステム開発を行うには、今までは他のプログラミング言語を利用するしかありませんでしたが、Adobe AIR の登場により Flash からも開発が可能となりました。利用する言語が少なければ、それだけ開発者の負担も減ります。

Adobe AIR はデスクトップアプリケーションを始め、モバイルデバイス対応(iOS, Android)など、現在進行中で機能拡大しています。それに合わせてオーサリングツール Flash の利用方法も変化していくこととなりそうです。

Flash と HTML5 的なお話

HTML 主体のサイト製作の流れ上、Flash の利用の是非や HTML5 に関する話がクライアントからあった、という話をよく耳にするようになりました。少し勘違いされているような内容もあり、よい説明を心がけるためにも、最近ではそれ関連の記事をブクマしています。

 ・Appleが嫌うけどGoogleは好きっぽいFlashとHTML5について | smartgoods.me
 ・HTML5があるからFlashがいらないということについての見解
 ・情弱なはてブ民にも判りやすく HTML5 vs Flash のこと教えてやる
 ・Impression of Chrome+HTML5 Conference by @coppieee
 ・バズワードに流されてませんか? 今チェックしておきたい、現場の開発者から見たHTML5の実際のところ


私が現段階で HTML5 についてどう考えているかは以下となります。実際に自分の手で検証してみたわけではなくネット上で調べただけの内容が含まれているため、誤っている可能性もあります。検証しない理由も以下となります。


・正式な仕様が決まってから習得

仕様決定は2014年を目指しているとの事です。未決定の仕様は変更される場合があり、学習した内容が無駄になる箇所がでてくる可能性があります。
時間に余裕があれば学習する価値はあります。しかし私は他にもまだまだ覚えなくてはならないものが山ほどあり、優先度は下がります。そして、習得した技術は年中利用していないと確実に忘れます。

別途、仕様が決まっていない事に合わせて、各ブラウザの HTML5 表示具合が統一されていない、という状況が懸念点です。現状の HTML4 の悲劇が再びになりそうで怖い。表示統一のためにも、ギミック的な箇所は Flash(swf) を利用する検討の考慮を。


・HTML5 習得 とはいっても大変な内容ではない(だろう)

ざっと調べたた感じ、HTML5 のキモと言われている canvas 操作はそのまま Flash 内ステージ操作と同じ事をするのではないかな(AS で書いていたものを javascript に書き換えるだけ)、と思います。CSS3? によるアニメーションの表現など、javascript 以外にも表現方法があるとのことで、そこらへんの仕組みを考えるのは面白そうですね。

ECMAScript を準拠としている AS1(Action Script 1.0) によるクラス設計が可能ならば、そのまま javascript によるクラス設計も可能です。HTML サイト製作において、jQuery は現状使いまくっているので、そのまま HTML5 の DOM 操作も簡単に行うことができる事でしょう。

ECMAScript4 標準化が白紙にならなければ、AS3 で書いた処理がそのまま HTML5 上でも利用できる、なんて日が来たのかもしれませんが、ここらへんは残念です。

---

その他、よく HTML5 の解説ページで「~という記述を用いれば IE6 でも HTML5 の表示が可能」と書かれていますが、これって本当なのでしょうか。こちら調べた限りでは「ただし、完全に HTML5 の表示はできません」という記述が必要だと思うのですが、実際に試してみていないので強くは言えないところです。

[ FLASH ] [ info ] [ tips ] 2011年09月18日 15:29 | コメント (2) | トラックバック

FLASH tips update Box2DFlash v2.1a 調査6 : 斜面を登り切った後の平面移動と処理サイクル

斜面を並行移動するプレイヤー(操作可能な箱)が、斜面を登り切った後 繋がる平面に対し、スムーズな平面並行移動に遷移するサンプルを作成しました。斜面を登り切るタイミングで Y軸方向の移動ピクセル量を調節し、平面から浮かないような処理を加えています。

 http://www.dango-itimi.com/blog/swf/144/preloader.swf

斜面を下り終えた後に繋がる平面への並行移動遷移処理は、今回の処理とは別となるため恐らく次回となります。

斜面を登り切った後 どうすれば平面並行移動にスムーズに遷移できるのか、胃袋が痛くなるまで悩みましたが、Box2D上におけるピクセル移動処理の方法が判明したため今回のサンプルを作成できました。

その他 悩ましかった点は、プレイヤー位置や移動量を決定する b2Body.SetPosition, b2Body.ApplyImpulse, b2Body.SetLinearVelocity メソッドがそれぞれ適用されるタイミングはいつなのか、プレイヤー位置操作後 プレイヤーが衝突している物質を取得できるタイミングはいつなのか、についてです。

結論としては、1フレーム内に 以下の順序で処理を行うことにより、問題は解決しています。

(1)プレイヤー移動
b2Body.SetPosition, b2Body.ApplyImpulse, b2Body.SetLinearVelocity 等を実行

(2)b2World.Step メソッド実行

(3)衝突物質の判定
b2World.GetContactList メソッドからの衝突物質データの取得

(4)衝突判定
プレイヤーが衝突している物質が何であるかを判定し、次のフレームでプレイヤーがどの行動を取るのかを設定

プレイヤー位置を設定するメソッド実行後、b2World.Step メソッドにより プレイヤーの位置が確定し、確定された位置から衝突物質が何であるのか判定できるようになる、といったところでしょうか。誤っていたらごめんなさい。

[ FLASH ] [ tips ] [ update ] 2011年08月18日 17:47 | コメント (0) | トラックバック

FLASH tips update Box2DFlash v2.1a 調査5 : ピクセル移動

移動する物質を指定位置でぴったり停止させたい、という場合、任意で物質の移動速度を調節する必要があります。しかしどういう記述をすれば、ピクセル単位で物質を移動させることができるのか わからない状態でした。

検索してみたところ、丁度それらしき情報を発見。

 適当ブログ:物体を投げる処理(box2d c++)
 http://wt03.blog.fc2.com/blog-entry-42.html

上記サイトによると、以下の式から得られる値を b2Body.SerLinearVelocity に設定すればよいとのことです。

移動させたいピクセル数 * フレームレート / BOX2D_SCALE

例えば、フレームレート 30, BOX2D_SCALE の値を 10 として、横に 5 ピクセル移動させたい場合以下のような記述を行います。

var FRAME_RATE:uint = 30;
var BOX2D_SCALE:uint = 10;

body.SetLinearVelocity(new b2Vec2(5 * FRAME_RATE / BOX2D_SCALE, 0));

変数 body は操作したい物質の b2Body クラスインスタンスです。

上下左右キーで空中を 5 ピクセルずつ移動するだけのサンプル swf は以下となります。

 http://www.dango-itimi.com/blog/swf/143/preloader.swf

このサンプルでは前回の記事に記述した、操作対象となる物質に重力を無視する処理を組み込んでいます。

[ FLASH ] [ tips ] [ update ] 2011年08月17日 10:00 | コメント (0) | トラックバック

FLASH tips update Box2DFlash v2.1a 調査4 : 重力を無視して直進する物質

Box2D 上でプレイヤーに何か弾のようなものを撃たせたい場合に必要と思われる、「重力を無視して直進する物質」はどのようにすれば表現できるのかの調査を行ってみることに。

ネットで検索してみると以下のサイトに、重力を無視するにはどうすればよいかの説明がありました。(恐らくバージョンは Box2DFlash v2.0.2)

 Master of None
 http://d.hatena.ne.jp/o_healer/20080508

上記サイトでは、b2Math.MulFV というメソッドを用い、物質の質量と反対方向の重力数値を加工し、加工後取得可能な力を物質に加えているらしき事がわかります。

しかし v2.1a では b2Math クラスは無くなっており、v2.0.2 のリファレンスで b2Math.MulFV メソッドの項目を見てみるも何も説明がなく、MulFV メソッドによりどのような加工が行われるのかわからない状況です。

よって色々な方法を試し、なんとかそれっぽい動作になる形にしました。
重力を無視して物質を直進させるには以下の二行を毎フレーム呼び出す形となります。

body.SetLinearVelocity(new b2Vec2(x軸速度, y軸速度));
body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());

変数 body は直進させたい物質の b2Body クラスインスタンスとなります。
一行目 SetLinearVelocity は、今までの物質の速度を無視して、引数で指定した速度に強制的に変更します。二行目では重力を相殺しています。もっとスマートな方法はあるかもしれません。

物質を空中に留めたい場合は以下のように記述します。

body.SetLinearVelocity(new b2Vec2(0, 0));
body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());

今回作成したサンプルは以下のような記述を行い、弾が右方向に直進するようにしています。

body.SetLinearVelocity(new b2Vec2(10, 0));
body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());

サンプル swf は以下となります。スペースキーで弾が発射されます。(スペースキーを有効にするにはキーボード変換を半角英数モードにする必要があります)

 http://www.dango-itimi.com/blog/swf/142/preloader.swf


他参考にさせていただいたサイト

■ SetLinearVelocity 関連
http://www.haphands.com/sw_flash/tech/box2d/box2d_07.html

■ 衝突 する / しない のグループ分け関連
http://www40.atwiki.jp/spellbound/pages/647.html
http://hokori.net/2009/05/27/box2dflashas3_contact/

[ FLASH ] [ tips ] [ update ] 2011年08月07日 15:27 | コメント (0) | トラックバック

FLASH tips update Box2DFlash v2.1a 調査3 : b2Manifold 調査

前回の記事「Box2DFlash v2.1a 調査2 : 斜面に対して平行に移動する箱」からの続きです。

二つの物質が衝突した際 得ることが可能な b2Manifold というクラスインスタンスがあります。b2Manifold クラスインスタンスのプロパティ値をどのように見れば「斜面に衝突したかどうか」「どの斜面に衝突したのか」を判別できるのかの調査を行いました。

調査用 サンプル swf

 http://www.dango-itimi.com/blog/swf/141/preloader.swf

上下左右キーで回転しない箱(以後プレイヤー)を操作する事ができます。斜面に接地時は、斜面に対して平行に移動します。
プレイヤーが背景オブジェクト(緑色の物質)に衝突すると、m_type と m_localPlaneNormal テキストフィールドに衝突時のデータが表示されます。


b2Manifold.m_type

まず、m_type プロパティの値に注目します。サンプルから以下のデータを得ることができます。

(1)
プレイヤーの上下左右の面が多角形(box or polygon)の背景オブジェクトにぶつかる
あるいはプレイヤーのどこかが円の背景オブジェクトにぶつかると
b2Manifold.m_type は 2 の値(b2Manifold.e_faceA) を返却する

(2)
プレイヤーの四隅が背景オブジェクトにぶつかると
b2Manifold.m_type は 4 の値(b2Manifold.e_faceB) を返却する

プレイヤーの角度は常に一定であり、プレイヤー上下左右の面が背景オブジェクトの斜面に衝突する事はありません。背景オブジェクト斜面に衝突するのはプレイヤーの四隅のみです。
よって、b2Manifold.m_type の値が 4 の時に、プレイヤーが斜面に衝突していることになります。


b2Manifold.m_localPlaneNormal

m_localPlaneNormal は「ローカル座標軸を元とした衝突面の単位法線ベクトル」といった意味でしょうか。b2Manifold.m_type プロパティと合わせて見ます。

(1)
m_type の値が 2 で プレイヤーが多角形(box or polygon)に衝突した場合
プレイヤー衝突面の単位法線ベクトルを返却する

(2)
m_type の値が 4 の場合
背景オブジェクトのローカル座標軸を元とした
背景オブジェクト衝突面の単位法線ベクトルを返却する

(3)
m_type の値が 2 で プレイヤーが円に衝突した場合は
今回の斜面衝突判定とは関係ないため説明略

ローカル座標軸を元としたデータの取得となるため、画面上に表示されている物質の角度がなんであれ、角度を 0 とした単位法線ベクトルが返却されます(多分)。box の角度が 15度、-30度の背景オブジェクトいずれも、上面にプレイヤーをぶつけると m_localPlaneNormal の値は (0, -1) となります。

これより今回のサンプルでは、以下の条件(a)~(c)いずれかの時 プレイヤーは斜面に衝突していることになります。

(a)
衝突した長方形(box)背景オブジェクトの角度が正で
m_localPlaneNormal の値が(-1, 0) または (0, -1)

(b)
衝突した長方形(box)背景オブジェクトの角度が負で
m_localPlaneNormal の値が(-1, 0) または (1, 0)

(c)
衝突した背景オブジェクトが多角形(polygon)で
m_localPlaneNormal の y 値が負

多角形(polygon)の角度が 0 ではない場合、斜面に衝突したかどうかの判定処理は複雑になりそうです。

参考)
Box2DFlash Documentation : b2Manifold
http://www.box2dflash.org/docs/2.1a/reference/Box2D/Collision/b2Manifold.html

Box2D 2.1a Tutorial – Part 4 (Collision Detection)
http://blog.allanbishop.com/box2d-2-1a-tutorial-–-part-4-collision-detection/

[ FLASH ] [ tips ] [ update ] 2011年08月05日 02:14 | コメント (0) | トラックバック

FLASH tips update Box2DFlash v2.1a 調査2 : 斜面に対して平行に移動する箱

アクションゲームを作る場合に必要と思われる機能「斜面に対しての並行移動」は、Box2Dにて実現可能かどうかの調査を行ってみることに。

斜面に平行に移動するには、衝突した物資の斜面の角度が分かればよい事になります。

ネット上で調べてみると、物質衝突時得ることが可能な b2Manifold というクラスインスタンスがある、という情報が見つかります。しかし b2Manifold から得られる各値をどのように見れば、「衝突した斜面」と「斜面の角度」の判別を行うことが可能なのかの情報は見つかりませんでした。(特にv2.1aの日本語の情報は皆無)

よって あらゆる方向から物質をぶつけ、得られる数値から推測を行い、おそらくこうであろうと予測しつつ、なんとか形にする所まで進めました。

成果物は以下となります。画面クリック後、上下左右キーでプレイヤー(回転しない箱)を操作する事が可能です。

 http://www.dango-itimi.com/blog/swf/140/preloader.swf

通常はプレイヤーに対し上下左右キーでその方向に力が加わります。しかし長方形の固定物質の斜面にプレイヤーが接地(上から衝突)した場合のみ、左右キーはプレイヤーに対して 斜面に並行した力が加わるようにしています。
現在は多角形の斜面には対応しておらず、多角形に対応後、調査結果をまとめたものを記事にできればと思います。

[ FLASH ] [ tips ] [ update ] 2011年07月31日 19:30 | コメント (0) | トラックバック

FLASH tips update Box2DFlash v2.1a 調査

世に公開されている物理エンジンライブラリを用いてのプログラミング法を学習すべく、Box2DFlash v2.1a を利用してみることに。

 Box2DFlash
 http://www.box2dflash.org/

Box2DFlash はバージョンごとに API が変化しているようで、最新の v2.1a に関しては以下のサイトが参考になります。

 Box2D 2.1a Tutorial - Part 1(英語)
 http://blog.allanbishop.com/box2d-2-1a-tutorial-part-1/

まずは Box2D の使用方法を学びつつ、Flash オーサリング環境上で制作したシェイプデータを、そのまま Box2DFlash の物体として再現するような処理を作成する事を第一目標としました。

成果物

以下のような 四角、丸、点(緑丸)の集合体、のムービークリップを Flash オーサリング上で用意します。

四角なら(box~)、丸なら(circle~)、多角形なら(polygon~)、といった具合にムービークリップ名には規則性を持たせ、ムービークリップ名称と形状・座標・角度に応じた Box2D の物質を生成するように処理を作ります。

例えば一番左上の紫色の四角形のムービークリップ名は box4_1_0_10 としており、数値の部分は以下の意味を持ちます。

 4 : id
 1 : 動作する物体であることを示す
 0 : 反発係数
 10 : 摩擦係数

反発係数と摩擦係数は処理内では 1/10 として計算されます。

処理作成後の再現結果は以下となります。

 http://www.dango-itimi.com/blog/swf/139/preloader.swf

ムービークリップの名称を変更すれば、ソースコードを変更する事なく各物体の振る舞いを変更する事が可能です。また、ムービークリップ群を配置しているクラスは dynamic に設定しており、ソースコードを変更する事なく、自由にムービークリップを追加・削除する事ができます。(dynamic なクラスはバグの温床ともなるため、使用の際は注意が必要)

以後の予定

反発係数や摩擦係数をムービークリップ名で設定できるようにはしましたが、その仕様は削除する事になるかもしれません。物体1から10までを同じ反発係数や摩擦係数にしたい、という場合、専用のクラスを用意し、そのクラスと結びつけるほうがよいからです。また、反発係数や摩擦係数以外の物体に設定可能なパラメータはまだまだたくさんあり、全てのパラメータをムービークリップ名で設定可能にする、というのは大変で現実的ではありません。

[ FLASH ] [ tips ] [ update ] 2011年07月25日 12:38 | コメント (0) | トラックバック

FLASH tips イージング処理 : javascript

何らかの Flash(swf) を作成する際、私は以下のサイトを参考に、イージングを行うための数値を取得するクラスを作成し有用させてもらっています。

 http://www.graviness.com/virgo/dhtml/mathematics/edging.html

ここ最近の業務では iPhone, iPad といった Flash 非対応の端末に対応すべく html ベースのサイト制作が続いているため、AS3 で作成していた簡易的なイージング処理用クラス(Edginger)を javascript に移植することに。


使い方 how to use

(1)Edginger クラスのコンストラクタに、イージング値(-100~100) と 動作分割数(1以上の値) を設定

(2-a)移動量一覧を取得するには getDistances メソッドを呼び出す
 → 移動総量を引数に指定

(2-b)移動地点一覧を取得するには getPoints メソッドを呼び出す
 → 初期位置と到達位置を引数に指定


var edginger = new Edginger(100, 5);
this.distances = edginger.getDistances(200);
this.points = edginger.getPoints(0, 200);

//this.distances の内容
//[77.41957135154557, 63.12656693970699, 40, 16.873433060293024, 2.580428648454415]

//this.points の内容
//[0, 77.41957135154557, 140.54613829125256, 180.54613829125256, 197.41957135154559, 200]

対象の移動量 or 移動先位置をあらかじめ配列で取得し、任意のタイミングで位置設定を行うことが可能となります。

対象を「移動」する事を目的としていますが、これは例えとなります。例えば「拡大縮小」用として Edgingerクラスを用いることも可能です。


利用例 example

jQuery と Edginger.getPoints を利用して、画面上の div 要素を 0 px から 200 px までイージング処理で移動する例は以下となります。index.html から Index.js を呼び出し、Index.js 内で Edginger.js を利用しています。

index.html

<html>
	<head>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript" src="Edginger.js" ></script>
		<script type="text/javascript" src="Index.js" ></script>
		<script language="javascript">

$(function(){
	new Index();
});	
		</script>
	</head>
	<body>
		<div id="box" style="position: relative; width:50px; background-color:#ffccaa;">ABC</div>
	</body>
</html>

Index.js

function Index(){

	this.init.apply(this, arguments);
}
Index.prototype.init = function(){

	var edginger = new Edginger(100, 30);
	this.points = edginger.getPoints(0, 200);

	var sc = this;
	this.mainFunction = this.move;
	this.intervalId = setInterval(function(){ sc.run(); }, 30);
};
Index.prototype.run = function(){

	this.mainFunction();
};
Index.prototype.move = function(){

	var point = Math.floor(this.points.shift());
	$("#box").css("left", point);

	if(this.points.length == 0)
		this.mainFunction = this.end;
};
Index.prototype.end = function(){

	clearInterval(this.intervalId);
};

実際の表示は以下となります。
http://www.dango-itimi.com/blog/swf/138/

ダウンロード download

利用例でのファイルを含むファイル一式は以下の URL よりダウンロードが可能です。

 http://www.dango-itimi.com/blog/swf/138/Edginger.zip


以下 Edginger.js のソースとなります。

▽続きを読む

[ FLASH ] [ tips ] 2011年07月18日 17:02 | コメント (0) | トラックバック

FLASH tips Pager アルゴリズムサンプル : javascript

業務で必要となるため Pager(ページャー) 用処理を javascript にて作成してみることに。

図 1)

仕様

どのような動作にするかの仕様を決定します。prev, next ボタン表示に関しては、まずは考慮から外します。

デフォルトの現在のページ表示位置

現在のページ表示位置は、中心位置となるようにします。

例えばページ総数が 30, ページ表示総数を 6 (偶数値)、現在表示されているページが 7、とした場合の表示は 図 2 となるようにします。

図 2)

ページ総数が 30, ページ表示総数を 7 (奇数値)、現在表示されているページが 7、とした場合の表示は 図 3 となるようにします。

図 3)


特定条件での現在のページ表示位置

ページによっては表示位置を中心位置以外にする必要がでてきます。

例えば 図 2 と同じ条件で現在のページが 2 あるいは 1 の場合、図 4, 5 となるようにします。

図 4)

図 5)

同じように、図 2 と同じ条件で現在のページが 29, あるいは 30 の場合、図 6, 7 となるようにします。

図 6)

図 7)


仕様詳細

「ページ総数」「ページ表示総数」「現在のページ」を与えることで、「表示最小ページ」「表示最大ページ」「現在のページ表示位置」の値が取得できるようにすれば、各図のような表示が可能となります。

例えば 図 2 の表示を行うには 以下の値のやりとりを行います。

[ 与える値 ]
ページ総数 : 30
ページ表示総数 : 6
現在のページ : 7

[ 取得する値 ]
表示最小ページ : 5
表示最大ページ : 10
現在のページ表示位置 : 2


図 5 の表示を行うには 以下の値のやりとりを行います。

[ 与える値 ]
ページ総数 : 30
ページ表示総数 : 6
現在のページ : 2

[ 取得する値 ]
表示最小ページ : 1
表示最大ページ : 6 
現在のページ表示位置 : 1

現在のページの表示位置は、配列要素数と同じく 0 から始まるものとします。ページ表示総数が 6 の場合、現在のページの表示位置は 0 ~ 5 の値となります。


ソースコード


上記処理を行うための PagerDataCreator, PagerData クラス(PagerDataCreator.js)の内容は以下となります。

▽続きを読む

[ FLASH ] [ tips ] 2011年06月12日 01:30 | コメント (0) | トラックバック

FLASH tips 配列の内容を変更せずに 配列最後の要素を取得 : slice を利用してみる

配列最後の要素を取得するには pop メソッドがありますが、元の配列の最後の要素を削除してしまいます。

var arr:Array = [1, 2, 3];
var n:uint = arr.pop();

pop を用いないよくある方法としては、以下のような記述を行います。

var arr:Array = [1, 2, 3];
var n:uint = arr[arr.length - 1];

ここで、配列を何かのインスタンスメソッド経由で取得する場合 以下のようになります。

var arr:Array = instance.getArray();
var n:uint = arr[arr.length - 1];

ローカル変数 arr は上記二行以降利用されない場合、もう少し簡略して記述する方法はないかと考えました。処理速度うんぬんはおいておき、不要な変数定義を避ける案として slice を用いて記述してみることに。

var n:uint = instance.getArray().slice(-1)[0];

もっとよい記述方法はあるでしょうか。とりあえずメモ。

[ FLASH ] [ tips ] 2011年06月07日 18:02 | コメント (0) | トラックバック

FLASH tips update FLA.PRINTER フラプリ : シューティング カスタムモード公開


http://flaprinter.appspot.com/shooter_rows/custom/

FLA.PRINTER フラプリ 第二弾 シューティングゲームのカスタムモードを公開しました。
カスタムモードでは敵機体画像、プレイヤー機体画像、背景画像、その他細かいパラメータ設定が可能です。どこか不具合等ありましたら、お気軽に申し付けください。


共通処理モジュール化

今回のカスタムモード制作に伴い、出来る限りの共通処理のモジュール化を実施。今後はFlash Lite 制作のみになるべく専念できるような形にしたつもりです。

モジュール化は頭を少々使いますが楽しい作業でもあります。
ただし、モジュールが出来上がった後はモジュールを組み立てるだけの作業が発生するため、モチベーションがどうも保ちにくい、という難点があります。


カスタムモード UI 変更

ブロック崩しのカスタムモード製作時 感じていましたが、テキストフィールドやラジオボタン等、画面上に input フォームがたくさん配置されていると、どうも乱雑で見た目がいまいちな感じがありました。

また、今回シューティングゲームでは結構多くの設定を行う事が可能なのですが、設定項目が多ければ多いほど input フォームも増え、見難さが増してしまいます。設定するつもりのない設定項目の input フォームが見えているのは邪魔かもしれません。

上記問題を解決するために、必要な設定項目以外はデフォルトでは閉じるようにしました。

項目タイトルをクリックすると開きます。

その他、作り直しが何度も行われるかもしれない事を考慮し、設定したデータがクッキーに記憶されている間は、カスタムページを開いた時 自動で設定項目が開くようにもしています。

[ FLASH ] [ tips ] [ update ] 2011年04月27日 20:27 | コメント (0) | トラックバック

GRAPHIC tips Adobe Photoshop CS2 & ImageReady CS2 体験版はもうダウンロード不可か

どういう手順でドット絵 gif アニメーションを作成しているのか、という質問を時々受けます。フラプリの制作が落ち着いたら一度、動画を撮るなりして 制作手順について記事にでもしようかと考えていました。

まず必要なソフトについて調べてみたところ、肝である Adobe Photoshop CS2 体験版はもうダウンロードができない、という事実が発覚。これは困った。

gif アニメ制作ソフトは、私は Photoshop CS4 を利用しています。しかし Photoshop は値段が高く「gif アニメを作ってみようかな」と考えた人に気軽に勧めることはできない製品でもあります。

この問題を解決するために、Adobe Photoshop CS2 の体験版のダウンロードをオススメするはずでした。過去の Photoshop (CS2 以前)では、アニメーションを専用に作るためのツール ImageReady という製品が付属していました。現在(CS3 以降)は ImageReady の機能は Photoshop に統合されています。そして Adobe Photoshop CS2 は 30日間の試用期限があるのに対し、付属のソフト ImageReady には試用制限が設けられていないのです。

何か代わりになりそうなツールはあるのか調べてみますかなあ。Photoshopの入門書等、Photoshop CS2 体験版 CD を付属した本があるならば、それをおすすめしたりするのもありですかのぅ。


Photoshop ダウンロードといったキーワードで検索すると、Adobe の公式サイトではなく、類似を語った怪しいサイトが五万と出てくるので、くれぐれもダウンロードしないようご注意ください。ウイルスの可能性が大です。

[ GRAPHIC ] [ tips ] 2011年04月07日 20:31 | コメント (0) | トラックバック

FLASH tips update GAE SDK 1.4.3 リリースに伴う「FLA.PRINTER フラプリ」変更予定箇所

2011年3月30日に Google APP Engine SDK 1.4.3 がリリースされたとのことです。気になった内容は Image API のあらゆる処理に画質設定が可能になったという点です。

 参考) python 練習帳 : Google App Engine SDK 1.4.3リリース文抄訳
 http://php6.jp/python/2011/04/02/google-app-engine-sdk-1-4-3/

試してみたところ、見事画質 100 のまま、画像の 変形・切り抜き・合成 までが可能となりました。

ちなみに GAE ドキュメント の日本語ページの内容は相当古いようで、Image API の画質設定を行える説明箇所がありません。右上の言語設定を英語にすると、比較的新しい内容となります。ただし現在はまだ 1.4.3 の内容には書き変わっていない模様。

http://code.google.com/intl/ja/appengine/docs/python/images/

画質設定はメソッドの最後の引数に 0~100 の値を設定すれば有効となりました。

画質100 で変形・切り抜き・合成 を行う記述例)


from google.appengine.api import images

images.resize(imageBytes, width, height, images.JPEG, 100)

images.crop(imageBytes, 
	leftX, topY, rightX, bottomY,
	images.JPEG, 100
)

images.composite(
	[(imageBytes, 0, 0, 1.0, images.CENTER_CENTER)], 
	width, height, 
	4294967295, #ffffff
	images.JPEG, 100
)

早速 FLA.PRINTER フラプリにて画質 100 設定をデフォルトにしようと考えました。しかし、生成される swf の容量が 100 KB を超えやすくなってしまうため、カスタムモードで ユーザが任意に画質を選択できるようにしたいと思います。

あと余談ですが、フラプリ ブロック崩しのサンプルでクリア後に表示される URL が誤っており、せっかくのボーナス画像が見ることができない状態になってしまっていたため修正しました。ごめんなさい。

追記 2011/4/7)
ブロック崩しカスタムモードにて画質設定可能になりました。

[ FLASH ] [ tips ] [ update ] 2011年04月04日 11:48 | コメント (0) | トラックバック

FLASH tips update Python + SWFバイナリ解析 : ビットマップ画像用 DefineShape タグ解析完了

SWFバイナリ解析にて、表示サイズの異なるビットマップ画像を差し替える際に必要な DefineShape タグの解析が完了。以後、フラプリにて利用予定。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2011年04月03日 19:53 | コメント (0) | トラックバック

ETC tips Outlook : URL クエリ文字列 : アンパサンド(&)の一つ手前にピリオド(.)はハイパーリンクが設定されず(途切れる?)

メール本文内に URL が記述されていると、メーラが自動で解釈して URL にハイパーリンクが設定されます。解釈方法はメーラ毎に異なるかと思われます。

業務にて、本文内に特定の URL を記述したメール自動返信システムを作成していたところ、以下の条件の時、URL にハイパーリンクが設定されない(中途で途切れる?)現象が発生するとの指摘を受けました。

・メーラは Outlook
・URL クエリ文字列内 アンパサンド(&)の一つ手前にピリオド(.)が存在する

現象発生例)

http://www.dango-itimi.com?a=123&b=abc.&c=567&

「b=abc.&」の箇所がよろしくないようです。(こちら Outlook は利用していないため表示未確認)。よって、クエリ文字列内では、ピリオド(.)とアンパサンド(&)が連続されないような文字列生成を行うことで対処しました。

修正例)ピリオドの後に文字列「a」を付与

http://www.dango-itimi.com?a=123&b=abc.a&c=567&

Outlook は Windows ユーザではもっとも利用されているであろう メーラであることから、対処したほうがよし、となります。

[ ETC ] [ tips ] 2011年04月02日 13:11 | コメント (0) | トラックバック

FLASH tips update web service GAE/python : Webツール「FLA.PRINTER フラプリ」を公開

今年正月より調査を行っていた Google App Engine(以下GAE) にて、ゲーム・待ち受け Flash(swf) が簡単に作成できる Webツール「FLA.PRINTER フラプリ」を公開しました。

http://flaprinter.appspot.com


機能・コンセプト

画像一枚用意するだけでオリジナルの携帯向け Flash 製作を行えます。
結構古い携帯電話にも対応します。(vodafone 等)
簡単に作れるかわりに、Flash の内容もシンプルです。
カスタムモードを用いれば、ある程度 こった Flash を作ることが可能です。
携帯向けの他、PC向けに、マウス対応など 機能を拡張したファイルも同時に出力します。

何かものを作る際、形にするまでには多くの根気が必要となりますが、その根気の必要量をなるべく少なくすべく、シンプルモードはできるだけ簡単なステップで Flash(swf) を生成できるようにしています。生成後に表示される QR コードから、携帯電話で即表示確認・保存が可能となります。


ブロック崩し

現在フラプリでは、ブロック崩しのみが作成可能です。内容はとても単純なブロック崩しなので、ゲーム性は薄いです。バーの中心でボールを当てた際、ブロック貫通ボールになるようにする、等、まだ改良の余地はあるかもしれません。

個人的には、以下のようなムフフな感じでも利用してほしく思います。
サンプルギャラリー : block 3


---
以下少々技術的な余談

python による swf バイナリ解析処理実装

swf 内に任意のスクリプトの埋め込みと、画像データの入れ替えを行う処理を python にて実装しました。

はじめは PIL(Python Imaging Library) を利用して swf に画像を埋め込むための解析処理を作成していましたが、中途、PIL は GAE 上では利用できない事が判明しました。よって GAE 上では、PNG の画像解析に関しては pypng というモジュールを利用し、GIF の解析処理は断念することに。
最終的に、swf バイナリ解析処理は、PIL 利用版と pypng 利用版 を切り替えて利用出来るようにまとめました。


swf 埋め込み対象データはあらかじめ解析しデータストアに登録

ブロック崩しカスタムモードでは背景画像を選択することができます。この背景画像は PNG ファイルなのですが、PNG ファイルを swf 内に埋め込むための解析処理に結構な処理行数を必要としてしまいます。

ユーザからのリクエスト(生成処理呼び出し)のたびに PNG 解析処理を実行するのは よろしくないため、事前に swf 内に埋め込める形にバイナリ解析しデータストアに登録しておく、という方法を採りました。

ローカル PC 上のデータストアに設定したデータを、本サーバ上に登録する方法があるようですが、資料が少なくややこしそうだったため、Web 上からアップロードできる要パスワードの専用ページを別途作成することに。


様々な状況に応じた swf を出力するための fla ファイルと jsfl の作成

jsfl を用い、パブリッシュ時に ガイドレイヤーやプロファイラを動的に切り替えることで、一つの fla ファイル内に 携帯向け Flash Lite 1.1 用スクリプトと、PC向け Flash Player 7 用スクリプトの両立を行っています。

今回作成したブロック崩し用 fla ファイルでは jsfl を実行すると、以下のような swf (計16種類)がパブリッシュされます。

fla
├ シンプルモード用
│ ├ ゲーム用
│ │ ├ Flash Lite 1.1 用
│ │ │ ├ jpg 画像用 swf
│ │ │ └ png 画像用 swf
│ │ └ Flash Player 7 用
│ │   ├ jpg 画像用 swf
│ │   └ png 画像用 swf
│ └ 待ちうけ用
│   ├ Flash Lite 1.1 用
│   │ ├ jpg 画像用 swf
│   … …
│
└ カスタムモード
  ├ ゲーム
  …

ユーザがシンプルモードで投稿した画像が jpg だった場合、サーバ側では「シンプルモード」の「jpg 画像用 swf」4種類を取得し、それら swf 内に投稿 jpg の埋め込みを行います。

PC 向け Flash(swf) が Flash Player 7 である理由は、Flash Player 7 が Flash Lite 1.1 用スクリプトを判別可能な最大のバージョンであるからです。Flash Player 8 からは Flash Lite 1.1 のスクリプトはパブリッシュできません。


動作検証の手間

Google App Engine SDK でのローカル(Windows上)環境上では動作したものが、サーバにアップロードすると動作しない、といった箇所がいくつかありました(後述)。バグを完全に取り除いてから本サーバにアップロード、という手順は無理かもしれません。
また、Google App Engine Launcher からの「Deploy」コマンドによるファイルアップロードは 毎回 ID と パスワード入力を行わなくてはならないため、本サーバ上での動作確認はやや手間がかかります。


ローカルと本サーバとの動作の違い

urlopen によるファイル取得に関しまして、ローカルと本サーバ上とでは動作が異なる点に少々つまづきました。

Windows 上では、プロジェクトルートからの相対パスで静的ファイルが取得できるのに対し、本サーバ上では相対パスでの urlopen による静的ファイルの取得は不可。「http://~」というアドレス経由で Web 上から取得できる形にしておけば本サーバで取得可能。しかし、ローカル環境上では「http://localhost~」というアドレス経由では urlopen が機能せず?ファイル取得できず。

結局、ローカル環境上では相対パスで、本サーバ上では「http://~」経由でファイルを取得するような処理を作成することに。webapp のテンプレートファイルのファイルパス指定は相対パスでローカル本サーバどちらとも正常に機能するので、何かよい方法があるのかもしれません。


エラー後の表示は適当

ユーザが設定する画像のフォーマットエラーや容量オーバー時等に発生するエラーにて、「フォーマットエラーです」といったきちんと場合分けしたエラー表示処理は面倒なのでまだ行っていません。エラー発生時は強制的にホームに戻されるという、やや不親切設計です。


ブロック崩し 画像分割

古い携帯機種にも対応するために、ブロック画像を細かく分割するという作業を行っています。一つの大きな画像をブロックの数だけスクリプトで複製し、各ブロック内では画像の一部分を表示する、という方法が本来はセオリーであり、簡単で swf 容量も少なく済みます。しかしその簡単な方法ですと 昔の携帯機種ではブロック消去時に負荷がかかるようで、画面が一瞬止まってしまうという現象が発生します。事前に画像をわざわざ小さく分割するのは苦肉の作であります。


開発者向けおまけツール swfdumper

今後の開発用に、Web 上から swf 内ヘッダとタグを解析し表示するツールを作成しています。どのタグのデータを入れ替えれば良いのかを判別するために利用します。

http://flaprinter.appspot.com/swfdump/

解析結果は header, tagSet, tagMap の順で表示されます。

 header --- swf ヘッダ内のデータ
 tagSet --- 登場順タグ一覧
 tagMap --- タグ毎の 登場順に ID を割り振った一覧


サイト内表示している広告に関して

Amazon 商品の表示を行う予定でしたが、東北関東大震災により Amazon が正常に機能していない状況のため、現在は勝手に日本赤十字社へのリンクを貼らせていただいております。


以後の予定

■ swf バイナリ解析処理の拡張

画像表示領域(DefineShape)の動的変更

■ ゲーム第二弾製作

ブロック崩しの次のゲームを製作中。二作目まで製作できたら量産体系が整うことになりそうなので、以後は Flash Lite の製作のみに集中できそうです。

[ FLASH ] [ tips ] [ update ] [ web service ] 2011年03月26日 16:05 | コメント (0) | トラックバック

FLASH tips Photoshop CS5 :スライス使用時「Web およびデバイス用に保存」のメタデータ設定に注意

Flash Lite にて、とある制約上、一枚の画像をあらかじめ細かく分割して使用しなくてはならない場合があります。分割画像を作る場合、私は Photoshop のスライス機能を用いる事にしています。

ここで、過去 Photoshop のいくつかのバージョンで行った同じ手順にてスライス画像を作成してみたところ、0.5~1KB 以内に収まるはずの一つのスライス画像容量が 4KB 以上となってしまう現象が発生しました。

スライス画像は総数 80枚 ほどあるため、80 * 4KB = 320KB で出力されるという結果に。Flash Lite の容量制限 100KB を大きく超えてしまっています。

問題は、Photoshop の「Web およびデバイス用に保存」の際での「メタデータ」の項目を「著作権情報」に設定していた事が原因でした。一つずつの画像内にメタデータが混入されてしまっていたようです。「メタデータ」の項目を「なし」にすることで問題は解決しました。

---
ちなみに Flash は PNG 画像をインポートする際、メタデータは含まずに読み込むため、Photoshop の設定でメタデータ項目は何に設定していても問題はありません。検証していませんが GIF でも PNG と同じ扱いになると思われます。(Python + SWFバイナリ解析 その4 : パレット形式の png 埋め込み)

よって、上記問題が発生するのは、JPEG でスライス画像出力を行い Flash に読み込んだ場合、となります。

PNG や GIF を Flash でインポートした際、読み込み元画像の容量が微妙に減っている、という場合は、画像データ内のメタデータが原因の可能性があります。

[ FLASH ] [ tips ] 2011年02月07日 17:45 | コメント (0) | トラックバック

FLASH tips GAE にて PIL 画像加工用処理は動作せず

先日、Google App Engine(GAE) にて gif や png 画像のピクセルデータを解析するために、Python Imaging Library を丸ごと任意のフォルダに配置して利用することにしました。

 Python + SWFバイナリ解析 その3 : gif 埋め込み
 Python + SWFバイナリ解析 その4 : パレット形式の png 埋め込み

上記処理では問題なく動作したので、今度は画像を加工する各メソッドを利用してみようと試してみたものの、エラーが表示され動作せず。

pylib.another.pil ディレクトリに PIL 関連ファイル一式を配置し 以下のコードを記述

import pylib.another.pil.Image as pil
pil.new("RGB", (100, 100))

表示されるエラー

ImportError: The _imaging C module is not installed

この問題は解決できそうもないので、GAE にてサーバ側で画像の加工を行うためには、正式にサポートされている google.appengine.api.images モジュールを用いることになりそうです。

 http://code.google.com/intl/ja/appengine/docs/python/images/imageclass.html

二つの画像を合成する処理等ないため、やや予定を変更しなくてはならず。

追記)
composite 関数があったため画像合成に関しては解決しました。
http://code.google.com/intl/ja/appengine/docs/python/images/functions.html

追記2)
すみません、再度検証してみたところ、GAE 上での PIL によるピクセルデータ解析も利用不可でした。
よって GAE 上での GIF と PNG のピクセルデータ解析は PIL を用いず別途手段で実現するしかなさそうです。
これは困った。

追記3)
png のピクセル値解析は pypng で解決できそうです。GAE 上でも pypng による png ファイルのピクセル値読み取り動作確認済み。
http://code.google.com/p/pypng/

gif に関しては pygif というものを見つけましたが、ライセンスうんぬん等 まだ未調査です。

[ FLASH ] [ tips ] 2011年01月30日 22:03 | コメント (0) | トラックバック

FLASH tips GAE Python : zip 圧縮 & 出力

Google App Engine で Python を用いての、静的ファイルやバイトストリーム状のデータをまとめて zip 圧縮出力し、ダウンロードさせるためのサンプルです。

サンプル用クラスファイルとして以下のような Zipper.py クラスファイルを作成しました。

pylib.core.utils.Zipper.py

import zipfile

class Zipper:
	
	def __init__(self, file, mode = "w", compression = zipfile.ZIP_DEFLATED, allowZip64=False):
		
		self.__zipFile = zipfile.ZipFile(file, mode, compression, allowZip64)
	
	def write(self, writeDataSet = None, writeStrDataSet = None):
		
		if writeDataSet:
			dataSet = writeDataSet.getDataSet()
			for writeData in dataSet:
				
				self.__zipFile.write(
					writeData.getFileUri(),
					writeData.getArchiveUri(),
					writeData.getCompressType()
				)
		
		if writeStrDataSet:
			dataSet = writeStrDataSet.getDataSet()
			for writeStrData in dataSet:
			
				self.__zipFile.writestr(
					writeStrData.getZipInfo(),
					writeStrData.getBytes()	
				)
	
	def close(self):
		self.__zipFile.close()
	
class WriteDataSet:
	
	def __init__(self):
		self.__dataSet = []
	
	def add(self, fileUri, archiveUri=None, compressType=None):
		self.__dataSet.append(WriteData(fileUri, archiveUri, compressType))
	
	def getDataSet(self):
		return self.__dataSet
	
	
class WriteData:
	
	def __init__(self, fileUri, archiveUri=None, compressType=None):
		
		self.__fileUri = fileUri
		self.__archiveUri = archiveUri
		self.__compressType = compressType
	
	def getFileUri(self):
		return self.__fileUri
	
	def getArchiveUri(self):
		return self.__archiveUri
	
	def getCompressType(self):
		return self.__compressType


class WriteStrDataSet:
	
	def __init__(self):
		self.__dataSet = []
	
	def add(self, bytes, zipInfo):
		self.__dataSet.append(WriteStrData(bytes, zipInfo))
	
	def getDataSet(self):
		return self.__dataSet

class WriteStrData:
	
	def __init__(self, bytes, zipInfo):
		
		self.__zipInfo = zipInfo
		self.__bytes = bytes
	
	def getZipInfo(self):
		return self.__zipInfo
	
	def getBytes(self):
		return self.__bytes


def createBytesFile():
	
	import StringIO
	return StringIO.StringIO()

def createZipInfoOfNowTime(archiveUri):
	
	import datetime
	date = datetime.datetime.now()
	
	return zipfile.ZipInfo(archiveUri, date.timetuple()[:6])

def output(response, file, fileName):
	
	response.headers["Content-Type"] = "application/zip"
	response.headers['Content-Disposition'] = "attachment; filename=" + fileName + ".zip"
	response.out.write(file.getvalue())


Zipper.py の利用方法は以下となります。

from pylib.core.utils.Zipper import *

# 出力用ファイル作成
file = createBytesFile()

# 静的ファイル用 データ作成
writeDataSet = WriteDataSet()
writeDataSet.add("test/index.html", "index.html")
writeDataSet.add("img/purin.jpg", "img/purin.jpg")

# バイトストリーム用 データ作成
writeStrDataSet = WriteStrDataSet()
writeStrDataSet.add(bytesA, createZipInfoOfNowTime("test.swf"))
writeStrDataSet.add(bytesB, createZipInfoOfNowTime("test/aaa.swf"))

# zip 圧縮
zipper = Zipper(file)
zipper.write(writeDataSet, writeStrDataSet)
zipper.close()

# 画面に出力
output(self.response, file, "sample.zip")

bytesA と bytesB は swf ファイルのバイトストリームとします。最後の output メソッドの引数には webapp フレームワークの? response インスタンスを指定します。

上記で出力されたファイル(sample.zip)をダウンロードし解凍すると、以下のファイルディレクトリ構成で展開されます。

sample.zip
├ index.html
├ test.swf
├ img/
│ └ purin.jpg
└ test/
  └ aaa.swf

2011/5/26 追記)
output メソッドにてダウンロードする zip ファイル名を設定できるように変更しました。

[ FLASH ] [ tips ] 2011年01月28日 17:20 | コメント (0) | トラックバック

FLASH tips GAE Python : バイトストリーム状の SWF データを html 上に表示

Google App Engine で Python を用いての、バイトストリーム状の SWF データを html 上に表示するためのサンプルです。

処理内で読み込んでいる index.html, sample.swf は main.py と同じディレクトリに配置しているものとします。

main.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from google.appengine.ext.webapp import template
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util

URL_ROOT = "/"
URL_SWF = "/swf"

class MainHandler(webapp.RequestHandler):

	def get(self):
		
		tmplValues = { "swfUri": URL_SWF }
		self.response.out.write(template.render('index.html', tmplValues))	

class SwfViewer(webapp.RequestHandler):

	def get(self):
		
		from urllib import urlopen
		
		swfBinary = urlopen("sample.swf").read()
		
		self.response.headers["Content-Type"] = "application/x-shockwave-flash"
		self.response.headers["Content-Length"] = len(swfBinary)
		
		self.response.out.write(swfBinary)

def main():
	
	application = webapp.WSGIApplication([
		(URL_ROOT, MainHandler),
		(URL_SWF, SwfViewer)
	], debug=True)
	
	util.run_wsgi_app(application)

if __name__ == '__main__':
	main()


swf を表示する テンプレート index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <title></title>
		<link rel="shortcut icon" href="favicon.ico" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript">
			swfobject.embedSWF(
				'{{ swfUri }}', 'swf', '240', '240', '4'
			);
        </script>
    </head>
    <body>
        <div id="swf">
        </div>
    </body>
</html>

index.html 内では swfobject を用いて swf 表示を行っています。swf の URL を指定する箇所に、SwfViewer クラスを呼び出すための URL パスを指定しています。

今回のサンプルの SwfViewer クラス内では、静的に配置済みの sample.swf を開いてバイトストリームに変換していますが、実際は「データストアから swf データを取得する処理」等に置き換える事となりそうです。

追記)上記サンプルの swf 出力方法では、携帯から swf が表示できない事を確認。設定に何かが足りないのかもしれません。

追記2)Content-Length を設定することで解決しました。

[ FLASH ] [ tips ] 2011年01月25日 21:13 | コメント (0) | トラックバック

FLASH tips Python + SWFバイナリ解析 その4 : パレット形式の png 埋め込み

Python による パレット形式の png データ解析処理サンプルを作成しました。

 ・参考
 GREE Engineers' Blog : SWFバイナリ編集のススメ第五回 (PNG)
 http://labs.gree.jp/blog/2010/12/1902/

png-8 に対する認識の誤り

上記参考サイトの png の形式に関する説明を読んでみたところ、どうも今まで自分は png に対して誤った認識を持っていた事がわかりました。

Photoshop からしか png を書き出した事がなかったせいか、png-8 形式で出力する png は半透明の情報を持たせることはできず、gif と同じような透明化しかできないものだ、と考えてしまっていました。

しかしこの考えは誤りで、本来は png-8 形式でも半透明の情報を持たせることができるとのこと。Photoshop が、半透明の情報を持たせた png-8 の出力に対応していない、という訳でした。

過去、半透明の情報をもった png (png 32bit)の利用は メモリの消費を多く使い容量も大きくなるため利用は避けて欲しい、と答えていた事がありましたが、半透明の情報をもった png-8 形式の png ならば可能になったこともあったのやもしれません。

とはいえ、png-8 に半透明の情報を持たせて出力するための何かいいフリーのツールはあるのかとざっと探してみましたが、なかなか見つからず。Adobe Fireworks が有名のようですが、書き出しのために購入するのも考えものでもあります。

gif 解析処理と共通化

png は gif と同じタグにデータを設定するということから処理内容もほぼ同じとなりました。よって、パレット形式の画像を扱う親クラスを用意し、gif と png(パレット形式)のデータ解析用処理クラスを子クラスとすることに。

true color 形式の png データを解析するクラスを作成にとりかかると、またクラス構造は変化するかもしれません。

gif データを元にした パレットに半透明情報をもった画像データ

透明化 gif の ColorTable 作成処理にて、アルファ値 0x00 の色以外は全て アルファ値を 0xff に設定する必要がある、という仕様は少々無駄があるのではないか、と疑問に思っていましたが、png も同じタグで扱う、という点で納得できました。

 png はカラーパレット内各色に対して一つずつアルファ値が設定可能
  ↓
 png を扱うタグの ColorTable 各色にはアルファ値を設定できるようにする必要がある
  ↓
 gif と png は同じタグで扱うため
 透明化 gif の ColorTable 各色全てにもアルファ値の設定が必要

逆に言うと、gif データ解析時、作成する ColorTable の各アルファ値を任意の数値に設定すれば、swf 内には「gif データを元にした パレットに半透明情報をもった画像データ」を埋め込む事も可能になります。

swf 上では 元画像が png, gif であれ、同じ形式の独自のデータに変換されている、と言ったところでしょうか。

swf 内画像埋め込み処理の段階で パレットのアルファ値の変更を行うことはないかもしれませんが、豆知識としてメモしておきます。

PIL png tRNS 情報取得

PIL 内のソース調査をまだあまり行っていないという点と、PIL のバージョンによって動作が異なるようなので確実ではありませんが、PIL は PNG のパレット内 各色のアルファ値情報を どこか変数に保存するようにはなっていないとのことです。それを解決するための方法として、PIL 内クラスを拡張して対応する方法が以下のサイトに記述されています。

 methaneの日記 : Python Imaging Library (PIL) で、パレット形式のPNGを扱う
 http://d.hatena.ne.jp/methane/20100214/1266119110

(※上記サイトの chunk_tRNS メソッド内「PngStream.chunk_PLTE」メソッドの呼び出しは誤りと思われるため「PngStream.chunk_tRNS」メソッド呼び出しに修正して利用させてもらいました。)

ソースコード

以下今回作成したパレット形式の画像を扱うクラスと、それを継承した gif, png 処理用クラスとなります。前回の gif データ差し替えと表示内容は変わらないため、サンプル swf は省略。

▽続きを読む

[ FLASH ] [ tips ] 2011年01月20日 22:42 | コメント (0) | トラックバック

FLASH tips Python + SWFバイナリ解析 その3 : gif 埋め込み

Python による gif データ解析と swf 内データ差し替えのサンプルを作成しました。

 ・参考
 GREE Engineers' Blog : SWFバイナリ編集のススメ第四回 (GIF)
 http://labs.gree.jp/blog/2010/10/1263/

初め、gif バイナリ解析を自力で行おうと考えましたが、gif データ内の LZW 圧縮箇所の解析で頭が沸騰しそうになったため断念。解析部分は Python Imaging Library (以下PIL) を利用することにしました。

Google App Engine (以下GAE) サイト内説明に「PIL をインストール」する旨の項目があり、GAE は PIL をデフォルトでサポートしているのかと思いましたが、どうやらそんなことはなく?、PIL の Image クラスに似た Google App Engine 独自の Image クラスが用意されている模様。その独自の Image クラスの API 説明を見る限りでは、gif 解析を行うのに十分な処理が用意されていないため、本家の PIL モジュール一式そのまま GAE のサーバにアップロードして利用しています。


サンプル


以下透明化 gif の埋め込み(差し替え)を行ったサンプル swf となります。

▽続きを読む

[ FLASH ] [ tips ] 2011年01月18日 23:49 | コメント (0) | トラックバック

FLASH tips Python + SWFバイナリ解析 その2 : jpeg バイナリ解析

Python による jpeg バイナリ解析と swf 内データ差し替えのサンプルを作成しました。

 ・参考
 GREE Engineers' Blog : SWFバイナリ編集のススメ第三回 (JPEG)
 http://labs.gree.jp/blog/2010/09/782/

SWF version 8 より前のバージョンならば erroneous header を jpeg に付与するだけで jpeg 差し替えが可能との事です。swf のバージョンを判別して、version 8 以降ならば jpeg バイナリ解析を行い、version 8 未満ならば erroneous header 付与形式にすれば、サーバ側での処理負荷を減らすことができそうです。

一応 試しに erroneous header 付与形式の jpeg を version 10 の swf に埋め込んでみましたが、今回作成したサンプルの処理範囲内では問題なく動作していました。

つまずいた点

Tag DefineBitsJPEG2 の Content 内 先頭箇所 2 byte には CharacterID が必要ですが、上記参考サイトの図には その説明が省略されています。swf 内にある jpeg データが、元 jpeg データより 6 byte 容量が大きくなっており、そのうち 4 byte は erroneous header だとして 残り 2 byte は何のデータなんだろうと悩みました。

サンプル

以下 jpeg と ActionScript(以下AS)埋め込み(差し替え)を行ったサンプル swf となります。

▽続きを読む

[ FLASH ] [ tips ] 2011年01月15日 16:30 | コメント (3) | トラックバック

FLASH tips Python + SWFバイナリ解析

Google App Engine に試用に伴う Python の勉強として、Python による swf バイナリ解析処理を作成してみることに。

以下の URL の解説の順序通り解析処理まで作成しました。

 GREE Engineers' Blog : SWFバイナリ編集のススメ第一回
 http://labs.gree.jp/blog/2010/08/631/
 

・少々つまずいた点

パブリッシュ設定の「XMP メタデータを含める」にチェックがあると、このデータが Header の後に追加されるようなので、ひとまずチェックを外した swf を利用しました。

Google App Engine の Python の現バージョンは 2.5.2 で、数値を二進数文字列に変換する処理がデフォルトでサポートしていない?ため、以下のサイトにあった処理を利用させていただきました。

 PythonRecipe : 2進、8進、10進、16進の各表現を相互に変換


・その他参考サイト等

 Flash SWF バイナリ
 http://pwiki.awm.jp/~yoya/?Flash/SWF

 Python 3.x で Flash Lite 1.1 のパラメータ埋め込み
 http://nakagami.blog.so-net.ne.jp/2010-02-02


以下、作成した Python サンプルソースコードと実行結果を掲載。初めての Python につき、誤っていたり無駄な処理がある可能性があります。

▽続きを読む

[ FLASH ] [ tips ] 2011年01月10日 02:43 | コメント (2) | トラックバック

FLASH tips update メタセコイア → Flash その3 : 個々のオブジェクト操作

処理負荷軽減を考慮した 3D モデルの面分割数の削減 並びに、各オブジェクトを個々で操作しやすいような設定を行ないました。今回はタンスの扉と引き戸を開けたり閉めたりできるようにしています。

http://www.dango-itimi.com/blog/swf/107/mqo.swf

【 カメラ操作方法 】

 [マウスドラッグ] --- 回転
 [マウスドラッグ + Shift] --- 拡大縮小
 [マウスホイール] --- 拡大縮小
 [マウスドラッグ + Ctrl] --- 焦点位置変更

swf 画面内 各[OPEN/CLOSE]ボタンで、タンスの操作が可能です。

・メタセコイア上でのモデリング図

[ FLASH ] [ tips ] [ update ] 2010年10月22日 12:30 | コメント (0) | トラックバック

FLASH tips update 3D データへの 1px 縁取り

ここ最近 3D 表示関連の勉強をし始めた理由は、某ポケモン最新作のゲーム映像を見てからの事でした。ドット絵と 3D 表現の融合に、これは一度表現してみたい、と感じました。
現在までの 研究結果が以下の URL となります。

http://www.dango-itimi.com/blog/swf/106/mqo.swf

【 カメラ操作方法 】

 [マウスドラッグ] --- 回転
 [マウスドラッグ + Shift] --- 拡大縮小
 [マウスホイール] --- 拡大縮小
 [マウスドラッグ + Ctrl] --- 焦点位置変更

ビットマップ画像の重ねあわせの関係でカメラ回転角度には制限がかかっています。

表示はこれだけですが、かなり処理に負荷がかかりカメラ回転もややカクつきが発生してしまっています。PC のファンがうるさく鳴り出したらごめんなさい。

Zソート で面の表示順がおかしくならないようにするには、面を等間隔で細かく分割すればよい、と考えました。その結果、とても簡単なモデルなのに面数がとても多く処理負荷が高くなってしまっています。

もう少し単純な面で分割できるような形状にし、テクスチャで凹凸をごまかせば、面数が減り処理負荷も削減できそうです。

---
3D 表示において色々ネット上で調査をしておりましたら、今月に「Flash が 3D 対応する」といった旨の発表が「Adobe Max 2010」とやらで行われるようですね。これは Flash Player で Zバッファ を用いることができるようになるのですかなあ。なんとも期待したいところです。

[ FLASH ] [ tips ] [ update ] 2010年10月16日 17:05 | コメント (2) | トラックバック

FLASH tips update ベクターデータへの 1px 縁取り

1px 縁取り処理を再作成。
ベクターデータをビットマップデータに変換(Bitmap.draw)し、変換後のビットマップデータ内グラフィックス形状の外周に アルファ値を含むピクセルが存在している場合でも、縁取りを見た目綺麗に行えるようにしました。

ドット絵に適用

ベクターデータに適用

メタセコイアから取り込んだ 3D モデルに適用してみると以下のようになります。
http://www.dango-itimi.com/blog/swf/105/mqo.swf

【 カメラ操作方法 】

 [マウスドラッグ] --- 回転
 [マウスドラッグ + Shift] --- 拡大縮小
 [マウスドラッグ + Ctrl] --- 焦点位置変更

swf 内 左側の 3D モデルを元に、白く縁取り後 二倍表示を行なったものが右側の 3D モデルとなります。

カメラの角度のよっては 面と面との結合部がやや離れて表示されてしまう場合があり、その離れた隙間に対しても縁取りがされてしまいます。隙間を埋めるような面の形状にする等、工夫すればある程度は解決できそうです。

[ FLASH ] [ tips ] [ update ] 2010年10月09日 18:06 | コメント (0) | トラックバック

FLASH tips update メタセコイア → Flash 2

必要と思われる機能の実装とバグをもろもろなくし、メタセコイアで製作した 3D モデルを Flash にて表示を行うライブラリ製作はほぼ完了しました。

今回試しに以下のようなモデルを作成しました。

Flash 上で表示すると以下のようになります。
http://www.dango-itimi.com/blog/swf/104/mqo1.swf

鏡面表示例
http://www.dango-itimi.com/blog/swf/104/mqo2.swf

【 カメラ操作方法 】

 [マウスドラッグ] --- 回転
 [マウスドラッグ + Shift] --- 拡大縮小
 [マウスドラッグ + Ctrl] --- 焦点位置変更


マウスでカメラをくるくる操作してみると、角度によって一部面の描画順が変わる事があります。

どういう描画法を行なえば問題ないものになるのかを調べてみたところ、面作成方法を工夫すればある程度改善はできそうですが、Flash では完全な解決策はないとのこと。よって面の形状やカメラ角度等によって描画順が変わってしまうのは仕方無しとしました。

[ FLASH ] [ tips ] [ update ] 2010年09月29日 19:40 | コメント (8) | トラックバック

FLASH tips update メタセコイア → Flash

以前から課題にしていた、メタセコイアで製作した 3D モデルを Flash にて表示を行うライブラリ製作にとりかかりました。

世には Papervision3D 用にメタセコイアファイルを読み込むライブラリが公開されており、どのような解析を行うのか等を参考にさせてもらいつつ進めています。

 ■ Papervision 3D 用 Metasequoia クラス
 http://www.libspark.org/wiki/rch850/Metasequoia
 http://www.libspark.org/svn/as3/Metasequoia/src/org/libspark/pv3d/Metasequoia.as

メタセコイアはシェアウェア版を用いて 3D モデルを製作することにしました。
シェアウェア版とはいえ、無料で利用可能な機能のみを用いています。
 http://www.metaseq.net/metaseq/index.html

メタセコイアファイル(mqo)はテキストファイルで開くことが可能で、ファイル内は以下のファイルフォーマット通りになっています。
 http://www.metaseq.net/metaseq/format.html
mqo ファイルは テキストファイルとして Flash から読み込むことが可能です。

mqo ファイル読み込み後はファイルフォーマットに従い、Material チャンクや Object チャンクといった内部の情報をそのままクラスファイルにし、その後、独自の 3D 表現ライブラリで使用できるように変換します。

3D 描画を行う際の難点として以下の(a)(b)がありました。

 (a)メタセコイアのY軸とZ軸の向きが Flash の座標軸と逆
 (b)メタセコイアと Flash とでは面表示規則(上面はどちらかの判定)が逆

ひとまずとして以下の対処で解決しました。

(aの対処)
 Flash 上では 各頂点座標を X軸を中心として 180 度回転させる
(bの対処)
 面にテクスチャを表示する際は TriangleCulling.NEGATIVE を用いて描画を行う


今回サンプルとしてメタセコイアで作成した簡単な 3D モデルのスクリーションショットが以下となります。


このメタセコイアファイルを Flash 上に読み込み表示を行ったものが以下となります。

http://www.dango-itimi.com/blog/swf/103/dpzl.swf


【 カメラ操作方法 】

 [マウスドラッグ] --- 回転
 [マウスドラッグ + Shift] --- 拡大縮小
 [マウスドラッグ + Ctrl] --- 焦点位置変更

どの面が手前にくるかのソート処理はまだ組み込んでいないため、常に三角面体が手前に表示されます。

[ FLASH ] [ tips ] [ update ] 2010年09月26日 19:34 | コメント (0) | トラックバック

FLASH GRAPHIC tips update 透視投影と平行投影の切り替え + ドット絵クォータービュー3D サンプルデモ

透視投影と平行投影の切り替えを行うサンプルを作成しました。クォータービューのドット絵を合わせ、その他もろもろの処理を加えたものが以下となります。


http://www.dango-itimi.com/blog/swf/102/

画面 UI 等適当で、キャラクターアニメーションも抜けがあります。


【 UI 説明 】

・投影方法選択
PROJECTION
 ├ PERSPECTIVE --- 透視投影
 └ PARALLEL --- 平行投影

・カメラ選択
CAMERA CONTROL
 ├ AUTO --- 自動操作
 ├ MANUAL --- マニュアル操作
 └ FIXED --- 固定


【 マニュアル選択時のカメラ操作方法 】

 [マウスドラッグ] --- 回転
 [マウスドラッグ + Shift] --- 拡大縮小
 [マウスドラッグ + Ctrl] --- 焦点位置変更

[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2010年09月25日 13:46 | コメント (0) | トラックバック

FLASH tips Google Maps API for Flash : マップ上に Polyline で円を描くクラス

javascript 版の Google Maps API (Version3)では円を描く処理はサポートされているようですが、Flash バージョンの Google Maps API では円描画はサポートされていない模様(javascript 版 Version2 相当?)なので、ネット上の記事を参考に円を描く処理をクラス化しました。

【 参考サイト 】

http://www.nanchatte.com/map/circle.html

【 ダウンロード 】

ファイル一式ダウンロード
http://www.dango-itimi.com/blog/swf/101/com.zip

上記ファイル内には以下の二つのファイルを配置しています。

・楕円頂点座標群取得用クラス
com.dango_itimi.geom.core.Polygons

・Google Maps 上に円描画用クラス
com.dango_itimi.googlemap.Circle


【 利用方法 】

事前に map インスタンス(com.google.maps.Map)を生成し、利用準備可能状態にしておく必要があります。
東京の緯度(35.689506)と経度(139.691701)に 頂点数 360 半径 300メートルの円を描画したい場合以下となります。

var lat:Number = 35.689506;
var lng:Number = 139.691701;
var circleData:Circle = Circle.create(new LatLng(lat, lng), 360, 300);
Circle.draw(map, circleData);


以下クラスのソースコードをそのまま記述。

▽続きを読む

[ FLASH ] [ tips ] 2010年08月13日 16:47 | コメント (0) | トラックバック

FLASH tips 原点座標(0, 0)にシンボルを再配置する jsfl

シンボルを原点座標(0, 0)に配置するだけの jsfl を作成しました。
前回記事の続きの記事ともなります。

【 ダウンロード 】
http://www.dango-itimi.com/blog/swf/100/OriginalPositioner.zip

【 jsfl ファイル解説 】

■ OriginalPositioner.jsfl

メインクラスファイル
このファイルを実行しても何も起こらず

■ OriginalPositionerOfSelectedLayer.jsfl

現在編集中のステージ内で
選択している1つのレイヤーの
全てのフレームに配置している
一つ目の要素(シンボルやシェイプ)の配置位置を
原点(0, 0)に設定する jsfl ファイル

ステージ上に複数シンボル等が配置されている場合、どれが「一つめの要素」と判定されるかわかりません。上記スクリプトは、一つのフレーム内にシンボル等が1つだけ配置している場合を用途としています。

【 使用手順例 】

前回記事からの続きとなります。

(1)

ムービークリップ walk_bottom.psd 内の、フレーム 1~6 に配置されている各ムービークリップ 1~6 を処理の都合上原点座標に配置したい場合があります。

(2)

OriginalPositionerOfSelectedLayer.jsfl を実行することで、各ムービークリップ 1~6 が原点座標に自動で配置されます。

[ FLASH ] [ tips ] 2010年07月15日 19:49 | コメント (0) | トラックバック

FLASH tips シンボル配置位置の小数点以下を四捨五入して再配置する jsfl

シンボル配置位置の小数点以下を四捨五入して再配置する jsfl を作成しました。

【 ダウンロード 】
http://www.dango-itimi.com/blog/swf/100/IntegralValuePositioner.zip

【 jsfl ファイル解説 】

■ IntegralValuePositioner.jsfl

メインクラスファイル
このファイルを実行しても何も起こらず

■ IntegralValuePositionerOfStage.jsfl

現在編集中のステージ内全てのレイヤーの
再生ヘッダ一にあるフレーム(currentFrame)に配置している
全ての要素(シンボルやシェイプ)の配置位置に対し
小数点以下を四捨五入して再配置する jsfl ファイル

■ IntegralValuePositionerOfSelectedItems.jsfl

ライブラリで選択したアイテム(シンボル)内全てのレイヤーの
1フレーム目に配置している
全ての要素(シンボルやシェイプ)の配置位置に対し
小数点以下を四捨五入して再配置する jsfl ファイル

■ IntegralValuePositionerOfSelectedLayer.jsfl

現在編集中のステージ内で
選択している1つのレイヤーの
全てのフレームに配置している
全ての要素(シンボルやシェイプ)の配置位置に対し
小数点以下を四捨五入して再配置する jsfl ファイル


【 作成経緯と使用手順例 】

Photoshop での大量のキャラクターアニメーション制作後、Flash の psd インポート機能にて以下の状況が大量に発生しそうなため、今回の jsfl の制作を行ないました。

(1)

ゲーム制作において都合のよい、足元を中心とした基準点で各レイヤー毎にムービークリップを作成する設定で psd を読み込みます。

(2)

psd が読み込まれた後のライブラリの様子です。ムービークリップ 1~6 内には同数値のビットマップデータ 1~6 が配置されています。
ここで例えばムービークリップ1 の内容を見てみると…

(3)

ビットマップデータの横幅が 21 ピクセルため、配置 X座標が -10.5 という 0.5 ピクセルの少数値が付与されてしまっています。こいつはいただけねえぜ…!

(4)

ライブラリのムービークリップ 1~6 を選択し IntegralValuePositionerOfSelectedItems.jsfl を実行すれば、小数点以下は四捨五入されて再配置されます。

次にライブラリ内 walk_bottom.psd ムービークリップを見てみます。

(5)

Photoshop で作成したそのままの配置位置に、各ムービークリップ 1~6 が フレーム 1~6 に割り当てられているのがわかります。ここでよく見ると、配置されているムービークリップ の X座標 が 24.5 という、またしても小数点以下の数値が見えます。

(6)

walk_bottom.psd レイヤーを選択し IntegralValuePositionerOfSelectedLayer.jsfl を実行すれば、選択したレイヤー内全てのフレームのムービークリップの小数点以下は四捨五入されて再配置されます。

次の記事「原点座標(0, 0)にシンボルを再配置する jsfl」へ続きます。

追記 2010年7月19日)
jsfl ソースファイル内に誤りがあったため修正したものを再アップロードしました。

[ FLASH ] [ tips ] 2010年07月15日 17:11 | コメント (0) | トラックバック

FLASH tips 選択された一つのレイヤー内全てのキーフレームに指定数フレームを挿入or削除するjsfl

すでにどこかにありそうですが、勉強も兼ね、選択された一つのレイヤー内全てのキーフレームに指定数フレームを挿入or削除する jsfl を作成しました。


■ 実行イメージ図

 ↓ 1フレーム挿入

 ↓ 1フレーム挿入 

 ↓ 1フレーム削除


■ ダウンロード

[ jsfl ファイル一式をダウンロード ]


■ jsfl ファイル解説


FrameTotalChangerToKeyFrames.jsfl
コアとなるクラスファイル
このファイルを実行しても何も起こらず

FrameInserterToKeyFrames.jsfl
1フレーム 挿入

FrameRemoverToKeyFrames.jsfl
1フレーム 削除

FrameTotalChangerToKeyFramesGUI.jsfl
プロンプトにて挿入 or 削除数を指定

[ FLASH ] [ tips ] 2010年07月12日 17:52 | コメント (0) | トラックバック

FLASH tips Flash CS4 → Flash CS5 にて _ゴシック のテキストフィールドに設定した文字列が埋込みフォント(静止テキスト)扱いになってしまう

一つ前の記事の Flash CS4 から CS5 で swf 容量が大きくなってしまう現象にて、原因の調査を行いました。

結論は記事タイトルの通りでした。以下の手順で確認を行なえます。

(0)Flash CS4 で以下の(1)~(5)までの作業を行う
(1)「ダイナミックテキスト」に設定したテキストフィールドをステージ上に配置
(2)フォントファミリーを「_ゴシック」に設定
(3)テキストフィールドに適当な文字列を記述
(4)パブリッシュ設定内「サイズレポートの作成」にチェックを入れる
(5)サイズレポート _gothic 箇所に何も文字列が埋め込まれていないことを確認し fla ファイル(test.fla とする)を保存

(6)Flash CS5 にて test.fla を開きパブリッシュ
(7)サイズレポート _gothic 箇所に(3)で設定した文字列が埋込み設定されてしまっている事を確認


上記(2)で _sans を設定した場合 CS5 では文字列は埋め込まれない事を確認。また、CS4 ではなく CS5 で _ゴシック のテキストフィールドを作成し、テキストフィールド内に文字列を設定した場合、文字列は埋め込まれない事も確認。

CS5 にて新規で何かを制作する場合は問題は起きませんが、今まで CS4 で制作していたものを CS5 に移行しようとした場合の問題点となりそうです。

[ FLASH ] [ tips ] 2010年06月16日 19:14 | コメント (4) | トラックバック

FLASH tips Flash CS4 で作成していた Flash Lite を Flash CS5 で書き出すと swf 容量が増加

Flash CS4 の Flash Lite にて swf 容量が 100 KB ギリギリになるように制作していた fla ファイルを そのまま Flash CS5 でパブリッシュしてみると、swf 容量が 115 KB となってしまいました。

Flash CS4 までは Player バージョンを Flash Lite に設定しておけば、パブリッシュ時 自動的に Device Central が立ち上がりましたが、CS5 では通常のムービープレビューが行われるのみ。パブリッシュ時 Device Central を立ち上げるような設定項目は見つからず。Device Central が立ち上がらないから Flash Lite 用に swf がパブリッシュされず容量がふくれあがってしまっている、とかそういったことがあるのですかなあ?

他、気になる点といえば、ライブラリにフォントシンボルが自動的に作成されているという点。Flash CS5 からはフォントの埋め込みは一括で設定できるようになった、とのことですが、このフォントシンボルが何か容量増加に影響を及ぼしているのかどうか。

Flash CS5 に関する情報がまだ少ない状況なので原因がわかるまでひとまず Flash Lite の開発は Flash CS4 で行う事に。

追記)
メニューの[制御]-[ムービープレビュー]から Device Central でムービープレビューを行える項目を発見しました。容量の問題に関しては未解決。

追記2)
CS5 で容量が大きくなってしまった原因がなんとなく判明。
CS4 と CS5 とでパブリッシュ時のサイズレポートを作成し比較してみたところ、CS5 ではフォントの _gothic(_ゴシック) に設定した文字列が swf 内に埋め込まれてしまっているようです。その他フォントに関しても CS4 に比べ CS5 では埋め込まれている文字数が増えています。CS5 では新たに何かフォント設定を変更しなくてはならない模様。

追記3)
問題の原因が判明しました。 → 次の記事へ

[ FLASH ] [ tips ] 2010年06月16日 17:39 | コメント (0) | トラックバック

FLASH tips Flash ライブラリウインドウ内のサウンド一式再生確認でいい方法はないものか

サンプルライブラリのサウンドで何か利用出来そうなものはないかと、一つ一つ曲を再生確認してみたのですが、あまりのマウス移動の多さに腕がつりそうになりました。

CS4 よりも前のどのバージョンかの Flash では、ライブラリウインドウ内のサウンドシンボルを選択した状態で Enterキーを押すとサウンドが再生・停止されたり、再生後 または再生中に上下キーを押すことで次のサウンドシンボルにフォーカスを当てることができたはずですが、この操作仕様は破棄されてしまったのですかね。ライブラリシンボル操作用のショートカットキーが割り振られていないのかと探してみたもののみつからず。

[ FLASH ] [ tips ] 2010年06月08日 18:07 | コメント (0) | トラックバック

FLASH tips Flash CS4 上でリンケージクラス設定を行うと jsfl からリンケージクラス設定変更は不可となる

Flash CS4 上から一度でも設定されたリンケージクラス名は、Flash CS4 上にて「ActionScript用に書き出し」のチェックボックスを外す等をして リンケージ設定を完全に解除しない限り、jsfl からはリンケージクラス名設定は変更不可能な状態となってしまうようです。

「Flash CS4 上からリンケージ設定が完全に解除された状態」とは、「対象となるアイテムのライブラリウインドウ内の『リンケージ』の項に何も表示されていないない状態」とします。(図2)

Flash CS4 上でリンケージ設定を行ったアイテムに対し jsfl でリンケージ設定の解除命令(Item.linkageExportForAS = false)を実行しても、ライブラリウインドウ内の『リンケージ』の項には、設定されていたクラス名のみが表示される状態となり(「書き出し:」という文字列は消える)、完全解除とは言わない状態となります。(図3)

Flash CS4 からのリンケージ設定が完全に解除されていない状態では、jsfl からリンケージクラス名を設定しようとしても、その設定は fla ファイルへは反映されません。

jsfl にて Flash CS4 で行われたリンケージ設定を完全に解除する方法を調査してみましたが、現在のところわからない状況です。対象となるアイテムを複製し元アイテムは削除…といった方法で解決できるかもしれませんが、削除するという操作を入れるのは危険なので、調査対象からは外しています。


検証は以下の環境で行いました。

 Flash CS4 10.0.2
 Windows Vista Home 64bit

OS や Flash のバージョンによっては上記現象の動作が異なる可能性があります。


開発途中では、どんどんクラス名やクラスのディレクトリ構造の変更をかけるので、普段は jsfl でリンケージ設定を行っているのに、まれに Flash CS4 上のシンボルプロパティから設定してしまったりすると、後にそれが原因でつまずいてしまうことが結構あります。


参考: Flash の拡張機能 Item オブジェクト
http://help.adobe.com/ja_JP/Flash/10.0_ExtendingFlash/WS5b3ccc516d4fbf351e63e3d118a9024f3f-7f92.html


参考図

図1) リンケージ設定が行われている状態

図2) リンケージ設定の解除が完全にが行われている状態

図3) リンケージ設定の解除が完全にが行われていない状態

図4) 図3の状態でシンボルプロパティを開いた状態
   この状態から「OK」ボタンを押すと図2の状態に移行する

[ FLASH ] [ tips ] 2010年02月13日 21:20 | コメント (0) | トラックバック

FLASH tips update PNGEncoder フレーム分割処理版

Flex SDK の mx.graphics.codec.PNGEncoder クラスを改造し、負荷が高くなる箇所を分割して処理を行う PNGEncoder クラスを作成しました。

すでに分割処理を行う PNGEncoder を作成されている方はいますが、私が改造したものは 指定した数値分処理を行ったら中途でループを抜けるものとなっています。イベント発行などは行わず、処理が終了したら 取得対象となる ByteArray インスタンスを返却します。

サンプルファイル一式

http://www.dango-itimi.com/blog/swf/90/sample.zip

使い方

サンプルファイルの一部を抜粋/見やすく修正

private var main:Function;
private var pngEncoder:PNGEncoder;

...

public function Sample() {

	...
	
	pngEncoder = new PNGEncoder(
		new TypeBitmapData32(bitmapData), //32bit PNG エンコード指定
		bitmapData.width, bitmapData.height,
		5000 //1フレーム内に実行するループ数を任意に設定	
	);
	main = encode;	
	addEventListener(Event.ENTER_FRAME, run);
}
private function run(event:Event):void{
	
	main();
}
private function encode():void{
	
	var pngBytes:ByteArray = pngEncoder.run();
	trace(pngEncoder.getProgress());
	if(pngBytes) main = stop;	
}
private function stop():void {}

PngEncoder.run メソッドを実行し、戻り値が null の場合はまだ処理が完了していません。ByteArray インスタンスが返却されると処理が完了したことを示します。PngEncoder.run メソッドを実行後 PngEncoder.getProgress メソッドを呼び出すことで現在の進行状況(0~100%)が確認できます。

mx.graphics.codec.PNGEncoder では、処理行数が多くなる for 文内で if 文があり、これはなくしたほうがよいのではと考え、コンストラクタの引数には あらかじめ一定の処理を行うためのインスタンスを渡すようにしました。しかし逆にこれでは処理が遅くなってしまうという場合はごめんなさい。

サンプルでは 32bit PNG エンコードを行いますが、アルファチャンネルなしの PNG エンコードを行いたい場合は、TypeBitmapData24 クラスのインスタンスを引数に指定します。

	pngEncoder = new PNGEncoder(
		new TypeBitmapData24(bitmapData),
		bitmapData.width, bitmapData.height,
		5000
	);

コンストラクタの第四引数に何も数値を指定しない(デフォルト数値 0を指定した)場合は、分割処理は行われません。PNGEncoder.run メソッド一度の実行で ByteArray インスタンスを取得できます。

その他改造点としまして、Array を Vector に変更しています。Flash Player 9 対応にする場合は Vector 記述箇所を Array に戻す必要があります。

mx.graphics.codec.PNGEncoder 内にある Adobe の著作権表示箇所やその他コメントは、そのまま残しておいたほうがよいのか、記述を何か変えるべきなのか、削除したほうがいいのか、どのように扱えばいいか判断がつかなかったため、改造後のソースには何も書いていません。何か問題がありましたらご指摘願います。

■ Flex SDK mx.graphics.codec.PNGEncoder
http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/framework/src/mx/graphics/codec/PNGEncoder.as

[ FLASH ] [ tips ] [ update ] 2009年12月10日 19:07 | コメント (0) | トラックバック

FLASH tips ビットマップ 表示サイズ限界値

Flash Player 10 で扱えるビットマップの表示サイズの限界はいくつなんだと以前から気になっていましたが、Flash のヘルプに書いてあったのでメモ。

---
AIR 1.5 および Flash Player 10 では、ビットマップイメージの最大サイズは幅または高さが 8,192 ピクセルで、ピクセルの総数が 16,777,216 を超えないようにする必要があります(したがって、ビットマップイメージの幅が 8,192 ピクセルの場合、高さは 2,048 ピクセル以下にする必要があります)。Flash Player 9 以前では、高さの制限は 2,880 ピクセル、幅の制限は 2,880 ピクセルです。
---

[ FLASH ] [ tips ] 2009年12月04日 02:48 | コメント (0) | トラックバック

FLASH tips update BoxScroller

AS3 ライブラリ整理を一旦終了。ライブラリ内の一機能を用いたサンプルの紹介です。

まず、核となるスクロールバー機能があり、そのスクロールバー機能を用いて四角形の領域に縦方向と横方向にスクロールバー表示を行う BoxScroller というものを作成しました。

BoxScroller を用いることにより、ブラウザのデフォルト機能であるスクロールバー表示のような表現を行うことが可能となります。以下のサンプルを閲覧ください。表示には Flash Player 10 が必要です。

 → サンプル1(表示領域の外側にスクロールバーを表示する例)
 → サンプル2(表示領域の内側にスクロールバーを表示する例)

画面内に表示されるスクロールバーは Flash で実装しています。スクロールバー押下でのスクロール処理の他、マウスホイールによるスクロールや、各ページをドラッグ&ドロップすることでもスクロールする事が可能です。

画面右下の数値ボタンを押すことにより、表示されるページが変化します。ブラウザサイズを変更することにより、あるいはページを切り替える(PAGE1, PAGE2を切り替える)ことにより、スクロールバーの表示サイズや位置が適切に調整されます。また、ページの表示サイズに対しブラウザの表示サイズが大きい場合、スクロールバー表示は消去されます。

PAGE3 は BoxScroller を複数画面内に適用した例となります。BoxScroller が複数存在する場合、マウス位置により どの BoxScroller をマウス処理対象とするかの判定を行うかの機能を組みこんでいます。

[ FLASH ] [ tips ] [ update ] 2009年11月24日 11:11 | コメント (0) | トラックバック

FLASH tips 「プロファイラ内容変更」+「フレームへのスクリプト記述」 jsfl サンプル

Flash Lite でのキャリア毎の swf 書き出し作業の問題点

Flash Lite では、どのキャリアの携帯端末で swf が実行されたのか 動的に判別することができません。swf 実行時、各キャリア専用の認証用 URL にアクセスしたいといった場合等、あらかじめキャリアごとに専用の swf を書き出しておく必要があります。(サーバ側で swf 内の変数を動的に書き換える方法もありますが、その環境がないものとして話を進めます。)

例えば以下のようなスクリプトを、ルートのフレーム 1 に記述します。

//1 : docomo
//2 : au
//3 : softbank
CARRIER = 1;

//1 : 本番サーバ
//2 : 検証サーバ
SERVER = 1;

//認証 URL 一覧
URL1_1 = "http://~"; //docomo 本番サーバ用
URL1_2 = "http://~"; //docomo 検証サーバ用
URL2_1 = "http://~"; //au 本番サーバ用
URL2_2 = "http://~"; //au 検証サーバ用
URL3_1 = "http://~"; //softbank 本番サーバ用
URL3_2 = "http://~"; //softbank 検証サーバ用

//実際に認証で用いる URL
url = eval("URL" add CARRIER add "_" add SERVER);

変数 CARRIER, SERVER の各値を手動で書き換えた後 パブリッシュを行い、書き出された swf を docomo.swf, au.swf, softbank.swf …、といった具合に名前を変更します。

ここで、ファイルにどこか修正が入る場合、再び上記 swf 書き出し作業を繰り返す必要がでてきます。この作業の繰り返しは、ミスが発生しやすく、時間も浪費し、精神衛生上よろしくありません。


サンプルファイル ダウンロード

上記問題を解決するために、「プロファイラ内容変更」と「フレームへのスクリプト記述」を行う jsfl のサンプルを作成しました。

 → サンプルファイル一式 ダウンロード[trunk.zip]

今回作成した jsfl ファイルは Flash CS4 以降対応となっています。

サンプルファイルディレクトリ構造は以下のようになっています。

trunk
 ├ fla 
 │ ├ PublishChanger.fla
 │ └ test
 └ jsfl
   ├ publish.jsfl
   ├ Main.jsfl
   ├ ProfileXMLReplacer.jsfl
   └ CarrierActionScript.jsfl


サンプル実行手順

jsfl ファイルから fla ファイルのパブリッシュを行うには、fla ファイルへの絶対パスの指定が必要です。まず publish.jsfl ファイルに fla ファイルへの絶対パスの記述を行います。

publish.jsfl をテキストエディタで開き、一行目に trunk ディレクトリはどこかの指定を行ってください。ダウンロード直後は例として以下の記述が行われています。

var PROJECT_DIRECTORY = 
	"file:///f:/MyDocument/eclipse/workspace/PublishChangerJsfl/trunk/";

例えば以下の環境の場合
 OS : windows XP
 ユーザ名 : Owner
 trunk 配置ディレクトリ : デスクトップ
以下のように変更を行います。

var PROJECT_DIRECTORY = 
	"file:///C:/Documents and Settings/Owner/デスクトップ/trunk/";

上記設定後 publish.jsfl をダブルクリックで実行することで fla ディレクトリ内の PublishChanger.fla ファイルがパブリッシュされ、各種 swf ファイルが fla ディレクトリ内に書き出されます。書き出し先ディレクトリを指定することも可能で、test ディレクトリにも swf が書き出されるようにしています。

書き出される swf ファイルは以下の形式にするようにしています。

(キャリア名 + サーバ種別).swf

各種 swf をパブリッシュする直前には、フレーム 1 に以下のスクリプトを組み込むようにしています。

testTxt = 'キャリア名' add 'サーバ種別';

各 swf ファイルに上記スクリプトが正常に埋め込まれているかを確認するために、PublishChanger.fla 内には testTxt というテキストフィールドを配置しています。各 swf を開いてご確認ください。

今回のサンプルでは上記書き出しと設定を行なうだけのサンプルなので、プロジェクトに合わせて jsfl の処理内容を書き換えてください。swf 名書き出しに関する処理は Main.jsfl 内の for 文以下、フレームへのスクリプト埋め込みに関する処理は CarrierActionScript.jsfl 内に記述されています。各 jsfl ファイル内のスクリプトはさほど長いものではないので、細かい説明は省略します。


参考 プロファイル設定を行う jsfl 処理説明

Flash から swf 等の各種ファイルを書き出す設定プロファイル(xmlファイル)内の、以下の要素を設定する事で swf 出力ファイル名を任意に変更する事が可能となります。

<PublishFormatProperties enabled="true">
	<defaultNames>0</defaultNames>
	<flashDefaultName>0</flashDefaultName>
	<flashFileName>任意のswf名</flashFileName>
</PublishFormatProperties>

ProfileXMLReplacer.jsfl は プロファイル内の指定要素の値を 変更・設定 する処理を行います。Main.jsfl は ProfileXMLReplacer.jsfl を用いて defaultNames, flashDefaultName, flashFileName 要素の値を変更するようにしています。


問題点

私は、Flash Lite の swf は容量を削減するため Flash 8 で書き出す事があります。しかし、Flash 8 では今回作成したサンプルの jsfl 内に記述したスクリプトが使用できないものがあり、せっかく作ったのに使用できないなんて事が。


その他 参考

Adobe Flash CS4 Professional の拡張機能(jsfl API ドキュメント)
http://help.adobe.com/ja_JP/Flash/10.0_ExtendingFlash/index.html

[追記 2009年11月2日]
サンプル内の
this.doc.getTimeline().layers[0].frames[0].actionScript
という記述は root ではなく現在開いているシンボルやシーンのタイムラインを編集することになってしまうようなので、注意!

開いたflaファイルから取得したドキュメントオブジェクト変数(doc)に対し、以下の記述を追加することでルートタイムラインを参照するようになる模様。

this.doc.currentTimeline = 0;

[ FLASH ] [ tips ] 2009年10月29日 14:12 | コメント (3) | トラックバック

FLASH tips MouseEvent 検出処理周りの大幅な変更

ここ最近 UI 関連のライブラリを再構築してく中(現在はスクロールバー関連処理再構築中)、マウスイベント(MouseEvent)は Stage インスタンスのみから検出できるようにするべきではないか、と考えました。

以下予定している今後についてまとめ書きを行いました。

変更内容

(a) MouseEvent を扱うクラスは一つ

・MouseEvent は Stage インスタンスからのみ検出する
・各種 DisplayObject への MouseEvent 検出処理定義は削除
・検出したい MouseEvent はあらかじめ一通り定義しておく

(b) MouseEvent.MOUSE_OUT, MouseEvent.MOUSE_OVER 処理削除

・Rectangle を用いて、領域上にマウスが存在するかを判定する
 → Rectangle.contains 等を利用

(c) 領域がクリックされたかどうかを判定

・(a)でマウスクリックを検出された時
 (b)の領域内にマウスポインタが存在する場合 とする

ポイント

・各所に散らばっていた addEventListener の MouseEvent 処理は不要となる
・DisplayObject 関連インスタンスを生成せずともマウス状況に対する処理が扱える

数値上で計算を行っておき、任意のタイミングで DisplayObject 関連インスタンスを生成し表示・位置設定、といった描画処理を行う事が可能となります。
不要なインスタンスや処理を定義する箇所が減り、なおかつ処理が分割され、見やすいクラス設計が可能となります。

まだ実際に変更作業は行っていないので、あくまで「おそらく」の話となります。

別途考慮が必要になる点

Stage インスタンスに addEventListener で MouseEvent を検出するようにするため いつでも MouseEvent は発生するようになる

DisplayObjectContainer の表示重なり具合を考慮する必要がでてきます。
この SimpleButton は手前に Sprite が表示されているから、マウスクリック判定は無効とする、等です。

複雑な形状の判定

シンプルな UI ならば矩形領域判定で十分かと思われますが、複雑な形状の UI に対して領域クリック調査などを行いたい場合は別途考慮が必要となりそうです。

---


UI 関連ライブラリ全体(特にボタン(SimpleButton)の扱い)に修正が入りそうです。
個人的なコーディングスタイルがよりいっそう統一されたものになりそうです。

考え方にどこか欠陥は必ずありそうです。変更作業を行いながら気づくかもしれません。
やっぱりこうしないほうがいいや、といった事もあるかも。

[ FLASH ] [ tips ] 2009年10月24日 18:07 | コメント (0) | トラックバック

FLASH tips AS3 Slider コンポーネントカスタマイズ : マウス当たり判定を増やす

Slider コンポーネントの部分部分のマウス当たり判定がとても小さく操作しにくいため、当たり判定を大きくするための手順を記述します。

手順

(1)前準備

Flash のコンポーネントウインドウから Slider コンポーネントを ライブラリに配置してください。

(2) fl.controls.Slider クラスの拡張

fl.controls.Slider クラスの configUI メソッド内で、スライダーの三角のボタン(thumb)とスライダーのバー(track)のインスタンスが生成されています。そして、各インスタンスは setSize メソッドにより表示サイズが設定されています。
thumb, track の各インスタンスは protected 設定されており外部クラスから操作できないため、Slider のサブクラスを作成し、外部から表示サイズを変更できるようにします。

package {

	import flash.display.Sprite;
	import flash.utils.getDefinitionByName;
	import fl.controls.Slider;
	
	public class CustomSlider extends Slider {

		override protected function configUI():void{
			
			super.configUI();

			//表示変更したい任意の大きさにする
			thumb.setSize(16, 52);
			track.setSize(80, 40);
		}
	}
}

thumb, track 各インスタンス内にはライブラリ内にある各種スキン用ムービークリップが配置されます。実際には以下のようなソースコードにすれば、スキン用ムービークリップの表示サイズそのままの大きさが各インスタンスに適用されるようになります。

package {

	import flash.display.Sprite;
	import flash.utils.getDefinitionByName;
	import fl.controls.Slider;
	
	public class CustomSlider extends Slider {

		override protected function configUI():void{
			
			super.configUI();
			
			var cls:Class;
			
			cls = getDefinitionByName("SliderThumb_upSkin") as Class;
			var tmpThumb:Sprite = new cls();
			thumb.setSize(tmpThumb.width, tmpThumb.height);
			
			cls = getDefinitionByName("SliderTrack_skin") as Class;
			var tmpTrack:Sprite = new cls();
			track.height = tmpTrack.height;
		}
	}
}


(3) クラス設定

上記 CustomSlider クラス作成後、ライブラリ内にある Slider コンポーネントのクラス設定を fl.controls.Slider から CustomSlider へ変更します。

(4) スキン変更

ライブラリ内にある以下のムービークリップシンボルを編集します。

Component Assets
 └ SliderSkins
  │ 
  ├ SliderThumb_downSkin
  ├ SliderThumb_overSkin
  ├ SliderThumb_upSkin
  │
  └ SliderTrack_skin

サンプルでは、デフォルトのグラフィックほぼそのままで、当たり判定のみが広がるように透明のシェイプを hitArea というレイヤーに追加しています。

SliderTrack_skin には 9 スライス設定がされているので、編集には少々コツがいるかもしれません。後のサンプルファイルをご参考ください。


サンプルファイル

http://www.dango-itimi.com/blog/swf/86/slider.zip

追記) サンプルの fla ファイルを Flash CS3 からでも開けるようにしました

[ FLASH ] [ tips ] 2009年09月07日 23:29 | コメント (0) | トラックバック

FLASH tips Flash(AS3) から XML-RPC を利用(zoome API)

最近動画に関して少々調査を行っています。
ここで、動画共有サイト zoome で提供されている API で XML-RPC という単語を目にしました。XML-RPC とはなんぞや、と調べて見たところ、指定の形式の XML データ(request)を指定のサーバ(URL)に送信すると、指定の形式の XML データ(response)が得られるというもののようです。

そういえば、XMLをサーバに送信するような処理を書いたことはなかったな、ということで、zoome API を元に Flash(AS3) から XML-RPC をどのように利用するかのメモを以下に記述します。

例として「マイページのURLネーム(zoomeurl)」が「sample」という会員の、「zoome の会員ID(zoomeid)」を取得します。

 zoome API 解説ページ
 http://www.zoome.jp/help10

 会員基礎情報 取得メソッド説明
 http://www.zoome.jp/help10#zoome.getUserInfo

会員基礎情報 取得メソッド(zoome.getUserInfo)の説明箇所の「▼request」 に記されている XML データを、APIのURI(エンドポイント) http://up.zoome.jp/xmlrpc に送信することで、「▼response」 に記されている XML データを取得することができます。

package twm.index.analyze {
	
	import flash.events.ErrorEvent;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequestMethod;
	import flash.net.URLRequest;

	public class Sample {

		private var response:URLLoader;
		
		public function Sample() {
		}
		
		public function startRequest():void{
			
			var requestXml:XML = 
				<methodCall>
					<methodName>zoome.getUserInfo</methodName>
					<params>
						<param><value><struct>
							<member><name>zoomeurl</name><value><string></string></value></member>
						</struct></value></param>
					</params>
				</methodCall>
			;
			var zoomeurl:String = "sample";
			requestXml.params.param.value.struct.member.value.string = zoomeurl;
			
			var request:URLRequest = new URLRequest();
			request.contentType = 'text/xml';
			request.data = requestXml;
			request.method = URLRequestMethod.POST;
			request.url = "http://up.zoome.jp/xmlrpc";
			
			response = new URLLoader();	
			response.addEventListener(Event.COMPLETE, eventComplete);
			response.addEventListener(ErrorEvent.ERROR, eventError);
			response.load(request);
		}
		
		private function eventError(event:ErrorEvent):void {
		}
	
		private function eventComplete(event:Event):void {
				 
			var loader:URLLoader = URLLoader(event.target);
			var responseXml:XML = new XML(loader.data);
			
			var zoomeidList:XMLList = responseXml.params.param.value.struct.member.(name == "zoomeid");
			var zoomeid:String = zoomeidList.value.i4;
			trace('zoomeid: ' + (zoomeid));
		}
	}
}

追記) zoome API はクロスドメインの関係で web 上からは直接アクセスできない事に気づきました。上記サンプルコードはローカル PC 上では動作します。

[ FLASH ] [ tips ] 2009年08月27日 16:39 | コメント (0) | トラックバック

FLASH tips mixi アプリ調査中2 Opera でスクロールバーが表示されてしまう問題の解決

前回記述した Opera でスクロールバーが表示されてしまう問題が解決しました。xml 要素の記述の仕方が悪かった事が原因でした。


mixi Developer Center にある 「はじめてのmixiアプリ」の項で以下のような記述箇所があります。

<div>Hello, <span id="target"></span>!</div>

これをこのまま流用して、span 要素内に swf を埋め込ませようとしていました。

<div><span id="target"></span></div>

しかしこれが誤りでした。上記記述だと Opera でスクロールバーが表示されてしまいます。
ここで、span 要素を削除し div 要素に id 設定を行なってみたところ Opera にてスクロールバー表示がなくなりました。

<div id="target"></div>

gadgets.flash.embedFlash の第四引数に何も指定しなくても、gadgets.window.adjustHeight メソッドを呼び出そうともスクロールバーは表示されなくなります。
以下のように div 要素で入れ子にしても問題ありませんでした。

<div><div id="target"></div></div>

[ FLASH ] [ tips ] 2009年07月16日 10:29 | コメント (0) | トラックバック

FLASH tips mixi アプリ調査中

mixi アプリがまだベータ版という事と、私もまだ調査し始めたばかり、ということでどちらに問題があるかわかりませんが、ひとまず現在までにひっかかった点と不明点を記述。

■embedFlash、IE6、 Flash Player 10 表示指定不可

mixiアプリに Flash を利用する場合のサンプル例として公式サイトに以下の説明があります。

gadgets.flash.embedFlash(
      "http://your.server.host/flash/content.swf",
      document.getElementById("target"),
      6);

数値の 6 は Flash Player のバージョンを示すものですが、ここに 10 を指定すると IE6 で何も表示されなくなってしまう。swf 自体が埋め込まれないようです。

IE6 で Flash Player 10 対応の swf を問題なく表示するにはどうすればよいのか、現時点では不明。上記公式の swf 表示方法ではなく swfobject での swf 表示を試してみる予定。

■Opera 9.64 で縦スクロールバーが表示されてしまう

公式の mixi アプリに Flash を 表示する方法に順番に従っていくだけでは Opera 9.64 で mixi アプリ表示領域右側にスクロールバーがデフォルトで表示されてしまいます。(IE6, Firefox3, Safari3.2.3 では表示されず)

公開されている swf を用いた mixi アプリではスクロールバーが表示されていないので、何か解決策があると思いますが、どうすればよいのか情報が見つからず。ありとあらゆる手を模索して色々試してみるしかなさそうです。

※開発環境は Windows XP です。

---
[ 追記 2009年7月15日 ]

Opera でスクロールバーが表示されてしまうケースが少々判明

■判明内容

(1) embedFlash 第四引数 パラメータ設定で width や height を記述しない

swf の表示サイズ設定を行なわない場合にスクロールバーが表示されてしまうようです。上記 コード引用にあるような gadgets.flash.embedFlash に第三引数までしか設定していない場合に起こります。

(2) gadgets.window.adjustHeight メソッドを実行

マニュアルによると、表示対象コンテンツ縦幅 が アプリ表示領域を超える場合、gadgets.window.adjustHeight() を実行するとアプリ表示領域が調節される、とあります。しかしこの命令を実行すると Opera ではスクロールバーが表示されてしまいます。
gadgets.window.adjustHeight 単体実行ではスクロールバー表示は行われません。embedFlash メソッドと同時に利用するとスクロールバーが表示されてしまいます。


表示されてしまうスクロールバーの長さを見る感じ 2px ほど表示対象コンテンツの縦幅が余計に加算されている感じがします。2px という数値、ブラウザの違いで起こる CSS のバグで見たことがあるような気が。


■現在までの解決案

以下の全ての条件を満たせばよしとなりそうです。

・表示対象コンテンツ縦幅をアプリ表示領域内に収める
・embedFlash 第四引数 パラメータ設定で width や height を記述する
・gadgets.window.adjustHeight メソッドを実行しない


■引き続きの調査項目

公開されている Flash を用いた mixi アプリでは gadgets.window.adjustHeight() にて高さ調節を行っているにもかかわらずスクロールバーが表示されていないものもあります。何か解決策がありそうです。

---
[ 追記2 2009年7月16日 ]

上記 2009年7月15日 の内容は誤りがありました。
mixi アプリ表示箇所は home, profile, canvas 三つありますが
上記スクロールバーを表示させない方法は canvas にのみに適用されます。
home, profile に関しては上記内容でも Opera でスクロールバーが表示されてしまいます。

---
[ 追記3 2009年7月16日 ]

Opera でスクロールバーが表示されてしまう件は解決しました。
次の記事

[ FLASH ] [ tips ] 2009年07月14日 17:32 | コメント (0) | トラックバック

FLASH tips FDT + FCSH キャッシュ有効設定

現在製作している Flash コンテンツにてクラスファイル数が 200 近くになっているのですが、一度のパブリッシュ時間が 30 秒近くかかる状況になってしまっています。グラフィックシンボルは別 fla ファイルに切り分けているので、ソースコードの解析に時間がかかっていそうです。

少々のソースコード変更に対して 毎回 30 秒待たされるのは非常に時間の無駄です。まだまだ未完成コンテンツもあり今後さらにソースコードは増加していきます。

ここで、FCSH というものの存在を思い出しました。劇的にパブリッシュ速度を速めてくれるといものです。AS3 を記述するエディタは FDT を利用しており、FDT には丁度 FCSH で簡単に swf を書き出す機能がついています。

早速試してみたところ、確かに swf を書き出す速度は早くはなりましたが、時間は半分くらい短くなった程度。確か初回書き出し時はあまり早くはならず、二回目以降はキャッシュが効き劇的に早くなるはずですが早くなってくれない。おかしいなあと調べてみたところタイムリーな記事が。

 FDTでFCSHのキャッシュがきかない問題 : RingoDiary
 http://d.hatena.ne.jp/rin_go/20090612/1244799938

 俺は口うるさい姑か?的fcshを英語版で動かす話。: タロタローグ ブログ
 http://blog.tarotaro.org/archives/15

flex SDK インストールフォルダ内 bin/jvm.config の内容を書き換えれば、FCSH のキャッシュが有効になるとのこと。書き換えてみたら、うおー、なんじゃこの速度は。今までの時間を返せと言いたくなるくらいの速度で swf を書き出してくれます。(1秒かからない)
上記設定を行なうことで同時に、FDT AS3 Application の Run コマンド実行時、何故か External SWF Viewer 等が起動しなかった不具合が直ってしまったのもめでたい。

以下、FDT AS3 Application から FCSH を設定するまでの動画と簡単な説明です。

▽続きを読む

[ FLASH ] [ tips ] 2009年06月26日 02:28 | コメント (0) | トラックバック

FLASH info tips Flash CS4 10.0.2 アップデートで ムービープレビュー時の Flash Player のバージョンもアップデート

Flash CS4 10.0.2 へのアップデートができるとのことで早速アップデートしてみたところ、ムービープレビュー時の Flash Player のバージョンはめでたく最新?の 10,0,22,91 となりました。今後も Flash Player のアップデートとともに Flash CS4 のアップデートもしてほしいですなあ。

アップデートページ
http://www.adobe.com/support/flash/downloads.html

その他もろもろ改善されているようですが、まだあまり調査はしていません。
http://blogs.adobe.com/rgalvan/2009/05/flash_cs4_update_now_available.html

オーサリング上でのテキストの扱いが非常に重たい(動作が遅くなる)ので、それも改善されればなあ、と考えましたが アップデート後もあまり変化無し。そろそろ PC 買い換え時か。

関連記事
Flash Player のバージョンにより Matrix3D.transformVector で Vector3D の値が 1/20 になるバグ?

[ FLASH ] [ info ] [ tips ] 2009年05月14日 22:49 | コメント (0) | トラックバック

FLASH tips Loader.unloadAndStop でエラー : Flash CS4 ムービープレビュー用 Flash Player

自作スクロールバーコンポーネントのインスタンスを生成・表示した swf を Loader.unloadAndStop メソッドで破棄すると以下のエラーが発生する問題に直面。

Error #2044: ハンドルされていない IOErrorEvent : text=Error #2036: 読み込みが未完了です。

Loader.unloadAndStop を用いず Loader.unload メソッドを用いると上記エラーは発生しません。

大抵エラーが発生すると、Flash の出力パネルに、どのクラスのどのメソッドでエラーが発生したか表示されるのですが、上記エラーはどこで発生したかの表示がなされず調査に時間がややかかってしまいました。

自作スクロールバーコンポーネントの何か作りが悪い、あるいは外部 swf 読み込みでのややこしいセキュリティなんたらが原因でエラーが発生しているのかもしれません。
ただし、上記エラーは Flash CS4 内のムービープレビューの Flash Player(以前も記事にした、3D関連処理にバグのある Flash Player) で実行すると起こるようで、バージョンアップしたデバッグ用 Flash Player では上記エラーは発生しませんでした。

Flash Player のバージョンアップにより、Loader.unloadAndStop に関して何らかの問題が解決した可能性もありますが、Flash Player 10 Release Notes には Loader.unloadAndStop に関しての記述はみつからず。

 Flash Player 10 Release Notess
 http://www.adobe.com/support/documentation/en/flashplayer/10/Flash_Player_10_Release_Notes.pdf

ひとまず最新の Flash Player で問題なく動作するので上記エラーは無いものとすることに。しかし、Flash CS4 で動作確認を行なう際 ムービープレビューとデバッグモードとで動作が異なるというのは避けたいので、Loader.unloadAndStop の使用は一旦とりやめに。
Loader.unloadAndStop はとりあえずとして用いていましたが、内部の作りとしては Loader.unload でも問題ないようになっています。

[ FLASH ] [ tips ] 2009年05月05日 17:22 | コメント (0) | トラックバック

FLASH tips SWFAddresss で変更したページタイトルも Google Analytics は解析収集してくれる

SWFAddress で動的に設定される URL と html のページタイトル(ブラウザウインドウ左上に表示される文字列)を、Google Analytics は解析収集してくれるのかどうか、という疑問点がありました。
検証してみた結果、見事解析収集してくれることがわかりました。


【 詳細 】

デフォルト設定では swfaddress.js を利用する html 上に Google Analytics トラッキングコード用タグを記述することで、SWFAddresss から設定される URL が Google Analytics へ送信されます。

例えば以下の URL の場合

http://www.dango-itimi.com/#/sample/

以下の URI データが Google Analytics へ送信されます。

/sample/

また、Google Analytics 上では 解析した URL にページタイトル(html の title タグ内のデータ)が設定してある場合、Google Analytics 内の「コンテンツ」→「タイトル別のコンテンツ」と選択することで、解析された URL に対するタイトル文字列を一覧とした解析結果表示がなされます。

例えば以下の用な Google Analytics トラッキングコード タグを埋め込んだ ページが存在するとします。

ページタイトル名 : Flash ページ
URL : http://www.dango-itimi.com/flash/

ページタイトル名 :OH! DANGO JAM
URL : http://www.dango-itimi.com/jam/

Google Analytics 上では以下の文字列が表示されます。

[ URL一覧 ]
 /flash/
 /jam/

[ タイトル別コンテンツ一覧 ]
 Flash ページ
 OH! DANGO JAM


ここで、SWFAddress で出力される各 URL と、その URL と同時に SWFAddress で設定したページタイトルは Google Analytics は解析収集してくれるのだろうか、と試してみたところ、以下のような結果になり、見事解析してくれることがわかりました。

ページタイトル名 : サンプル
http://www.dango-itimi.com/#/sample/

ページタイトル名 : サンプル 記事1
http://www.dango-itimi.com/#/sample/001/

ページタイトル名 : サンプル 記事2
http://www.dango-itimi.com/#/sample/002/
[ URL一覧 ]
 /sample/
 /sample/001/
 /sample/002/

[ タイトル別コンテンツ一覧 ]
 サンプル
 サンプル 記事1
 サンプル 記事2


【 経緯 】

以下のような経緯があり、今回の調査にいたりました。

・Google Analytics に表示される URL 一覧では
 ぱっと見どの URL がどのページとなっているのかわかりにくい

・解析されたページが html の場合
 「タイトル別のコンテンツ」から日本語でタイトル一覧閲覧が可能

・Full Flash で製作されたサイトの場合 html に設定されるタイトルは一つなので
 「タイトル別のコンテンツ」に表示されるタイトルは一つだけになってしまう

・SWFAddress を用いて動的に URL や タイトルが変化する場合はどうなるのだろうかと検証

きっと、すでに Progression と Google Analytics を利用している方は周知の事なのでしょうね。


【 別件 】

swfaddress.js 経由で URL 文字列を送信するのではなく、日本語のタイトル文字情報を swf から直接 Google Analytics へ送信すれば、解析結果一覧に日本語文字が一覧で表示され見やすくなる?のでは、という案も挙がりました。

というわけで以下のように Google Analytics へデータを送信するための pageTracker._trackPageview メソッドに日本語文字列をどんどん送信してみました。

 ExternalInterface.call("pageTracker._trackPageview", 日本語文字列);

しかし Google Analytics は日本語は解析してくれない(URL形式になっていないとダメ?)のようで解析結果一覧には反映されませんでした。

[ FLASH ] [ tips ] 2009年04月24日 20:19 | コメント (2) | トラックバック

FLASH tips AIR パッチで再インストール作業短縮

以前、SWFAddress を用いたサイトに使用する、xml ファイル出力 AIR アプリケーションを製作しました。しかし 出力する xml ファイルのフォーマットが変更されるたびに、AIR アプリケーションをパブリッシュし直し、アプリケーションを再インストールする必要がある、という問題がありました。

AIR で製作されたアプリケーションは、インストールとアンインストール作業がやや面倒です。Windows にインストールする場合、まず、以前のバージョンのアプリケーションを コントロールパネルの「プログラムの追加と削除」からアンインストールする必要があります。アンインストール後、インストーラを実行します。


現在 SWFAddress を用いたサイト製作の第一回納品が完了し、今後未完成部分をどんどん製作していくことになっています。各ページの表示に必要な xml ファイルのフォーマットも随時変化していくこととなりそうな状況です。

ここで、xml のフォーマットが変化するたびに プロジェクトメンバーの PC に AIR アプリケーションのインストール/アンインストール作業を繰り替えす事は時間の無駄となってしまうため、どうしたらいいか考えてみました。そして、以下の方法を試してみる事に。

 1)xml フォーマットの変更に伴い処理変更のかかる箇所は
  AIR アプリケーション内で扱うのではなく 別途 swf(xmlParser.swf) で扱う

 2)AIR アプリケーションは 上記 xmlParser.swf を読み込み実行する

 3)各プロジェクトメンバーは Subversion 経由で xmlParser.swf を随時更新する

AIR からの外部 swf 実行にエラー等が発生しなければ、これで問題が解決するはず。

追記)
どうやら AIR のパブリッシュ設定によっては、インストーラーを実行するだけで即アンインストールや新しいバージョンの AIR アプリケーションにアップグレードできるようです。「このセッションのパスワードを保存する」という項目にチェックを入れたらその設定が有効になった?模様。

また、外部 swf で利用したクラスAのインスタンスを AIR 側で利用しようとしたら コンバートエラーが発生。loader.context の ApplicationDomain の設定を一通り試してみましたがダメでした。クラスA は複数のデータを一まとめとして受け渡すだけのためのクラスなので、ひとまず Object 型に変換し利用してお茶を濁すことに。

[ FLASH ] [ tips ] 2009年04月21日 11:05 | コメント (0) | トラックバック

FLASH tips SWFWheel を利用してみる

以前どこかで FlashPlayer10 から Mac でもマウスホイール対応、といった旨の記事を読んだことがあり、おーそうなんだと特に何も考えず マウスホイール処理を記述し あぐらをかいておりました。しかし Mac ではマウスホイールが動作しない、Windows IE7 でも動作しない等、色々と不具合報告をいただきました。自分で検証してみたら Windows Safari でも動作しない模様。うおー

そんな中、SWFWheel というライブラリがあるのを見つけました。

 SWFWheel
 http://www.libspark.org/wiki/SWFWheel

 使用方法の詳しい解説記事
 http://feb19.jp/blog/archives/000167.php

SWFWheel.initialize メソッドを呼び出した後、通常通り MouseEvent.MOUSE_WHEEL イベントにリスナー定義をすればよいだけの模様。どういう仕組みになっているのか理解しておりませんが、利用させていただこうと思います。

[ FLASH ] [ tips ] 2009年04月10日 21:23 | コメント (0) | トラックバック

FLASH tips SWFAddress の各 URL は検索エンジンに認識されないのだろうか

当 blog X-LABO でも利用している Google Sitemaps というものがあります。サイト内の URL 一覧を登録しておくことで google がその URL を巡回するようになり、検索結果に反映されやすくなる、たしかそんな感じでした。

ここで、Google Sitemaps に SWFAddress を用いた Flash サイト内で生成される URL 一覧を登録するとどうなるのだろうか、という疑問が一つわきました。登録した一つ一つの URL を一つの Flash サイトとしてではなく、別途 URL として判定し検索結果に各 URL が表示されるのであれば是非実行してみたいところ。

現在 google は、動的にテキストデータを読み込む Flash サイトのテキストデータも検索が可能になってきているとの事です。もしかしたら Google Sitemaps に URL を登録しなくとも SWFAddress を利用した Flash サイト内の各 URL は google 検索結果に表示されるのではないだろうか?とも思い、SWFAddress を用いて作られている世の各サイトを「site:http:~」と検索してみました。しかし 検索結果は swf を配置している html と swf, その他 swf を配置している以外の別ページのみという事に。

私のような考えは当然持つだろうし、検索結果に表示されないと言うことは、無理ということなのですかなあ。


例えば http://www.dango-itimi.com に SWFAddress を用いた swf を配置していたとして、以下のような 二つのテストページ用 URL があるとします。

 テストページ1
 http://www.dango-itimi.com/#/test1/

 テストページ2
 http://www.dango-itimi.com/#/test2/

理想は テストページ1, テストページ2 が検索結果にでてくれればいいのですが、現実は

 団子一味の野望
 http://www.dango-itimi.com

と判定されてしまいそう。


■参考
SWFコンテンツ検索に関するFAQ
http://www.adobe.com/jp/devnet/flashplayer/articles/swf_searchability.html

ディープリンク URL と サイトマップについて少々書かれています。

[ FLASH ] [ tips ] 2009年04月04日 14:19 | コメント (0) | トラックバック

FLASH tips update スクロールバーコンポーネント3 可変サイズのスクロール対象コンテンツ

スクロール対象コンテンツ長が一定時間ごとに変化する場合の スクロールバーコンポーネントの動作確認用 swf を作成しました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月29日 16:00 | コメント (0) | トラックバック

FLASH tips update スクロールバーコンポーネント2 動的なバーの長さ変化

スクロール対象のコンテンツの高さが変化する場合、スクロールバーの高さや表示位置を同時に変化させる必要があります。その動作確認を行なうための swf を作成しました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月27日 20:44 | コメント (0) | トラックバック

FLASH tips update スクロールバーコンポーネント 習作

必要になりそうなので、AS3 による定番のイーズ処理で滑らかに動作するスクロールバーコンポーネントの製作を行ないました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月27日 11:29 | コメント (0) | トラックバック

FLASH tips update SWFAddress を用いたサイト構築5 設定ファイルを扱う AIR 製作

ライブラリで用いる設定ファイルを扱うアプリケーションを Adobe AIR にて製作。

以下は自分用のメモ

サイト全体の設定ファイルとしてまず index.xml という XML ファイルを用意し、そこにサイト内で読み込む対象の設定項目を記述します。現在までの習作 の index.xml の内容は以下のようになっています。

 index.xml

この index.xml ファイルはデータ量が多くなるので直接 Flash からは読み込みません。コンテンツごとの複数の xml ファイルに分割し、各コンテンツ表示時に読み込むようにします。
ファイル分割を行なうには AIR を用います。index.xml を AIR で作成したアプリケーションで読み込み、index.xml の内容を解析し、定めたフォーマットに整形した後、コンテンツごとの xml ファイルを出力させます。

出力している xml ファイルは以下のとおりです。

 page.xml
 etc.xml

page ボタンで表示されるコンテンツと etc ボタンで表示されるコンテンツ用の xml ファイルです。読み込む 画像やswf ファイル名、表示するテキスト情報が主となります。

また、当ライブラリでの核となる scene.xml ファイルも index.xml を元に AIR で生成します。

 scene.xml

scene.xml には、各コンテンツシーンをいくつ生成する必要があるのかの情報が記述されます。scene.xml を元に全てのシーンインスタンスを生成し、id を割り振ったり、アドレスバーから指定された URL は存在するか、といったチェックを行なう事が可能となります。


今回作成した AIR アプリケーションのスクリーンショット

scene.jpg

「選択」ボタンを押すことでファイル選択ダイアログが表示され、index.xml のディレクトリ位置指定が可能となります。
「書き出し実行」ボタンを押すことで、 index.xml を配置しているディレクトリを基準に scene.xml, page.xml, etc.xml が 指定のディレクトリに書き出されます。


xml 編集ソフトは XMLEditor.NET を用いています。

http://www.xmleditor.jp/

サイトの更新を行なう人は index.xml を編集し AIR にて xml ファイル書き出し処理を実行後、各更新ファイルをサーバにアップロードします。上記 xml 編集ソフトは Windows 用のものなので Mac の人は別途何かいい xml 編集ソフトを探す必要がありそうです。

[ FLASH ] [ tips ] [ update ] 2009年03月25日 11:02 | コメント (0) | トラックバック

FLASH tips update SWFAddress を用いたサイト構築4 外部データ読み込み優先処理実装

自シーンでの外部データ読み込み中に 子孫シーンで外部データ読み込みが発生した場合、子孫シーンの読み込みが完了するまで 自シーンの読み込みを一旦停止し、子孫シーンの読み込み終了後、自シーンの読み込みを再開するための処理を実装しました。内容は以前のエントリーの通りです。子孫シーンとはしていますが、現在は子シーンのみの監視を行なうテストしか行なっておりません。

今回までの習作は以下の URL から確認できます。

http://www.dango-itimi.com/blog/swf/82/

page ボタンを押すと、サムネイル画像が複数読み込まれるページが表示されます。サムネイル画像を押下すると、大きな画像が画面下に読み込み表示されます。複数のサムネイル画像の読み込み途中で どれかサムネイル画像を押下すると、サムネイル画像の読み込みが一旦停止し、大きな画像を先に読み込んだ後、サムネイル画像の読み込みが再び開始されます。

その他実装内容として、ディレクトリの ID 表示に関して設定が可能となりました。以下はその仕様のルールとメモ。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月25日 03:45 | コメント (0) | トラックバック

FLASH tips update SWFAddress を用いたサイト構築3 外部データ読み込みに関する考察

Flash で製作された以下のような構造になっているページがあるとします。
page, btn, window はどれもムービークリップです。

page
├ btn1 --> window1
├ btn2 --> window2
├ …
└ btnN --> windowN

仕様は以下のようになっています。

・page 内に btn が複数(1~N)個ある
・各 btn を押すと 対応する window を開く
・各 window はブラウザで新規ウインドウで開くのではなく
 page 内の指定の位置(page前面、page右側等)にムービークリップとして表示する

更に外部データの扱いに関して以下のような仕様となっています。

・各 btn には外部から読み込んだ画像(サムネイル画像等)を表示
・window 内に表示するデータは btn が押された後に外部から読み込む

今までの私の AS2 での作りでは btn の画像が全て読み込み終了するまで btn は押せず window は開かないようにする、といったものにしていました。しかし btn に読み込む画像が多ければ多いほど各 window を開くまでの時間がかかってしまいます。

読み込み中断処理可能な AS3 からは次の仕様を考えていくことに。

・各 btn に表示する画像が読み込まれなくても各 btn は押下可能に
・各 btn 押下後は 全 btn の読み込みは中断し
 開く window 内で表示するデータを読み込む

ここでの考慮事項として、画像が表示されていない(読み込みが完了していない) btn は押せないようにしてほしい、という要望が挙がる場合もあるかもしれないので、画面遷移の仕様を決める段階でどうするか決めておいたほうがよさそうです。

更に次のような page 内処理で window の状態を監視する処理も考えていくことに。

・window 内のデータの読み込みが完了したら
 中断していた page 内の各 btn の画像読み込みを再び開始する

・window が閉じられ再び btn 選択 page 画面が表示されたら
 中断していた page 内の各 btn の画像読み込みを再び開始する

前者の方法ならば、window 内のデータを閲覧している間、バックグラウンドで全 btn のデータ読み込みを完了しておく、といったことが可能になります。
window から更に外部データを読み込む別ページを前面に表示する...といったいったものになってくると、後者のほうがいいかもしれません。

回線速度が上がっており、待機時間に関して考慮するのであるならば、まずは別の製作箇所優先 となっている今日ではありますが、よりよいテンポのいいページを製作するためにも、こういった工夫は随時行なっていけたらよいものです。

[ FLASH ] [ tips ] [ update ] 2009年03月16日 18:17 | コメント (0) | トラックバック

FLASH tips update SWFAddress を用いたサイト構築 習作2

シーン外部 swf 対応と読み込み中断処理実装や、表示切替処理最適化などを行ないました。今回までの習作は以下の URL から確認できます。

http://www.dango-itimi.com/blog/swf/81/

画面一番右上のボタンが 外部 swf を読み込んで表示するとなっております。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月09日 18:32 | コメント (0) | トラックバック

FLASH tips update SWFAddress を用いたサイト構築 習作

Progression で構築されたサイトが増える中、今後の Flash サイト製作ではディープリンク機能は欠かせないものになりそうです。というわけで、ディープリンク機能を実現するための SWFAddress を用いてのサイト構築を行なうためのライブラリを作成中。

SWFAddress を用いると、ユーザは URL 指定によりコンテンツ表示切替を行なう命令を いつでも行なうことが可能となります。これは、どのような表示状態からでも 指定した URL に対応するコンテンツ表示を行なうことができるシステム構築が必要になることを意味します。

どのような表示状態からでもコンテンツ表示切替が可能、とはいえ、矛盾が生じないためにある程度決め事が必要となります。現在作成中のシステムでは以下のような決め事を行ないました。

1)コンテンツA表示切替中に コンテンツBへの表示切替命令が行なわれた場合
 コンテンツA表示切替が終了するまでコンテンツBへの表示切替は行なわれない

2)コンテンツA表示切替中に 他コンテンツへの表示切替命令が 複数 行なわれた場合
 コンテンツA表示切替終了後は
 最後にリクエストのあったコンテンツ表切り替え命令に対するコンテンツを表示する

画像やボタンや画面遷移がとっても適当な今回の習作はこちら
http://www.dango-itimi.com/blog/swf/80/

ブラウザの[戻る][進む]にも対応しています。

存在しない URL が指定された場合の対処はまだ行なっておらず、適当な URL をアドレスバーに入力すると 処理が停止し画面が止まります。

[ FLASH ] [ tips ] [ update ] 2009年03月01日 20:39 | コメント (0) | トラックバック

FLASH tips Flash CS4 デフォルトで出力されるHTMLファイルから SWFAddress が正常に動作せず

Flash でディープリンク機能を実現するための SWFAddress を試してみることに(バージョンは 2.2)。しかしもっとも簡単なサンプルを作成するも、意図どおりに動作してくれず。
ブラウザの「戻る」「進む」を押すと SWFAddress.CHANGE イベントが実行されるはずなのですが、まったく呼ばれる気配がないのです。

原因は Flash CS4 のパブリッシュで書き出される HTML ファイルの一行目に ドキュメントタイプ宣言がないからだった模様です。SWFAddress のサンプルフォルダ(samples/splash)内にある indes.html ファイル一行目にある ドキュメントタイプ宣言を何も考えずそのままコピペしたら意図どおり正常に動作するようになりました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ちなみにドキュメントタイプ宣言は一杯あって、それぞれが何を示すのかよく意味がわかっておりません。

[ FLASH ] [ tips ] 2009年02月26日 02:54 | コメント (0) | トラックバック

FLASH tips update Flash CS4 勉強 3Dカメラマウス操作 + イージング

3Dカメラをマウスで操作する処理を実装。ドラッグすることでカメラが回転し、マウスホイールで拡大縮小します。
マウスにぴったりひっついてカクカクとカメラが動作するのもあまり面白くないので、イージング処理(イーズアウト/イーズイン)を加え、多少滑らかに動作させるようにしました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年01月03日 13:47 | コメント (0) | トラックバック

FLASH tips update Flash CS4 勉強 3Dテクスチャ

ようやくできました、遠近法 + テクスチャ描画。いつかできるようになってやるんだ…!と意気込んでから長かった。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2008年12月27日 20:10 | コメント (0) | トラックバック

FLASH info tips Flash CS4 Professional 用 Adobe Flash Player 10 アップデートできず

http://support.adobe.co.jp/faq/faq/qadoc.sv?230767+002#anc_b

上記サイトから Flash CS4 から使用される Flash Player のバージョンをアップできるようなので早速インストールしてみました。しかし手順通り行ってみるも更新が反映されず、Flash CS4 の ムービープレビューから表示される Flash Player のバージョンは WIN 10,0,2,54 のままです。

~\Adobe\Adobe Flash CS4\Players\FlashPlayer.exe

上記ディレクトリにある Flash Player を立ち上げて調査してみると バージョンは「WIN 10,0,12,36」と最新のものに置き換わっています。Flash CS4 のムービープレビューはどの Flash Player を見に行っているのだろうか?
原因がさっぱりわからないので一度 Flash CS4 をインストールし直す予定。
Cドライブに Flash CS4 をインストールしていないのが問題なのですかなあ。

追記)
ノートPCの Windows Vista で Flash CS4 をインストールし試してみたところ、同じく前の記事の問題が発生し、Flash CS4 ムービープレビューの Flash Player もバージョンアップされず。
手詰まりじゃあー!

追記2)
[ムービープレビュー]ではなく [ムービーのデバッグ] から立ち上がる Flash Player は どうやらバージョンアップが反映されているようなので、問題が解決するまで [ムービーのデバッグ]を用いることにします。

[ FLASH ] [ info ] [ tips ] 2008年12月25日 21:12 | コメント (0) | トラックバック

FLASH info tips Flash Player のバージョンにより Matrix3D.transformVector で Vector3D の値が 1/20 になるバグ?

Flash Player 10 から利用できる 3D関連処理の勉強をするためにネットとヘルプを見ながら格闘している最中です。それらしいものはできたのですが、期待する結果と異るものができている感じがする。なぜか3D変形を行ったオブジェクトが豆粒のような小ささになってしまうのです。

何がいけないのかと原因を調べてみると、Matrix3D.transformVector の処理でおかしくなってしまっているらしい。

var m:Matrix3D = new Matrix3D();
var v:Vector3D = new Vector3D(500, 1000, 0);
var c:Vector3D = m.transformVector(v);

trace(c); 出力結果
c: Vector3D(25, 50, 0)

特に何も変形を行っていないのですが、Matrix3D.transformVector を実行することにより Vector3D の各値が 1/20 の値になってしまっている。この 1/20 はいったいどこからきたのだ、と調べてみたところ Flash Player バージョンによっては上記バグが発生するらしき記述が英語のサイトにありました。

各ブラウザのバージョンの異なる Flash Player で試してみたところ以下のような結果に。

IE : Flash Player バージョン 10,0,2,54
 cの値 → Vector3D(25, 50, 0)

Opera : Flash Player バージョン 10.0.12.36
 cの値 → Vector3D(500, 1000, 0)

残る問題は Flash CS4 自体の Flash Player のバージョンをアップグレードするにはどうしたらよいのだ、という点だ。 →続き

[ FLASH ] [ info ] [ tips ] 2008年12月25日 19:11 | コメント (0) | トラックバック

FLASH info tips Flash CS4 : Flash Lite 書き出し swf 容量調査

Flash CS4 が Amazon から届いたので早速調査。

Flash CS3 で書き出した Flash Lite 用 swf は Flash 8 で書き出したものに比べ swf の容量が大きくなってしまう、という事がありました。→以前の記事

Flash CS4 ではどうなのかな~、と早速 swf を書き出してみたところ Flash CS3 と同じく Flash 8 に比べ容量が大きくなってしまうようです。
Flash 8 は当面 PC にインストールしておく必要がありそうです。

[ FLASH ] [ info ] [ tips ] 2008年12月23日 15:48 | コメント (0) | トラックバック

FLASH info tips Flash Player 10 正式リリースによる弊害 : Flash Player バージョンチェック

Flash Player 10 が正式にリリースされた、との事ですが、某ちゃんねる掲示板で Flash Player 10 を導入してみたところ、色々なサイトの Flash が見れなくなってしまったとのこと。


169 名前:Now_loading...774KB[] 投稿日:2008/10/16(木) 15:11:46 ID:FTqYc9sh
なんかバージョンが古いって判別されてしまうサイト多いな
Ver.10なのにVer.1として認識されてるっぽい

UWAAAAAAAAAAA!
こいつはまずい。思い当たる節がたくさんありすぎます。
まだ未熟な腕でバージョンチェックスクリプトを記述していた頃、Flash Player のバージョンチェックは 一桁目しか想定していませんでした。団子一味のゲームも動かなくなってしまうものが結構ありそう。
以前 当blog X-LABO でのバージョンチェックスクリプトメモも一桁目しか想定していなかったものでした。(二年くらい後で気づいて修正しました)

[ FLASH ] [ info ] [ tips ] 2008年10月16日 15:30 | コメント (0) | トラックバック

FLASH tips 子をn個持つ親クラスのコンストラクタには引数は指定しない

ようやっと初めての AS3 の業務に取り掛かっています。今までなんだかんだの制約があり AS3 でまともな業務を行なったことはありませんでした。早速 AS3 で気付いた点を以下に記述します。恐らくとっても何をいまさらなエントリーです。


親クラスのコンストラクタに引数が指定してある場合、子クラスでは明示的に super メソッドを呼び出す必要がでてくるようです。
例えば以下のような Person クラスを親に持つ Boy クラスと Girl クラスを Sample クラスから利用するには以下のようになります。

※package記述は略

public class Person{
	private var name:String;
	public function Person(name:String){
		this.name = name;
	}
}
public class Boy extends Person{
	public function Boy(name:String){
		super(name);
	}
}
public class Girl extends Person{
	public function Girl(name:String){
		super(name);
	}
}
public class Sample{
	public function Sample(){
		var boy:Boy = new Boy("boy");
		var girl:Girl = new Girl("girl");
	}
}

ここで Person クラスを親に持つクラスが Boyクラス、Girl クラス以外に複数増える場合、それら複数のクラス全てに明示的なコンストラクタの実装と super メソッドの呼び出しを行なう記述が必要になってしまいます。また、Person コンストラクタに引数を追加したいという場合、子クラス全てのコンストラクタと super メソッド呼び出しの箇所に修正を入れる必要がでてきてしまいます。

これを避けるためには、Personクラスのコンストラクタに引数を指定するのはやめ、別メソッドで同処理を行なうようにします。

public class Person{
	private var name:String;
	public function create(name:String):void{
		this.name = name;
	}
}
public class Boy extends Person{
}
public class Girl extends Person{
}
public class Sample{
	public function Sample(){
		var boy:Boy = new Boy();
		var girl:Girl = new Girl();
		boy.create("boy");
		girl.create("girl");
	}
}

[ FLASH ] [ tips ] 2008年08月12日 20:33 | コメント (0) | トラックバック

FLASH tips update 透視投影 再々勉強

業務に必要になりそうなので再度透視投影について勉強。最近丁度 Flashによる透視投影方法について詳しく解説してある記事があったので参考にさせてもらいました。

 ■てっく煮ブログ
 AS3.0 で 3D プログラミングを1から勉強する (1)
 AS3.0 で 3D プログラミングを1から勉強する (2) - 行列の導入
 AS3.0 で 3D プログラミングを1から勉強する (3) - 透視投影

なんともシンプルな式と方法で透視投影ができてしまうようで、今まで私が知っていた方法はなんだったのと言わんとぞばかりです。

試しとして以前作成したローグライクマップ自動生成処理と組み合わせてみました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2008年07月09日 10:31 | コメント (4) | トラックバック

FLASH tips Action Script 2.0 三項演算子内 getter 使用のコンパイルエラー

Action Script 2.0 三項演算子内で getter を使用する場合、代入対象の値を全て getter にするとコンパイルエラーが発生します。

以下のような Sampleクラスがあるとします。

class Sample{

	private var num1:Number = 1;
	private var num2:Number = 1;
	public function get _num1():Number{ return num1; }
	public function get _num2():Number{ return num2; }
}


ここで、以下の Test クラスのような三項演算子での Sample クラスの getter の利用は問題はありません。

class Test{

	public function Test(flg:Boolean){

		var sample:Sample = new Sample();

		var num1:Number = flg ? 1 : 2;
		var num2:Number = flg ? sample._num1 : 2;
		var num3:Number = flg ? 1 : sample._num2;
	}
}


しかし以下の用な記述を行うと、コンパイルエラーが発生します。

class Test{

	public function Test(flg:Boolean){

		var sample:Sample = new Sample();

		//コンパイルエラー発生
		var num:Number = flg ? sample._num1 : sample._num2;
	}
}
■エラー内容

代入ステートメントが一致しません。Function が見つかりましたが、Numberが必要です。

getter の sample._num1 と sample1._num2 がNumber型ではなく Function型として評価されてしまうようです。

上記エラーを避け、なおかつ三項演算子を使用したい場合は、キャストを用いて型変換を行えばよいようです。

class Test{

	public function Test(flg:Boolean){

		var sample:Sample = new Sample();

		//コンパイルエラーは発生せず
		var num:Number = flg ? Number(sample._num1) : Number(sample._num2);
	}
}

[ FLASH ] [ tips ] 2008年05月14日 20:27 | コメント (0) | トラックバック

ETC FLASH info tips 雑記といくつかメモ

山にこもって二ヶ月ほど経過しましたが、現在取り組んでいる仕事がなかなか終わりません。中途 細かい仕事がいくつか入り、頭がいい具合に煮詰まっております。

以下、業務を通していくつか覚えた事を参考サイトと共にメモ。


【 Subversion 上の html ファイルのブラウザ表示設定 】

Subversion 上の html ファイルにブラウザからアクセスすると、html のソースがブラウザに表示されます。しかし html ファイルに属性設定を行と、html をブラウザで開いたときのそのままの表示にすることができるようになります。この設定をしたおかげで、打ち合わせ時に Subversion 上のファイル一式を PC上にダウンロードしなくても 表示確認を簡単に行えるようになりました。

 日常の備忘録:: HTMLをSubversionで管理しながらWebで参照可能に
 http://www.kaede-software.com/2008/01/htmlsubversionw.html


【 デバイスフォント シェイプマスク適用にフィルタ設定 】

デバイスフォントにマスクをかける際、マスクはどのような形をしていようと、矩形マスクとして適用されてしまう問題があるようです。その問題を解決するために以下のサイトのような ビットマップキャッシュを用いた方法があります。

 fumiononaka.com : デバイスフォントが表示されない
 http://www.fumiononaka.com/TechNotes/Flash/FN0502002.html

上記サイトの他の方法として、デバイスフォントのテキストフィールドにフィルタ設定を行うと、ビットマップキャッシュを用いずとも、マスクは矩形として適用されず、シェイプの形そのままで適用することができるようです。


【 ローカル上で確認する際の 他バージョンへのswfへの変数アクセスの制限 】

FlashPlayer8で書き出した swf(8.swf) から FlashPlayer7 で書き出された swf(7.swf)を読み込む場合、ローカルPC上に配置している 8.swfを表示するhtmlをブラウザで開いて動作確認を行おうとしても、8.swf から 7.swf への変数へはアクセスできませんでした。

Flashのムービープレビューやネットワーク上では問題なく動作するため、おそらく他バージョンへのswfのローカルアクセスは制限されているのかもしれません。表示確認に、やや手間がかかってしまうのが面倒です。

[ ETC ] [ FLASH ] [ info ] [ tips ] 2008年05月14日 20:17 | コメント (0) | トラックバック

FLASH info tips FDT 3.0 Enterprise beta版で Refactor Moveコマンドがサポート

最近情報収集にうとくなっており見逃していました。
FlexBuilder なり FDT なり、早く Refactor Move コマンドがサポートされるようにならないかなあ、と鼻をほじほじしながら待ち望んでいたところ、FDT 3.0 Enterprise beta版 で Move コマンドがサポートされたとのこと。

http://fdt.powerflasher.com/blog/?p=40

早速利用してみましたが、oh ブラボー!としかいいようがありません。プログラミング中に、クラス名、メソッド名、変数名はおろか パッケージ名やパッケージ構造もモリモリ変更したくなる方にはうってつけのツールとなりました。

追記)ベータ版のせいなのか、パッケージ名付でクラスを newを行っている箇所に対しては Moveが実行されない等、まだ動作は完全ではない模様。

---

以下、Action Script での Refactor Rename コマンド実行における注意事項。
配列演算子による変数へのアクセスの記述は注意が必要となります。

▽続きを読む

[ FLASH ] [ info ] [ tips ] 2008年03月13日 21:42 | コメント (0) | トラックバック

FLASH tips Excelで開いているファイルは URLLoaderで読み込めない

今後のネットでの検索用に、20分ほどつまずいた ファイル読み込み時の簡単なエラーのメモ。

URLLoaderでcsvファイルを読み込む処理を作成し ローカルPC上で動作検証してみたところ、次のような csv ファイルが読み込めないという旨のメッセージが表示されました。

[IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2
text="Error #2032: ストリームエラー。 URL: file:///~/viewer.csv"]

原因は、読み込み対象の csv ファイルを Excel で開いていたからでした。Excelで開くことにより読み込み対象のファイルがロックされてしまっていたようです。Microsoft Office系のソフトは皆このようになるのでしょうか。メモ帳等のテキストエディタの場合は、この現象は起きません。csvファイルをExcelで開くようにファイル関連付けをしていると、ローカルPC上でのcsvファイル読み込み検証時、同じようにつまずく事があるかもしれません。

[ FLASH ] [ tips ] 2008年02月18日 16:57 | コメント (1) | トラックバック

FLASH tips update トレジャーボインゴ11

会社の携帯端末 docomo SO905i の Flash Lite 3.0 にてトレジャーボインゴの動作確認を行ってみました。そして見事動作させることができました。

---

■Flash Lite 3.0 搭載 携帯用アドレス

・サンプル5 直アドレス
 http://m.dango-itimi.com/trebo/test/5.swf

・携帯電話用 団子一味のアドレス
 http://m.dango-itimi.com/

・QRコード

携帯端末での操作方法は、「2」「8」「4」「6」キーでキャラクター移動&攻撃となっております。

携帯用のトレジャーボインゴは、フレーム分割処理というものを組み込んでいるため、マップ生成からステージ表示まで20秒くらい時間を必要とします。携帯版ではマップ生成中は「マップ生成中...」といった表示を行う予定です。

---

Flash Lite 3.0 が搭載されている docomo 905i シリーズのワークメモリは以下のページによると 一律 3072KB とのこと。

http://www.nttdocomo.co.jp/service/imode/make/content/spec/flash/index.html

Adobe Device Central CS3 のエミュレータ上では、トレジャーボインゴのワークメモリ使用数は 2400~2600KB 程度となっているので、携帯端末上でも問題なく動作してくれました。

現状わかっている問題点として、フロア切り替え後、階段をすぐさま下り次のフロアへ移動すると メモリ解放が上手く行われない、といったことがあるようです。使用メモリが上がったままになってしまい どんどん 3000KB に近づいいってしまう、という現象が起こってしまいます。

端末の性能がアップしていることからか、Flash Lite 2.0 が搭載されていた au よりも処理速度は早く動作しています。キャラクター等の移動速度は PC に比べると遅いですが、au よりは早く動作するようになりました。

docomo 905i シリーズから画面領域がいままでの倍となったので swf表示サイズを当初の予定通り倍にしています。ドット感が出ていい感じです。


■PC版はこちら

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2008年01月14日 22:21 | コメント (0) | トラックバック

FLASH tips 処理フレーム分割

「ローグライクマップ自動生成処理」を 現在作成しているFlashLiteゲーム「トレジャーボインゴ」に組み込んでみた所 携帯端末上ではエラーが発生し動作しなくなった、と以前blogに記述しました。1フレーム内で処理する行数が多すぎたためエラーが発生しているものと思われます。

「ローグライクマップ自動生成処理」のみを携帯端末で動作させてみたところ、同じくエラーが発生。「ローグライクマップ自動生成処理」を行う各クラス内のメソッドを複数のフレームをまたぎつつ呼び出す必要がありそうです。

対処として以下のような方法をとることにしました。


【 メインクラスの変更 】

メインとなる Sampleクラス があるとします。

class Sample{

	private var testA:TestA;
	private var testB:TestB;
	private var testC:TestC;

	public function Sample(root:MovieClip){

		testA = new TestA();
		testB = new TestB();
		testC = new TestC();

		testA.run();
		testB.run();
		testC.run();
	}
}

TestA~Cクラスの runメソッドを実行すると それぞれの処理行数が多すぎてエラーが発生してしまう、という場合、各runメソッドを1フレームにつき一つずつ実行するためには以下の様に変更します。

class Sample{

	private var testA:TestA;
	private var testB:TestB;
	private var testC:TestC;

	private var main:Function = null;

	public function Sample(root:MovieClip){

		testA = new TestA();
		testB = new TestB();
		testC = new TestC();

		main = funcA;
		var sc:Sample = this;
		root.onEnterFrame = function(){ sc.run(); }
	}
	private function run():Void{

		main();
	}
	private function funcA():Void{

		testA.run();
		main = funcB;
	}
	private function funcB():Void{

		testB.run();
		main = funcC;
	}
	private function funcC():Void{

		testC.run();
		main = end;
	}
	private function end():Void{
		~
	}
}

上記変更により、一つのフレームで実行される処理は mainメソッドのみとなります。実際は、mainメソッドの参照先メソッド(funcA~C)が実行されます。参照先メソッド内の処理終了後 次に行いたい処理を再び mainメソッドに代入し、次々とTestA~Cクラスの runメソッドを実行していきます。

【 各クラスの変更 】

ここで TestA クラス の内容が以下のようになっているとします。

class TestA{

	public function TestA(){}

	public function run():Void{

		func1();
		func2();
		func3();
	}
	private function func1():Void{
		~
	}
	private function func2():Void{
		~
	}
	private function func3():Void{
		~
	}
}

TestAクラスの func1~3 メソッドの処理行数が多く、TestA.runメソッドを実行するとエラーが発生してしまう場合、以下の用に変更します。

class TestA{

	private var main:Function = null;

	public function TestA(){}

	public function run():Boolean{

		if(main == null) main = func1;
		main();
		return main == null;
	}
	private function func1():Void{
		~
		main = func2;
	}
	private function func2():Void{
		~
		main = func3;
	}
	private function func3():Void{
		~
		main = null;
	}
}

また、Sampleクラス の funcAメソッド を以下の用に変更します。

	~
	private function funcA():Void{

		if(testA.run()) main = funcB;
	}
	~
}

これにより、TestAクラス内の各メソッドが1つのフレームで一つだけ実行されるようになります。TestA.runメソッドから true が返ると、TestAクラス内のすべての処理が終了したことを意味します。


現在は「ローグライクマップ自動生成処理」に上記のような対処を各クラスに追加/変更中...
しかしなかなか動作してくれず。

[ FLASH ] [ tips ] 2007年11月14日 20:28 | コメント (0) | トラックバック

FLASH tips Flashのバージョンの違いで FlashLite用 swf書き出しに容量の差が出る

Flash8で作成していたFlashLite用ゲームを Flash CS3(Flash9)でパブリッシュしてみると、Flash CS3で書き出される swfの方が容量が大きいことがあります。原因は詳しく調査はしていないのでわかりませんが、100KBの容量ギリギリにswfを作成している場合は とても困る問題です。

Flash CS3では ラスタデータの画像の書き出し処理に何か不備がある、といった記事をどこかで見かけたことがありますが、そこらへんが関係しているのかもしれません。

[ FLASH ] [ tips ] 2007年09月21日 10:40 | コメント (0) | トラックバック

FLASH tips Flex 3 パブリックベータ Refactorコマンド試用

Flex 3 パブリックベータがダウンロード可能になったようです。新機能の一つとして「コードのリファクタリング機能」がついたとのこと。こいつは待ちに待っていた機能ではありませんか、というわけで早速試してみることに。

Flex Builder 3 Public Beta
http://labs.adobe.com/technologies/flex/flexbuilder3/

ActionScript Project を作成し、メインクラスとなる Sample.asファイルを作成。

次にNavigatorウインドウから右クリックでメニュー表示を見てみると、ありました「Refactor」コマンド。
「Refactor」コマンドの項目内には「Rename」がありました。

ベータなのでまだこれだけなのかな、と思いつつ、Renameの項目からクラス名「Sample」を「Sample2」に変更してみると次のようなエラーダイアログが表示されました。

An unexpected exception occurred while performing the refactoring. See the error log for more details.

See the error log for more details.

なんだか Flex Builder 2 を使用していた時もこのようなエラーメッセージが表示されたことがあったような気がします。エラーの原因は少しわかりませんが、Flex Builderを何度か再起動してみたらエラーがでなくなりました。

「Rename」が成功すると、Sample.as内の「Sample」というクラス名とコンストラクタが「Sample2」にすべて変更されました。

次にtest.Testクラス(Test.as)を作成し、Sample2クラスからTestクラスのインスタンスを生成します。そしてTestクラスをRefactorコマンドでRenameし、クラス名を「Test2」にしてみるとどうなるか試してみます。

Previewボタンを押してみると、Testクラスを使用している全てのファイルの修正点を閲覧することが可能のようです。Sample2クラス内の「Test」の記述が「Test2」に変わることを教えてくれます。こ、こいつを待っていたんだぜ…!

今後できるようになるのかはわかりませんが、パッケージ名をRefactorコマンドで Rename等することはできない模様。属するパッケージを変更したい場合、今までどおり一個一個全てのクラスを修正していかなくてはならないようです。

Javaでeclipseによるリファクタリング機能説明のすごそうなページがありましたが、このようなことができるようになるのですかなあ。

実践!リファクタリング
http://gihyo.jp/magazine/wdpress/information/2007/vol37-refactoring

[ FLASH ] [ tips ] 2007年06月11日 19:12 | コメント (0) | トラックバック

FLASH tips ローグライクマップ自動生成3

■パーツ配置処理実装

自動生成したマップに、プレイヤー、次のフロアへ行くための階段、敵、背景パーツ、アイテム、グループ背景パーツをランダム配置可能にしました。


【 自動生成したマップ 】

□□□□□□□□□☆□□□□□□□□☆□□□□□☆□□□□□
□□□□□□□□□☆□□□□□□□□☆□□□□□☆□●■●□
□□□□□□□□□☆□□□□□□□□☆□●■●□◆◆◆◆◆□
□□□□□□□□□☆□□□□□□□□◆◆◆◆◆◆◆□●■■□
□□□□□□□□□☆□●■■■■●□◆□●◆●□☆□■■■□
□□□□□□□□□☆□■■■■◆◆◆◆□■◆■□☆□■■■□
□□□□□□□□□☆□■■■■◆●□☆□●◆●□☆□●■●□
□□□□□□□□□☆□■■■■◆■□☆□□◆□□☆□□□□□
□□□□□□□□□☆□●■■■◆■□☆☆☆◆◆◆☆☆☆☆☆☆
□□□□□□□□□◆◆◆◆◆■◆■□☆□□□□◆□□□□□□
□□□□□□□□□◆□●■◆■◆●□☆□●■●◆●■■■●□
□●■■■■■●□◆□■■◆■◆◆◆◆◆◆■■◆■■■■■□
□■■■■■■■□◆□■■◆◆◆●□☆□●■■◆■■■■■□
□■■■■■■■□◆□●●◆●■●□☆□●■■◆■■■■●□
□■■■■■■●□◆□□□◆□□□□☆□□□□□□□□□□□
□■■■■■◆◆◆◆☆☆☆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆☆☆
□■■■■■◆●□☆□□□□□□□□□□□□□□□□□◆□□
□■■■■■◆■□☆□□□□□□□□□□□□□□□□□◆□□
□■■■■■◆■□☆□□□□□□□□□□□□□□□□□◆□□
□■■■◆◆◆■□☆□□□□□□□□□□□□□□□□□◆□□
□●■●◆●■●□☆□□□□□□□□□□□□□□□□□◆□□
□□□□◆□□□□☆□□□□□□□□□□□□□□□□□◆□□
☆☆☆☆◆☆☆☆☆☆□□□□□□□□□□□□□□□□□◆□□
□□□□◆□□□□☆□□□□□□□□□□□□□□□□□◆□□
□●■●◆●■●□☆□□□□□□□□□□□□□□□●●◆●□
□■■■◆■■■□☆□□□□□□□□□□□□□□□■■◆■□
□■■■◆■■●□☆□□□□□□□□□□□□□□□●■◆■□
□■■■◆■■◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆■◆■□
□●■■◆■■●□☆□□□□□□□□□□□□□□□●■◆●□
□□□□□□□□□☆□□□□□□□□□□□□□□□□□□□□

【 各パーツ配置 】
                          ■■■ 
                    ■I2■ ■■■■■ 
                  ■■■■■■■ ■E1■ 
           ■■■■E3■ ■ ■■■   B1■E1 
           B2■■■■■■■ ■■■   ■■■ 
           ■■■■■■   ■■■   ■■■ 
           ■■■■■■    ■        
           ■■■■■■    ■■■      
         ■■■■■■■■      ■      
         ■ ■■■■■■   ■■■■■■■■■ 
 ■■■■■■■ ■ ■■■■■■■■■■■■■■■■■■ 
 ■■■■■■■ ■ ■I1■■■■   B1■■■■■■■■ 
 ■■■■■■■ ■ ■■■■■■   ■■■■■■■■■ 
 ■■■■■■■ ■   ■                
 ■■■■■■■■■   ■■■■■■■■■■■■■■■  
 ■E2■■■■■                   ■  
 ■■■■■■■                   ■  
 ■■■■■PE1                   ■  
 ■■E3■■■■                   ■  
 ■■■■■E2■                   ■  
    ■                      ■  
    ■                      ■  
    ■                      ■  
 ■■■■■■■                 ■■■■ 
 ■■■■■■■                 ■B2■■ 
 ■B5B6■■■■                 ■■■■ 
 ■B7B8■■■■■■■■■■■■■■■■■■■■■■■S■ 
 ■■■■■■■                 ■■■I1

P : プレイヤー
S : 階段
En : 敵
In : アイテム
Bn : 背景パーツ

nはIDを示す
10以上のIDはXと表示される

登場させたい各パーツのID一覧をメインクラスに渡すことでランダム配置されるように処理しています。

プレイヤーと階段は、すべての部屋が繋がるための通路上に配置されます。プレイヤーと階段以外は、すべての部屋が繋がるための通路上には配置されません。(ローグライクマップ自動生成2参照)

グループ背景パーツは、複数チップで構成される大きな背景パーツを配置したい場合に指定します。上記例ではB5~b8の四つの背景パーツが固まっている箇所がグループ背景パーツとなっています。

配置処理順序は以下のようにしています。

 1.指定した各パーツを最低ひとつずつ配置
 2.各パーツをランダム数配置

パーツ配置可能なチップがなくなった時点で配置処理は終わります。
グループ背景パーツに関しては、配置可能なチップをランダムで探索させているため、特定の探索数を上回った場合、配置はとりやめになるように処理しています。よって、グループ背景パーツを配置するように指定したにもかかわらず、フロア上には配置されない事もあります。FlashLiteでは1フレーム内で実行する処理行数はさほど多くはないと思われるので、探索可能上限はあまり大きく設定はできません。

■敵登場位置設定

1フロア内で一定以下の敵の数になったら敵がどこかに登場するようにします。
一歩一歩プレイヤーが歩くたびに敵がどこに登場するかを決定する処理は行わず、あらかじめどの位置に敵が登場するかを設定して処理軽減を行います。

設定したマップは以下のようになります。

                          ■■■ 
                    ■E■ ■■■■■ 
                  ■■■■■■■ ■■■ 
           ■■■■■■ ■ ■■■   ■■■ 
           ■■■■■■■■ ■■E   ■■■ 
           ■■■E■■   ■■■   ■E■ 
           ■■■■■■    ■        
           ■■■■■■    ■■■      
         ■■■■■■■■      ■      
         ■ ■■■E■■   ■■■■■■■■■ 
 ■■■■■■■ ■ ■■■■■■■■■■■■■■■■■■ 
 ■■■■■■■ ■ ■■■■■■   ■■■■■■■■E 
 ■■■■■■■ ■ ■■■■■■   ■E■■■■■■■ 
 ■■■■■■■ ■   ■                
 ■■■■■■■■■   ■■■■■■■■■■■■■■■  
 ■■■■■■■                   ■  
 ■■■■■■■                   ■  
 ■■■■■■■                   ■  
 ■■■■■■■                   ■  
 ■■■■■■■                   ■  
    ■                      ■  
    ■                      ■  
    ■                      ■  
 ■■■■■■■                 ■■■■ 
 ■■■■■■■                 ■■■■ 
 ■■■■■E■                 ■■■■ 
 ■■■■■E■■■■■■■■■■■■■■■■■■■■■■ 
 ■■■■■E■                 ■■■■

指定した数値分、敵登場位置が設定されます。

これにてローグライクマップ自動生成処理はほぼ完成。

[ FLASH ] [ tips ] 2007年05月31日 02:24 | コメント (0) | トラックバック

FLASH tips ローグライクマップ自動生成2

【 ランダム通路作成 】

全ての部屋が繋がるように通路を繋げた後は、各部屋からランダムで通路を延ばします。
その場合の独自に設定した仕様は以下の通りです。

・ランダムで延ばす通路は直進するのみ (処理軽減のため)
・部屋の角には通路は作らない (見た目を整えるため)
・二本以上の通路が隣り合わせることはないようにする (見た目を整えるため)

ランダムで通路を延ばすようにしたマップ自動生成例は次のようになります。

□□□□□□□☆□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□☆□□□□●■■■■■■■■■■■■■■■●□
□□□□□□□◆◆◆◆◆◆■■■■■■■■■■■■■■■■□
□□□□□□□◆□□□□●■■■■■■■■■■■■■■■■□
□□□□□□□◆□□□□■■■■■■■■■■■■■■■■■□
□□□□□□□◆□□□□■■■■■■■■■■■■■■■■■□
□□□□□□□◆□□□□●■■■■■■■■●◆●■■●◆●□
□□□□□□□◆□□□□□□□□□□□□□□◆□□□□◆□□
□□□□□□□◆☆☆☆☆☆☆☆☆☆☆☆☆☆◆◆☆☆☆☆◆☆☆
□□□□□□□◆□□□□□□□□□□□□□◆□□☆□□◆□□
□□□□□□□◆□□□□□□□□□□□□□◆□□☆□□◆□□
□□●■■●□◆□●■■■■■■■■■■●◆●□☆□●◆●□
□□■■■●□◆□■■■■■■■■■■■■■■□☆□■■■□
□□■■■◆◆◆□■■■■■■■■■■■■■■□☆□●■■□
□□■■■●□☆□■■■■■■■■■■■■■●□◆◆◆■■□
□□■■■■□☆□■■■■■■■■■■■■■◆◆◆□●■■□
□□■■■■□☆□●■■●◆●■■■■■■■●□☆□●◆●□
□□■■■■□☆□□□□□◆□□□□□□□□□□☆□□◆□□
□□■■■■□☆☆☆☆☆☆◆◆◆◆◆◆◆◆☆☆☆☆☆☆◆☆☆
□□■■■■□☆□□□□□□□□□□□□◆□□□☆□□◆□□
□□■■■■□☆□□□□□□□□□□□□◆□□□☆□●◆●□
□□■■■■□☆□□□□□□□□□□□□◆□□□☆□■■■□
□□■■■■□☆□□□□□□□□●■■●◆●●□☆□■■■□
□□■■■■□☆□□□□□□□□■■■■■■■□☆□■■■□
□□■■■■□☆□□□□□□□□■■■■■■●□☆□●■■□
□□■■■■□☆□□□□□□□□■■■■■■◆◆◆◆◆■■□
□□■■■■□☆□□□□□□□□■■■■■■●□☆□●■■□
□□■■■■□☆□□□□□□□□■■■■■■■□☆□■■■□
□□●■■●□☆□□□□□□□□●■■■■■●□☆□●■●□
□□□□□□□☆□□□□□□□□□□□□□□□□☆□□□□□

●は上下左右のチップに通路を作成できないチップです。部屋作成時に部屋の四隅に設定しています。また通路を作成する際、通路が開通した位置のチップの両側にあるチップに設定しています。こうすることで、部屋の角には通路は繋がらなくなり、また、通路が二本以上隣り合うことはならないように処理させています。

◆には移動しない背景オブジェクト(木や岩等)を配置できない箇所です。ランダムで背景オブジェクトを設置させたい場合、通路がふさがれて全ての部屋に移動できなくなってしまうことがないように設定しています。


【 部屋内部にも通路作成 】

ランダムで移動しない背景オブジェクトを配置する際、『プレイヤーオブジェクト』や次のフロアへ移動するための『階段』が、背景オブジェクトにふさがれてしまう可能性があることに気付きました。どちかでもふさがれてしまうと、次のフロアへ進むことができなくなってしまいます。

プレイヤーオブジェクトや階段が 背景オブジェクトにふさがれないようにするためには、一本の全ての部屋が繋がる通路を部屋内部にも作成します。通路がある箇所には背景オブジェクトは配置できないようにしているので、その通路上にプレイヤーオブジェクトや階段を配置すれば次のフロアへ進むことができないという事は起こらなくなります。

部屋内部にも通路を作成したマップ自動生成例は次のようになります。
この例ではランダム通路は作成していません。

□□□□□□□□□□□□□□□□☆□□□□□□□□□□□□□
□□□□□□□□□●■■■■●□☆□●■■■■■■■■■●□
□□□□□□□□□■■■■◆◆◆◆□■■■■■■■■■■■□
□□□□□□□□□■■■■◆●□◆□■■■■■■■■■■■□
□□□□□□□□□■■■■◆■□◆□■■■■■■■■■■■□
□□□□□□□□□■■■◆◆■□◆□■■■■■■■■■■■□
□□□□□□□□□●■●◆●●□◆□■■■■■■■■■■■□
□□□□□□□□□□□□◆□□□◆□■■■■■■■■■■■□
☆☆◆◆◆◆◆◆◆◆◆◆◆☆☆☆◆□■■■■■■■■■■■□
□□◆□□□☆□□□□□□□□□◆□■■■■■■■■■■■□
□●◆●●□☆□□□□□□□□□◆□■■■■■■■■■■■□
□■◆◆■□☆□□□□□□□□□◆□■■■■■■■■■■■□
□■■◆■□☆□□□□□□□□□◆□■■■■■■■■■■■□
□■■◆●□☆□□□□□□□□□◆□■■■■■■■■■■■□
□■◆◆◆◆◆□□□□□□□□□◆□■■■■■■■■■■■□
□●◆●●□◆□□□□□□□□□◆□■■■■■■■■■■■□
□□◆□□□◆□●■■■■■●□◆□■■■■■■■■■■■□
☆☆◆☆☆☆◆□■■■■■■■□◆□■■■■■■■■■■■□
□□◆□□□◆□■■■■■■■□◆□■■■■■■■■■■■□
□●◆●●□◆□■■■■■■■□◆□■■■■■■■■■■■□
□■◆■■□◆□■■■■■■■□◆□■■■■■■■■■■■□
□■◆■■□◆□■■■■■■■□◆□●■■■■■■■■■■□
□■◆■■□◆□●■■■■■■□◆◆◆◆◆◆◆◆◆◆◆◆◆□
□■◆■■□◆◆◆◆◆◆◆◆◆□☆□●■■■■■■■■■■□
□■◆■■□☆□●■■■■■■□☆□■■■■■■■■■■■□
□■◆■■□☆□■■■■■■■□☆□■■■■■■■■■■■□
□■◆■■□☆□■■■■■■■□☆□■■■■■■■■■■■□
□■◆■■□☆□■■■■■■■□☆□■■■■■■■■■■■□
□●◆■●□☆□●■■■■■●□☆□●■■■■■■■■■●□
□□□□□□☆□□□□□□□□□☆□□□□□□□□□□□□□

部屋内部に通路が二つ以上ある場合は、それら通路を接続し、通路が一つしかない部屋には、単純に通路がある壁と反対方向の壁まで必須通路を延ばしてします。

部屋内部にも通路開通後、ランダム通路を作成したマップ自動生成例は次のようになります。

□□□□□☆□□□□□□□□□□□□□□□□☆□□□□□□□
□□□□□☆□□□□□□□□□□□□□□□□☆□□□□□□□
□□□□□☆□□□□□□□□□□□□□□□□☆□□□□□□□
□□□□□☆□□□□□□□□□□□□□□□□☆□□□□□□□
□□□□□☆□□□□□□□□□□□□□□□□☆□□□□□□□
□●■●□☆□□□□□□□□□□□□□□□□☆□●■■■●□
□■◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆■■■■□
□■◆●□◆□□□□□□□□□□□□□□□□☆□●■■■■□
□■◆■□◆□□□□□□□□□□□□□□□□☆□●■■■■□
□■◆■□◆□□□□□□□□□□□□□□□□◆◆◆◆◆◆■□
□■◆■□◆□□□□□□□□□□□□□□□□◆□●■■◆■□
□■◆■□◆□□□□□□□□□□□□□□□□◆□■■■◆■□
□■◆■□◆□●■■■■■■■■■■■■●□◆□■■■◆■□
□■◆■□◆□●■■■■■■■■■■■■●□◆□■■■◆■□
□■◆■□◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆□●■●◆●□
□■◆■□☆□●■■■■■■■■■■■■●□☆□□□□◆□□
□●◆●□☆□●■●◆●■■■■■■■■●□☆☆☆☆◆◆☆☆
□□◆□□☆□□□□◆□□□□□□□□□□□☆□□□◆□□□
☆☆◆◆☆☆☆☆☆☆◆☆☆☆☆☆☆☆☆☆☆☆☆□□□◆□□□
□□□◆□□□☆□□◆□□□□□□□□□□□☆□□□◆□□□
□●●◆●●□☆□□◆□□□□□□□□□□□☆□□□◆□□□
□■■◆◆●□☆□□◆□□□□□□□□□□□☆□□●◆●●□
□■■■◆◆◆◆□□◆□□□□●■■■■●□☆□□■◆■■□
□■■■■●□◆◆◆◆◆◆◆◆◆◆◆◆◆◆□☆□□■◆■■□
□■■■■■□☆□□□□□□□●■■■■■□☆□□■◆■■□
□■■■■■□☆□□□□□□□■■■■■■□☆□□■◆■■□
□■■■■●□☆□□□□□□□●■■■■■□☆□□■◆■■□
□■■■■◆◆◆◆◆◆◆◆◆◆◆■■■■■□☆□□■◆■■□
□●■■■●□☆□□□□□□□●■■■■●□☆□□●◆■●□
□□□□□□□☆□□□□□□□□□□□□□□☆□□□□□□□

[ FLASH ] [ tips ] 2007年04月15日 18:28 | コメント (2) | トラックバック

FLASH tips ローグライクマップ自動生成

ネットのどこかにすでにあるかもしれませんが、↓こちらのサイトのアルゴリズムを参考にローグライク(不思議のダンジョン)系マップ自動生成プログラムをAS2で作成しました。
http://racanhack.sourceforge.jp/rhdoc/intromaze.html (Racanhack コード解説)

コードファイル一覧はこちらです。
・サンプルファイル game.zip

■使用方法

import game.automap.*;

var am:AutoMap = AutoMap._instance; //インスタンス取得
am.init(); //初期化&マップ生成
am.traceMap(); //マップ状態をtrace出力

■実行時のtrace出力内容例

□□□□□□□□□□□□□□□□□□☆□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□☆□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□☆□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□☆□□□□□□□□□□□
□□□□□□■■■■■■■■■■■■■□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□■□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□■□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□■□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□■□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□■□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□■□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□■□□□□□□□□□□□
□□□□□□■■■■■■■■■■■□■□□□□□□□□□□□
□□□□□□□□□□□□■□□□□□■□□□□□□□□□□□
☆☆☆☆☆☆■■■■■■■☆☆☆☆☆■□□□□□□□□□□□
□□□□□□■□□□☆□□□□□□□■□□□□□□□□□□□
□■■■■■■■■□☆□□□□□□□■□□□■■■■■■■□
□■■■■■■■■□☆□□□□□□□■■■■■■■■■■■□
□■■■■■■■■□☆□■■■■■□☆□□□■■■■■■■□
□■■■■■■■■□■■■■■■■□☆□□□■■■■■■■□
□■■■■■■■■□■□■■■■■□☆□□□□■□□□□□□
□■■■■■■■■□■□■■■■■□☆☆☆☆☆■■■■■☆☆
□■■■■■■■■□■□■■■■■□☆□□□□□□□□■□□
□■■■■■■■■■■□□■□□□□☆□□□□□□□□■□□
□■■■■■■■■□☆☆☆■■☆☆☆☆□□□□□□□□■□□
□■■■■■■■■□☆□□□■□□□☆□□□□□□■■■■□
□■■■■■■■■□☆□■■■■■□☆□□□□□□■■■■□
□■■■■■■■■□☆□■■■■■□☆□□□□□□■■■■□
□■■■■■■■■□☆□■■■■■□☆□□□□□□■■■■□
□□□□□□□□□□☆□□□□□□□☆□□□□□□□□□□□

黒い四角(■)は キャラクターが通れる場所、白い四角(□)が通れない場所、☆は暫定的に表示させているもので 上記サイトにある処理時に必要となる区切り線です(白い四角と同じ通れない場所です)。

デフォルトでマップサイズが30x30、部屋の最小サイズが3x3となっています。変更したい場合は、AutoMap.initメソッドに引数を設定します。

処理の流れとしては、AutoMap.initメソッドを実行すると、TipListクラスのlistプロパティにTipクラスのインスタンスが二次元配列(30x30)で格納されます。横から5番目、縦から10番目のTipクラスを取得したい場合、AutoMap.initメソッド呼出し後、以下のように記述します。

var tip:Tip = TipList._instance.getTip(5, 10);

Tipクラス内には、自身が通行可能な場所なのか、通行不可能な場所なのかの情報が格納されています。

今回のサンプルは、全ての部屋が必ずどこかの部屋に接続されるだけのものとなっています。ここからマップ構造に面白みを出していくためにランダムで通路をどこかに繋げたり、敵やアイテムをランダム配置するような処理を組み込んでいくことになります。

ソースコード内のSingletonの使い方は間違っているかもしれませんが、その時はごめんなさい。

[ FLASH ] [ tips ] 2007年03月21日 14:08 | コメント (0) | トラックバック

FLASH tips Singletonパターンでのインスタンス受け渡し省略化

デザインパターンのうちの一つである Singletonパターンは「指定したクラスのインスタンスが一つしか存在しないことを保証したい」場合に用いる、と文献に書いてあります。Singletonを適用したクラスのインスタンスをnewで生成しようとするとコンパイラがエラーを出して知らせてくれる、というものです。この用途では、結構大規模なプロジェクトではないと Singletonパターンを利用することは無いかなあ、と当初は考えスルーしてしまっておりました。

しかし Singletonパターンを用いると「どのクラスからも直に Singletonパターンを用いたクラスのインスタンスを 取得する事が可能になる」という用途もあることに気づきました。


一つしかインスタンスを生成しないAというクラスがあり、クラスAの機能を利用したいBというクラスがあるとします。

クラスAに Singletonパターンを適用しない場合、クラスBは、どこかのクラスで一度生成されたクラスAのインスタンスを、引数経由で取得します。ここで、クラスBのインスタンスが Cというクラス内で生成され、クラスCはクラスAの機能をまったく利用しない場合、クラスCには クラスAのインスタンスをクラスBへ受け渡すための通路を用意する必要があり、クラスCには不必要なクラスAに関する記述を用意する必要がでてきてしまいます。

クラスAに Singletonパターンを適用する場合、クラスBは引数経由でクラスAのインスタンスを取得する必要がなくなります。ここで、クラスBのインスタンスが Cというクラス内で生成される場合、クラスC内にはクラスAに関する記述はまったく必要がなくなります。


Singletonパターンを用いた簡単な例は以下の通りです。AS3では Singletonパターンの記述がやや困難なものになるようなので AS2で記述しています。上記例で言うと、ControlクラスがA、PersonクラスががB、UserクラスがC、となります。Mainクラスが Controlクラス(A)とUserクラス(C)を生成するメインとなるクラスです。
PersonクラスがControlクラス内に設定された文字列を利用したい場合のプログラムです。


//メインクラス
class Main {

	//初めに呼び出される
	public function Main(){
		
		var ctrl:Control = Control.getInstance();
		ctrl.init( "test" );
		
		var user:User = new User();
	}
}

//A : Singleton適用
class Control {
	
	private static var instance:Control = new Control();

	private var str:String;
	public function get _str():String{ return this.str; }
	
	private function Control(){}
	
	public static function getInstance():Control{
		return instance;
	}
	
	public function init( str:String ):Void{
		this.str = str;
	}
}

//C : Bを生成するクラス
class User {
	
	public function User(){
		new Person();
	}
}

//B : クラスAの機能を利用するクラス
class Person {
	
	public function Person(){
		var ctrl:Control = Control.getInstance();
		trace(ctrl._str); //testと出力される
	}	
}

Singletonパターンを用いない場合、Controlクラスのインスタンスを Userクラスのコンストラクタに引数で受け渡し、UserクラスからPersonクラスのコンストラクタの引数へ Controlクラスのインスタンスを受け渡す、という記述になります。Userクラスでは Controlクラスの機能は利用しないのに Controlクラスに関する記述が必要になってしまいます。

■AS3でのSingletonパターン記述法
akihiro kamijo : コンストラクタ (と Singleton)

[ FLASH ] [ tips ] 2007年01月28日 16:11 | コメント (2) | トラックバック

FLASH tips AS3 パッケージ記述簡略化

testパッケージ内にFirstというクラスが存在する場合、Class(Object)クラスを用いると以下のような記述が可能です。

var cls:Class = test.First;
new cls();

また、flash.utils.getDefinitionByName を用いると 文字列からクラスを取得できるようです。

var str:String = "test.First";
var cls:Class  = getDefinitionByName(str) as Class;
new cls();


異なるパッケージに同名のクラスが存在し、そのパッケージのネストがとても深く、ソースコードが横長になってしまうのを避けたい場合等に利用できそうです。

例)

var a1:Class = tkus.player.attack.sword.normal.action.First;
var a2:Class = tkus.player.attack.sword.normal.action.Second;

var e1:Class = tkus.player.attack.sword.normal.effect.First;
var e2:Class = tkus.player.attack.sword.normal.effect.Second;

//○○○が どのactionパッケージ内のクラスかを判別し、
//○○○に対応するeffectパッケージのクラスを配列に設定する
var list:Array = new Array();
     if( ○○○ is a1 ) list.push( new e1() );
else if( ○○○ is a2 ) list.push( new e2() );


[注意点1]
上記例の tkus.player.attack.sword.normal.action.First クラスのコンストラクタに引数が必要な場合でも swf書き出しが通ってしまいます。実行時に初めて引数の数が異なる旨のエラーが検出されます。

[注意点2]
flash.utils.getDefinitionByName は存在しないクラスの文字列を引数に渡しても FlexBuilderのエディターや、swf書き出し時 コンパイラはエラーを検出してくれません。swf実行時に初めてエラーが検出されます。
仮に flash.utils.getDefinitionByNameの 引数で渡したクラスのパッケージ構造が後に変更されることを考える場合、swf実行時のエラー(ReferenceError)をキャッチし、その内容をログに書き出す作りを想定する必要があるかもしれません。

[結論]
厳密な仕様にする場合、使用は禁物


[ Adobe LiveDocs ]
Class
getDefinitionByName()

[ FLASH ] [ tips ] 2007年01月23日 12:49 | コメント (0) | トラックバック

FLASH tips AS3 フレームに配置したサウンドの音量制御

ActionScript3ではサウンド制御方法が色々変更されているのでメモ。
オーサリングでフレームに配置したサウンドの音量制御方法です。

サウンドを配置したMovieClipシンボルがSampleクラスにリンケージ設定されている場合、スクリプトは以下の通り。

package {
	
	import flash.display.Sprite;
	import flash.media.SoundMixer;
	import flash.media.SoundTransform;
	
	public class Sample extends Sprite {
		
		//ボリューム(0~1)
		public static const VOL:Number = 0.3;
		
		public function Sample() {
			
			var transform:SoundTransform = SoundMixer.soundTransform;
			transform.volume = VOL;
			this.soundTransform = transform;
		}
	}
}

Sampleクラスが Document class ならば、Sampleクラスに属する全てのクラスのフレームサウンドの音量がいっせいに0.3に設定されます。

[ FLASH ] [ tips ] 2006年11月26日 17:34 | コメント (0) | トラックバック

FLASH tips リアルタイム 縁取り

指定したSpriteクラス内の描画データ周囲1ピクセルに、指定カラーをリアルタイムで付与するスクリプトを作成(AS3)。
Bitmap.drawメソッドでは、コピー対象となるオブジェクトの負の座標に位置する描画データはコピーできないものかと思っておりましたが、第二パラメータにMatrixオブジェクトを指定すれば可能だったのですね。Helpにしっかりと書いてありました。

コピー対象となるSpriteオブジェクト(spr)の負のX座標 -10ピクセルまでコピーしたい場合、以下のコードでBitmapDataにdrawが可能となります。

var n:int = 10;
var m:Matrix = new Matrix();
m.translate(n, 0);
var bmd:BitmapData = new BitmapData( spr.width + n, spr.height, true, 0x00000000 );
bmd.draw( spr, m );

▽続きを読む

[ FLASH ] [ tips ] 2006年10月29日 00:10 | コメント (0) | トラックバック

FLASH tips FlashLite2.0 W43Sでの検証2

引き続き auの W43S で性能検証。
ピンボールゲームのために作成したライブラリを用いて、直進するボールを反射させる動作のみを行うシンプルなFlashを作成し検証しました。

・Stage.scaleMode = "noScale" が使用可能

ドット絵Flashを用いる人には万歳といったところでしょうか。
今回の作成したFlashはステージサイズ200x200ピクセルで作成しましたが、Stage.scaleModeを設定することにより中心のドットのキャラクターが広がったりすることはありませんでした。

・速度

今回のFlashの速度は 24fps で書き出しましたが実機では体感 12fps 程度の速度となりました。
衝突と反射を行うライブラリはそこそこ処理が複雑になっているので、さらにシンプルなゲームならばもっと早い速度が出ると思われます。試しに反射処理は行わせず、X軸のボール移動のみ行わせたら 24fps 程度になりました。

速度はある程度がまんすれば、いままでより面白いFlashLiteゲームがどんどん作成できそうです。パズルゲーム等、今までは泣きながら作成してきましたが、FlashLite2.0が主流となれば容易く量産できそうです。
Docomo903iではFlashLite2.0は採用されなかった模様なので、無念で仕方がありません。

imode Flash対応端末の情報
http://www.nttdocomo.co.jp/service/imode/make/content/spec/flash/
一番下の欄に発売された(?) SH903i の項目があります。

今回の検証用に作成したFlashはこちら↓

▽続きを読む

[ FLASH ] [ tips ] 2006年10月22日 00:27 | コメント (0) | トラックバック

FLASH tips FlashLite2.0 W43Sでの検証

今までFlashLite2.0用に作成してきたピンボールゲームを au の W43S で動作検証。
PC上で動作するイメージで そのまま動いたらすごいだろうなあとワクワクしていましたが、案の定エラーが発生しゲーム起動すら行われませんでした。

少しずつソースをコメントアウトしつつ ようやく動作するようにまでこぎつけましたが、処理速度はヘロヘロで体感10fpsも出ていません。処理軽減を考えて制作してきましたが、これではちょっとピンボールゲームと呼ぶには厳しいですなあ。まともな速度を出すにはもっともっとシンプルな内容にしなくてはならなそうです。現在製作中のピンボールゲームは当面PC専用となりそうです。

今回わかったことは以下の通り。

・1フレーム内での処理つめこみすぎでエラー発生

PCのFlashLiteエミュレータでは問題ない 1フレーム内での処理行数でも、携帯端末のFlashLiteプレイヤーではエラーが発生する場合があるようです。どれくらいの処理行数でエラーが発生するかは端末によって異なると思います。エラー発生を防ぐにはフレームをまたいで処理を分割する必要がでてきそうです。MovieClip.onEnterFrameを織り交ぜたりせねばならなく面倒なことになりそうです。

・ビットマップ画像多様による画像赤色化現象は今までのFlashLiteと同じく起こる

W43S上で確認してみたところ、背景画像が真っ赤になってしまっていました。ビットマップ画像の多用は禁物。ベクターデータを使いましょう といったところでしょうか。おいどんはドット絵のビットマップ画像を多用したいんだ!


今後はもう少しシンプルなスクリプトで、どれほどの速度がでるのか検証したいところです。今回の結果は少しがっくりでしたが、全てActionScript2.0で書いたFlashが携帯端末上で動作したという点に関してはうれしいものです。

以下は最新版のピンボールゲーム。PC上でしか動作しません。

▽続きを読む

[ FLASH ] [ tips ] 2006年10月10日 19:47 | コメント (0) | トラックバック

FLASH tips update 軸測投影4 軸回転

FLASH tips Spriteクラスのインスタンス名はどうしよう

ソースコードをガリガリ書いていて引っかかりました。

AS3では MovieClipよりも多く使用するかもしれない Spriteクラス。
今まで MovieClipのインスタンス名はよく「mc」とすることが多かったのですが、Spriteクラスのインスタンス名はどうしたらよいものか。「sprite」では「mc」に比べちょっと長い気もします。いい名前はないものでしょうか。ただの「s」ではわかりにくいですよね。「st」かなあ…

また、MovieClip名には gameMC といった具合に MC を大文字でつけていました。マクロメディア推奨は game_mcといった具合にするのでしたっけ。SpriteシンボルがFlashオーサリング上で作成できるようになった時、どのような名前がメジャーになるのですかなあ。

[ FLASH ] [ tips ] 2006年08月29日 22:01 | コメント (0) | トラックバック

FLASH tips ActionScript3 as演算子

ActionScript3から使用可能な as 演算子。
括弧でくくる記述で利用してみました。

var list:Array = [ new Sample(1), new Sample(2), new Sample(3) ];
trace( (list[0] as Sample).x );

//Sampleクラスの内容
package{
	class Sample{
		public var x:Number;
		public function Sample( x:int ){ this.x = x; }
	}
}

通常list内の0番目の要素のプロパティxの値を取り出したい場合、次のような二行になります。

var s:Sample = list[0];
trace( s.x );

本当は以下のように一行にすっきりとまとめたいところですが、

trace( list[0].x );

これでは仮にSampleクラスのプロパティ x の変数名が、nx という変数名に変更されたとしても、コンパイラやソースエディタ(FlexBuilder2)はエラーを検出してくれないため、バグの元になる可能性があります。

ここで、一行で記述ができ、コンパイラがエラー検出もしてくれる as 演算子が役に立ちました。

trace( (list[0] as Sample).x );


ただしfor文で配列内の要素全てを回して利用する、といった場合、同じくActionScript3から使用可能な for each文を用いたほうが見栄えがよしなので、使いどころは限られてきそうです。

//for文
for( var i:int=0 ; i < list.length ; i++ ) trace( (list[i] as Sample).x );

//for each文
for each( var s:Sample in list ) trace( s.x );

・as 演算子についてはこちら

akihiro kamijo
http://weblogs.macromedia.com/akamijo/archives/2006/01/_as.cfm

[ FLASH ] [ tips ] 2006年08月28日 19:32 | コメント (2) | トラックバック

FLASH tips update 軸測投影3 ボックス

ボックス状に面を作り、そこにテクスチャをぺったんこ。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年08月28日 01:07 | コメント (0) | トラックバック

FLASH tips update 軸測投影2 テクスチャ

適当な面を作成し、そこにビットマップを貼り付け。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年08月27日 18:23 | コメント (0) | トラックバック

FLASH tips update 軸測投影

まずは、スクリプトで線を引くだけの軸測投影のサンプルを作成。
3D表現は計算量が多いからActionScript3ならば早く表示できるのではないかと考え、勉強がてらFlash9にて製作。
軸測投影は透視投影とは違い奥行きがありません。
クォータービューということもあり、今後団子一味のゲームに生かせそうです。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年08月27日 11:48 | コメント (0) | トラックバック

FLASH tips update 透視変換2 高さ

透視変換処理に高さの概念を追加。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年07月29日 18:51 | コメント (2) | トラックバック

FLASH tips update 透視変換 再勉強

1年くらい前に練習として制作した透視変換処理を再度見直しライブラリ化。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年07月27日 10:20 | コメント (2) | トラックバック

FLASH tips ActionScript3 PngEncoderクラス,JPEGEncoderクラス を用いてステージデータ画像化

せっかくActionScript3を勉強するならば、ActionScript3でのみできることを行うべきだ、というわけで、ActionScript2まででは結構大変だった swf画面の画像化を実装。
海外で公開されている、PngEncoderクラス または JPEGEncoderクラス を用いて実現します。

▽続きを読む

[ FLASH ] [ tips ] 2006年07月11日 00:11 | コメント (1) | トラックバック

FLASH tips ActionScript3勉強 事始め 手動で配置したステージ上のMC制御

Flash 9 Public Alpha と Flex Builder 2 を利用してAS3を勉強開始。

ネット上のAS3のサンプルを見てみるも、Flash 9のライブラリ内にあるMovieClipを動的に配置(addChildメソッドを利用)するサンプルはあるものの、手動でステージ上に配置したMovieClipの制御方法がわからず少々てこずりました。

解決までの悩んだ経路

1.お約束の Hello World! のみを表示する Sample.as ファイルを作成
2.Flash 9 上で「Document class」として「Sample」クラスを設定
3.パブリッシュしてみて Hello World! が表示されることを確認
4.Flash 9 上で適当な MovieClip を作成しステージ上に配置
5.配置した MovieClip のインスタンス名を mc と設定
6.パブリッシュしてみると以下のエラーが表示

ReferenceError: Error #1056: Sample のプロパティ mc を作成できません。
	at flash.display::Sprite/flash.display:Sprite::constructChildren()
	at flash.display::Sprite$iinit()
	at Sample$iinit()

7.小一時間悩む
8.Sample.as内のプロパティフィールドに次の一行を記述

public var mc:MovieClip;

9.パブリッシュが通る
10.Sample.as内から ステージ上に配置した mc を制御可能に

ううむ、なるほど。今までAS2では、MovieClipを継承したクラスを作成したことがなかったため、この発想はありませんでした。この仕様のおかげで、よりいっそう厳密にプロパティ管理が行え、安全なコーディングが可能になりそうです。

どうしてもソースコード内のプロパティに一々ステージ上のMovieClipのインスタンスを宣言するのが面倒という場合は、Sampleクラスをダイナミッククラスにすればよいようです。プロパティとして mc を宣言していなくても、Sampleクラス内では mc インスタンスを制御できるようになります。但しコンパイル時のチェックが甘くなるので注意。

参考 akihiro kamijo
dynamic クラス

[ FLASH ] [ tips ] 2006年07月10日 15:29 | コメント (0) | トラックバック

FLASH tips update ピンボール作成3 複雑な地形の仮背景組み込み

暫定的に複雑な地形の背景を組み込んでみました。
ピンボールゲームらしく動作するかどうかの検証用です。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年05月23日 23:24 | コメント (0) | トラックバック

FLASH tips ピンボールバーの処理 ボールがバーの裏表どちら側に衝突したか外積を用いて調査

以前作成したピンボールバーのサンプルにまだもろもろバグがあるようで、そのバグの原因を解決するために、ボールがバーの裏表どちら側に衝突したかを調べる必要がでてきました。
ボールがバーの裏表どちら側に衝突したかを調べるには、ベクトルの外積の性質を利用します。

▽続きを読む

[ FLASH ] [ tips ] 2006年05月19日 00:30 | コメント (0) | トラックバック

FLASH tips update レーザー状に反射 鋭角~鈍角頂点での反射

レーザー状に反射を行う処理で 複数の衝突対象オブジェクトが一点で交わっており、その一点にボール軌道が重なった場合、いらぬ方向に跳ね返ってしまっていたバグを修正。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年05月14日 19:29 | コメント (0) | トラックバック

FLASH tips vodafone FlashLite デバイスフォントに白縁取りの罠

FlashLite1 vodafoneのFlashPlayerにて問題発生。
どうやらデバイスフォントにデフォルトで白縁取りがついてしまう模様。
以下の図はデジカメで撮影した画像です。

※追記 2006/7/11
聞いた話で確認は取っておりませんが、V904SH以降のシリーズは白縁取りがつかなくなる仕様に変更された模様。これまた注意。

▽続きを読む

[ FLASH ] [ tips ] 2006年05月13日 16:13 | コメント (0) | トラックバック

FLASH tips update ピンボールバーの処理 途中3

両バーを実装&背景ラインオブジェクトを暫定的に配置。
背景ラインオブジェクトを配置してみてボールの自由落下との衝突処理を行ってみたところ、以前作成していたレーザ反射を行うためのライブラリにバグが見つかりました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年05月08日 03:12 | コメント (0) | トラックバック

FLASH tips update ピンボールバーの処理 途中2

途中経過2。バグ修正と各反射に必要なパラメータ調整、並びに衝突反射処理の処理内容変更。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年05月06日 17:07 | コメント (0) | トラックバック

FLASH tips update ピンボールのバーの処理 途中1

途中経過1。ようやくなんとか形になりました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2006年05月04日 14:38 | コメント (0) | トラックバック

FLASH tips ピンボールのバーの処理 バー動作時のボールへの衝突処理

バー動作時ボールへの衝突処理を行うサンプルswfを作成。作ってみて、以前のメモでは足りなかった考えがありましたので、それを追加しました。

▽続きを読む

[ FLASH ] [ tips ] 2006年04月16日 16:55 | コメント (0) | トラックバック

FLASH tips ピンボールのバーの処理 接線速度取得

ピンボールのバーの処理における前準備。バーの回転運動における接線速度取得処理を実装しそれを表示するサンプルを作成しました。

▽続きを読む

[ FLASH ] [ tips ] 2006年04月10日 00:37 | コメント (0) | トラックバック

FLASH TOOL info tips FDTでRefactorコマンドが欲しい

↓こちらのサイトのクラス名に関する記事を見まして、

GameManagerに代わる良い名前を
クラス命名のアンチパターン

私も何とかしないとなあとクラス名やメソッド名に てこ入れ作業を行っております。しかし、変更する度に発生する全ソースを書き換え作業をなんとか簡単にできないものかと考えました。

Eclipseにて、ソースコードのメソッド名等を変更したい場合、そのメソッドを参照している全てのソースコードを一括で書き換えてくれるRefactorコマンドというものがあるようなのですが、FDTで探してみた所そのコマンドは見つからず。

Flash Explorerから右クリックのRenameコマンドでクラス名を変更すると、そのクラスファイル内のクラス名は自動で変更してくれるようですが、それ以上の機能はないようです。ううむ、なんとかしたい。もどかしい。
ASDT もインストールしなおして見てみましたがRefactorコマンドはありませんでした。勢いあまって今まで手をつけていなかった FlexBuilder2 もインストールして調べてみましたがない模様。


しかしてクラス名をよくよく考え直すと難しいものがありますね。手本となるパターンがわからないので、何が正解かが判断つきにくいです。現在、パッケージがからんだ場合どのようなクラス名を設定してよいかという所に迷っています。

blockパッケージのBlockCollectionクラスというものを作成していたのですが、 block.BlockCollection ではなく block.Collection とするべきなのかどうなのか等。現在は block.Collection の方向で進めておりますが、そもそもCollectionというクラス名でもいいのかどうかなども考えてしまいます。

他参考サイト
Eclipseの自動リファクタリング・フィーチャーをなぜ、どのように使うか

[ FLASH ] [ TOOL ] [ info ] [ tips ] 2006年04月08日 18:27 | コメント (0) | トラックバック

FLASH tips 衝突判定高速化 ステージ区画分け

現在習作として作成しているピンボールゲームでは、ステージを一定のサイズに区画分けし、オブジェクト同士の衝突判定の高速化を図ることを考えております。
以前書きました「ブロック崩し衝突判定の高速化のために」のエントリーの応用のような感じを採ります。

▽続きを読む

[ FLASH ] [ tips ] 2006年04月07日 10:02 | コメント (0) | トラックバック

FLASH GRAPHIC tips ピンボールのバーの処理 メモ

ピンボールのバーの処理において、まとまった考えをメモ。
まだ実装部分にほとんど手を触れていないので、間違っていたり考えが足りない部分がある恐れがあります。

▽続きを読む

[ FLASH ] [ GRAPHIC ] [ tips ] 2006年04月03日 19:49 | コメント (6) | トラックバック

FLASH tips レーザー状に反射2

前回に続き衝突判定と反射処理の習作。
今回は衝突対象オブジェクトの各点もドラッグ&ドロップ可能にしました。

▽続きを読む

[ FLASH ] [ tips ] 2006年03月14日 02:54 | コメント (0) | トラックバック

FLASH tips レーザー状に反射

二点を結ぶ線分をレーザー状に反射させる為の処理を作成。
レーザー反射処理が作成できたことにより、1フレーム間での1対多数のオブジェクトの衝突判定と反射処理が可能になります。

▽続きを読む

[ FLASH ] [ tips ] 2006年03月11日 15:57 | コメント (0) | トラックバック

FLASH tips まるめ虫

円と線との衝突判定処理等で、どうも期待する結果が得られない場合があり、traceを書きまくって検証しおりました。traceウインドウでは変数Aの値と変数Bの値とが同値にもかかわらず、比較を行うとfalseを返す場合があるのです。なんだこりゃあっ と何時間も頭を沸騰させておりました。

そういえば OH! DANGO! JAM でもデータの妥当性チェックの時に、小数点以下の数値を含む変数が同値にもかかわらず比較を行うとfalseを返す場合がありました。

ここで以前どこかで見た「まるめ虫」について思い出し、検索。

F-site
まるめ虫
二星まるめ虫

恐らく上記まるめ虫に近い現象が起こっているのだろうと思い、Math.roundで変数を囲うことにより数値の比較がようやく期待する結果を返すようになりました。
traceウインドウ上では整数として表示されていても、小数点以下の数値を含んでいる場合があるということなのですかなあ。そうならば、やっかいです。

物理計算においての数値の比較には注意が必要ですね。

以下雑記。

現在は今まで作成していた交差判定メソッドなど全て作り直しております。(バグも結構ありました…)
今までObjectクラスにダイナミックにプロパティを追加し、それを点や線や円やベクトルを示すものとして処理してきましたが、それぞれ独立したクラスにしたほうが便利だと感じ、PointクラスやVectorクラスといった各専用のクラスを作成中です。独自の簡易geomパッケージを作成する方針で進めています。

追記)
ああ、でも実際に小数点を含むデータの比較の場合、Math.roundで丸めてしまうとまた問題がでますなあ… どうしよう。表示の誤差がでない範囲で、小数点以下3桁以降は切り捨てといった処理を行えばいいのだろうか。

[ FLASH ] [ tips ] 2006年03月08日 00:29 | コメント (2) | トラックバック

FLASH tips 円に対する線分の反射

前回のベクトル反射と今まで作ってきたもろもろの円関連の処理を行うメソッドを利用し、円に対する線分の反射処理を行い、反射に必要な各データを得られるメソッドを作成しました

▽続きを読む

[ FLASH ] [ tips ] 2006年03月02日 01:14 | コメント (0) | トラックバック

FLASH tips ベクトル反射

以前 斜面へのボールの反射方法を考えるために、ない頭を沸騰させて「斜面への衝突判定と反射」という記事を書きました。
今回その方法よりもスマートな方法で解を導き、反射に必要な各データを得られるメソッドを作成しました。

▽続きを読む

[ FLASH ] [ tips ] 2006年03月01日 19:12 | コメント (0) | トラックバック

FLASH tips 円と線分の交差判定

こちらのサイトによると円と線分の交差判定方法は、

線分の始点から終点へのベクトルを v、 線分の始点から球の中心へのベクトルを c とします。 
v・c<0 の時、球の中心が線分の始点よりも線分から遠くにあるので、
c の長さが球の半径よりも小さければ交差と判定します。 
v・c≧0 の時、v・c と v2 の長さを比べます (v 方向での c の長さと v の比較)。 
v・c の方が大きければ、球の中心が線分の終点よりも線分から遠くにあるので、 
線分の終点と球の中心の距離の 2 乗を求めて、 球の半径の 2 乗よりも小さければ交差と判定します。 
v2 の方が大きければ、球の中心から線分に降ろした足が線分上に 存在するはずです。
c2-(v・c/v2)*v・c でその長さの 2 乗が分かり、 球の半径の 2 乗よりも小さければ交差と判定します。 

とのことで、詳しくは理解していませんがActionScriptに移植しました。

▽続きを読む

[ FLASH ] [ tips ] 2006年02月23日 03:14 | トラックバック

FLASH tips 円と直線の交点を求める

ちまちまと勉強中。
↓こちらのサイトにあったC言語用のものをActionScriptにベタ移植。ひとまず自分の使うと思われるものだけを移植させてもらいました。
幾何計算 % C言語ライブラリー
中の処理で何を行っているか理解できていない部分があります故、移植内容にバグがありましたらごめんなさい。

▽続きを読む

[ FLASH ] [ tips ] 2006年02月09日 13:32 | コメント (0) | トラックバック

FLASH TOOL tips mtasc1.12ではクラス内のローカルメソッドからprivateプロパティにアクセス可能に

mtasc

最新バージョンのmtasc1.12内にあるCHANGES.txtによると、

allowed access to private variables inside local defined functions

と1.12の変更点について記されています。これは個人的にかなりうれしい変更点です。
これは何かといいますと、例えば次のような処理を行うクラスがあるとします。

class Test{

	public var data:Number = 1;

	public function Test( root:MovieClip ){

		var scope:Test = this;
		root.onEnterFrame = function(){ trace( scope.data ); };
	}
}

ここで変数dataが、Testクラス内でしか用いられず、他のクラスからは参照されない場合、修飾子はpublicではなくprivateにすべきです。しかし今までのmtascでは、この変数dataの修飾子をprivateにすると、文法が間違っているというエラーメッセージが表示されswfをコンパイルすることができませんでした。( 変数rootはMovieClipクラスでTestクラスとは違うため、MovieClipクラスのメソッドからTestクラスへのprivateなフィールドにはアクセスできません、という解釈だったのではないかと思われます。 )

なので今まで私は dataの修飾子をprivateにする場合、

var scope:Test = this;

という記述を

var scope = this;

という型宣言をはずした表記にし、コンパイル時のエラーチェックを回避する手段を用いていました。しかしこれですと scopeの型が指定されていないため、コンパイル時 変数のタイプミスのチェックなどは行ってくれず、バグが眠ってしまう可能性がありました。

class Test{

	private var data:Number = 1;

	public function Test( root:MovieClip ){

		var scope = this;
		//dataをdetaとタイポ。コンパイラーはエラーに気付かず。
		root.onEnterFrame = function(){ trace( scope.deta ); };
	}
}

この問題のみが一点ものすごくネックに感じていたのですが、mtasc1.12からはより堅固で安全なコーディングが可能になりそうです。コーディングスタイルもようやく定まりそうです。

[ FLASH ] [ TOOL ] [ tips ] 2006年02月03日 21:07 | コメント (0) | トラックバック

FLASH GRAPHIC tips ムービークリップ 縁取り フィルタテスト

イラストレータでキャラクターを描いてそれをFlashに読み込み利用する、といったことをよく行うのですが、キャラクターの線に少し貧弱な印象がある場合、Flash8から利用可能なフィルタを使うと結構効果的になるのではないかなあとテスト。

▽続きを読む

[ FLASH ] [ GRAPHIC ] [ tips ] 2006年01月24日 19:00 | コメント (0) | トラックバック

FLASH tips 円と直線の交点を求めるには…

円と直線の交点の座標を求めるためにウロウロ検索しておりましたところ、ちょうど求めたいサンプルプログラム(C言語)を載せているサイトがありました。
幾何計算 % C言語ライブラリー

しめしめこいつはいただきだぜ!と思ったのですが、その中で一点だけ困った点が。

円と直線の交点を求めるlncl関数にて

if(fgsq < accy){
	return (3);
}else{
	…

という記述があります。説明によるとlncl関数の戻り値は、『成功すると交点の数、交点が存在しないと-1を返します。』とあります。
交点が3つというのはなんだろう?
円と直線の交点は最大で二つまでになるはずですが、ソースを見て変数fgsqが何を意味しているか私の知識では理解できないので、これはどうしたらいいものか。返す交点の座標を設定する前に関数を終了させているので-1(エラー)の間違いですかなあ。

このページには二直線の交点の計算プログラムもあり、オーバーフローを防ぐための仕組みもあるようなので、以前私が作ったものよりこちらを使ったほうがよさそうですね。でも精度パラメータのaccyの値はどれくらいに設定したらいいのだろうか。

C言語によるサンプルなので、はてさて上手くASに移植できるかどうか。

[ FLASH ] [ tips ] 2006年01月23日 13:39 | コメント (0) | トラックバック

FLASH info tips FlashLiteはメールを受信したり電話がかかるとアウト

FlashLite1.xでは、どうやらswf再生中にメールを受信したり電話がかかってきたりすると、再生が途絶えアプリ選択画面に戻ってしまう あるいはswf再生ヘッドがフレーム1に戻ってしまうようです。
業務にて結構長く遊べるゲームを作っていたのですが、この仕様がややネックに。

iアプリは起動中に他のアプリケーションが立ち上がっても、その他のアプリケーションの起動終了後、元の状態へ復帰することが可能です。FlashLite2ではiアプリと同じような仕様になってほしいところ。せっかく高機能なゲームが作成できるようになるのですから!

後、本日発表された4GBハードディスク搭載の「W41T」のケータイWatchの記事で、FlashLite1.2対応と書かれているのですが、これはFlashLite1.1の強化バージョンなのですかなあ。それとも間違いなのかなんなのか。

http://k-tai.impress.co.jp/cda/article/news_toppage/27393.html

[ FLASH ] [ info ] [ tips ] 2006年01月19日 16:54 | コメント (2) | トラックバック

FLASH GRAPHIC tips BitmapData習作 残像拳

スト2等でよくみるスーパーコンボ時のキャラクターの青い残像エフェクト。現在作っているゲームで あのようなイメージの残像を表現したいなあと、専用のエフェクトクラスを作成。
簡単な残像表示を行うものだけのたいしたものでもありませんが、サンプルとクラスを置いておきます

▽続きを読む

[ FLASH ] [ GRAPHIC ] [ tips ] 2006年01月13日 02:37 | コメント (0) | トラックバック

FLASH tips 斜面への衝突判定と反射2

FLASH tips 斜面への衝突判定と反射1

ついにねんがんの物体斜面衝突反射判定方法をてにいれたぞ!


sha.pngshb.png

左図のような真っ直ぐな面にボールがぶつかった時の衝突判定と反射方法は簡単に実現可能です。
しかし右図のような斜面にボールがぶつかった場合の衝突判定と反射方法はどのようにしたら求めることができるのかなあと以前から悩んでおり、自分の中の課題の一つとなっていました。

今回三日ほど山に篭って頭を沸騰させた結果、なんとか実現方法への解を導き出せたので以下にその手順を記します。

▽続きを読む

[ FLASH ] [ tips ] 2005年11月13日 14:19 | コメント (0) | トラックバック

FLASH tips Colorクラス→ColorTransformクラス メモ

FlashPlayer8以降ではColorクラスは使用してはダメとのことなのでヘルプにしたがい、flash.geomパッケージのColorTransformクラスを使用することにしてみました。
しかしヘルプのColorTransformクラスの項をよく見ても、なんだか使用方法がよくわからない状況に。

ColorTransformコンストラクタ

この項の説明

redMultiplier:Number (オプション) - 赤の乗数の値 (0 ~ 1)。デフォルト値は 100 です。
greenMultiplier:Number (オプション) - 緑の乗数の値 (0 ~ 1)。デフォルト値は 100 です。
blueMultiplier:Number (オプション) - 青の乗数の値 (0 ~ 1)。デフォルト値は 100 です。
alphaMultiplier:Number (オプション) - アルファ透明度の乗数の値 (0 ~ 1)。デフォルト値は 100 です。

設定する値は(0~1)となっているのにデフォルト値は100という説明になっているのですよね。
色々試してみた結果、1を指定した場合100%を示し、0を指定した場合0%を示し、0.5と指定した場合50%を示している、ということらしい。

▽続きを読む

[ FLASH ] [ tips ] 2005年11月05日 23:50 | コメント (0) | トラックバック

FLASH TOOL tips eclipseにてFlashのtraceデバックウインドウ表示

Flash Log for Eclipse

fladdictの方のはてなブックマーク Flash馬鹿一代ブックマークにて以前知ったeclipse用のプラグイン。

これを用いるとFlashのプレビューで表示される出力ウインドウをeclipse上に表示することができます。Flash上でのプレビュー時以外に、swfを単体で立ち上げた時や ブラウザ上に表示されているswfのtrace文も拾ってくれる便利な代物です。

eclipse FDTでの開発時、eclipse上にてtrace文を表示する方法がないのがややネックに感じておりましたが、このプラグインを用いることにより万事解決。

但し、mtascでのswfの書き出しは完全ではない?模様で、mtascで書き出したswfを実行するとデバッグウインドウに警告メッセージが鬼の用に表示されることがあります。これを避けるために、trace文内に特定の文字列があるもののみ デバッグウインドウにtrace文の内容を表示する、といったフィルタリングを行うとよいようです。

▽続きを読む

[ FLASH ] [ TOOL ] [ tips ] 2005年09月25日 20:20 | コメント (0) | トラックバック

FLASH TOOL tips FDT プロジェクト外のクラスへのクラスパスの通し方

最近「eclipse + ASDT + mtasc + flashout」にてガリガリFlashの開発を行っておりましたが、最近それよりも強力そうな「FDT」というEclipseのflash統合開発環境が出たとの情報がありました。

eclipseのflash統合開発環境 FDT[ fladdict.net ]

使用してみた感想、さすが商用ということだけあって使い心地がとてもよいです。コードアシスト機能が便利ですね。今まで使用していたASDTのエディタではスペルチェック機能にバグがあるようで、たまに機能しなくなってしまい 都度eclipseを再起動せざるを得ない状況がよく起こっておりました。

FDTを色々いじってみて、概ね使用法は理解できたのですが、唯一 プロジェクト外のクラスへのクラスパスの通し方がわからず どうしたものかと何日も頭を悩ませておりましたが、先ほどようやく設定箇所を見つけられたのでメモしておきます。

▽続きを読む

[ FLASH ] [ TOOL ] [ tips ] 2005年09月07日 01:26 | コメント (0) | トラックバック

FLASH tips Flashステージ上の表示を画像データに

Flash8ではBitmapData.getPixelメソッドを用いることにより、ムービークリップの各ピクセルの色情報を取得することが可能です。得られた各ピクセル情報をサーバに送信しImageMagickで操作することにより、今まで不可能だったFlashステージ上の表示を画像データ化することが可能になりました。

FlashPlayer8→ImageMagick→画像生成(jpg,gif等)

早速サンプルを作ってみたところ、画像生成は見事成功しました。しかしサーバ側の処理(perl)がとっても重たいという問題が発生しました。ステージサイズが大きくなればなるほど処理が重たくなるので、レンタルサーバで行うのなら100x100ピクセルが限界かもしれません。

100x100=10000回 ピクセルを打つ処理を行うのだから、ステージサイズが大きいと処理が重たくなるのは当然ですよね。(500x500で250000回…)

私のWindowsマシン( Pentium4, CPU 3.20GHz, 1.00GB RAM )をサーバとしてCGIを動作させてみましたが、300x300ピクセルで30秒程度、400x400ピクセルで50秒程度、500x500ピクセルで一分半程度画像生成に時間がかかります。レンタルサーバでこんなに重たい処理を行うとサーバ管理者に怒られること必至でしょう。

何か他にうまい方法ないものですかねえ。スピードは変わらないかもしれませんが、JavaAppletにピクセルデータを渡してそこで画像に変換し… とするとサーバを返す必要が無く もっとうまくいきそうな気もしますがまだ未調査です。

FlashPlayer8→JavaApplet→画像生成?


追記)
Flash-JPのFlash8のスレッドよりFlashで作られているお絵描き掲示板情報がありました。画像書き出しも行われていますね。
サーバ側は何のソフトで動いているのだろう。Macromedia製品の何かかな?

http://playon.jp/mm/paint/

追記2)
上記お絵描き掲示板のJPG出力にはColdFusionを用いているようです。

SWFからGif画像変換するソフト

[ FLASH ] [ tips ] 2005年08月11日 01:25 | コメント (0) | トラックバック

FLASH tips POSTで巨大な文字列を送信すると処理が遅くなる

LoadVarsにてとても長い文字列を送信しようとする際、処理に大変時間がかかってしまいます。その為、FlashPlayerが無限ループと捉えてしまい エラーメッセージダイアログが表示され処理が止まってしまいます。

var loadObj:LoadVars = new LoadVars();
loadObj.str = とても長い文字列;
loadObj.send( URL, "_blank", "POST" ); //ブラウザ固まる


しかし、長い文字列を適度に分割して送信すれば 処理に時間がかかることはなくなるようです。

var loadObj:LoadVars = new LoadVars();
loadObj.str1 = 分割文字列1;
loadObj.str2 = 分割文字列2;
loadObj.send( URL, "_blank", "POST" );

[ FLASH ] [ tips ] 2005年08月09日 17:21 | コメント (0) | トラックバック

FLASH tips クラスファイルをUTF-8Nにしたら読み込めない

文字コードについて詳しくわかっておらず、ちょっとはまってしまいました。
Eclipseにて文字コードShift-JISのクラスファイルを読み込ませましたら、日本語がばけらったしてしまったのです。そこでUTF-8で保存すれば直るかなと思いました。
しかし何を誤ったか、UTF-8ではなくUTF-8Nで保存してしまいEclipseでは読み込めるものの今度はFlashで一向に読み込めないという事態に。パブリッシュかけても一向にクラスファイルを読み込んでくれず、うおお、何が悪いのだっ パッケージ宣言が悪いのかっ と久々に頭を沸騰させぐるぐる問題点を探しまわってしまいました。
きちんとUTF-8で保存すればよかったです。

[ FLASH ] [ tips ] 2005年07月11日 20:24 | コメント (0) | トラックバック

FLASH TOOL info tips Eclipse習得中

遅ればせながら今後の為にEclipseの使用法を習得中。[ →Eclipse説明 ]

Flashを開発するための導入方法(英語ですがビデオ説明なのでわかりやすいです)

最新版Eclipse3.1の日本語化ファイルがどこにあるのかまだ見つけておらず とりあえず英語のままで設定をしてみました。まだ使用初日なのでわからないことだらけです。

Eclipse付属(?)のエディタですが、フォントサイズの設定等どこですればいいのかちょっとわかりませんでした。文字が大きくやや使いにくいので、ひとまずasファイルはいつも使用しているvimに関連付けてvimで開くように設定。ただこれですとEclipseの便利な機能をあまり利用できないのですよね。
エディタをviのように操作できるプラグインがありましたので、おおっこれはっ!と導入してみたものの、有料のようでお金払わないとタイピング中にもポップアップ警告メッセージがぼこぼこ出てくるので使用は保留。

そして肝心の開発環境としての性能ですが、まだ少ししか使っていないものの これはなるほど便利だという感想です。

まず、EclipseにてFlashの開発環境を整えるために、MTASCというフリーのActionScript2.0コンパイラを用意します。
MTASCを用いるとJavaAppletのゲームを作成する感じで、スクリプトのみでswfを作成することができます。ただ、Flashという便利なオーサリング環境がありながら 何故JavaAppletのように、画像の配置などちまちまピクセル指定で行わなくてはならないのだと思い、MTASCはスペルチェック用程度にしか使用していませんでした。

EclipseでもMTASCを単品で用いたものと同じイメージで、スクリプトのみでswf製作を行いEclipseはソース管理などがしやすくなるためのものなのかな、と考えていました。
しかし 上記Eclipse導入方法を紹介しているサイトの07番目のビデオを見てみたところ、どうやらFlashのステージに配置されているムービークリップ(MC)やリンケージ設定されたMCも制御できることが判明。あら~
これにより、Eclipseでコーディング後 そのまますぐスペルチェック&Flashでパブリッシュせずに一瞬で動作確認という技ができます。Flashのパブリッシュは容量が大きくなればなるほど時間がかかるので 一瞬で動作確認できることは大変喜ばしいです。上記サイトの導入方法ビデオにあったFlashOutというプラグインがこの技を成すために一役買っているようですね。

他に、まだ私が理解できていないであろうEclipseの便利な機能を利用すれば 開発効率がよりアップできるのではないかと思います。

マクロメディアがEclipseベースのFlashアプリ開発ツールを提供するというニュースも先日あったことですしEclipseは今後じっくり研究していきたいです。

[ FLASH ] [ TOOL ] [ info ] [ tips ] 2005年07月08日 21:03 | コメント (1) | トラックバック

FLASH tips 黙示的なgetter/setterのメソッド名はどうするか

黙示的なgetter/setterのメソッド名はどのような指定にしたらのだろうと考えてみました。

▽続きを読む

[ FLASH ] [ tips ] 2005年06月30日 20:31 | コメント (0) | トラックバック

FLASH tips 外部ドメインのswfからその外部ドメイン内のデータの読み込み調査

Flashは外部ドメインのデータを読み込む事はセキュリティの都合上できなくなっておりますが、次のような場合はどうなのだろうと実験してみました。

サーバAとサーバBがあるとしまして、サーバAにはtest.swfとtest.mp3が設置してあります。test.swfからはtest.mp3を読み込んで再生します。

サーバA
http://www.testA.com/
http://www.testA.com/test.swf
http://www.testA.com/test.mp3

ここで、サーバBのtest.htmlからサーバAのtest.swfを貼り付けた場合、サーバAにあるtest.mp3は果たして再生されるのかどうか、を試してみました。

サーバB
http://www.testB.com/
http://www.testB.com/test.html

結果は問題なく再生されるようです。読み込めなかったら色々面倒な事をしなくてはならなそうだったので一安心です。

[ FLASH ] [ tips ] 2005年06月26日 20:42 | コメント (0) | トラックバック

FLASH tips FlashPlayerバージョンチェック

FlashPlayerバージョンチェックスクリプトをメモ

//@param ver 調査バージョン
function check(ver:Number):Boolean{
 return System.capabilities.version.split(" ")[1].split(",")[0] == ver;
}
//最新FlashPlayerダウンロードURL
http://www.adobe.com/go/getflashplayer

2007/6/19 ver.10以降にも対応できるように変更

[ FLASH ] [ tips ] 2005年06月24日 02:11 | コメント (0) | トラックバック

FLASH tips デバッグ

オンライン上swfの天才的デバッグ方法

なんと System.setClipboardという命令があったのですね。知りませんでした。
これを用いれば、web上のswfの動作確認にて一々テキストエリアにトレース内容を書き出したりする必要はなくなりそうです。

▽続きを読む

[ FLASH ] [ tips ] 2005年06月21日 11:04 | コメント (0) | トラックバック

FLASH tips 交差する直線の交点の座標を求める

台形の角と角とを結ぶ線の交わる点の座標を求めるための練習作品を作成しました。

▽続きを読む

[ FLASH ] [ tips ] 2005年06月16日 23:57 | コメント (2) | トラックバック

FLASH tips 台形の中心の座標を求めるには…

台形の中心点の座標( 角と角とを結ぶ二つの線の交わる点の座標 )を求めるために、昔に戻って数学をお勉強中。うう、頭痛い。

直線と0の関係
直線の方程式

台形の四隅の角の座標がわかっている場合、各角を結ぶ二つの直線の方程式を求め、それら二つの方程式を連立方程式として解けば求まるのかな…?
サンプル作って試してみよう。

[ FLASH ] [ tips ] 2005年06月15日 20:10 | コメント (0) | トラックバック

FLASH tips 携帯端末のキーロック

以前作成したエントリー『できそうでできなかった事 FlashLite1.0』にて 携帯端末のキーは押しっぱなしにしても一回でロックされてしまう、と書きました。しかしFLASH-japanのこちらのスレッド

【Flash Lite】keyPressについて

によりますと AUの機種の中にはPCと同じくキーを押しっぱなしでリピートされるものがあるようですね(私の機種はDoCoMoのSH900i)。これは頭に入れておこう。

[ FLASH ] [ tips ] 2005年06月05日 19:46 | コメント (2) | トラックバック

FLASH tips update WebServiceConnectorを用いてのAmazonWebService(AWS)の利用

TOPページにAmazonの広告を設置しました。マニアックな品物を紹介していく予定ですので、気が向きましたら私めのレビューでもご覧下さい。(まだ数点しか紹介しておりません。)TOPページのほか、Blogの個別記事等にも順次設置していく予定です。
リスレビューは最近作成していました人工無能の機能の一部を用い、AWSから引っ張ってきたデータを元に作成しています。またAmazonの商品画像データは外部サーバにあるためFlashから直接読み込むことが不可能なので、PHP経由で読み込ませています。
FlashMX2004ProのコンポーネントWebServiceConnectorを用いると簡単にAWSへ接続が可能です。
参考サイト
こちら側では紹介したい商品のASIN(商品番号)とその商品に対するレビューをExcel等で一覧にまとめておくだけで、他の必要なデータは全部AWSから自動で取得できます。Excelにまとめたデータはこのツールを用いてXMLに書き出しFlashで読み込ませています。
WebServiceConnectorから接続しているのはAWS3.0です。AWS4.0(Amazon-ECS)へはWebServiceConnectorから接続しようとしても、何故か繋ぐことが出来ないようです。但し、以前はAWS4.0へ接続しようとしただけでFlashアプリケーションごと強制終了をくらってしまっていたのですが、最近また試してみましたら 強制終了することはなくなったようです。ということは、問題があるのはAWS4.0側なのですかな…?

エラー時の処理をまだ組み込んでいないので、動作が怪しくなる場合があります。チカチカ変な動作をしてしまうので、その時はごめんなさい。

[ FLASH ] [ tips ] [ update ] 2005年06月04日 16:28 | コメント (0) | トラックバック

FLASH tips WindowsXP SP2をインストールしているとVBScriptが機能しない

先日作成したエントリー「TextFieldの表示サイズ最適化と swfからのdiv要素の高さ調節デモ」で教えていただいた、FlashからのFscommand経由のJavaScriptの呼び出しを行う実験を色々行っていたのですが、なんだかどうも機能しないという事態が。VBScriptが呼び出されていないのかな…?と頭を悩ましておりました。

そんな中ふと、Windows SP2を導入してからセキュリティチェックが異常なまでに高くなっていたことを思い出し、む… まさか嫌な予感がする、とネットで調べてみたのですが、どうやらSP2をインストールするとVBScript経由のJavaScriptが呼び出すことができなくなる、という情報がありました。

Windows XP SP2 (Service Pack2)でのJavaScriptの動作に関して

うむむ、これが本当ならば仕方がないであります。IEの場合ブラウザリサイズ時は常にブラウザのJavaScriptを呼びに行くというのはやめ、リサイズ開始から一定時間内にリサイズが行われない場合のみJavaScriptを呼び出すような処理にしよう。負荷軽減のため、むしろ全部のブラウザでそうしてしまってもいいですかな。

[ FLASH ] [ tips ] 2005年05月31日 00:14 | コメント (0) | トラックバック

FLASH TOOL tips FlashとMTASCのエラー解釈の違い

記述の仕方により、Flashではコンパイルが通るのにMTASCではコンパイルが通らない、という場合が出てくることがあります。

▽続きを読む

[ FLASH ] [ TOOL ] [ tips ] 2005年05月29日 01:55 | コメント (0) | トラックバック

FLASH TOOL tips VimからMTASCを利用しFlashの文法チェックを行う

Vimは内部から外部プログラムを実行できます。

例えばtest.plファイルをperlコマンドで実行する場合次のようなコードになります。

:!perl test.pl


Vimのこの機能を利用して、Vimでasファイル(ActionScript2.0のクラスファイル)を開いた場合、そのままVim上でFlashの文法チェックを行う方法を以下に記述します。
文法チェックに必要なツールとして、MTASCというフリーのActionScript2.0コンパイラーを使用します。

▽続きを読む

[ FLASH ] [ TOOL ] [ tips ] 2005年05月28日 19:57 | コメント (4) | トラックバック

FLASH TOOL tips ActionScript(.as)ファイルをVimに対応させる

以前エントリーしました「Vim6.3」にて、

>vimではファイルを開くと、拡張子を判別し自動で何のプログラムであるか認識し、関数名や変数名に色付けをしてくれる

と書きました。しかしFlashのasファイルはまだメジャーではないためか asファイルをVimで開いても専用の色づけは行ってくれず、ほとんど真っ黒な状態で表示されておりました。
ActionScriptの文法はJavaScriptとほぼ同じなので、どうにか「*.as」ファイルを「*.js」ファイルとして認識させる方法はないものかと調べていたのですが、結局方法がわからずじまい。そこで勇気を出して専用掲示板にて聞いてみた所、ずばりその解決する方法を教えていただきました。(解決方法はhelpに載っていたのですが全部英文だったためどこ見ればいいかわかっていませんでした…)
以下にその方法を記述します。

▽続きを読む

[ FLASH ] [ TOOL ] [ tips ] 2005年05月28日 15:14 | トラックバック

FLASH tips TextFieldの表示サイズ最適化と swfからのdiv要素の高さ調節デモ

TextFieldの表示サイズ最適化と swfからのdiv要素の高さ調節デモ

各TEXT1~3のボタンを押すとFIRSTと書かれたテキストエリアに指定の文字列が挿入され、そのテキストエリア内の文字が全て表示されるよう swfを覆うDIV要素の高さが変更されます。
またブラウザのウインドウサイズを変更すると、ウインドウの横幅に応じテキストエリアの表示サイズの最適化が行われ同時にswfを覆うDIV要素の高さも変更されます。

ブラウザのウインドウサイズを変更するたびにswfからJavaScriptを呼び出しているのですが、IEから見るとカチカチうるさいですね。なんとか解決したいですなあ。

参考
ActionScriptからステージサイズを変更できますか?
http://www.2mdc.com/resizableFlash/

問題点
100 パーセントに設定されている Flash Player ムービーが正常に表示されない

今回のデモはX-LABO内にswfを埋め込むための実験作品です。ただ、上記サイトに書かれている問題点を解決するためにHTMLのDOCTYPEの宣言を外さなくてはならないのですが MovableTypeでのDOCTYPEの宣言外して何か問題点がでやしないかちょっと不安です。

あ、後Macでも動作するのだろうか…

[ FLASH ] [ tips ] 2005年05月25日 01:28 | コメント (2) | トラックバック

FLASH tips TextField.autoSize

次の製作物の為のメモ
TextFieldに文字列を代入し、その文字列の文字数や行数に応じてダイナミックにTextFieldのサイズを変更したい場合、TextField.autoSizeを用います。
MovieClip.createTextFieldで生成する場合は heightとwidthの指定は0でもOK。

this.createTextField( "testTxt", 1, 0, 0, 0, 0 );
testTxt.text = "ああああああ\nいいいいいいいい";
testTxt.autoSize = true;


ちなみに1文字TextFieldに代入しautoSizeをかけ、そのTextFieldから取得できたwidthの値から数値4( 4という数値に関してはFlash helpのTextFormat.getTextExtentを参照 )を引くと、「フォント幅」+「フォントとフォント間のピクセル長」が得られるっぽい?
団子一味のROOMのFlash等で用いているビットマップフォント文章の表示は、この性質を利用して文字間を調節しています。

[ FLASH ] [ tips ] 2005年05月23日 13:48 | コメント (0) | トラックバック

FLASH tips パッケージ名とインスタンス名のバッティング

パッケージ名と同じインスタンス名を利用し、かつそのインスタンスから同パッケージに属する他のクラスを呼び出そうとすると、その時点で処理がぷっつり止まってしまう、という現象が起きます。この現象は忘れた頃にたまに引っかかり頭を悩まされます。

詳細は次の通り。

▽続きを読む

[ FLASH ] [ tips ] 2005年05月21日 01:22 | コメント (0) | トラックバック

FLASH tips ブロック崩し衝突判定の高速化の為に

block1.pngゲーム製作には欠かせないオブジェクトとオブジェクトの衝突判定。Flashでのブロック崩しの場合では通常 次のようなボールとブロックとの衝突判定を行うと思います。
 

//ブロック数(50個)分ループ
for( var i=0 ; i < 50 ; i++ ){

	//ボール(ballMC)とブロック(blockMC0~49)との衝突判定
	if( ballMC.hitTest( this[ "blockMC" + i ] ) == true ){

		//衝突時の処理実行
		~
	}
}


最近のPCは性能がよく多少難ありの処理でも問題なく軽快に動作します。上記のようなブロック数分ループさせ衝突判定を行う処理を記述するのはとても簡単で、開発時間短縮にもなりますので 通常はこれでまったく問題ないと思います。

しかしブロック数が50や100ならいいですが、1000や2000になったことを考えた場合、またはスペックの低いマシンでの動作を考えた場合、他には ボールが一つではなく50個100個になった場合等 上記衝突判定方法だと ものすごく処理が重たくなってしまいます。
最近FlashLite用ゲーム製作にてブロック崩しを作成したのですが、50個もあろうブロックを全て1フレーム毎に衝突判定していたら、とてもではありませんがゲームになりませんでした。今の携帯電話のFlashLiteですと fpsを12に設定していたとしても、fps3~5くらいの遅さにまでに落ち込み そのガクガク感たるや玉子王子も青ざめるほどの速度です。

そこで この問題を解決すべく、ボールとブロックとの衝突判定高速化の方法を考えました。この方法はブロックの数に関係なく、ボール1つに対するブロック衝突判定は4回で済みます。
hitTestで全検索を行う方法よりも多少複雑で面倒になりますが、処理速度アップを行いたい方はお試し下さい。
 

▽続きを読む

[ FLASH ] [ tips ] 2005年05月15日 13:23 | コメント (0) | トラックバック

FLASH tips update FlashとImageMagickの連携1

perlから操作できるImageMagickという画像処理ツールがあります。ImageMagickがサーバにインストールされていれば、どなたでも簡単に利用することができます。
今回、次のゲーム製作のためにImageMagickを利用してみることにしました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2005年04月28日 21:24 | コメント (0) | トラックバック

FLASH tips 三項演算子

今まで使用を避けてきた三項演算子

a ? x : y
aが真ならばxを評価しその結果を返す、aが負ならばyを評価しその結果を返す


これを使い始めてみようかなと考えました。業務で使用すると叱られそう(見難いから使うなと言われそう)なのですが、自分のFlashゲーム作成用スクリプト等に使用する分にはいいかなあと。

▽続きを読む

[ FLASH ] [ tips ] 2005年04月26日 13:34 | コメント (0) | トラックバック

FLASH tips FlashLite ネストを少なくする対処

FlashLite1.0~1.1はFlash4ベースのためfunctionがありません。function代わりにcall関数を用いて特定処理を呼び出しに行きます。
フレームに直接記述されるスクリプトは勿論functionではないので、処理途中の特定条件の時 returnを用いて処理を終了する、といった事を行うことができません。その為、自然とif文のネストが深くなり とても見難いスクリプトになってきてしまうことがあります。

▽続きを読む

[ FLASH ] [ tips ] 2005年04月22日 18:41 | コメント (0) | トラックバック

FLASH tips できそうでできなかった事 FlashLite1.0

FlashLite1.0用にゲームを作っておりました所、この機能を利用することはできるだろうと考えていたことが 実際作ってみたらさっぱり利用できませんでした、という事がいくつかありました。

▽続きを読む

[ FLASH ] [ tips ] 2005年04月19日 19:45 | コメント (0) | トラックバック

FLASH tips クロージャ

Flashでクロージャ

最初は なんだこれはと混乱しそうですが、用途例を説明する場合「例えばonEnterFrameに指定する関数に引数を(間接的に)指定できる」と言えば わかりそう。

onEnterFrameは以下(a)(b)のように関数の参照を指定して機能させます。指定する関数には引数無しのものしか指定することはできません。

(a)MovieClip.onEnterFrame = function(){};
(b)MovieClip.onEnterFrame = function名;

この関数の参照を渡すという点に注目して『関数の参照を返却する関数』をonEnterFrameに指定することにより、クロージャという書き方が実現するようです。

▽続きを読む

[ FLASH ] [ tips ] 2005年04月18日 12:11 | コメント (0) | トラックバック

FLASH tips 指定MCにダブルクリック通知機能を実装するクラス(setInterval版)

昨日作ったダブルクリック通知機能を実装するクラスのタイマー部分はsetInterval用いたら一行ですむことに気付き改変。MovieClip.getNextHigthestDepth()を用いないので深度管理の心配も無し。
問題がなければ タイマー関連はsetIntervalを用いたほうがよさそうですね。(setIntervalは設定した時間で画面が強制的に描画されてしまうのでしたっけ?)

▽続きを読む

[ FLASH ] [ tips ] 2005年04月18日 11:41 | コメント (3) | トラックバック

FLASH tips 指定MCにダブルクリック通知機能を実装するクラス

ROOM FlashのPCチェック時 OS画面上に表示されるアイコンの実行形式をダブルクリックにするため、ダブルクリック処理を実装するためのクラスをライブラリとして作成。

▽続きを読む

[ FLASH ] [ tips ] 2005年04月17日 21:15 | コメント (1) | トラックバック

FLASH tips DataSet内探索

DataSet内の全てのデータを網羅し処理するために どれどれよっこらしょとヘルプからDataSetのメソッド調べておりましたところ、なんだか美しきfor文の記述が生まれました。

▽続きを読む

[ FLASH ] [ tips ] 2005年04月14日 20:50 | コメント (0) | トラックバック

FLASH tips Flashから外部ドメインのファイルを読み込む

PHPメモ

Flashからはセキュリティの都合上、同一ドメイン内のファイルしか読むことができない為、外部ドメインにある画像ファイルやCGI、RSSの内容を読み込むことができません。
この問題を解決するためにPHPを用いて外部ドメインのファイルを読み込み、FlashからそのPHPを読み込みます。

▽続きを読む

[ FLASH ] [ tips ] 2005年04月14日 20:00 | コメント (1) | トラックバック

FLASH tips クラスパスでの相対パス指定

今まで個々のFlash作品のみに使用されるクラスは、classというディレクトリをflaファイルと同じ位置に作成し、flaファイルからはパブリッシュ設定のクラスパス指定に

『class/』

という相対パスで記述していました。しかし、この記述を行っているflaファイルを複数立ち上げた場合、どのflaファイルからも最初に開いたflaファイルのclassディレクトリを見に行ってしまっているようで、パブリッシュ時「クラスがロードできません」といったエラーが表示されてしまいます。
仕方がないので 一つのflaファイルの編集が終わったらFlashアプリケーションを閉じて、また違うflaファイルを立ち上げる…といった面倒くさい作業で上記エラーを回避しておりましたが、こりゃいかんと色々試してみたところ、次の記述

『./class/』

これで解決できました。
もっと早く気付けばよかったです。

[ FLASH ] [ tips ] 2005年04月09日 11:29 | コメント (0) | トラックバック

FLASH tips Macでの_ゴシックの表示

以前作成して色々有用しているビットマップテキストをスクリプトで制御し文章表示を行うコンポーネント。
漢字に関しましては 文字数が多く、埋め込みを行うと結構な容量になってしまうため、「_ゴシック」を埋め込み無し指定して Windowsから見た場合はMSゴシックが自動で表示されるようにしていました。Macから見た場合はOsakaになるのですかな。
以前はこの指定でMacOS9から見た時、アンチエイリアスオフのくっきりした漢字表示が行われていたと思ったのですが どうやら本日会社のMacOSXで表示確認してみたところ、_ゴシックにアンチエイリアスがかかってしまい意図しない表示になっていることが発覚。

▽続きを読む

[ FLASH ] [ tips ] 2005年04月07日 00:36 | コメント (0) | トラックバック

FLASH tips EventDispatcherの代行

Flash OOPの本を読んでいて知ったEventDispatcher。
自作クラス内の処理終了通知のために使用しようかと考えていましたが、他のシンプルなコードで終了を通知する機能を実装する方法があります。(Activationオブジェクト?)

▽続きを読む

[ FLASH ] [ tips ] 2005年04月05日 19:36 | コメント (2) | トラックバック