カスタムE で (((🍮)))

Akashic Advent Calendar 2019 七日目の記事です。

Akashic Engine では画面に画像や文字などを表示するために、様々なクラスが用意されています。それらはどれも g.E の派生クラスとして実装されています。この記事では、ちょっと変わった g.E の派生クラスとして、 append() された要素をなんでもプリンのようにプルプルさせる E (以降カスタムE)を実装してみます。

ゴールの確認

最初に完成形を確認しましょう。

プリンの画像は こちら のものを使用しています。

プリンがクリックされるとプルプルします。プリンの画像は g.Sprite で表示されていて、動きはカスタムEによるものです。

二つの課題

プリンを実現するためには、「震える運動」と「画像の変形」の２つの機能が必要そうです。１つ１つ検討します。

震える運動

震える運動を考えます。プリンは変形すると元の形に戻ろうとします。これはバネの動きに似ています。

次のような、一方が固定され、もう一方に質点が繋がれたバネを考えてみます。質点を移動させると、振動して元の位置に戻ります。

+∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂∂●
|-------- len ---------|

• + : バネを固定した位置。
• ● : 質点
• len: バネの自然長（伸び縮みしていない、本来の長さ）。

そのほかにもバネの運動に必要なパラメータがあります。

• k: バネ係数。バネの伸び縮みに対する復元力を求めるための量。
• m: 質点の重さ。
• d: 質点の速度を減衰させる係数。

これらを用いて、バネの先端に取り付けられた質点の運動をコードの形で表現してみます。

/**
 * バネの先端に取り付けられた質点の位置と速度を求める。
 * 
 * @param dt 経過時間。
 * @param x 質点の位置。
 * @param v 質点の速度。
 */
function massSpringSolver(dt: number, x: number, v: number): { x: number, v: number } {
    const k = 64; // バネ係数。
    const len = 10; // バネの自然長。
    const m = 1; // バネの先端に繋がれた質点の質量。
    const d = 0.95; // 徐々に減速させるための値。

    const dx = x - len; // バネの伸び縮みを求める。
    const f = -dx * k; // 伸び縮みにバネ係数をかけて、質点に加わる力を求める。
    const a = f / m; // 質点に加わっている力を質点の質量で割って、加速度を求める。

    v += a * dt; // 質点を加速させる。
    v *= d; // 質点が徐々に静止するよう、速度を減衰させる。
    x += v * dt; // 速度に応じて質点の位置を更新する。

    return { x, v }; // 新しい質点の位置と速度を返す。
}

振動しながら徐々に元の位置に戻る、という処理が実現できそうです。

画像の変形

次に、質点の運動を用いて画像を変形することを考えます。

Akashic Engine のレンダリング機能を司る g.Renderer は画像の平行移動・回転・拡大縮小に行列を用います。行列は２行３列で、コード上は１次元配列で表されます。

const matrix = [
    a, b,
    c, d,
    e, f
];

この６つの数値はどんな働きがあるのでしょうか。詳しい説明は省略しますが、 (a, b) はX軸を、(c, d)はY軸を変形させる働きがあります。

次の行列は平行移動・回転・拡大縮小しません。

const matrix = [
    1, 0,
    0, 1,
    0, 0
];

次の行列はY軸方向に２倍に拡大します。

const matrix = [
    1, 0,
    0, 2,
    0, 0
];

バネの力で運動する質点の位置を行列にうまく組み込めば、プルプルとした変形が実現できそうです。

完成

振動の方法と、それを変形に用いる方法がわかりました。これらを組み込んだカスタムE Puddinizer のコードは次のようになります。

interface PuddinizerParameterObject extends g.EParameterObject {
    /** バネ定数 */
    k: number;

    /** 質量 */
    m: number;

    /** 減衰係数 */
    d: number;
}

class Puddinizer extends g.E {
    private k: number;
    private m: number;
    private d: number;
    private px: number;
    private py: number;
    private vx: number;
    private vy: number;

    constructor(param: PuddinizerParameterObject) {
        super(param);

        this.k = param.k;
        this.m = param.m;
        this.d = param.d;
        this.px = 0;
        this.py = 0;
        this.vx = 0;
        this.vy = 0;

        // 毎フレーム自身を更新する。
        this.update.add(() => this.onUpdate());
    }

    /**
     * プリンを突っつく。
     *
     * @param px 質点の位置(X成分)
     * @param py　質点の位置(Y成分)
     * @param vx 質点の速度(X成分)
     * @param vy 質点の速度(Y成分)
     */
    poke(px: number, py: number, vx: number, vy: number): void {
        this.px = px;
        this.py = py;
        this.vx = vx;
        this.vy = vy;
    }

    renderSelf(renderer: g.Renderer, camera?: g.Camera): boolean {
        // ここで設定した行列が子の E に作用する。
        renderer.transform([
            1, 0,
            // Y軸を表す成分に質点の位置を加味する。
            0 + this.px, 1 + this.py,
            0, 0
        ]);
        return true;
    }

    private onUpdate(): void {
        const dt = 1 / g.game.fps;

        const ax = (-this.px * this.k) / this.m;
        const ay = (-this.py * this.k) / this.m;

        this.vx *= this.d;
        this.vy *= this.d;
        this.vx += ax * dt;
        this.vy += ay * dt;
        this.px += this.vx * dt;
        this.py += this.vy * dt;

        this.modified();
    }
}

振動の計算は onUpdate() で、それを用いた行列の設定は renderSelf()で行われています。

ここまでの検討とは次の点で違いがあるので注意してください。

• 平面上の振動を計算するため、質点の位置を px, py の２変数で表している。
• 位置 (0, 0) に固定された自然長 0 のバネに質点が繋がれている、として振動を計算している。

プルプルさせるカスタムEの実装は以上です。Puddinizer のデモはGitHubから入手できます。

最後に

この記事では子要素に動きをつけるカスタムEを実装しました。質量やバネ定数を変更すると、色々な質感が表現できます。ゲームなら、スライムのダメージ表現といった使い方もできそうです。