ActionScriptの天下一武道会、Checkmateも第3回目に突入しました。

今回のKingはkatamariのさくーしゃさんとクリーク・アンド・リバー社です。

やりごたえのありそうなお題ばかりなので楽しみです。

とりあえずやってみたのがこれ。

さくーしゃさんのオリジナルのほうにあるGradationクラスを使うと0-1の範囲でグラデーションの色を取り出すことができます。

var grad = new Gradation(0xFF0000, 0xFFFFFF); grad.getColor(0);//赤 grad.getColor(1);//しろ grad.getColor(0.5);//ピンク

これをBitmapDataやGraphicsに書き込んだり、ENTER_FRAMEで変化させたりするわけですね。時系列で変化させたり、極端にやれば色情報を表示に使わないケースもあるでしょう。

上のサンプルは作成したグラデーションを縦(Y方向)に描画していき、X方向にいくにしたがって基点をずらすことで波打ったようになるという表現です。

ただずらすと斜めにグラデーションするだけになってしまうので、イージング関数を利用してXのズレ具合をコントロールしています。Forkしてコメントアウトしてる関数を切り替えてもらえばわかると思いますが、2次関数的に滑らかにずれたり、BounceやBack、Elasticを使えば複雑なずれ方になっていきます。

せっかくなので動きもつけようと思って、Elasticの跳ね具合のパラメータ(period)を0-180の範囲で滑らかに可変させて、毎フレーム更新して描画しなおしています。(回転してる意味は特に無いです)

イージング関数はTweenerのものをつかっていて、引数は、現在の時間、開始する値、終了する値、開始から終了までにかける時間(、ものによりパラメータ)となりますのでこの場合下記のようになります。

//( X / 幅 * 高さ) の値が返ってくる
var offsetY:Number = easeFunc( x位置, 0, 高さ, 幅, { period:period } );

なお、グラデーション情報自体は変化しないのと、グラデーション生成がちょっと時間がかかるようだったので、最初に一回計算したものをキャッシュして描画の際にはそちらを利用しています。