トランスフォームとクリッピング

spryte は、すべての描画呼び出し（スプライト、一括スプライト、図形、テキスト）に適用される 2D トランスフォームを持っています。translate、scale、rotate で変更し、push と pop で保存と復元をします。begin() は毎フレームこれをリセットします。

draw.push();
draw.translate(ship.x, ship.y);
draw.rotate(ship.angle);
draw.sprite(hull, 0, 0);
draw.sprite(turret, 0, -6, { rotation: ship.aim });
draw.circle(0, 10, 3, "#ffd36b"); // エンジンの光
draw.pop();

push() と pop() の間はすべて船を基準に描かれるので、船のパーツが一緒に動き、一緒に回ります。

トランスフォームスタック

メソッド
push()	現在のトランスフォームを保存します。
pop()	最後に保存したトランスフォームを復元します。対応する push() がないと例外を投げます。
translate(x, y)	原点を移動します。
scale(x, y?)	拡大縮小します。y のデフォルトは x です。
rotate(rad)	現在の原点を中心に回転します（ラジアン）。

各呼び出しは、呼んだ順に既存のトランスフォームと合成されます。push() と pop() が保存するのはトランスフォームだけで、グローバルアルファ、ブレンドモード、クリップは含まれません。スタックは事前に確保されているので、push() と pop() はアロケーションを起こしません。

カメラ

withCamera(camera, fn) は、fn の中の描画にカメラのビューを適用し、終わったらトランスフォームを元に戻します。カメラは、行列 [a, b, c, d, e, f] を返す view() メソッドを持つ任意のオブジェクトです。点は x' = a·x + c·y + e、y' = b·x + d·y + f に写されます。

const camera = {
  x: 0,
  y: 0,
  zoom: 2,
  view(): [number, number, number, number, number, number] {
    // 320×180 のビューで (x, y) を中心に、ズームして表示
    return [this.zoom, 0, 0, this.zoom, 160 - this.x * this.zoom, 90 - this.y * this.zoom];
  },
};

function render() {
  draw.begin("#000", 320, 180, scale);
  camera.x = player.x;
  camera.y = player.y;
  draw.withCamera(camera, () => {
    drawWorld();             // ワールド座標
    draw.sprite(hero, player.x, player.y);
  });
  drawHud();                 // スクリーン座標、カメラの外
  draw.end();
}

HUD を withCamera の後に描くと、画面上に固定されます。

クリッピング

clip(x, y, w, h, fn) は、fn の中の描画を矩形の中に制限し、終わったらクリップを外します。

// パネルの中でスクロールするリスト
draw.rect(20, 20, 120, 80, "#222");
draw.clip(20, 20, 120, 80, () => {
  for (let i = 0; i < items.length; i++) {
    draw.text(items[i]!, 26, 24 + i * 14 - scrollY);
  }
});

• 矩形は現在の単位で指定するので、トランスフォームに従います。
• クリップは画面上で軸に平行です。回転しているときは、回転した矩形の画面上の外接矩形がクリップになります。
• 入れ子のクリップは交差します。内側のクリップが外側のクリップの外に描くことはありません。
• fn が例外を投げても、クリップは外されます。

グローバルアルファ

draw.alpha は、設定した後に描くすべてのものに掛かる係数です。各スプライトの alpha や色のアルファと掛け合わされます。

draw.alpha = menuFade; // 0〜1
drawMenu();
draw.alpha = 1;

begin() は毎フレームこれを1に戻します。

ブレンドモード

draw.blend(mode) は、後の描画を下にあるものとどう合成するかを設定します。モードは2つです。

• "normal"：通常のアルファブレンド。デフォルトです。
• "add"：加算。光、炎、火花、グローに使います。明るいものが重なるほど白に近づきます。

drawWorld();
draw.blend("add");
draw.sprites(spark, sparkPos, live, { tint: "#ffd36b" });
draw.sprite(lightCone, lamp.x, lamp.y, { alpha: 0.6 });
draw.blend("normal");
drawHud();

begin() は毎フレームブレンドモードを "normal" に戻します。同じフレームでさらに描画が続くなら、自分で戻してください。

デフォルトのフィルタリング

draw.smooth は、smooth オプションを指定しないスプライトに使われるデフォルトの画像フィルタリングです。初期値は createRenderer に渡した smooth です。変更すると、その後の描画に影響します。

次へ：レンダーターゲットとシェーダー