spryte 0.12：メッシュとミップマップ

spryte で画像を曲げて描けるようになりました。mesh() は自分で置いた三角形の上に画像を引き伸ばします。軌跡、ロープ、はためく旗、ぷにぷにしたスプライトに使えます。WebGL2 ではシェイプや後に描くスプライトと同じバッチに入るため、描画コールは増えません。同じリリースで、任意のミップマップも入りました。滑らかな画像を元のサイズよりずっと小さく描いても、ちらつきません。

npm install spryte@latest

メッシュのサンプル：64x40 の画像を毎フレーム動く 16x6 のグリッドに沿って曲げています。ポインターを追うリボンもあります。

mesh()

import { mesh } from "spryte";

// 32x32 の画像を台形に曲げる：頂点4つ、三角形2つ。
mesh(
  draw,
  image,
  [0, 0, 32, 0, -8, 32, 40, 32], // 頂点：x, y の組
  [0, 0, 32, 0, 0, 32, 32, 32], // uv：元画像ピクセル単位の u, v の組
  [0, 1, 2, 1, 3, 2], // 三角形ごとに頂点番号3つ
);

uv は spryte のほかの API と同じく、フレーム左上からの元画像ピクセル単位です。アトラス内のフレームも画像全体と同じように使えます。頂点、uv、インデックスは型付き配列でもよく、uv とインデックスは使い回して毎フレーム頂点だけを変えられます。オプションは nineSlice や tiled と同じ tint、alpha、flash、smooth です。

WebGL2 では、フレームを覆う三角形2つのメッシュは draw.sprite と同じピクセルを描きます。spryte のブラウザでのパリティテストでは、違うチャンネルは0でした。Canvas 2D のフォールバックは三角形を1つずつクリップして描きます。遅く、共有する辺に薄い線の出る場合があります（同じテストで最大 255 中 25）。メッシュに向くのは WebGL2 で、ほぼすべてのブラウザが対応しています。

mesh は独立したインポートです。使うアプリでは brotli で 1.6 kB 増えます。シェイプをすでに描いているアプリでは 0.1 kB です。メッシュはシェイプのバッチを使い回すためです。インポートしないアプリの増加は 0.08 kB です。esbuild（minify、コード分割、brotli レベル 11）でエントリーチャンクを測りました。

カスタムシェーダーはまだメッシュには効きません。

ミップマップ

滑らかな画像を4分の1のサイズで描くと、元画像の16ピクセルに1つしか読まないため、動くとちらつきます。引いた地図、チャート、サムネイルで起こります。createRenderer(canvas, { mipmaps: true }) はアップロード時に各画像の縮小版を作り、合ったサイズから読みます。

GPU メモリが画像ごとに3分の1増えるため、デフォルトではオフです。スプライトシートのフレームの間には数ピクセル空けてください。そうしないと小さいサイズで隣のフレームがにじみます。ピクセルアート（smooth: false）とレンダーターゲットはこれまでどおりに描かれます。

そのほかの変更

ドキュメントに、マスクと GPU タイマーが出荷済みであること（0.3.0 と 0.8.0）を書き、計測済みの環境に macOS の Chrome を加えました。すべての変更は変更履歴（英語）にあります。

メッシュのガイドを読むか、spryte リポジトリで npm run example:mesh を実行してサンプルを動かしてみてください。