![見出し画像](https://assets.st-note.com/production/uploads/images/113768527/rectangle_large_type_2_83f75efa1f3c8eea75cf57ee88b2dc91.png?width=1200)
【YMM4】映像エフェクト「ディスプレイスメントマップ」 ~ゆっくりMovieMaker4 のエフェクトカタログ 004~
ずいぶんお久しぶりになってますね……。
そして実装からもう結構経ってしまいましたが、ようやくまともに動かせた(気がする)のでわかった範囲で書いてみます。などと、サンプルを作っていたら和解したはずなのに早速裏切られましたが。
そんな環境なので信憑性はアレかもしれません。
・確認環境
OS:Windows10 22H2
YMM4:Lite v4.19.2.0
ディスプレイスメントマップ
「白・灰・黒」か「何らかの色・透過」の規則で作られた画像に従い、アイテムを歪めるエフェクトです。
白・黒あるいは何らかの色で塗られた部分が「歪む」ことを、灰色または透過色の部分は「歪まない(ほとんど変化がない)」ことを表します。
白と黒はそれぞれ違う方向へ作用するため、軽い気持ちで並べると大惨事かもしれません。
基本動作チェック
例えばこのような画像を用意します。
見やすさのために灰色を使っていますが、実用上は透過色で大丈夫です。
![](https://assets.st-note.com/img/1692435008494-8VKmGXR9Lc.png?width=1200)
あとは適当にプロジェクトを作成、アイテム(例では画面の複製)を配置して映像エフェクト「ディスプレイスメントマップ」を追加します。
「ファイル」で作った画像を指定、あとは変形量をお好みで指定します。
今回は「変形Y」に反復移動を設定して200.0px、時間は0.50秒にしています。
他に指定する必要があるのは「ディスプレイスメントマップ / 描画」の「サイズ」です。
恐らくは画像の大きい方のサイズを指定すれば大丈夫、だと思います。
この画像は元々HDサイズ(1280x720)なので1280を指定します。
するとこんな感じになります。
![](https://assets.st-note.com/production/uploads/images/113768726/picture_pc_e3eaa044fe93b849ea21155f8657f5af.gif?width=1200)
これだと境界がはっきりしすぎていて使い難い場合がほとんどでしょう。
「ぼかし」をお好みの数値指定することでぐにゃっとした感じになります。
![](https://assets.st-note.com/production/uploads/images/113768765/picture_pc_e8d5da71f69f1b876d3c06cc8d0c64d4.gif?width=1200)
具体例
「ぐにゃぐにゃする」だけでは有用性がないので他の例を。
今度はこんな画像を用意します。
![](https://assets.st-note.com/img/1692435310844-GJBFQ3MpRo.png?width=1200)
これを画面の複製に設定します。
![](https://assets.st-note.com/production/uploads/images/113769030/picture_pc_eccd4507c40238942e951060e581516a.gif?width=1200)
これに映像エフェクト「色ズレ」などを加えることにより「グリッチ表現風」の演出になります。よくわかってないのでまだ「風の」としか言えませんが
例えば、変形XとYを100.0px、ぼかしは0、「ディスプレイスメントマップ / 描画」のXとYをランダム移動で-100から100に動かし色ズレを乗せたものがこちらです。
![](https://assets.st-note.com/production/uploads/images/113769050/picture_pc_7e028e5b017ce1bca38e3794f6c9a8c4.gif?width=1200)
他にも呼吸しているような動きも作れます。
詳しくはあおもや 様のこちらの記事を参照していただくとして……。
例として夜刀 様の「小春六花」立ち絵を元にこんな画像を用意します。
![](https://assets.st-note.com/img/1692435448194-J6zlM8BOij.png?width=1200)
画像サイズは立ち絵に合わせると位置調整の手間が省けます。
……というよりも、立ち絵からPNG画像を生成してそれを画像編集ツールで加工するのがお手軽です。
この画像も動く立ち絵用にPSDToolで生成した画像を元にGIMPで加工しています。
なお、「変形させたい部分」だけがわかるようになっていればいいハズなので、わざわざ白や黒で塗りつぶさなくても理論上は大丈夫です。
少し脱線しましたが、出来上がったら立ち絵に適用します。
数値は実際に見ていい感じにしてください。
こんな感じに出来ます。
![](https://assets.st-note.com/production/uploads/images/113769104/picture_pc_9d2df5392cec1c782d83389919ba4b57.gif?width=1200)
参考元様で言う「ランダムな動き」も再現したいのであればこれに追加してこんな画像を用意します。
![](https://assets.st-note.com/img/1692435507554-qK30ssNvlc.png?width=1200)
これもディスプレイスメントマップを指定して、変形XとYで反復移動の時間にそれぞれ別の数値を指定するとかします。
するとこうなります。
![](https://assets.st-note.com/production/uploads/images/113769148/picture_pc_18b7b63de2bf9c9b4883d348c1df5ef2.gif?width=1200)
これを10秒前後の周期でやると最近のその辺にあるゲームで見るような感じになる、気がします。
おまけ
白と黒で指定できる動きの変化量は色を灰に近づけることで小さくする事が出来ます。
それを利用することで変わった動きも作成可能です。
例えばこのような画像を用意します。
![](https://assets.st-note.com/img/1692435624200-Jhp3G8aQNK.png?width=1200)
それを立ち絵に適用して中間点とかを活用するとこんな感じになります。
![](https://assets.st-note.com/production/uploads/images/113769345/picture_pc_4d0172c312a2195f488f96a90b06d11e.gif?width=1200)
上半身だけ捻って衣装を見せびらかしているように見え――見えません?
とっておきの衣装とか水着とかでやるといいかも?
色々やっていた中で偶然出来上がった産物なので調整は勘弁してください……。ついでに使いどころとか実際の有用性とかも置いておいて貰えると(
注意
ディスプレイスメントマップを適用すると映像にノイズ(謎の線)が乗る場合があることを観測しています。
いまいち条件が不明なので対応も報告もできないのですが……。
(おま環かもしれませんし)
出てしまった場合は「ぼかし」を強くすることで多少誤魔化せるので250を指定してしまいましょう。
「グリッチ表現に使うんだ! ぼかしなんて使えない!」という場合は……味になると思うので放置しましょう。
余談
画像はPNGだけでなく実はGIFも使用可能です。
正確にはYMM4が画像ファイルと動画ファイルとして認識できる形式なら使用できそうな気配があります。
アニメーションGIFを指定するとそれなりに遊べそうな動きをします。
が、動作確認以上の実験をする余裕はないです。
どなたかよろしくお願いします(丸投げ)。
アニメーションWebPも(気のせいでなければ)動作はしましたよ!