TankのBitmapDataを分解してAdobe Kulerで塗るサンプル
こんにちわ、Muraiです。
level0はただいまwonerfl強化週間なので新しいタンクを作ってみました。
(何故か今回使っているKulerのAPIが重たいので出てくるまでしばらくお待ちください。)
AdobeのKulerというサイトをご存知でしょうか?
綺麗なカラーパレットをシェアするwebサービスで、そこのAPIから配色を引っ張ってきて着色しています。 起動するたびにレーティングが高い配色パターン10件からランダムに選ばれたお洒落タンクが現れます。
Adobe Kuler Apiについてはharaの下記記事より。
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の着色の参考になれば嬉しいです。