よつばゲームズ
ノード一覧に戻る

キーフレームクリップ

keyframe_clip

ユーザー向け animation clip を保持し、RecordedLayer 入力を clip 形式へ橋渡しできます

下書き
解説あり

入力ポート

名前型説明
パス
path
Path
clip editor 内で直接編集する元 Path（オプション）
画像
image
Image
clip editor 内で直接編集する元 Image（オプション）
レイヤー
layer
RecordedLayer
RecordedLayer から clip へ橋渡しするオプション入力です。接続時はその場で AnimationClip へ変換します
時間
time
Float
評価時刻を上書きするオプション入力

出力ポート

名前型説明
クリップ
clip
AnimationClip
AnimationClip document です
レイヤー
layer
RecordedLayer
同じ clip を RecordedLayer として見た bridge 出力です
値
value
Map
指定時刻で評価した clip の現在値です
概要
summary
Text
短い概要文字列です
スプライトシート
spritesheet
SpriteSheet
書き出しフレーム間隔でサンプルしたスプライトシートです
フレーム数
frame_count
Int
スプライトシート書き出しに使う総フレーム数です
FPS
fps
Int
editor の書き出し設定から求めた概算 FPS です
列数
columns
Int
スプライトシート配置で実際に使われた列数です
行数
rows
Int
スプライトシート配置で実際に使われた行数です
フレーム幅
frame_width
Int
スプライトシート内の1フレーム幅です
フレーム高さ
frame_height
Int
スプライトシート内の1フレーム高さです
配置順
fill_order
Text
スプライトシート配置で使われたフレームの埋め順です

パラメータ

名前型既定値範囲説明・選択肢
クリップデータ
clip_data
CustomData
——

エディタ管理の AnimationClip 保存データ

interactive editor

Keyframe Clip は source 埋め込み型の interactive editor を持ちます。

editor でできること:

  • source 切替
    • Path と Image のどちらを今編集するか選べます
  • pose mode
    • 現在時刻の形を 1キーの pose として保存します
  • record mode
    • drag 軌跡を開始/終了範囲へ記録します
  • play / stop / loop
    • editor 内 preview をそのまま再生できます
  • key list
    • 保存済み key を一覧で見て、そこへジャンプできます
  • export
    • 全尺を 1コマ秒 ごとにサンプルした spritesheet PNG
    • 実キー時刻だけをまとめた key PNG 一括書き出し
    • 現在フレーム PNG 書き出し

重要:

  • source node 自体は書き換えません
  • editor 上で見えているのは source + clip 適用後の姿 です
  • キーを切り替えると、その key pose がそのまま表示されます
  • 画像 source は v1 では移動 / 回転 / 拡大縮小の transform を編集します
    • 回転は外周付近へマウスを持っていくと ↺ が出る zone drag 方式です
  • path source は point / handle を直接動かして pose を作ります

技術詳細

AnimationClip は P07 の user-facing animation 型です。
内部では explicit な track / keyframe を持ち、必要に応じて RecordedLayer と相互 bridge します。

layer 入力が接続されている場合は:

  • layer 入力を base clip へ変換
  • clip_data を local clip として重ねる
  • 出力では同じ clip を AnimationClip / RecordedLayer の両方で見られます

path / image 入力は editor 用の source でもあり、同時に downstream の ClipApplyPath / ClipApplyImage と組み合わせる前提です。

使用例

Path をキー編集する

  1. BezierPath を作る
  2. KeyframeClip.path へつなぐ
  3. KeyframeClip editor を開く
  4. time=0.0 で point / handle を動かして最初の pose を作る
  5. time=1.0 で別 pose を作る
  6. KeyframeClip.clip を ClipApplyPath.clip へつなぐ
  7. BezierPath.path を ClipApplyPath.path へつなぎ、Float Input か Time Source で再生する

Image をキー編集する

  1. PixelCanvas.image などの image source を作る
  2. KeyframeClip.image へつなぐ
  3. KeyframeClip editor を開く
  4. 画像本体をドラッグして移動、角で拡大、外周近くの ↺ zone で回転する
  5. KeyframeClip.clip を ClipApplyImage.clip へつなぐ
  6. source image を ClipApplyImage.image へつなぎ、time を動かして再生する

clip editor から書き出す

  1. KeyframeClip editor を開く
  2. 1コマ秒 を決める
  3. 列数 を必要なら指定する
  4. スプライトシートPNG で全尺を書き出す
  5. キー画像一括 で実キーだけを個別 PNG として書き出す

補足:

  • Image source の spritesheet は全尺を等間隔サンプルして並べます
  • 列数 = 0 の時は横一列ではなく、自動でほぼ正方形に近い配置を選びます
  • 配置順は 右へ (row_major) と 下へ (column_major) を選べます
  • node 出力は P07A の SpriteSheet 契約
    • spritesheet は専用型
    • frame_count / fps / columns / rows / frame_width / frame_height / fill_order は helper metadata 出力 を同じ書き出し設定で返します
  • columns / rows / frame_width / frame_height / fill_order 出力を使うと、後段でフレーム分割しやすくなります
  • Path source の書き出しは editor 上の line preview を透明背景 PNG にしたものです
  • 最終見た目で書き出したい場合は ClipApplyPath -> PathStroke -> AnimationRender を使ってください
ノード一覧に戻る
キーフレームクリップ — PixPipeline ノード解説