chat-pet-sprite-creation

Chat Pet スプライトの作成

別々の絵ではなく、ひと続きのキャラクターとして感じられるペットのスプライトを作成します。現在のペットのボディを基準にし、視覚的な基準点を維持しながら、すべての違いに意図を持たせます。

信頼できる情報源

• スプライトアート：src/vs/workbench/contrib/chat/browser/widget/media/chatPet/
• 実行時の状態、寸法、タイミング、遷移：src/vs/workbench/contrib/chat/browser/widget/chatPetWidget.ts
• 目の形状、向き、クリッピング、動きの CSS：src/vs/workbench/contrib/chat/browser/widget/media/chatPet.css
• 単体テスト：src/vs/workbench/contrib/chat/test/browser/widget/chatPetWidget.test.ts

描画を始める前に、現在の実装を確認してください。既存の寸法やタイミングは、このスキルの作成後に変更されている場合があります。

PR の優先順位と系譜

このスキルは、ペットに関する PR の全履歴をまとめたものです。ルールが競合する場合は、次の優先順位に従ってください。

1. 現在のコードとテスト
2. 関連性のある最新のオープン PR
3. それより新しいマージ済み PR
4. 古い過去の動作

特に、アニメーションのクリーンアップに関する PR #330399 は、以前の復活サインの流れと、いくつかの古いスプライトやタイミングの想定に優先します。

PR	継承すべき知見
#327063	ペットは単一のセマンティックなボタンです。スプライトのキャンバス、画像、目、エフェクトは視覚専用であり、aria-hidden にします。アセットの URL は FileAccess で解決します。
#327412	反応は明示的な状態としてモデル化します。通常のランダムな反応はすぐに繰り返さず、まれな変化は別途サンプリングします。
#327588	スプライト画像はダブルバッファリングし、読み込み中の画像が読み込まれてから切り替えます。新しいソースの読み込み中に、アクティブなスプライトを空白にしてはいけません。
#327696	Stable／Insiders は型付きで永続化される外観の選択肢です。バリアントの命名と形状を体系的に保ちます。
#327714	アニメーションアートは横長のスプライトシートと、意図的に用意した静的な「動きを減らす」PNG で構成します。タイミングは画像のメタデータではなく、実行時のデータです。
#328334	「逃走中」などの永続的な動作は、サービスの状態に保持します。複数フェーズのアニメーションは、推測した遅延ではなく完了シグナルを使って進行させます。
#328480	ドラッグを離したときに、クリックによる反応も発生してはいけません。ポインターイベントを共有するジェスチャーには、明示的な抑制または所有権の管理が必要です。
#328530	目覚めるきっかけとなった操作は、目覚めの動作に消費させます。ランダムな反応も同時に発生させてはいけません。「動きを減らす」設定では、目覚めの遷移を省略してもかまいません。
#329121	視線の更新を集約し、ドキュメントが非表示の間はスプライトのタイマーを一時停止します。再開時は、見逃したフレームを再生するのではなく、経過時間を基準にします。
#329347	ピクセルアートのポーズ変更はスプライトフレームで、空間的な動きはレイアウト／CSS／物理演算で表現します。落下は遷移シグナルに基づいて完了させます。
#329729	反応を始める前に、操作した相手の方を向かせます。一時的な各状態に明示的な存続期間を設定し、連鎖するフェーズには実際の完了イベントを使用します。
#329852	ポインター操作とキーボード操作で、同等の結果が得られるようにします。「動きを減らす」設定でも状態の変化は維持し、移動アニメーションだけを取り除きます。
#329867	注意を引くアニメーションには上限を設けます。確認待ちが続いていても、確認を促す注意喚起の時間が終わったら、拍手を止めます。
#330160	目は、追跡やまばたきのモードを持つ実行時合成レイヤーです。すばやい向きの変化で、独立した目まい状態になる場合があります。幅の広いアートは、実際の表示領域を超えないようにします。
#330275	物理演算ではボディの占有範囲を使用し、フレームステップに上限を設け、衝撃の瞬間を明示します。飛行中にレイアウトが変わった場合は、形状を再計算します。
#330399	最新のアニメーション仕様：幅の広い睡眠／目覚めアート、フレームを考慮したまばたきの合成、向きを固定した装飾、そして単一のエフェクトシートを使った逆再生の消滅から順再生の再出現。

論理ピクセル

基準となるアート単位は 論理ピクセル です。

• ソースピクセルで 8×8
• 標準の 96×96 ソースから 48×48 表示へのスケールでは、CSS ピクセルで 4×4

基本のシルエット、顔のパーツ、小道具、繰り返しのディテールには、同じ論理ピクセルスケールを使用してください。より多くのディテールを入れるためだけに、小さいブロックや大きいブロックで新しいオブジェクトを作らないでください。

エフェクトでは、たとえば小さな星、泡、曲線の動きなど、論理ピクセルを意図的に細分化してもかまいません。ただし、細分化は次の条件を満たす必要があります。

1. 基本グリッドでは表現できない、特定のエフェクトに役立つこと。
2. そのエフェクト全体で一貫していること。
3. アンチエイリアスや再サンプリングによるものではないこと。

ニアレストネイバー法でのみレンダリングしてください。背景は透明にし、ピクセルの輪郭をくっきり保ってください。ぼかし、ぼかしたアルファ、不自然な色補間、意図しないグリッド外スケーリングは使用しないでください。

ベースラインから始める

ペットの体を記憶だけを頼りに描き直さないでください。

• 休止中、ポインター操作、遊びの状態では、現在の idle スプライトをベースラインとして使用してください。
• リクエスト処理中の状態では、現在の rendering スプライトをベースラインとして使用してください。
• まず体全体をコピーし、その後、新しい状態に必要な部分だけを変更してください。

これにより、次の要素が維持されます。

• 体の幅と高さ
• 下端の基準線
• アンテナの根元と間隔
• ハイライトとシャドウの階調
• 目のくぼみ
• 当たり判定／インタラクションの領域

最初と最後のキーポーズは、体の位置、シルエット、基準線、スケールが跳ねることなく、idle または rendering に滑らかに切り替わる必要があります。

キャンバスとアンカー

デフォルトのソースキャンバスは 96×96、つまり 12×12 論理ピクセルです。

コンテンツが標準の体の枠から意図的にはみ出す場合に限り、より大きなキャンバスを使用してください。

• ターミナルやボタンには、幅を広げる必要がある場合があります。
• メモ、星、泡には、高さを増やす必要がある場合があります。
• 体はベースラインのスプライトとまったく同じ位置に固定してください。

広いフレームの中で体を中央に配置しないでください。体は標準の 96×96 領域に置いたまま、小道具やエフェクトをはみ出させてください。標準外のソースサイズはすべて chatPetWidget.ts で宣言し、幅広スプライトの境界処理を更新してください。

ランタイムの当たり判定と移動範囲は、装飾のはみ出し部分ではなく、ペットの体に合わせてください。

目

標準の開いた目は 1×2 論理ピクセル です。

• ソースピクセルで 8×16
• CSS ピクセルで 4×8

睡眠、めまい、愛情、心配、衝撃など、状態が特別な表情を伝える場合に限り、異なる形の目を使用してください。

DOM 目レイヤー

DOM 目レイヤーには、独立したモードが 2 つあります。

• Tracking は視線、向き、まばたき、ドラッグ時の表情を制御します。
• Blinking は、トラッキングしない状態でも一時的に DOM の目を表示でき、スプライトのフレームごとに変化させることもできます。

ランタイムの視線制御を使用する状態では、目のない *-tracking-96 アセットを使用してください。タイピング、ボタンの押下、または PR #330399 の love など、DOM のまばたきを使用する状態でも、オーバーレイ用に対応する瞳の領域を空けておく必要があります。

DOM 目の状態を追加または変更する場合：

1. スプライトの目のくぼみを空にしておきます。
2. 適切な場合は、カーソルの動作を doesChatPetStateTrackCursor に追加します。
3. 適切な場合は、まばたきの動作を doesChatPetStateBlink(state, frameIndex) に追加します。
4. 両方の向きについて、縦長の目のまばたき、状態ごとの目の高さ、ポインターのオフセットを確認します。
5. 固定されたターミナルのポーズなど、意図的にまばたきを停止するフレームを確認します。

描画済みの瞳とランタイムの目のオーバーレイを併用しないでください。

目を描き込む状態

固定された表情の状態では、目をアートに描き込み、カーソルトラッキングを無効にしてください。表情によって意図的に変更する場合を除き、標準の目の位置を維持してください。

Stable と Insiders の同等性

Stable と Insiders は、同じアニメーションのパレット違いです。

以下の項目を同一にする必要があります。

• キャンバスのサイズ
• フレーム数と順序
• アルファマスクとジオメトリ
• ボディの基準位置と張り出し
• 静止時のフォールバックポーズ
• タイミングと反復動作

ジオメトリのマスターを1つ作成し、確立済みの2種類のパレットを適用してください。バリエーションを個別に描き直してはいけません。

2種類のバリエーションを並べて確認してください。製品で明示的に必要とされている場合を除き、形状の違いはバグです。

向きとミラーリング

基準となる向きを1つ作成し、もう一方の向きはランタイムでミラーリングしてください。

ミラーリングによって幅の広いスプライトの張り出す位置も変わるため、両方の向きをテストしてください。左右の端付近で境界を補正できるよう、十分な余裕を確保してください。

テキスト、楽譜、方向を示す記号など、画面上の向きを維持する必要がある装飾は、ランタイムでミラーリングされるレイヤーに焼き込んではいけません。向きが固定された装飾としてモデル化するか、別途レンダリングしてください。

静止アセットとスプライトシート

各アニメーション状態には、以下の両方のバリエーションが必要です。

• 動きを減らす設定用の静止 PNG：buddy-<state>-<variant>-<height>.png
• 水平スプライトシート：buddy-<state>-<variant>-<height>.spritesheet.png

スプライトシートの仕様は次のとおりです。

sheet width = frame width × frame count
sheet height = frame height

すべてのフレームで同じ矩形を使用してください。フレーム境界をずらしたり、フレームごとにパディングを追加したりしてはいけません。

動きがなくても状態が伝わる、意味のある静止ポーズを選んでください。アニメーションの最初のフレームが、動きを減らす設定における最適なフォールバックであるとは限りません。

レイヤー化されたアクセサリー

着用可能なアクセサリーでは、ボディが所有するアタッチメントリグと、外観ごとに1つのパレット非依存アトラスを media/chatPet/accessories/ に使用します。ランタイムの状態やフレームごとに複製を書き出してはいけません。アタッチメントの動きはボディアニメーションのメタデータで管理します。アクセサリーアトラスに含めるのは、ボディのジオメトリが変わる場合に必要となる、限られた数の基本形状だけです。

デフォルトのアトラスは 256×192 で、64×64 のセルに分割されています。支給されたシルエットに12論理ピクセル幅のボディが本当に必要な帽子は、atlasCellSize: 96 を宣言し、96×96 のセルを持つ 384×288 のアトラスを使用できます。細部を追加するためだけに大きいサイズを選んではいけません。どちらのサイズでも、論理ピクセル全体を単位とする 8×8 ピクセルを使用します。

columns: upright | sleeping | impact | splat
row 0:   head back layers
row 1:   head front layers
row 2:   right-eye front layers

外観によっては、どのセルも透明のままにできます。たとえば、シンプルな帽子では目の行が空になりますが、「シルクハット＆モノクル」の組み合わせでは、頭部の両方の行と目の行を使用します。空中姿勢のリグでは、直立時の列を再利用します。既存のポーズにボディ側の位置調整を加えても意図したシルエットを維持できない場合にのみ、別の基本列を追加してください。

アタッチメントのトラックは chatPetAccessoryRig.ts にあります。各トラックでは、基本ポーズと、独立した頭部および右目のアンカーを持つ圧縮フレーム範囲を使用します。めまい目、サングラス、まれなアイコンへの変形など、ボディ側で作成された表情、小道具、またはシルエット全体の置き換えが同じジオメトリを担当する間は、そのスロットを省略します。同じシート内のフレームに異なる向きが焼き込まれている場合、トラックは対象フレームを示します。これにより、ペット全体の外向き変換を適用する前に、頭部アクセサリーがボディと一緒にミラーリングされます。ボディのジオメトリが変わる場合にのみ、ボディ側のトラックを更新してください。通常のアクセサリーを追加する際、トラックやレンダラーのコードを編集する必要があってはいけません。

頭部スロットのアンカーには、帽子が頭部のシルエットに載るのではなく、頭部の上部に重なるように、論理ピクセル1つ分の着用オフセットが含まれています。ラブアニメーションでは、変形した頭部と触角のシルエットがリアクションそのものであるため、頭部アクセサリーを非表示にします。スロットの表示とフィットは、帽子ごとの例外ではなく、ボディ側の動作として扱ってください。

大きな帽子の下に触角を収める外観では、coversAntennae を指定します。コンポジターは帽子の前面を描画する前に、ボディ側で定義されたオクルージョン範囲を使用します。そのため、ボディ色の覆いピクセルを各アトラスに描き込まなくても、アニメーショントラックとミラーリングに応じて動作します。 方向性のある頭部アクセサリーは、右向きの標準ボディに合わせて作成し、ペット全体のキャンバスとともに反転させます。構造に方向性がある帽子は、頭の上で視覚的なバランスを保ちつつ、つば、バイザー、傾き、鼻当て、その他の非対称なディテールに控えめな論理ピクセル1つ分の手がかりを加えて向きを表現してください。シルエット全体を大きく中心からずらさないでください。非対称なパーツは、反転後も正しく見えるようにします。目に結び付いたアイデンティティを表すアクセサリーは、反転を無効にし、向きごとの目のアンカーを使って同じ目に留まるようにできます。参考例は Top Hat & Monocle です。目を固定するアンカーには、ワイドフレーム用のボディ原点のシフト（frameWidth - 96）を含めてください。facing fixture を使い、すべての外観を両方向で確認してください。

静止したモーション低減用のアートでは、アニメーションシートの後半のフレームを使うことがあります。getChatPetReducedMotionRigFrame() は代表的なボディフレームに合わせてください。静止 PNG の画像フレームが1つだからといって、リグのフレーム0だと決めつけないでください。

すべてのウェアラブルパーツは、ボディと同じ 8×8 論理ピクセルグリッド上で作成してください。つば、クラウン、バンド、縁、チェーン、ハイライト、影は、すべて位置の揃った論理ピクセル全体で構成します。曲線を表現するために、斜めのポリゴンやソースピクセル単位の階段状の輪郭を使わないでください。小さなエフェクトの例外は、ウェアラブルアクセサリーには適用されません。現在の Stable ボディシートを形状のガイドとして使い、すべてのアルファ値が完全透明または完全不透明であることを検証してください。ランタイムはレイヤーをボディとともに反転します。固定方向のボディ装飾は、アクセサリーのピクセルを消去せずに元の状態に戻します。

ランタイムでアクセサリーのソースを変更するときは、置き換え画像の読み込みと正確な寸法の検証が完了するまで、現在の合成画像を表示したままにしてください。ボディのアニメーションを再開せずに、現在のフレームを再描画します。アクセサリーソースの読み込みに失敗した場合や形式が不正な場合は、ボディのみの表示にフォールバックし、再試行を繰り返さないでください。

アニメーションの設計

ノイズではなく、キーポーズをアニメーション化します。

• トリガーが見て分かるようにします。
• アクションには、明確な頂点または最も強いポーズを設けます。
• 基準状態に戻る前に、結果が見て分かるようにします。
• 静止フレームは効果的ですが、同じ動きの重複は不要です。

フレームの継続時間もアートの一部です。chatPetWidget.ts の対応する *_FRAME_DURATIONS 配列で定義してください。PNG にタイミングを埋め込んだり、PNG からタイミングを推測したりしないでください。

一時状態の継続時間は、意図したループ再生またはワンショット再生に合わせてください。シートを次のどれにするか、明示的に選択します。

• 1回再生して最後のポーズで停止する
• 一時状態が終了するまでループ再生する
• 別のトランジションの一部として逆再生する

逆再生可能なエフェクト

respawn → despawn のように、1つのシートを逆再生でも使う場合：

• どちらの端点も開始と終了の両方に使えるように設計します。
• エフェクトを両方向で確認します。
• 逆再生で意味をなさなくなる一方向の視覚的な手がかりは避けます。
• 中立的なキャンバスだけでなく、実際の遷移先で逆再生のエフェクトを確認します。

PR #330399 が参考パターンです。respawn のバーストを逆再生して画面下部で despawn し、その後、順再生して画面上部で respawn します。以前の revive-sign の中間表示は置き換えられています。

ポーズのアニメーションと空間的な動きを分ける

ペットや小道具のシルエットを変化させるには、スプライトフレームを使います。次の動きには CSS トランスフォームまたは物理ループを使います。

• 平行移動
• 回転
• 登場／退場の動き
• ドラッグへの抵抗
• 検索時の表示／非表示
• 落下、投げ、跳ね返り、衝突

平行移動や回転をしたポーズをすべてシートに描き込まないでください。逆に、ピクセルアート上で見て分かるようにすべきボディの変形を、CSS トランスフォームでごまかさないでください。

複数フェーズの動作は、決定的な完了シグナルに基づいて進めます。

• ワンショットシートのスプライト再生完了
• CSS キーフレームの animationend
• 落下の transitionend／transitioncancel
• 投げ動作の物理的な静止

無関係なタイムアウトで完了時刻を推測しないでください。

フレームスケジューリングと再起動の動作

スプライトのタイミングには、ディスプレイのリフレッシュをポーリングするループではなく、フレーム境界での経過時間に基づくスケジューリングを使用します。コールバックが遅れた場合は、正しいフレームを再計算し、次の遅延時間を短縮します。

• ドキュメントが非表示の間は、フレームタイマーを一時停止します。
• 表示に戻ったときは、経過時間に基づいて再計算します。
• 有限アニメーションは最終フレームを保持します。
• 逆再生では、フレームインデックスだけでなく、逆順にしたフレーム時間を使用する必要があります。
• 読み込み済みの状態を再起動するときに、不要な画像の再取得を強制しないでください。
• 点滅や動きを再開するために CSS アニメーションクラスを再付与する場合は、その前にスタイルを強制的にフラッシュします。

環境とレイヤー構成

スプライトは、実行環境と同じ環境で確認します。

• プラットフォーム／入力端
• 透明な背景
• 左右のワークベンチ境界
• プラットフォームによるクリッピングとオクルージョン
• ドラッグ、落下、投げ、再出現の動き
• 吹き出しや固定装飾

プラットフォームの後ろに隠れるべきピクセルは、クリッピングするか、プラットフォームの後ろのレイヤーに配置する必要があります。オクルージョンするプラットフォームの下に、体やエフェクトのピクセルが見えたままにならないようにしてください。

物理演算でペット全体を意図的に動かすまでは、移動中も体のアンカー位置を維持します。装飾フレームのサイズによって、物理演算の対象位置が変わらないようにしてください。

状態とジェスチャーの所有権

描画状態には、意図された優先順位があります。多忙状態やタスク状態が、装飾的なリアクションによって誤って隠されないようにしてください。getChatPetBaseState の現在の順序と、getChatPetRenderedState の一時状態ガードを維持します。

インタラクションのルール：

• ドラッグ中は、ポインターを離すまでドラッグがポインターの制御権を持ち、その後のクリックを抑制します。
• 起こす操作では、起こすことだけを行います。
• おしゃべりなど、アイドル時のみのリアクションは、アイドル以外のベース状態に譲ります。
• ペットが死亡中、ポインターで制御中、空中、または走行中は、キーボード操作を無効にします。
• めまい状態は、それを引き起こした方向変更ジェスチャーを消費します。
• 確認時の拍手は注意を促す合図であり、永続する保留状態のアニメーションではありません。

まれなインタラクションは、通常の重複しないプールとは独立して抽選します。一般的なリアクションを追加したことで、イースターエッグの発生確率が意図せず変わらないようにしてください。

描画とパフォーマンス

現在の描画アーキテクチャを維持します。

• 読み込み時のダブルバッファリングには、2 つのスプライト要素を使用します。
• 画像の元のソースと getAttribute('src') を比較します。.src は VS Code のリソース URL を正規化する場合があります。
• キャンバスはソースのフレーム寸法に、CSS ボックスは表示寸法に合わせます。
• imageSmoothingEnabled = false と image-rendering: pixelated を維持します。
• 解決済みのスプライトソース記述子をバリアントごとにキャッシュします。
• ポインターの視線更新を 1 アニメーションフレームにまとめます。
• 物理演算には requestAnimationFrame を使用しますが、フレームが遅れた際にすり抜けが発生しないよう、積分ステップに上限を設けます。
• 飛行中にレイアウトが変化した場合は、投げのジオメトリを再読み込みします。

実行時の接続

状態を追加する場合は、該当するすべての箇所を更新します。

1. ChatPetState に状態を追加します。
2. getChatPetSpriteName でファイル名を対応付けます。
3. getChatPetFrameDurations にフレーム時間を追加します。
4. 標準と異なるソース幅・高さの定数を宣言します。
5. getSpriteSources にアニメーション用と視差効果軽減用のソースを登録します。
6. カーソル追従とフレーム対応のまばたきの動作を選択します。
7. 1 回再生、ループ、逆再生、または静的な反復の動作を選択します。
8. 一時状態の継続時間とトリガーを追加します。
9. 複数フェーズの状態に対し、決定的な完了時の遷移を追加します。
10. 向き、はみ出し、固定装飾、クリッピング、または CSS の処理を追加します。
11. ユーザーが開始するインタラクション向けに、ローカライズされた ARIA ステータス通知を追加します。
12. ジェスチャーを見つけやすく、または役立つものとして案内する場合は、アクセシブルなヘルプを更新します。
13. 対象を絞ったユニットテストを更新します。

実行時の要件をすべて満たすまでは、アートを追加しないでください。

ビジュアル要素は無音のままにします。画像、キャンバス、目、エフェクトには空の代替テキストを設定し、aria-hidden を指定します。アクセシブルなラベル、フォーカス可能性、ローカライズされた status() 通知はボタンが担います。非表示、死亡中、またはインタラクション不可の状態では、タブ順序から外す必要があります。

検証チェックリスト

Art

• コアアートは、同じ 8×8 のソースピクセル論理単位を使用します。
• ボディは、現在の待機中またはレンダリング中のアートを基にします。
• ボディのベースラインと基準アンカーは固定します。
• 標準の目は論理ピクセルで 1×2 にします。
• DOM の目のスプライトでは、オーバーレイの下に瞳を描き込みません。
• Stable 版と Insiders 版の形状およびアルファマスクを一致させます。
• 透明領域は完全な透明状態を保ちます。
• 補間やアンチエイリアスが発生しないようにします。

Animation

• 最初と最後のポーズが、不自然に切り替わることなく遷移します。
• モーションを減らす設定では、状態が伝わる静止ポーズを使用します。
• どちらのバリアントでも、フレームの寸法と数が一致します。
• タイミング配列が、意図した停止時間とループに一致します。
• 使用する場合、逆再生が適切に見えます。
• どちら向きでも適切に見えます。
• 複数フェーズの遷移には、推定した遅延時間ではなく完了シグナルを使用します。
• モーションを減らす設定でも、静的な代替表示で同じ結果が伝わります。

Integration

• 横長／縦長のソース定数と境界ロジックを更新します。
• プラットフォームのクリッピングとレイヤー表示が正しく設定されています。
• インタラクション／当たり判定の形状はボディ基準のままです。
• ドラッグ／クリック、起床／クリック、ポインター／キーボードのジェスチャーの制御元が明確です。
• ユーザー操作によって発生する動作には、ローカライズされたスクリーンリーダー向けの出力があります。
• 視覚的な子要素には aria-hidden を指定し、ボタンがセマンティクスとタブ順序を担います。
• ChatPetWidget のテストで、状態名、正確なタイミング、形状、状態の優先順位、モーションの低減を網羅します。
• すべてのランタイム状態が、意図したボディ所有のアタッチメントトラックに対応します。
• アトラスが、宣言されたコンパクト（256×192）またはワイド（384×288）のセルサイズ区分と、文書化された列／行の仕様に一致します。
• アクセサリーのすべての色／アルファブロックが、8×8 論理ピクセルのグリッドに揃っています。
• 文書化されたピボットとアンカーを適用した後も、アトラスのアートワークがボディのキャンバス内に収まります。
• ヘッドアクセサリーは共有の装着オフセット分だけ頭部に重なり、ラブ中は表示されません。
• 非対称なアートワークが、基準方向と反転方向の両方で正しく見えます。
• アクセサリーの追加に、状態ごとのエクスポートやレンダラーの変更は必要ありません。
• モーションを減らす設定用のソースには、静止ボディアートで表現されるリグフレームを使用します。
• ボディ側で定義された目の表情と小道具は、競合する目スロットアクセサリーを非表示にします。
• アクセサリーを切り替えても、現在のボディフレームとアニメーションタイマーが維持されます。
• アクセサリーの読み込みに失敗してもボディは表示されたままで、継続的な再試行は行いません。

chat/chatPetAccessoryRig/chatPetAccessoryRig/CriticalPoses コンポーネントフィクスチャを使用して、アニメーションとモーション低減時の重要なポーズを確認し、AllAccessoriesFacing を使用して、すべての外観を両方向で比較します。

リポジトリの unit-tests スキルを使用して、対象を絞った単体テストを実行します。最低限、ChatPetWidget テストスイートを実行してください。

タイミング、形状、ランダム選択、状態の優先順位には、純粋なヘルパーをエクスポートして直接テストする方法を優先します。スケジューラーの動作にはフェイクタイマーを使用します。アートとランタイムのタイミングが個別にずれないよう、フレームの継続時間配列を正確に検証します。

任意の公開プレビュー更新

公開ショーケースは、兄弟リポジトリの vscode-chat-pet にあります。本番用スプライトが完成したら、その update-pet-previews スキルを使用します。

既存の APNG を置き換えるときは、GitHub やブラウザーのキャッシュによって以前のアニメーションが表示され続けることがないよう、README では新しいバージョン付きファイル名を使用してください。