タンクを作ってみる(見た目篇)

taro taro

こんにちはtaroです. 最近RTMFP(Real Time Media Flow Protocol)がRTFMP(Read The Fucking Manual Protocol)に見えて仕方がないです.

RTMFPについては、弊社hidakaのコチラのエントリをご覧下さい.RTFMについては、コチラのページが面白かったです.

さて今回は、製作実績でもご紹介したINFINITY TANK BATTLEのタンクを作る方法をご紹介します.

タンクを作るにはまずデフォルトのタンクを改造して作るのがいいでしょう。

wonderflにはnet.wonderfl.game.infinity_tank.development.TankBaseというクラスが入っていますが、コチラを拡張してTankという名前のクラスを作ります。

 

概観のカスタマイズ

 TankBaseにはdrawという仮想的なメソッドがあるのですが、それをoverrideすることで、自分のタンクの概観を作ります。

 

override public function draw(bitmapData:BitmapData):void
{
	// 砲台の向きをセットします.
	// 砲台はタンクのSpriteの子供のスプライトです.
	_spBattery.rotation = _scene.myGunAngle * 180 / Math.PI;
	
	
	// 単位行列にセット
	_mat.identity();
	// タンクの傾きをセット
	_mat.rotate(_scene.myTankAngle);
	// タンクの位置に平行移動. タンクのグラフィックは中心座標となっています.
	_mat.translate(_scene.myTankPosition.x, _scene.myTankPosition.y);
	
	// 一度BitmapDataをクリア
	bitmapData.colorTransform(bitmapData.rect, _ctfm);
	// BitmapDataを描画
	bitmapData.draw(_spTank, _mat, null, null, null, true);
}

 

このコードを理解する前にまず座標系を理解する必要があります。下は、実際にタンク同士が戦っている画像ですが、

 

stage_coordinate.png

 

この図のように、左上隅を(0,0)、右下隅を(600, 550)とする座標系を採用しています.drawメソッドに渡されているBitmapDataはステージと同じサイズの600 x 550のBitmapDataとなります.

 

タンクには、砲台とタンクの本体があるので、まず、タンクの絵を用意します。

 

0度はx軸方向(右向き)ですので、このような右向きを前とするタンクの絵を作ります.次に砲台の絵も用意します.

 

 

これらをコチラの方法等を参考にwonderflにアップ・ロードします.

 

次に、位置や向きをこのメソッドの中で同期させて表示させます.これらの情報を取得するには、TankBaseクラスにある_sceneというプロパティーを見ます.今回使う情報をまとめてみました.

_scene.myTankPosition タンクの位置
_scene.myTankAngle タンクの方向
_scene.myGunAngle 砲台の方向

BattleSceneクラスの詳細についてはリファレンスをご覧下さい(RTFMと言うことではないのですが(笑)).タンクの方向や砲台の方向はラジアン角となっていて、砲台の向きはタンクから見た相対的な方向となっています.といっても分かりにくいので図を書いてみます.

 

tank_coordinate.png

タンクのスプライト_spTankのに砲台のスプライト_spBatteryをaddChildします.この状態で、

	_spBattery.rotation = _scene.myGunAngle * 180 / Math.PI;

砲台の回転と砲台のゲーム内での実際の向きと同期させます.弧度法で表されているので、度数法に直します.

砲台の向きが同期されたので、次にタンクの位置と方向を同期させます.先ほども述べましたが、これらを引数で渡されているステージと同サイズのBitmapDataに描画します.

この描画メソッドはENTER_FRAMEごとに呼ばれるので、オリジナルのアニメーションを付けることも可能です.デフォルトのタンクの場合は2枚かのPNG画像を用意して切り替えることで擬似的なアニメーションを作っています.

タンクの座標は中心座標といって、Flash IDEで言うところの基点が中心のMovieClipの座標をイメージしてください.位置や角度の調節にはflash.display.BitmapData.draw()の第2引数に適切なMatrixを渡すことで調節します.

このMatrixについては、別エントリにてご説明しました.

 

moetan.png

 

wonderflの画面で上の図のように上向きを前にして表示されるとMatrixは正しく設定されています.

画像のロード周りでセキュリティ・サウンド・ボックスのエラーが出るという時は、外部サーバーのcrossdomainの設定やcheckPolicyFile等の設定を見直してみる必要があります.コチラのエントリが参考になるかもしれません.

 

作ったタンクをエントリーさせるには

 

作ったタンクをゲームのページに表示させて、ゲームで戦えるようにするには、infinite-tank-entryというタグをwonderflのコードにセットします.

 

edit.png

 

編集画面内のタイトル部分(上の図のflash on 2009-10-26)をクリックすると、タイトルとタグが編集出来るようになります.

 

edit_tag.png

 

コチラのタグ部分にinfinite-tank-entryと記入します.まだ開発途中のものは、極力このタグを付けないようにお願いします.

ちなみに弊社村井のタンクは、激しい炎でいつでも派手に炎上しております.

 

 

 

ユニークなタンクお待ちしております!!

Matrix講座

11/5 カヤックA…

アーカイブ

HTML5飯