ガイド目次へ
使い方ガイド

アニメーション

パラメータや画像を時間で動かし、フレーム列をスプライトシートとして書き出す仕組みです。 時間の指定はすべてフレーム基準(「8フレームで1往復」等)。秒は換算表示だけに使います。

いちばん簡単な方法: 画像をまるごと動かす

画像出力を持つノードを選択し、インスペクターの 「🎞️ この画像全体を動かす」 を押すだけです。

  • うごきノード(sprite_motion)が自動で接続され、動き(移動/往復/回転/バウンド/揺れ/点滅/ふわふわ/ランダム)と量(px/度)、周期(フレーム)をその場で選べます
  • グラフに手動で挟む場合も 画像 → sprite_motion → animation_render の3ノードだけです

パラメータを動かす: アニメーションボタン

数値パラメータの行にある 🎞️ボタンを押すと、そのパラメータが動き出します。

  • 裏ではモーションノード(motion)が自動生成・接続されます(グラフにも見えます)
  • パラメータの下に出るインライン編集で動き・量・周期・緩急を調整できます
  • **「ノードとして展開」**で管理を解除すれば、通常のノードとして自由に配線できます (上級ワークフローへの卒業経路)

プレビューとシート化

  • ▶ボタン: 上流に時間依存ノードがあれば、インスペクターのプレビュー・ノード上のサムネ・ ビューアで再生できます(押した瞬間だけ仮シートを作るオンデマンド方式。 同時再生数は設定で変更可、既定3)
  • 「スプライトシートにする」: プレビュー横の1クリックで animation_render が自動接続され、 正式なスプライトシート出力になります。キャンバス寸法が揺れる構成は接続前に警告し、 エラー時は「直す」ボタンで上流レンダーを FixedCanvas に設定できます

プロジェクトのアニメ既定

キャンバスバーの 「🎬 アニメ既定」(フレーム数×FPS)がプロジェクト全体の基準です。

  • animation_render 等のフレーム数・FPS は 0 のままなら既定に自動追従します (既定を変えると全部一斉に変わる。個別に数値を入れたノードだけ固定)
  • 既定は .ppl に保存されるため、どの環境で開いても同じシートが出ます

上級: モーションの合成と時間差

  • motion の出力はただの Float なので、math ノードで合成できます(揺れ+ランダム等)
  • remap / ease_in_out は任意の Float 信号に使える汎用部品です
  • stagger(時間差)は N 個ぶんの「ずらしフレーム列」を配ります。 list_map で要素ごとに配れば、草が順番に揺れる・パーツが遅れて追従する等が作れます
  • time_source はフレーム番号・総フレーム数を直接使う上級用途に残っています

キーフレームとの使い分け

モーション(規則) キーフレーム(具体)
得意 周期的・機械的な動き(揺れ・回転・点滅) 一回性の演技(タメて振り下ろす等)
変更 数値1個で全体が変わる キーを打ち直す
ノード motion / sprite_motion keyframe_clip + 専用エディタ

どちらも上位互換ではありません。周期的な動きはモーション、演技はキーフレームで作り、 clip_mixer や math ノードで明示的に合成します。キーフレームクリップも尺は フレーム基準で、プロジェクト既定のFPSに追従します。詳細は keyframe_clip のノード解説へ。

よくある失敗

  • 1フレームしか動かない: パラメータへモーションがつながっていない。🎞️ボタンを使うか、 ピン化と接続を確認する
  • ループの継ぎ目で一瞬止まる: 旧仕様の症状。motion / sprite_motion はループ端点を 自動処理するため発生しない。自作の式で駆動する場合は「frame/total」で位相を作る
  • 「毎フレーム移動」がループしない: 値が増え続けるため。ループ素材には往復等のループする 動きか、sprite_motion の「端でループ」を使う
  • シートの並びが想定と違う: columns(列数)を確認する。0 は自動配置

この例(同梱サンプル workflows/model_chest_animation_c7.ppl)では、 モーション(往復) → モデル変換のX回転 で蓋の開閉を動かし、 アニメーションレンダー が6フレームのスプライトシートにまとめています。

チェスト開閉アニメのプロジェクト。アニメーションレンダー選択中で、右のプレビューが再生される

アニメーション — PixPipeline 使い方ガイド