こんにちわ、Muraiです。
level0はただいまwonerfl強化週間なので新しいタンクを作ってみました。
(何故か今回使っているKulerのAPIが重たいので出てくるまでしばらくお待ちください。)

AdobeのKulerというサイトをご存知でしょうか?

綺麗なカラーパレットをシェアするwebサービスで、そこのAPIから配色を引っ張ってきて着色しています。 起動するたびにレーティングが高い配色パターン10件からランダムに選ばれたお洒落タンクが現れます。

Adobe Kuler Apiについてはharaの下記記事より。

【flash時計】kulerで色をつける時計

 

INFINITIE_TANK_BATTLEのデフォルトテンプレートタンクはpng画像を読み込んで表示させるタイプなのですが、 せっかくKulerのカラーパレットを読み込んできたんだから、パーツ毎に着色したい。
で、実際ソースを見てみると、本体と大砲にしか別れていない。 思ったよりめんどくさいですね。

そこで今回は、エリア毎に分解して着色後、BitmapDataを再構成する事にしました。

左タイヤ、右タイヤ(キャタピラですね)、本体、バッテリーのところ、砲の5つ、計4カ所に分けて着色しています。

切り取りメソッド

ソースの指定範囲をBitmapDataで返します。

private function clip( src:BitmapData, x:Number, y:Number, w:Number, h:Number, hex:int ):BitmapData {
	var rect:Rectangle = new Rectangle( 0, 0, w, h );
	var m:Matrix = new Matrix();
	m.translate( x, y );
	m.invert();
	var result:BitmapData = new BitmapData( w, h, true, 0x00000000 );
	result.draw( src, m, new ColorTransform( 1, 1, 1, 1, ( hex >> 16 & 0xFF ), ( hex >> 8 & 0xFF ), ( hex & 0xFF ), 0 ), null, rect );
	return result;
}

本体着色メソッド

Tank本体用の着色テンプレート

private function paintBattery( src:BitmapData ):BitmapData {
	//clip
	var rTire:BitmapData = clip( src, 0, 0, 50, 7, _colors[ 0 ]);
	var lTire:BitmapData = clip( src, 0, 23, 50, 7, _colors[ 0 ]);
	var body:BitmapData = clip( src, 12, 7, 33, 16, _colors[ 1 ]);
	var battery:BitmapData = clip( src, 2, 7, 9, 16, _colors[ 2 ]);

	//rebuild
	var resultBMD:BitmapData = src.clone()
	resultBMD.fillRect( src.rect, 0x00000000 );

	resultBMD.draw( rTire, new Matrix( 1, 0, 0, 1, 0, 0 ))
	resultBMD.draw( lTire, new Matrix( 1, 0, 0, 1, 0, 23 ))
	resultBMD.draw( body, new Matrix( 1, 0, 0, 1, 12, 7 ))
	resultBMD.draw( battery, new Matrix( 1, 0, 0, 1, 2, 7 ))
	return resultBMD.clone()
}

砲の着色メソッド。

同じく砲用の着色テンプレート

private function paintCannon( src:BitmapData ):BitmapData {
	return clip( src, 0, 0, src.width, src.height, _colors[ 3 ]).clone();
}

これをVector型の_imagesのbitmapDataに格納された時点で一気に変換して適用。

_images[ 0 ].bitmapData = paintBattery( _images[ 0 ].bitmapData )
_images[ 1 ].bitmapData = paintBattery( _images[ 1 ].bitmapData )
_images[ 2 ].bitmapData = paintCannon( _images[ 2 ].bitmapData )

ちょっと面倒な方法ですが、自分のTankの着色の参考になれば嬉しいです。

HTML5飯