差分レイヤーについてのTips
「 よ う こ そ 地 獄 へ ☆ 」
ちなみにこの「差分レイヤー」という単語は、著者が勝手に作った単語なので、調べても出てきません。 名前としてあまり良くないと思うので、次回のアップデートで名前が変わるかもしれません。
これが一体何なのか。「動く立ち絵」で「口パク」や「まばたき」をさせる仕組みを理解しておくと、ここの内容がほんの少し理解しやすくなると思います。 「動く立ち絵」のキャラを「まばたき」させるには、目の差分として、少なくとも「閉じた目の差分」と「開いた目の差分」の2枚が必要です。そして、「閉じている方」を 「00.0.png」 とし、「開いている方」を「00.png」とすれば、まばたきができます。 https://scrapbox.io/files/684c380b71f2f23d88640a1e.png
今回は、きつねゆっくり（旧）を例として使います。
実際に動かすとこんな感じです。
https://scrapbox.io/files/684c3b568610cc52fefe722c.webp
では、もっと滑らかに まばたき させてみましょう。
現在は、「閉じ切った目」と「開ききった目」の差分しか用意されていないので、この2枚の間「中途半端に開いた目」の差分を用意してあげましょう。
https://scrapbox.io/files/684c385a69df5abcbf18e557.png
「00.1.png」「00.2.png」「00.3.png」「00.4.png」を追加してみました。
実際に動かすとこんな感じです。
https://scrapbox.io/files/684c3b0fea3393b8ea7afc21.webp
キャラクターによっては、翼のあるものもあり、それも動かしたい人がいると思います。ですが、標準の YMM4 でそれを実現するのは難しいことです。
差分レイヤーでしっぽや翼を動かすときも、まずは画像のような差分を用意し、名前をつけます。 https://scrapbox.io/files/6887a9340c7571813cbccf1b.png
「猫のしっぽ.0.png」「猫のしっぽ.1.png」「猫のしっぽ.2.png」...
...「猫のしっぽ.9.png」「猫のしっぽ.png」の11枚を用意しました。
実際に動かすとこんな感じです。
https://scrapbox.io/files/6887a81b5e8098ce6585724f.webp
読者の中には、ファイルの名前の付け方の法則に気づいた方もいると思います。
ここで取り上げたファイル名の決め方の例では、全て以下のように名前を決めています。
（差分の名前）.（連番）.（拡張子）
差分の名前は、まばたきの例では「00」としていましたし、動くしっぽの例では「猫のしっぽ」にしていましたが、どんな名前でも構いません。
連番は、無いものも含まれます。これを「代表画像」とします。 拡張子というのは、pngやjpegのような、ファイルの形式を示す奴です。
今から、それらの画像ファイルが、どのように切り替わっているか、などを説明するのですが、いちいちファイル名を「差分A.0.png」「差分A.1.png」...「差分A.9.png」「差分A.png」などとファイル名を１つ１つ書いていくのは面倒くさいので、以下のような記号で表現することにします。
「差分A.0.png」➡ {0}
「差分A.1.png」➡ {1}
「差分A.2.png」➡ {2}
{_} から {0} に切り替え
➡ {_} -> {0}
差分切り替えの繰り返しの最初に戻る
➡ :|
つまり、差分の名前と拡張子が共通している前提で話を進めていきます。
説明中、テキストに色がつくと思いますが、特に意味はありません。
https://scrapbox.io/files/684c3b568610cc52fefe722c.webp
まず、最初のまばたきアニメーションは、目の差分を
{_} -> {0} :|
というように、２枚を交互に切り替えています。
https://scrapbox.io/files/684c3b0fea3393b8ea7afc21.webp
次に、それを滑らかにした２枚目のアニメーションは、
{_} -> {4} -> {3} -> {2} -> {1} -> {0} -> {1} -> {2} -> {3} -> {4} :|
というように切り替えています。
最後に、羽を羽ばたかせているこちらのアニメーションは、羽の差分を
{_} -> {0} -> {1} -> {2} -> ... -> {14} -> {15} -> {16} :|
というように切り替えています。
STPでは、このような差分の切り替えを、単位を「%」とする数値で制御しています。 基本的に、数値の最小値は 0% 、最大値は 100% としています。
再生位置における、その数値の大きさによって、表示される差分が決まります。
この仕組みは、視覚的に理解したほうがいいので、アニメーション画像を使って説明します。
例えば、下の画像のようなパラメータを割り振ったとします。
https://scrapbox.io/files/68716bc9e6e1a50426102fc1.png
差分レイヤーの一つ目のブロックで、制御モードが「２数の和」になってるので、下のパラメータ「セラール」「アブリール」の値を足した数を出力とします。
セラールは常に 0% 。アブリールは 130% と -10% の間を 2秒 で１往復します。
なので、出力は、130% から １秒後 に -10% に到達し、また １秒後 には 130% に戻り、これを繰り返しています。
そして次に見るべきなのは、「範囲外の値」です。「指定なし」になっている場合は、出力が 0% を下回ったときは 0% として扱い、100% を超えた場合は 100% として扱う、ということを意味します。
言葉ばかりで説明するのもわかりづらいので、下にシミュレーション画像を添付します。
https://scrapbox.io/files/687182b16b8d852f49672ea5.webp
この時は、出力が 0% 以下だと {0} が、100% 以上だと {_} が使われます。
0% ~ 100% では、{0} ~ {4} が範囲を等分して割り振られます。
セリフに合わせた口パクをする場合は、この「指定なし」を使うことが好まれます。
このようにして、差分レイヤー（連番画像）を使ったアニメーションをすることができます。 ここまではギリギリ理解できると思います。
しかしここからはYMM4にも存在しない要素が出てきます。
先ほどは目をアニメーションさせましたが、まばたき、つまり「目の見開き具合」しか制御していません。
もし、「目の見開き具合」と同時に、「目線の角度」を制御出来たらどうでしょう？
先ほどは、見開いた目に閉じ切るまでの間の差分をいくつか追加したのと同じように…
https://scrapbox.io/files/6871732fcf4cb63b7a9a8b72.png
各差分に、別の方向を向いた差分を用意してあげるんです。（作業量大爆発）
https://scrapbox.io/files/687177722b8f23fc71987ad2.png
やってることの意味がわからないと思うので、順を追って説明します。
まず１枚目の画像群を表現するなら、
{0}, {1}, {2}, {3}, {4}, {_}
となりますね。数字が大きくなるほど、目が開きます。また、{_} で全開になります。
では２枚目は何でしょう。順番がソートによってめちゃくちゃになってわかりづらいですが、以下のように構成されています。
{0,_}, {1,_}, {2,_}, {3,_}, {4,_}, {_,_},
{0,2}, {1,2}, {2,2}, {3,2}, {4,2}, {_,2},
{0,1}, {1,1}, {2,1}, {3,1}, {4,1}, {_,1},
{0,0}, {1,0}, {2,0}, {3,0}, {4,0}, {_,0},
{ と } の間の数字が２つになりました☆
（てめぇぇ！なぁぁにしてんだぁぁ！！）
１つ目の数字は目の開き具合です。大きくなるほど目が開きます。
２つ目の数字は目の方向です。0で左、1で下、2で右、_で上を向きます。
https://scrapbox.io/files/687182d0cb4feb3a4a5bcb9f.png
実際に、こんな風に動かすことができます。
https://scrapbox.io/files/68722978f56e927a4844f6fa.webp
パラメータは以下のようになっています。
https://scrapbox.io/files/687229b8d0ab1277151a39c5.png https://scrapbox.io/files/687229c76a765bfbee791273.png
「目の開き具合」と「目の方向」ごとに差分を用意するというのは、あくまで一例ですので、思いついたアニメーションのために差分を作って、どんどん試してください。
また、ファイルの名前のつけ方は、代表の差分画像の名前が「ぐるぐる.png」で、記号が {3,2} だった場合、
「ぐるぐる.3.2.png」と名付けてください。{_,1} だった場合は、「ぐるぐる._.1.png」と名付けてください。
{4,_} のような記号の場合、末尾に連続する _ は省略して、「ぐるぐる.4.png」としてください。この設計に基づけば、{_,_} は「ぐるぐる.png」となりますね。
この機能は初回リリース時にすでに存在していましたが、開発者ですらデバッグにしか使わず、半年以上ほかの誰にも使われることがありませんでした。そして、今後もこの機能を使いこなす猛者は現れないでしょう。
「そもそもそんな機能を使うことがない」「差分の作成コストが指数関数的に増えていく」というのが理由としてあると思います。
それでは、差分レイヤーのページで、各パラメータの意味を把握していきましょう。