Communitygithub.com

KrostyMall/Landing-SENSORITY

遊戲動畫資產的深度指南:動作循環、關鍵影格、特效序列與動畫精靈表 — 以影片優先的流程為核心。在應用建構沙盒中,透過 video2dsprite / generate2dsprite 技能執行(magenta + 腳本),而非臨時 ffmpeg。適合用來生成任何會動的東西:走路/跑步循環、攻擊、待機、特效、旗幟、火焰、動畫表。與 game-asset-core 相輔相成。

Landing-SENSORITY 是什麼?

這項技能提供了一套全面的工作流程與原則,用於從影片素材中生成遊戲專用的動畫資產,特別是透過智慧影片生成的動畫影格。其主要用處在於確保輸出的動畫序列(如角色動作循環、特效動畫等)具有高度的物理真實感、連續性與可循環性,從而省去手動調整孤立靜態姿勢的麻煩。此技能支援與應用建構沙盒(如 Grok)中的 `video2dsprite` 和 `generate2dsprite` 工具搭配使用,強制規定使用特定的品紅色背景(#FF00FF)以利後續的色鍵去背流程。其核心工作流程包括:生成基礎影格、透過影片生成工具創建動畫、自動裁切與清理影格、根據動作特徵(如腳步觸地)選擇一個完整週期的影格,最後封裝成精靈表。技能文件中詳述了動作循環必須可無縫銜接、肢體與道具的連續運動、以及物理法則在靜態影格中的體現等「運動法則」,並提供了一個「翻頁測試」來驗證最終動畫品質。總之,這是一套將影片動畫的優勢轉化為高品質遊戲精靈的標準化流程與品質管理系統。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

動畫影格 — 影片優先

圖像生成器繪製姿勢;影片生成器理解動作—— 腿部交替、弧形連續性、布料與火焰的動態會自然出現,因為影片必須讓它們動起來。 所以不要要求圖像模型去想像中間動作的姿勢:為基礎動作製作動畫,然後從中擷取真實的影格。

應用建構器執行(請先閱讀)

此技能是原則性文件(運動法則、循環品質控制、何時使用影片)。 在應用建構沙盒中,不要執行隨意的 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:一個清晰的動作,原地進行, 靜止攝影機(「騎士原地走路,側面視角,攝影機鎖定」, 6秒)。保持場景簡單 — 一個主體,一個動作。建議透過 video2dsprite 執行,使擷取與色鍵保持一致。
  3. 擷取 + 清理。 使用 video2dsprite 腳本(不要單獨使用臨時的 ffmpeg -i … fps=12)。品紅顏色填充 / 去色暈的處理在那些腳本中; 除非你完全脫離品紅流程,否則不要使用不同的平面 #hex 重新去背。
  4. 選擇。 選取那些 (a) 捕捉到動作不同階段以及 (b) 可循環的影格 — 序列的結尾必須能流暢地回到開頭。不要強求 特定幀數:如果動作以 8、10 或 12 個影格呈現效果最佳,就提供那個 數量(更多影格 = 引擎內動畫更流暢)。對於一個循環,根據動作標記 (腳步觸地、翅膀極限、火焰峰值)選取一個完整週期。
  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".

相關技能