Tweenerなどで色を変えたものをBitmapData.drawで描画しても、色変更が適用されない、という現象に悩んだので、ちょっと仕組みを調べてみました。
（2009/09/10夜：dskさんにコメントをいただき完全解決しましたので、その情報も下部に追記しました）
問題発生
「Tweenerで色を変更してもそれをBitmapDataにdrawしたら変更前の状態が描画される」という問題ですが、いろいろ調べていたら、どうやら「Tweenerなどで色を変える方法はtransform.colorTransformを使用している」ことが分かりました。
この問題のやっかいなところは、colorTransformが適用されないだけであり、別にエラーも出ないし、FlashPlayerも落ちたりしないので、何が悪いのか分からないところです。
処理の流れを想像してみる
描画対象はDisplayObjectの派生クラス（とBitmapDataクラス）なのですが、これらは「DisplayObjectのサイズと同じサイズの描画領域に現在の状態を描画しておくメソッド」と「最終的に描画メモリ領域に出力させるために呼ばれる描画メソッド」を持っていると思うのです。
仮に、前者をrender()、後者をtransfer() と呼ぶことにすると、次のような処理になっているのではないでしょうか。
- 毎フレームの処理というのは、描画リストにあるDisplayObjectのtransferを呼び出す処理、となる。
- そのときDisplayObjectにtransformが指定されていたら、renderで準備した画像に対してtransformを適用したものをtransferさせる。
まぁ、内部的にはもっと複雑だとは思いますが、何となくこうじゃないのかなぁ、と思っています。
「処理されない」を再現するコード
以上のテストは次のようにして再現してみました。
- 描画元となるMovieClipを用意し、それを_sourceと名付け、stage（下のあたり）に配置します。
- 描画先となるBitmapDataは _bmpdとして作成し、それを保持するBitmapインスタンスをstage（上部に広目）に配置します。
- 毎フレーム、_sourceにtransform.colorTransformを適用します。
- 毎フレーム、_bmpdに_sourceを描画します。（位置はカーソル位置）
- （具体的なソースコードはこのエントリ最後に載せておきます）
これで実行してみた結果は以下のようになり、colorTransformが適用されてない様子が分かるかと思います。（緑色のものがcolorTransformを適用している状態です）
colorTransform代替手法
以上で終わっても、あまり得にならないエントリになるので、colorTransformの代わりになり、BimapData.drawしてもそれが適用される、という方法を紹介しておきます。
それは、ColorMatrixFilterを使う方法で、具体的には以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 | // [1] colorTransformを使う処理. //_source.transform.colorTransform // = new ColorTransform( 0.5, 0.5, 0.5, 1, 0, 120, 0, 0 ); // [2] [1]と同等の色変化があるColorMatrixFilter処理. var cm:Array = [ 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 120, 0, 0, 0.5, 0, 0, 0, 0, 0, 1, 0 ]; var cmf:ColorMatrixFilter = new ColorMatrixFilter( cm ); _source.filters = [cmf]; |
追記：Tweenerの変化を適用させることもできた！
この項目は2009/09/10追記しました。
コメント欄で、dskさんに「BitmapData.draw()ファンクションの第三引数にColorTransformを渡せます。」と教えていただきました。ありがとうございます！
で、早速検証してみました。
Tweenerで_sourceの色を変化させます。するとその変化は_source.transform.colorTransformに入っているはずなので、この値をそのままBitmapData.draw()の第3引数に渡してみたところ、問題なく、色の変化を描画することができました！
1 2 3 | var posmat:Matrix = new Matrix(); posmat.translate( mouseX, mouseY ); _bmpd.draw( _source, posmat, _source.transform.colorTransform ); // マウスの位置に描画. |
これにて完全解決！
