氷菓のエンディングっぽい動き / CreateJS


CreateJSつかって氷菓のエンディングにあるテキストでキャラクタが描かれる動きをつくってみるよ。
2クール目EDの1分過ぎくらいのとこね。

とりあえず、前回やったお絵かきを使おうかな。
描画の時に使った座標をひと通り保存して、それをテキストに置き換えることに。
なんか既に重くなりそうな雰囲気だが…

テキストはあらかじめ a-z, A-Z で用意しとく。
CreateJSのテキストオブジェクトで1文字ずつ用意してみる。

1
2
3
4
5
6
7
8
9
var text = [];
for (var i = 65; i <= 90; i++){
    var t = new createjs.Text(String.fromCharCode(i), '20px serif', color);
    text.push(t);
}
for (var i = 97; i <= 122; i++){
    var t = new createjs.Text(String.fromCharCode(i), '20px serif', color);
    text.push(t);
}

絵を描いて再生ボタンを押すとアニメーションを再生。
その際に各座標ごとにランダムでテキストオブジェクトを割り当てます。
既にあるテキストオブジェクトから下記のようにして生成できます。

1
2
var index = Math.floor(Math.random() * text.length);
var shape = new createjs.Shape(text[index]);

正確な再現はあきらめて、ランダムな位置から描画した座標に移動、そして消えるようにしてみました。
wait で指定時間だけ動きを止めることができます。
他にも scale, rotation, alpha などランダムで動かすとよりそれらしくなると思います。

1
2
3
4
5
6
7
stage.addChild(shape).setTransform(x, y);
createjs.Tween.get(shape, { loop: true })
    .wait(800)
    .to({ x: drawX, y: drawY }, 1600)
    .wait(1000)
    .to({ x: drawX + dx, y: drawY + dy, alpha: 0 }, 1500)
    .wait(300);

こんな感じでとりあえずそれらしくは出来るのですが、ちょっと細かい絵を描くとすんごい重くなります…
まあ、座標の数が増えればそんだけテキストオブジェクトの数も増えるんだから当たり前よね。
という訳で、標準で用意されてるキャッシュの機能とかで軽くなるか試してみました。

まずは snapToPixel をオンにして描画される座標を丸め込みします。
特にビットマップ画像の時は有効みたいです。
これは親オブジェクトや stage についてもオンにしておかないと有効にならないようです。

1
2
3
4
5
// stage でオン
stage.snapToPixelEnabled = true;

// オブジェクトでオン
t.snapToPixelEnabled = true;

あとはキャッシュ機能もオンにするとだいぶ改善されます。
最初のテキストオブジェクト生成時に下記のよう指定します。
引数はキャッシュする範囲の始点と幅と高さです。
この場合はオブジェクトの大きさにします。

1
2
3
var w = t.getMeasuredWidth();
var h = t.getMeasuredHeight();
t.cache(0, 0, w, h);

拡大するときはさらにオプションで指定可能です。
移動や回転、透過してもキャッシュは有効なのでかなり自由度高いと思う。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です