Diorama Pixel: 動くピクセルアートのミニチュア
あなたは小さな場所——屋台、桟橋、庭の区画、あるいは戸口——を、固定された等角投影カメラから見て、ピクセルアートとして描きます。フレーム全体は320x240でレンダリングされ、ニアレストネイバー方式で拡大されます。すべての表面は8x8 Bayer行列によって短い控えめな色のランプに量子化され、マテリアルはプロシージャルなテクスチャ（板目、わらの筋、石、点描の草、まだらな水）を持ちます。地面の端は白いページに溶け込み、太陽はソフトな影を落とし、1～2人の小さな人々がループの中でひとつの明確な動作を繰り返します。examples/ にある3つのシーンが基準であり、あなたが書く形式もこれに従います。
このスキルは3つのうちの1つです。diorama はベクターSVGイラスト（UIシーン、線画、空の状態、テーマ）を描きます。diorama-worlds は関節を持つ人物と4つの仕上げを持つ詳細なThree.jsワールドをレンダリングします。このスキルは、ユーザーがピクセル、ディザリング、レトロまたは16ビット風の表現、あるいは小さく依存関係のないピクセルシーンを求めるときに使用します。
あなたが書くのはひとつだけ：シーン、すなわち .js ファイルです。カーネル（kit/pixel.js）とページ（kit/page.html）は固定です。これらを決して編集せず、変更したコピーを貼り付けず、カーネルが提供するもの（カメラ、ライト、影、テクスチャ、ディザリング、地面、人物のリグ、木や茂み、画面外で動作する時計、ポインター）を再び書いてはいけません。
以下に記載されるすべてのファイルはこのスキルのフォルダにあります。シーンとビルド済みページはユーザーの作業ディレクトリに書き、スクリプトはこのフォルダ内のパスを指定してそこから実行します。
1. コンセプト
コードの前に、コンセプトを一行で書きます：
名前。 場所とその中にあるもの。人物が行う一つの動作、そして他に動くもの。ポインターとタップが行うこと。
ストーリーと用途のある場所を選びます：市場の屋台、桟橋、パン屋のドア、区画菜園、バス停、屋上庭園。一つの動作がシーンを動かします（花束を結ぶ、釣りをする、水をやる、こねる）。その前後に予備動作と間があり、その周りに2～3の静かなループ（布、水、葉、旗）があります。それからパーツリストを4行で書きます：地面（ゾーン：草、舗装、水、砂、土、道）、構造物（立っているもの：屋台、小屋、フェンス）、人物（誰が、どこで、どこを向いて、何をしているか）、生命（揺れたり、浮いたり、きらめくもの）。シーンは10～25オブジェクトに収まります。リストが薄いと、シーンも薄くなります。
誰かに尋ねる相手がいる場合は、2～3のコンセプトを提案して待ちます。尋ねる相手がいない場合は、最もフレームが強いものを選び、その旨を伝えます。
2. ビルド
references/art-direction.mdを読む：パレット、マテリアル、ディザリング、地面の端、人物のスケール、何がフレームをピクセルミニチュアとして読ませるのか。references/scene-api.mdを読む：すべてのプリミティブ、マテリアル、ヘルパー、tick契約。kit/pixel.jsはインデックスコメントより下は読まない。- 最も近い例を読む：
examples/flower-stall.js（舗装と草地、ストライプの日よけ、2人の人物、ペナント）、examples/pier.js（水と岸、座った人物と釣り竿、ボート、わらぶきの小屋）、またはexamples/allotment.js（土、レンガ道、 raised beds、水をやる庭師、かかし）。 <name>.jsを書く：Pixel.scene({ … })にname、title、means（一文、最大140文字）、hint（ホバーとタップのヒント）、duration、still、ground、オプションでmaterials、build(P)がpartsを返す（parts.hotはホットなグループごとに名前をつける）、tick(ctx)がctx.t/ctx.qからすべてをポーズする。- ビルド：
node <skill>/scripts/build.mjs <name>.jsがpixel-<name>.htmlを書き出す。ネットワークリクエストのない自己完結型のページ。
3. チェック
node <skill>/scripts/validate.mjs <name>.js pixel-<name>.html：宣言、クロック、自己完結性、URLなし、カーネルのバイト単位の一致、サイズ予算、ポインター。すべてのFAILを修正する。npm ci --ignore-scripts --prefix <skill>を一度実行し、その後node <skill>/scripts/look.mjs <name>.js <outdir>を実行する。ネットワークをブロックしたヘッドレスChromiumでページを開き、<name>-look.json、静止画、ループの4つの瞬間、ホバー、プレス、モバイルビューを書き出し、塗りつぶし、モーション、ループの継ぎ目、ピッキング、ホバー、プレス、モーション削減、フレームコスト、モバイルオーバーフローをチェックする。フレームコストはシーンのフレーム予算（24fpsで41.7ms）に対して評価される。--throttle 4はCIランナーや電話のように4倍遅いCPUでの見え方を確認する。CHROME_PATHでブラウザを選択可能。指定がない場合はインストール済みのChromeまたはChromiumを使用する。- PNGを開いて見る。 チェック通過は絵の良さを保証しない。静止画に対して問う：このサイズで動作が読めるか（手、道具、作業対象）？人物が柱や屋根の後ろに隠れていないか？すべての表面がそのマテリアルを示しているか？地面がすべての側面でページに溶け込み、フレームで切れていないか？影は太陽の位置に応じて地面に落ちているか？その後、カーネルではなくシーンを修正し、再度確認する。
バリデーターが拒否するページを引き渡さない。画像を開いていないのにルックが完了したと主張しない。ブラウザがない場合は、その旨を明記し、ルック未確認で引き渡す。
4. 引き渡し
pixel-<name>.html をユーザーが要求した方法（ファイル、またはアーティファクトとして公開可能ならそれ）で提供する。その後、以下の各項目を一行ずつ：コンセプト；静止画の秒数とその理由；サイズ（約50KB、依存関係なし）；埋め込み方法（references/scene-api.md の「埋め込み」：<canvas>、カーネルとシーンを2つの <script> タグと Pixel.mount で、またはReactコンポーネント）；確認できなかったこと。
5. 調整
ユーザーが変更を要求した場合、<name>.js のみを編集し、ビルド、バリデーション、ルックを再度実行する。
問題が発生した場合
| もしこうなったら | 代わりにこうする |
|---|---|
| three.js、WebGL、または画像ファイルを使おうとする | それらは存在しない：カーネルは2Dキャンバス上でソリッドをラスタライズする。P.box、P.cyl、P.ball、P.wedge、P.line を使用する |
requestAnimationFrame、setTimeout、Math.random を書く | tick 内で ctx.t / ctx.q からすべてをポーズする。バリエーションには P.hash(i, j) を使用する（固定される） |
position.x += speed * dt | P.phase(t, period) からの位置を使用する。静止フレームとループの継ぎ目が正確になる |
| 人物がカウンター、柱、屋根の後ろに隠れる | 彼らを移動させる、カウンターを低くする、屋根を高くする：カメラは固定であり、彼らがストーリーである |
| 腕が体とひとつの塊に見える | 前腕を出すポーズ（P.pose(p, 'work' / 'hold')）を取り、手に固有の色の何かを持たせる |
| 木がひとつの大きな球 | P.tree と P.bush：丸い陰影のある葉の塊のクラスター |
| 大きな表面がフラットな色 | テクスチャマテリアル：'wood'、'thatch'、'stone'、'paving'、'leaf'、'cloth'、または tex を使ったランプ |
| 地面の端が硬いエッジ | 地面は ground: { rx, rz, wobble, fade }：すでに溶け込んでいる。スラブや台座を決して追加しない |
| シーンが地面より広い | すべてを rx と rz の中に収める。フレームは地面に合わせる |
| 内部幅が480pxを超える | 320x240がルック。それ以上のピクセルはレンダリングのように見え、ピクセルアートではない |
シーンを動作させるために kit/pixel.js を編集する | シーンが間違っている。シーンを変更する |
リファレンス
references/scene-api.md：宣言、P（プリミティブ、マテリアル、人物、ポーズ、木、ノイズ）、tickコンテキストとポインター、ランタイムと埋め込み。references/art-direction.md：パレットとランプ、マテリアルとテクスチャ、ディザリング、地面の端、光と影、ピクセルスケールの人物、構図。