こんにちはtaroです.

wonderfl flash-gamesの公式コンテンツINFINITY TANK BATTLEはwonderflユーザがゲーム内のキャラクターをActionScriptでカスタマイズできるゲーム・コンテンツです.前回タンクの作り方をご紹介しましたので、今回は弾の作り方をご紹介します. 

  

BulletRendererBaseというクラスを拡張ししたBulletRendererというクラスを書きます.

drawという抽象メソッドがベースクラスにあるのでそれをoverrideして実装します.

// _bullet弾のBitmapData 4 x 6のサイズ
override public function draw(bitmapData:BitmapData):void {
    bitmapData.lock();
    // 弾道の尾を引かせるために前の像をアルファで少し残す
    bitmapData.colorTransform(bitmapData.rect, new ColorTransform(1, 1, 1, 0.9));
    var point:Point;
    // myBulletListが自分の弾のリスト。このようにfor文で回す
     for (var i:BoundBox = _scene.myBulletList; i; i = i.next) {
        // i.positionに弾の座標が入ります。中心座標なので、左へ2、上へ3だけずらします
        point.x = i.position.x - 2;
        point.y = i.position.y - 3;
        // bitmapdataに弾のビットマップを座標の所へコピーする
        bitmapData.copyPixels(_bullet, _bullet.rect, point);
    }
    bitmapData.unlock();
}

こちらがかなり単純な実装となります.

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

 

 

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

ゲームのルールとしては弾の当たり判定は幅4高さ6としているのでその部分以外は無視されますが、それより大きなグラフィックや尾をつけたりしても構いません。

 このdrawメソッドは毎ENTER_FRAMEで呼ばれるので、

    bitmapData.colorTransform(bitmapData.rect, new ColorTransform(1, 1, 1, 0.9));

のように、してアルファをかけて消しています。アルファを0にすれば完全に前の状態が消えますが、0.9位に設定しているのでこの弾は尾を引きます.

画面内にある自分の撃った弾の座標を取得するには、

 

    // myBulletListが自分の弾のリスト。このようにfor文で回す
     for (var i:BoundBox = _scene.myBulletList; i; i = i.next) {
        // i.positionに弾の座標が入ります。中心座標なので、左へ2、上へ3だけずらします
        point.x = i.position.x - 2;
        point.y = i.position.y - 3;
        // bitmapdataに弾のビットマップを座標の所へコピーする
        bitmapData.copyPixels(_bullet, _bullet.rect, point);
    }

_sceneプロパティーのmyBulletListを見ます.ここのfor文は定型文として触らずに中で、i.position.xやi.position.yで弾のx座標、y座標が取れると思うと分かりやすいかと思います.

弾の座標は中心座標で渡されるので、弾の大きさの半分だけずらして描画するとちょうど弾の当たり判定と上手く重なり合います.

このiには他にも情報が渡ります.

i.position.x	x座標
i.position.y	y座標
i.rotation	回転

より詳しくはリファレンスをご覧下さい.

あとはこれを用いてbitmapDataに描画します.こちらの例ではcopyPixelsを使ってしまいましたので、回転は使えません.

drawとMatrixを使うと回転などのプロパティーが利用できます.Matrixって、ややこしいなという方は、こちらも参考になるかもしれません.

 

作った弾をタンクから利用するには

 

TankBaseクラスには、_bulletRendererというプロパティーがあって、コチラに作った弾のswfのurlを渡します.

urlの取得方法はコチラでもご紹介いたしましたが、net.wonderfl.utils.WonderflSWFUrlというユーティリティクラスを利用します.

http://wonderfl.net/code/046cee45b4334c4f2dac8dfa7ec9ea2b2b2eb27dというのは弾のwonderflのページのurlになります.

_bulletRenderer = WonderflSWFUrl.getURLFromPageURL( "http://wonderfl.net/code/046cee45b4334c4f2dac8dfa7ec9ea2b2b2eb27d");

 

自分の作った弾を他のユーザにも使ってもらうには

 

infinite-tank-bulletというタグをwonderflのコードにセットすると、コチラのページに表示されるようになるので、他のタンク開発者にアピールできます.タグをセットするには、

 

 

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

 

 

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