概要
カードやコインを裏返すような「立体フリップ」を1ノードで行います。角度に応じて 回転軸方向に潰れ、90°で真横(中央1pxのエッジ線)、90°を超えると裏面に切り替わります。 アイテム取得演出・カードめくり・コイントスなど、ドット絵の定番アニメ向けです。
使い方のポイント
- フリップアニメの定番:
time_sourceなどで角度をポート化して 0→180° で駆動 →animation_render。0→360° なら一回転になります 裏面にはカード裏などの別画像をつなぐと 180° でその画像がそのまま表示されます。 未接続なら表面のミラーが裏面になります(シルエットだけの素材はこれで十分)パースは 0 のままが正射影のドット絵定番。付けるなら 0.2〜0.5 程度が目安で、 手前の辺が伸び、奥の辺が縮む台形になります陰影は横を向くほど暗くする簡易ライティングです。0.3〜0.6 で回転感が出ます軸の傾きで斜めの軸を中心にフリップできます(45°で対角フリップ)。斜め軸では方式が Auto のとき自動で RotSprite になり、輪郭のジャギーが抑えられます。 投げたカードの「回転しながらフリップ」は、このノード(縦軸)→pixel_rotateの 合成でも作れます(スプライト自体も回る見た目になります)- キャンバスは表面画像と同サイズで固定です。潰れは中央基準なので、
事前に
fit_to_canvas等で被写体を中央に置くときれいに回ります
よくある失敗
- 90°で完全に消えてほしいのに線が残る:
エッジ線(edge_enabled) を OFF にします。 既定では厚み表現として、シルエットを保った中央1pxの線が残ります - エッジ線の色を専用の縁色にしたい: 線の色はスプライト中央の色を拾う仕様です。
コインの「縁」など専用の見た目にしたい場合は、90°付近だけ縁用の画像に
value_selectで切り替えます - 180°で裏面が左右逆に見える:
裏面画像は「裏面を正面から見た絵」をそのまま つなぎます(ノード側でミラーはしません)。表面のミラーで良ければ未接続にします - パースを強くしたら手前がキャンバスからはみ出る: 手前の辺は原寸より大きく
なります。
パースを下げるか、キャンバスに余白を持たせてください - 軸を傾けたら輪郭が階段状になる:
方式が Nearest になっています。Auto か RotSprite にすると Scale2x 拡大+多数決で輪郭が滑らかになります(色は混ざりません) - 軸を傾けたらドットが微妙にずれる: 斜め軸の変形は再サンプリングを伴うため、
縦横の軸(0°/90°)のようなピクセル厳密にはなりません。厳密さが必要なら軸は
縦横のまま使うか、パス素材なら
path_transformの回転→負スケール→逆回転で組みます - ベジェから作った素材の輪郭が荒れる: 画像化後に潰すより、
path_flipで パス段階で潰してからラスタライズ・陰影計算する方が輪郭も陰影もきれいです
関連ノード
path_flip— ベジェ段階の立体フリップ(無劣化。パス素材はこちらが高品質)path_transform— 汎用のパス変形(負スケールで手動ミラーも可能)transform— 90°単位の回転・反転(立体感が不要な場合)value_select— 90°付近の縁画像への切り替え、表裏の差し替えanimation_render— フリップアニメの書き出し