spryte

Web のための爆速 2D レンダリング。最も人気のあるレンダラーより2〜4倍速く、サイズは9分の1です。 すべての数値は、自分のデバイスで実行できるオープンなベンチマーク 2dbench で、ピクセル単位で検証しています。

イミディエイトモードの描画（スプライト、一括パーティクル、図形、テキスト、クリップ、ブレンドモード、レンダーターゲット、カスタムシェーダー）を WebGL2 にバッチ処理し、Canvas 2D への自動フォールバックも備えています。MIT ライセンス、依存なし、JavaScript は約 10 kB です。

spryte はすべての debuff ゲームの中で動いているレンダラーです。どんな canvas でも使える単体ライブラリでもあります。

import { createRenderer } from "spryte";

const draw = createRenderer(canvas, { smooth: false }); // ドット絵
draw.resize(canvas.width, canvas.height);

function frame() {
  draw.begin("#111", 320, 180, canvas.width / 320); // クリア色、論理サイズ、1単位あたりのピクセル数
  draw.sprite(hero, 160, 90, { rotation: 0.2, tint: "#cffb2d" });
  draw.sprites(spark, sparkPositions, liveSparks);     // 数千のパーティクルを1回の呼び出しで
  draw.text("hello", 8, 8);
  draw.end();
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

spryte を選ぶ理由

• 最も人気のある 2D Web レンダラーより2〜4倍速い。 同条件、ピクセル単位で比較して、相手の20万に対して80万の動くスプライトを 60 fps で、レイキャスターでは相手の2,000に対して1万の敵を描けます。一括描画の draw.sprites() は、WebGL2 ではスプライトごとの JavaScript 処理なしで、数十万のスプライトを 60 fps で描画します。ベンチマークを見るか、自分のデバイスで実行してみてください。
• 小さい。 小さなアプリなら brotli で約 10 kB。PixiJS は約 88 kB です。
• イミディエイトモード。 作成、プール、破棄が必要な表示オブジェクトはありません。毎フレーム、描きたいものを順番に描くだけです。
• 検証済み。 高速パス、レンダーターゲット、シェーダーは、実際の GPU 上でシンプルなパスとピクセル単位で照合しています。GPU コンテキストの消失にも対応しています。
• debuff と一緒でも、単体でも。 debuff では、シーン内の draw が spryte です。それ以外の場所でも、createRenderer を1回呼ぶだけです。

学ぶ

• spryte の紹介：spryte とは何か、なぜ別ライブラリなのか。
• spryte を単体で使う：セットアップ、サイズ設定、フレームループ、画像、コンテキスト消失。
• draw.sprites でパーティクルと弾幕：一括描画 API。
• spryte でポストプロセス：レンダーターゲットとカスタムシェーダー。
• 最も人気のある 2D レンダラーより2〜4倍速いレンダラーをどうつくったか：その裏にある研究。

リファレンス

• API リファレンス
• ベンチマークと計測方法
• 2dbench：オープンなレンダラーベンチマークで、自分のデバイスで実行できます
• ソース、issue、変更履歴