FlashにもUnityにも、それぞれブラウザのJavaScriptとの連携手段が用意されています。それなら、Unityからブラウザを介してFlashにジョイスティックの状態を送れば、Flashでもジョイスティックが使えるんじゃ？　と思いついたので、実際にやってみました。

• Unity Joystick Sensor（ソース一式あり）

ジョイスティックの状態を送る一連のプロセスについて。まずUnity側からです。Unityでは、物理デバイスの入力を整理・抽象化して、それぞれ名前をつけて扱うようになっています。メニューの Edit > Project Settings > Input にその設定があります。今回はひとまず生データを送りたいので、レバーの軸とボタンを一通り登録します。レバーのデッドゾーン（Dead）もゼロにしておきます。

気分の問題ですが、遅延を少なくするために、Unityの最大フレームレートを上げておきます。

function Awake()
{
	Application.targetFrameRate = 300;
}

次に、ジョイスティックの状態の変化をブラウザに毎フレーム送信します。ブラウザとの通信についてはUnity Web Player and browser communicationに説明があります。Application.ExternalCall()でHTML内のJavaScriptを呼び出すことができます。実際のスクリプトとしては以下のようになります。

var axes = new float[9];

function Update()
{
	for (var i = 1; i <9; i++) {
		var position = Input.GetAxis("Axis" + i);
		if (axes[i] != position) {
			axes[i] = position;
			turnOnLed();
			Application.ExternalCall("axisHandler", i, position);
		}
	}

	for (i = 0; i < 16; i++) {
		var buttonName = "Button" + i;
		if (Input.GetButtonDown(buttonName)) {
			turnOnLed();
			Application.ExternalCall("buttonHandler", i, 1);
		}
		if (Input.GetButtonUp(buttonName)) {
			turnOnLed();
			Application.ExternalCall("buttonHandler", i, 0);
		}
	}
}

ちょっとしたテスト兼演出として、関数を呼び出したときにLEDが点灯するようにしました。

function turnOnLed()
{
	GameObject.Find("Led").SendMessage("TurnOn");
}

次にHTMLです。Flashの埋め込みにはSWFObject 2.2を使用しています。Unityから呼び出されたJavaScriptの関数axisHandlerとbuttonHandlerが、ExternalInterfaceで登録したActionScriptの関数を呼び出します。

var attributes = {
	id:"Flash"
};
swfobject.embedSWF("Game.swf", ...);
...
<script type="text/javascript">
	function axisHandler(no, position) {
		document.getElementById("Flash").axisHandler(no, position);
	}

	function buttonHandler(no, state) {
		document.getElementById("Flash").buttonHandler(no, state);
	}
</script>

ExternalInterfaceは、ローカルファイルシステムではセキュリティのため動作しません。ローカルにApacheを立ててそこでテストするのが簡単です。また、ExternalInterfaceはいろいろ罠があって、ちょっとしたことで動かなくなることが多いようです。今回もそれでなぜかIEでだけ動かず、しばらくはまったんですが、教訓としては、SWFObjectのtest suiteから始めるのがいいと思います。

• SWFObject 2.2 test suite

ここの”Browser communication test page”がブラウザとの通信のサンプルです。test suiteというだけあって動くことが保証されていますので、このサンプルがサーバ上できちんと動くことを確かめてから少しずつ書き換えていくのがいいんじゃないでしょうか。

Flash側では、以下のようなクラスを作ってコールバック関数を登録し、メッセージを受け付けます。

package
{
	import flash.external.ExternalInterface;

	public class Joystick
	{
		public static const AXIS_MAX:int = 9;
		public static const BUTTON_MAX:int = 16;

		private var axes:Vector.<Number> = new Vector.<Number>(AXIS_MAX);
		private var buttons:Vector.<int> = new Vector.<int>(BUTTON_MAX);

		function Joystick()
		{
			if (ExternalInterface.available) {
				ExternalInterface.addCallback("axisHandler", axisHandler);
				ExternalInterface.addCallback("buttonHandler", buttonHandler);
			}
		}

		public function axisHandler(no:int, position:Number):void
		{
			axes[no] = position;
		}

		public function buttonHandler(no:int, state:int):void
		{
			buttons[no] = state;
		}

		public function getAxis(no:int):Number
		{
			return axes[no];
		}

		public function isButtonPressed(no:int):Boolean
		{
			return (buttons[no] == 1);
		}
	}
}

これでUnityからFlashまでジョイスティックの状態が伝わるようになりました。

ちなみに、いったんここまで作った後で、逆の方法に思い当たりました。つまり、UnityからFlashにジョイスティックの状態を流し込むのではなく、FlashからUnityにジョイスティックの状態を問い合わせるやり方です。もしこちらができれば、通信量も間違いも少なく好ましいでしょう。が、ブラウザからUnityの関数をSendMessageで呼び出したときに、戻り値が取得できないので断念しました。

さて、これで、「Unityのプラグインがインストールされていればジョイスティックでも操作できるFlash」ができました。アクロバティックなやり方ですが、信じがたいことにIE8、Firefox 3.6、Google Chrome 4それぞれでXbox360コントローラなどを使って普通に操作できるようです。特にアナログレバーを動かすとかなり頻繁にメッセージが送られるのでもつだろうかと心配だったんですが、レスポンスは悪くないし、CPU使用率もたいして上がりません。作る前はデータの間引きなども考えていたんですが、必要なさそうなのでやっていません。

で、実用性はどうかというと、微妙かなと思ってます。まず、ブラウザゲームでジョイスティックを使う文化がないですよね。それに、ジョイスティックを使いたい人はすでにJoyToKeyなどを使っているはずです。アナログレバーが使えるという違いはありますが、Flashゲームはまずマウスとキーボードで遊べるように作りますから、ゲームにアナログレバーの必要な操作を持ち込むわけにはいかないでしょう。そもそも、ジョイスティックを使うゲームなら最初からFlashではなくUnityで作れよという気もします。

あと、１つのウェブページに２つの標準でない技術を使うことになるので、それなりにリスクがありそうです。Unityの出力するHTMLファイルも結構複雑ですし（ちなみにコメントで説明が書かれているので読んでおくのがおすすめです）、環境によっては不具合が発生するかもしれません。導入には結構ためらうものがあります。

もしUnityのプラグインがある程度普及すれば（20％くらい？）メリットのほうが大きくなるかもしれません。また、いずれにせよFlashでジョイスティックを使う方法ができたということで、ウェブではなく、どこかへの展示用のFlashなどでしたら役に立つかもしれません。

……ということで、どうもひたすら微妙な感じ。こんな変態的なことをさせる前に、そもそもAdobeがFlashでジョイスティックをサポートしてくれたらいいんですけどね……。ゲーム志向にするとか考えてるならその辺検討してほしいなあ。

タイトルに意味はありません（笑）。このところXNAやiPhone周辺をずっと調べてたんですが、だいぶ落ちついてきたので、久しぶりのwonderfl新作です。ぼーっと眺めるのにいいんじゃないでしょうか。

架線柱のティアリングがちょっとひどいです。入れたとたんに一気に作る気をなくしかけたくらい。たぶんワーストケースに近いんじゃないかと……。

• Hello Perspective World

通常のマウスドラッグだけでなく、Shift＋ドラッグやCtrl＋ドラッグで回転操作ができるので試してみてください。Google Earthとだいたい同じ操作になっているようです。

短いコードですが、コアになるのはGoogleMapsCamera3Dクラスで、PV3DのCamera3Dクラスを拡張して、マップに同期する投影行列を与えています。Googleマップのワールド座標系は、東方向がX軸プラスで0?256、南方向がY軸プラスで0?256、上方向がZ軸プラスの左手座標系になっていますが、この座標系上に直接PV3Dのオブジェクトを描画することができます。

せっかくなので、もっと面白いものを表示してみましょう。

• Hello Perspective World 2

東京駅前にワイバーン。3Dモデルは26℃さん制作のをお借りしました。かっこいいですねー。

なにかいる

ズサさんのねぎミクモデルをrectさんのところからお借りしました。ありがとうございます。こんな感じで、小さなものから大きなものまで大丈夫です。ちなみに拙作でも同じ方法で車体を描画しています。

あとは平面投影シャドウあたりが欲しいですね。PV3Dでどうするのがいいのか調査中。

• 3D Perspective in the Maps API for Flash!
• Google Maps API for Flash – 3D Maps – Google Maps API for Flash

Google Maps APIの担当者さまのご好意でAPIを公開前に触らせていただきましたので、2D自動車シミュレーターを3D化してみました。まだ2車種しかないし、モデリングも適当だし、ホイールも回らないし、ブレーキランプや方向指示器も点灯しないしでやることが山積みなんですが、とりあえず仮公開。

• 2D Driving Simulator on Google Maps (Perspective)

右のCamera Controlで視点を操作できます。ドロップダウンメニューで、車体前方を上にするか、北を上にするかを切り替えることができます。

Googleマップ版でも画面が回転するようにしてほしいという要望は結構いただいてたんですが、これまでAPIの制約でできませんでした。今回のアップデートで、回転できるようになっただけでなく、傾斜で遠方まで見えるようになったので、だいぶ走りやすくなったんじゃないかと思います。

実のところ、もっと視点を下げて3Dレースゲーのようにしたいんですが、手前のタイルが欠けたり、遠方のタイルの読み込みと描画でパフォーマンスが極端に悪くなってしまうので難しいようです。まあ、そこまで極端な視点を使いたいのはこのアプリくらいでしょうからね（笑）。

あと、困ったことがひとつあって、「2D自動車シミュレーター」なのにうっかり3D表示になってしまったという……。2Dを取っても3Dに変えてもつまらない名前になってしまうし、内部的には2D処理のままだし、そのままでいいかみたいな（……いいのか？）。

2D自動車シミュレーター自体根本的にどうにかしないとと思ってるんですが、他にやることがいろいろあって進展がないです。iPhone版とかどうでしょうね？

剛体を動かすにはもうBox2Dのような物理エンジンを使えばいいので、何か自分で動かすならやわらかいものかな、でも布とかメタボールとかもう皆やってるしなーとあれこれ考えていたところ、ローテクなやわらかボールを思いついたので作ってみました（というか自分ローテクしか無理）。たぶん意外となかったタイプ。

ばね法則でボールをやわらかく反射させつつ、ボールと壁、またはボール同士の距離によって見た目を変形させてます。ここまで単純化すると２点以上に同時に接触した場合に対処できないので、どうなるか心配だったんですが、ぎりぎり許容範囲？　ボールの数が多いとさすがにエラーが目立つ感じです。

対戦格闘ゲームの必殺技コマンド入力の実験をしてみました。カーソルキーまたはテンキーでレバー、スペースキー・Ctrlキーでパンチボタン、Shiftキーでキックボタンです。技の名前は気にしない方向でひとつ。

判定方法は、リングバッファに過去一定フレームの入力状態を蓄積して、バッファに各コマンドのパターンが含まれているかどうかを毎フレームチェックしています。

いろんな種類のコマンドを、できるだけ簡単なスクリプトひとつで検出できるよう考えてみたんですが（コナミコマンドも大丈夫！）、実際のゲームで汎用的に使えるかどうかは自信がないです。たぶん何か不都合が出てくると思う。そうでなくても、たとえば溜めコマンドなら、溜めはじめた時点でモーションを移行したりする必要が出てくるでしょうし。

Warp Smashにしょーもないバグを発見。あとでこっそり直しておこう……。

どこかの絵を見て連想したので作ってみました。いわゆるポンのバリエーションで、マウスクリックでパドルが反対側にワープします。せっかくなので、BlurFilterを使ってパドルにモーションブラーをかけてみたりしました。

パドルをボールに合わせるのに加えて、パドルを早く反対側に移動させないとボールが返しにくい、でも早くクリックしすぎても駄目というタイミングゲームにもなっているのがミソかなと勝手に思ってます。だいたいゲームというのは、アクションにせよ何にせよ、プレイヤーに２つ以上のことを同時にさせると面白くなるんじゃないかと。１つだとどうすればいいかすぐ分かってしまうので。

ただ、マウスカーソルがFlashからはみ出さないように頑張るという不自然な３つ目が出てきてしまって微妙。マウスカーソル自体邪魔だし、ブラウザゲームでは、マウスが使えるといってもネイティブアプリケーションと同じようには扱えないってことでしょうか。

今日活躍のプチ関数。

private function clamp(n:Number, min:Number, max:Number):Number {
	if (n < min) { n = min; }
	if (n > max) { n = max; }
	return n;
}

スコアのカンストつき加算にまで乱用してたり。

　
score = clamp(score + 1, 0, 9999);
　

作る前は100行ゲームを意識してたんですが、こういうのが好きな体質なので無理っぽいです……。

• 気体のような何か | wonderfl build flash online

wonderflのパーティクル祭りがすごいことになってるので急遽制作。マウスでピストンを動かして圧縮したりできます。物理的ツッコミはなしの方向で……。

Tweenerの練習がてら、有名な三角形トリックをアニメーションさせてみました。けど、こうやって動かすとバレバレになってしまうかなー。

配色や線の太さなどがなかなか決まらなくて、かなり無駄なリビルドを繰り返しました。これくらい簡単な絵でも、最初にきちんとスケッチしたほうがいいようです。僕の場合。

で、Tweener面白いですね（いまさらすぎる。何周遅れだろう？）。正直、ウェブでぼーっと眺めていた限りでは、こんな処理をライブラリ化する必要があるんだろうかと首を傾げてたんですが、簡単なシーケンスも組めるし、ベジェ曲線やスプライン曲線でも動かせるし、何より動きを試すコストがぐっと下がるのが大きいです。なるほど、Flasherの人たちはこれで心地よい動きをさくさく作ってたのか、と納得。

簡単そうなことが実は意外に重荷になっていて、さらに簡単にすることで大きな利益が得られるようなことがあるのかもしれないなと思いました。その系統だと、例えばこういうプチ関数が好きなんですが、どうでしょうね。

// [n, m)の乱数を取得
function random(n:Number, m:Number):Number {
	return n + Math.random() * (m - n);
}

// 自乗を取得
function square(n:Number):Number {
	return n * n;
}

// nを[s0, s1]から[d0, d1]に変換
function linearTransform(n:Number, s0:Number, s1:Number, d0:Number, d1:Number):Number {
	return (d0 + (n - s0) * (d1 - d0) / (s1 - s0));
}

インライン最適化のないActionScriptだとちょっと使うのをためらいますが。

• PS2 Firework (Particles and Motion blur)

元ネタはPS2が出たときのこれ。

• 「次世代プレイステーション」の基本仕様を公開、国内発売はこの冬を予定

この花火デモ、洗面台のアヒルと並んで人気でしたけど、難度は一番低いですよね。MSが対抗意識丸出しでXboxでも似たようなデモを出してきたり、DirectX SDKのサンプルにも入れてきたりして、当時ちょっと面白かったです。

Flashについてですが、直径0?16ピクセルでプリレンダリングしたパーティクルをBitmapDataにcopyPixelsで描画してフレームを作成し、drawで加算半透明で10枚合成してモーションブラーをかけています。最初はパーティクルをShapeやBitmapDataのdrawで描画していたんですが、案の定ものすごく遅かったのでcopyPixelsに置きかえました。アンチエイリアスがかからないので描画品質は落ちますが、７倍くらい速くなってます。copyPixelsだとパーティクルの重なりで加算合成ができませんが、そこはモーションブラーで明るくなってくれるだろうと。

ちなみにマウスをぐりぐり回すとブラーで楽しいです。こんな感じ。

火花の照り返しは、テクスチャにdrawで適当なサイズとアルファで描画して、床ポリゴン２枚に貼りつけています。Flash 10ではパースペクティブ補正つきでポリゴンが描画できるので、普通に火花と描画位置がぴったり合うのが嬉しいところです。

また、座標変換にFlash 10で新しく追加された3Dベクトル・行列クラスを使用しています。wonderflのおかげでこのAPIの存在を知りました。ただ、このAPIについてはかなり独特の癖やバグがあったり、Flash Playerがクラッシュしたりして（まさにCrash Playerってやかましい）、あれこれ調べまわるはめに。せっかくなので、これまで分かったことについて後でまとめてみるつもりです。

あと、ActionScriptの最適化で気づいたポイントですが、アクセサ（set、get）はあくまで関数だということ。APIのプロパティにアクセスするときなど、つい普通の変数を読み書きしているつもりで、遅い関数呼び出しをしてしまっていることに気づきにくいので要注意だと思いました。そのあたりをチェックしたら描画込みであっさり倍以上速くなったりしています。他にもいろいろチューニングして、それでもCore 2 Duo E8500-3.16GHz機で１フレームに20ミリ秒ほどかかってますが……wonderflを見るような人なら大丈夫でしょう、たぶん。

それと、wonderflのコードがうまく埋め込めない感じなんですが、他のブログでも同じ表示になってるみたい？　一時的なものなんでしょうか。