Communitygithub.com

KrostyMall/Landing-SENSORITY

ゲームアニメーションアセット(モーションサイクル、アクションキーフレーム、エフェクトシーケンス、アニメーションスプライトシート)のための詳細ガイド。ビデオファーストパイプラインを中心に構築されています。このアプリビルダーサンドボックスでは、`video2dsprite` / `generate2dsprite` スキル(マゼンタ + スクリプト)を使用して実行し、アドホックな `ffmpeg` は使用しません。動くもの(歩行/走行サイクル、攻撃、待機、エフェクト、旗、火、アニメーションシート)を生成するたびに使用します。

Landing-SENSORITY とは?

このスキルは、ゲーム用アニメーションアセット(モーションサイクル、アクションキーフレーム、エフェクトシーケンス、アニメーションスプライトシート)の生成に関する包括的なガイドです。ビデオファーストパイプラインを採用し、動きの連続性(脚の交互動作、弧の連続性、布や火のダイナミクス)を自然に捉えることを重視します。主に `video2dsprite` と `generate2dsprite` という2つのスキルを使用し、マゼンタ色の背景(#FF00FF)をクロマキーとして用いたパイプラインで動作します。このスキルは「教義」として、動きの法則、ループQC、ビデオを使用すべきタイミングを定義します。アプリビルダーサンドボックス内でアドホックな `ffmpeg` 処理は行わず、専用スクリプトを使用して一貫性を保ちます。生成後は、フリップテスト(ループ閉じの確認)や動きの法則(連続性、物理感、エネルギー整合)に対する検証が必須です。Claude Code、Cursor、CodexなどのAIエージェント向けに設計されています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/KrostyMall/Landing-SENSORITY/tree/HEAD/.grok/skills/game-animation-frames

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

アニメーションフレーム — ビデオファースト

画像生成器はポーズを描画します。ビデオ生成器は動きを理解します。脚の交互動作、弧の連続性、布や火のダイナミクスは、ビデオがそれらをアニメーションさせる必要があるため、無料で得られます。したがって、画像モデルに動きの中間ポーズを想像させるのではなく、ベースをアニメーションさせて実際のフレームを収穫してください。

アプリビルダーでの実行(最初に読む)

このスキルは教義です(動きの法則、ループQC、ビデオを使用すべきタイミング)。アプリビルダーサンドボックスでは、自由形式の ffmpeg 収穫や、ランダムなキー入力可能な #hex 背景を発明しないでください。

ステップ実行内容
プロダクションスプライト / 固定グリッドgenerate2dsprite — 単色の #FF00FF マゼンタシート + クロマスクリプト
動画からの高密度モーションvideo2dsprite — ベースは #FF00FF 上で静止 → imagine_image_to_video → スキルスクリプト (ffmpeg + クロマ)
キー入力可能な背景いずれかのパイプラインを使用する際は常に #FF00FF (クロマに必須)
このスキル以下のループ/フリップテスト/動きの法則 — パイプライン実行後に適用

.grok/skills/video2dsprite/SKILL.md または .grok/skills/generate2dsprite/SKILL.md を開き、それらのワークフローに従って生成と後処理を実行してください。その後、フレームをゲームに出荷する前に、ここで法則とフリップテストを適用します。

デフォルトパイプライン(意図)

  1. ベースフレーム。 被写体を中立/開始ポーズ、完全なスタイルワード、側面/ゲームに適したビュー、単色の #FF00FF 背景(アプリビルダーのクロマキー)で配置します。game-asset-core のデフォルトが適用されます。
  2. アニメーション化。 ベースから imagine_image_to_video を実行:1つの明確な動き、その場で、静止カメラ(「騎士がその場で歩く、側面図、カメラ固定」、6秒)。ショットはシンプルに保ちます — 1被写体、1動作。これを video2dsprite 経由で実行することを推奨します。収穫とクロマが一貫するためです。
  3. 収穫 + クリーンアップ。 video2dsprite スクリプトを使用します(アドホックな ffmpeg -i … fps=12 単独ではありません)。マゼンタのフラッドフィル/デスピルはそこにあります。マゼンタパイプラインから完全に離れない限り、異なるフラットな #hex で再キー入力しないでください。
  4. 選択。 以下の条件を満たすフレームを選びます:(a) 動きの明確なフェーズを捉えている、(b) ループする — シーケンスの終わりが始まりに戻れること。フレーム数を強制しないでください:動きが8、10、12フレームで最適に読めるなら、その数を納品します(フレーム数が多いほど、エンジン内で滑らかになります)。サイクルの場合、動きのランドマーク(足の接地、翼の端点、炎のピーク)を使用して1つの完全な周期を選択します。
  5. パッケージ化。 フレームを再生順(ゼロ埋め名)および/または game-asset-core ルール(均一なセル、区切りなし)に従ったシート、または video2dsprite / generate2dsprite が出力する透明ストリップ/グリッドとして納品します。意図するfpsを明記します。

ビデオが動きに失敗した場合にのみ(まれ:非常に様式化されたポーズ、単一の劇的なキーフレーム)、キーフレームごとの imagine_text_to_image(スプライトスクリプトで後処理する際は依然として #FF00FF 上)にフォールバックします。その場合、自分でフェーズを計画し、以下の法則に従います。鮮明なプロダクション用マルチフレームグリッドには generate2dsprite を推奨します。

動きの法則(パイプラインに関わらず、これらに対して検証する)

  • サイクルはループします。交互動作の歩行は、周期の半分を鏡像で消費します。
  • 連続性:四肢、小道具、解剖学、エフェクトは連続的な経路上を移動します — 隣接するフレーム間で何もテレポート、消失、または重複しません。
  • スチルでも物理的に読める:空中にあることは空気を示し、予備動作は圧縮され、フォロースルーはオーバーシュートします。エフェクトは、リクエストが動かさない限り、その発生源に固定されたままです。
  • エネルギーはリクエストに一致:待機/微妙な動きは、ほとんど違いのないフレームを意味します。

検証 — フリップテスト

最終フレームを厳密に順番に表示し、動きをナレーションします。ループの閉じを明示的に確認します(最後→最初)。ナレーションの躊躇はフレームの失敗です。ビデオパイプラインは通常、最初の試行でこれに合格します — それがデフォルトである理由です。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

KrostyMall/Landing-SENSORITY

Add user accounts and sign-in to this TanStack Start app. Use when the app needs authentication, sign-in, user accounts, protected routes, or per-user data. Triggers on "auth", "login", "log in", "sign in", "sign up", "account", "users", "authentication", "protected", "who is logged in", "current user", "per-user".

KrostyMall/Landing-SENSORITY

Build browser games and interactive/canvas/3D experiences in this TanStack Start + React app. Use for any game, simulation, or WebGL/Canvas experience — 2D or 3D, single-player. Covers the game loop & timing, 3D orientation/camera conventions, collision, performance, assets, audio, save, game feel, and per-genre playbooks. For WASD / vehicle / flight **input signs and inverted A/D**, open the **`controls`** skill — do not rely on this file or racing-kart alone. Triggers on "game", "minecraft", "fps", "platformer", "racing", "tetris", "snake", "shooter", "3d", "three.js", "canvas", "voxel", "physics".

KrostyMall/Landing-SENSORITY

Player-facing input signs for browser games: WASD, vehicles, flight, FPS mouse-look, and the #1 failure mode (inverted A/D). Mandatory control self-tests and a tiny test interface so you can verify A turns left before shipping. Load for ANY game with movement, steering, flying, driving, tanks, boats, mechs, drones, planes, karts, third-person follow cams — not only racing. Triggers on "controls", "WASD", "inverted", "steer", "flight", "airplane", "kart", "vehicle", "yaw", "roll", "pitch", "mouse look", "A/D".

KrostyMall/Landing-SENSORITY

Design and build polished, non-generic UI for this TanStack Start + React + Tailwind v4 + shadcn/Radix app. Use whenever you create or restyle any interface surface — pages, landing pages, dashboards, forms, modals, nav, and game overlays (start screens, HUD, menus). Covers design tokens, layout, typography, color, spacing, motion, and the anti-"AI-slop" rules that keep output from looking generic. Triggers on "design", "UI", "make it look good", "polish", "landing page", "theme", "style", "redesign", "ugly", "clean up".

関連スキル