[tmlib.js] スプライトのテクスチャをプログラムで生成する

tm.display.Spriteのテクスチャに、プログラムで動的に生成した画像を利用する方法を紹介します。

やり方は至って簡単。
tm.graphics.Canvasオブジェクトを画像アセット名の代わりにコンストラクタに渡すだけです。

// キャンバスを用意
var t = tm.graphics.Canvas();

... // いろいろ描く

// スプライトに利用する
tm.display.Sprite(t);

コード例

Canvasに画像を描く

// 100x100を横に12個並べたテクスチャを生成します
var texture = tm.graphics.Canvas().resize(100 * 12, 100);

for (var i = 0; i < 12; i++) {
    // 初期位置を保存しておきます
    texture.save();

    // 右に100ずつずらします
    texture.translate(100 * i, 0);

    // 放射状グラデーションを作成します
    var h = parseInt(360 * i / 12); // 色相
    var gradient = tm.graphics.RadialGradient(50, 50, 0, 50, 50, 50)
        .addColorStopList([
            { offset: 0.0, color: "hsla({0}, 100%,  80%, 1.0)".format(h) },
            { offset: 0.5, color: "hsla({0}, 100%,  80%, 1.0)".format(h) },
            { offset: 1.0, color: "hsla({0}, 100%,  50%, 1.0)".format(h) },
        ])
        .toStyle();

    // ハートを描画します♥
    texture
        .setFillStyle(gradient)
        .fillHeart(50, 50, 50);

    // 描画位置をリセットします
    texture.restore();
}

以上で、色が微妙に変化しつつ横に12個並んだハートの画像が出来ました。

参考までに、出力してみた結果がこちら。

あとはこれを使ってスプライトを生成すればOKです。

スプライト生成

var heart = tm.display.Sprite(texture, 100, 100)
    .setFrameIndex(0)
    .setPosition(200, 200)
    .addChildTo(this);

// frameIndexを変更すると色が変わります
heart.frameIndex = 4; // 緑に
heart.frameIndex = 7; // 青に

動作サンプル