ツールと連携ガイド
pixelfxスキルでゲームにピクセルアートエフェクトを追加する
Claude Codeにpixelfxスキルをインストールし、フロストノヴァを依頼して、そのセッションが安価なモデルでいくらかかるかを実際のコスト表で確認します。
ブラウザゲームにフロストノヴァを入れたいけれど、40フレームを手描きするのは避けたい。pixelfxスキルを使えばClaude Codeがそれをやってくれます。2つのコマンドでインストールし、エフェクトを1文で説明すれば、エージェントがコードを書きます。そのセッションが安価なモデルでいくらかかるかはステップ数によって変わるので、下の表では明示した前提のもとで実際の価格に基づいて計算しています。
pixelfxとは#
pixelfxは244種類のピクセルアートエフェクトのライブラリです。README（github.com/patch-gg/pixelfx、2026年11月4日閲覧）によると、各エフェクトはsrc/で書かれた小さなコード片で、カテゴリは火、爆発、水、氷から、雷、近接、聖、影、ステータス、天候、UI、クリーチャーまで多岐にわたります。61のエフェクトはキャラクターを使い、複数のエフェクトを連鎖させる完全なモーションが12種類あります。
エンジンに応じて2通りの使い方があります:
- ブラウザゲーム: JavaScriptコードを直接使います。依存関係はありません。
- Godotやその他のエンジン: 使いたいエフェクトをAseprite形式のJSON付きPNGスプライトシートとしてエクスポートします。
リポジトリには新しいエフェクトを作成する別のClaude Codeスキルも含まれています。このガイドで扱うのはそのスキルです。スキルファイルを開いたことがないなら、エージェントスキルとは何か、どう見極めるかは5分で読めて、リポジトリから何かをインストールする前に読む価値があります。
スキルをインストールする#
Claude CodeがすでにCheapTokensを向いている必要があります。そうでなければ先に設定してください: Claude CodeをCheapTokensに接続する方法にアドレスと変数があります。長いファイルを含むゲームコードにはDeepSeek-V4-Flash（deepseek-）がよく合います: 回答あたり最大32,768トークン、380Kのコンテキストウィンドウ、時間帯を問わず同一価格です。詳細はDeepSeekモデルページにあります。
READMEには2通りのインストール方法があります。プラグイン経由はClaude Code内で2つのコマンドです:
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx手動経由はリポジトリのskills/pixelfxフォルダを~/にコピーします。
順番に並べる
セットアップを正しい順序で
項目をドラッグするか矢印を使う
- Claude CodeをCheapTokensのキーに接続する
- /plugin marketplace addでpixelfxマーケットプレイスを追加する
- /plugin installでスキルをインストールする
- エフェクトを平易な言葉で依頼する
1つのエフェクトを依頼する#
スキルは普通のリクエストで動きます: エフェクトの追加、エクスポート、調整、作成です。README自身の例が最良の出発点です。ゲームフォルダを開き、claudeを起動して、次のように入力します:
Add a frost nova to my character's ultimate.プロンプトはこれだけです。スキルはこうしたリクエスト向けに作られています: Claude Codeにエフェクトの検索、使用、エクスポート、作成を教え、新しいものを作るときは（READMEによれば）ドラフト、レンダー、確認、改善のループとして動きます。どのエージェントセッションでもそうであるように、1回の返答ではなく複数のステップを想定してください: ファイルを読み、それから編集します。
Godotを使うなら、READMEが説明するもう一方を依頼します:
Export the fire and explosions categories as sprite sheets for Godot.フレームをグリッドに並べたPNGとAseprite形式のJSONが得られます。READMEによれば、GodotとUnity向けのAsepriteインポーターがそれを読み込みます。
始める前に知っておくべき注意点が1つあります。体に描かれるエフェクトは標準の24x38ダミー用に書かれているため、サイズの異なるキャラクターではそれらのエフェクトを再生成する必要があります。
自分で試す試してみよう: あなたのヒーローは32x48ピクセルです。体のエフェクトは位置が合うでしょうか？答えを表示
そのままでは合いません。体のエフェクトは24x38ダミー用に描かれているので、Claude Codeにそのエフェクトをキャラクターのサイズ向けに再生成するよう依頼してください。
セッションのコスト#
ここが人を驚かせる部分です。エフェクト自体は小さなファイルです。コストはエージェントの作業から生まれます: 各ステップでClaude Codeは読み込んだプロジェクトファイル、スキルのテキスト、これまでの会話を再送信します。
クイックチェック
Claude Codeセッションのどちら側が通常トークンの大部分を占めるでしょうか？
答えを表示
答え: 各ステップで再送信される入力
各ステップは作業コンテキスト全体を運ぶので入力はすぐに積み上がり、一方で各回答はずっと短くなります（下の例では30,000に対して1,500トークン）。
自分のプロジェクト用に変えられる前提を挙げます: セッションが20ステップかかり、各ステップが約30,000トークンの入力（ファイル、スキルテキスト、履歴）を送り、モデルが約1,500トークンを書くとします。DeepSeek-V4-Flashでは、その1ステップのコストは$0.0006で、20ステップのセッション全体は表にあります。表はまた、すべてのモデルについてOpenRouterを当社の価格の隣に示し、入力と出力を合わせた合計で計算しています。
| モデル | 入力 $/1M | 出力 $/1M | リクエストあたり | 20 リクエスト | OpenRouter、20 リクエスト |
|---|---|---|---|---|---|
| GLM-5.3-Flash | $0.02 | $0.04 | $0.00066 | $0.0132 | $0.0226 |
| DeepSeek-V4-Flash | $0.015 | $0.10 | $0.0006 | $0.012 | $0.0462 |
| MiniMax-M2.7 | $0.05 | $0.15 | $0.0017 | $0.0345 | $0.414 |
リクエストあたり 30,000 入力トークンと 1,500 出力トークン。100万トークンあたりの価格は現行のもので、当社の料金体系に合わせて変動します。OpenRouter 列は同じワークロードの参考価格を示しています。
現在の1Mトークンあたりの価格: 入力$0.015、出力$0.10。すでに存在するエフェクトへの小さな調整なら、GLM-5.3-Flashは390Kのコンテキストと回答あたり最大8,192トークンを持ち、色やタイミングの調整には十分です。
エージェントを使う長い一日がどう積み上がるかを見るには、Claude Codeを安くする方法で入力を削る習慣を解説しています。
出荷する前に#
コードとエフェクトはMITライセンスです。gallery/fonts内のPatch PixelフォントはMITの対象外で（リポジトリのNOTICE.mdを参照）、一部のエフェクトはHugo DuprezとHollow CrownによるMITコードを改変しています。ゲームにフォントを同梱するなら、まずNOTICE.mdを読んでください。
自分のキーとモデルリストで始めるには、CheapTokensドキュメントと最新の価格ページを参照してください。
