サブピクセルアニメーション:1ピクセルより小さな呼吸
小さなスプライトの穏やかな待機モーションは、まったく見えないか、一度に1ピクセル丸ごと跳ぶかのどちらかです。ピクセルアーティストは中間を暗い縁のピクセルで描きます。Pixorのサブピクセルの動きも同じことを、縁が実際に動く所だけで行います。
サンプルプロジェクト
サブピクセルの動き:1ピクセル未満で呼吸する宝箱:.pixorプロジェクトとそのライブラリモデル(CC0)。左のシートがレンダリング結果です。


初級・約5分・92秒の動画でも見られます
1. 小さなスプライト
モデルを開きます:このチュートリアルでは無料のCC0ライブラリの宝箱を使います。シーンステップで南カメラをクリックし、ゲームビューを見下ろし型RPGに、幅と高さを32にします。サブピクセルの動きが最も効くのは、1ピクセルが大きな一歩になる小さなスプライトです。
2. 呼吸
アウトライナーで宝箱をクリックして動きが宝箱にかかるようにし、アクションステップでアクションを追加 › 脈動を選びます。アクショングラフで脈動ノードの量を0.025にします:宝箱は2.5 %拡大縮小し、32ピクセルでは1ピクセル未満です。
3. オフ:跳ぶ
スタイルステップで2Dビューを拡大し、ピクセルグリッド(Shift+G)をオンにします。縁は数フレーム止まったあと、1ピクセル丸ごと跳びます。
4. サブピクセルの動き
スタイルグラフでクリーンアップノードを選び、インスペクターのクリーンアップセクションでサブピクセルの動きにチェックを入れます。もう一度出力ノードを選ぶと、完成したスプライトが見られます。
5. オン:呼吸する
モデルが縁のピクセルの一部(8分の7未満)しか覆っていない間、そのピクセルは自分のランプの1段暗い色になり、モデルが再び覆うと元に戻ります。これで宝箱は跳ぶのではなく、階調で呼吸します。
6. 縁だけ
変化(D)は前のフレームと違うピクセルに印を付けます:動く縁が横切るピクセルだけです。この設定をオンにするとレンダリングのちらつきの割合が少し上がりますが、それはこれらのピクセルが意図的に変わるためです。
7. 書き出し
書き出しはいつもどおりシートを書き出します。中間のピクセルはその中に、パレット自身の色で入っています。
コマンドラインから
pxr render chest.glb --size 32 --clip none --motion pulse:8:0.3 --subpixel
pxr project set game.pixor --subpixel
--no-subpixelでプロジェクトのこの設定をオフにします。
次へ
- サブピクセルアニメーションの解説:この技法の由来。
- 予備動作とフォロースルー:逆の問題、もっと重さが必要な動き。
よくある質問
サブピクセルの動きでシルエットやアウトラインは変わりますか?
いいえ。変わるのは、動く面が一部だけ覆う縁のピクセルだけで、それも自分のランプの1段暗い色になるだけです。アウトライン、シルエット、その他のピクセルはすべてそのままです。
中間の色は新しい色ですか?
いいえ。どれも、陰影がそのピクセルに割り当てたランプを1段下がった色なので、すべての色がパレットの色です。
どんな動きに効きますか?
1フレームに1ピクセル未満しか動かないものすべて:呼吸する待機、浮遊の上下動、ゆっくりした揺れ、脈動。速い動きはそのままです。もう十分に見えるからです。
サブピクセルの動きのノードとはどう違いますか?
スタイルグラフのノードは1フレームずつ処理するため、部位が空いたピクセルにはみ出すことがあります。この設定はクリップ全体を見て、シルエットを決して変えません。