Leje式 シェイプモーションのすゝめ
https://gyazo.com/142c3f3af291a6563cf5858163e5e387
前置き
シェイプモーションと言っても、ここではRED ZONE作品に使われる図形がたくさん動くアレを指します
界隈では「図形(分かりづらい)」とか「モーショングラフィックス(これは違うんじゃないか)」とか呼ばれてます
僕はずっと「シェイプモーション」を提唱しているんですが、流石に浸透しない
本題
上のgifのBeforeをAfterにしていく形で解説します
①Before
https://gyazo.com/95597eba37bf2c0a2ee4fa2023b77f61
シェイプモーション触りたて感がありますね
(できるだけそれに近づけようと頑張った)
スピード感がなかったり物足りなかったりで微妙
②イージングや動かし方の改良
https://gyazo.com/d7295ebf82c37360fd9f09f0e5d3f82c
全体的なイージングを再構成する
イーズインアウトを多めに取り入れて、なめらかな動きを増やす
https://gyazo.com/e8fae7b7daee9f3d148e50213f6c6077
使用したベジエたち
動きにスピード感を持たせるために、動きの激しさを増やす
回転などの動きにバリエーションを加える(45℃単位でない動きを入れる)
泊に囚われずに、動きの長さにバリエーションを加える
https://gyazo.com/70330a8eca11c7804b90e901924e9069https://gyazo.com/88d733fdf0b7e241abb7d2b09741b00e
タイムラインを見れば違いが分かると思います(①← →②)
③微妙な太さの線をなくす
https://gyazo.com/0633c502e34d822d78873c2fc7672fbf
微妙な太さの線はダサい(直球)
細いライン幅や直線の太さを、更に細い5で統一
太めの線を更に太く50→80
最後の線を極端に太くして、差分合成を活用
差分合成はかっこいいけど使いすぎ注意
④オブジェクトを増やす/変える
https://gyazo.com/0356a0a9e96e8dee6ea3d7b02a0d2237
情報量が適度に多いのはいいことです
同時に色々なことを起こすと更にスピード感が出ます
この作業ではどれだけインプットできているか、どれだけアウトプットできるかが重要です
というかそれがほぼ全てです
https://gyazo.com/bfc47d62765e552a1cee8075a97221a2
使えるバリエーションをどんどん増やしていきましょう
ちなみに、今回出来上がったものを逆再生してちょっと弄るとこれになります まとめ
結局イージングが大事
泊に囚われずに、動きの長さにバリエーションを加えると良い
適度にオブジェクトを増やすとスピード感が出る
追記(2020/6/29)
この記事用に作成したシェイプモーションのPFを配布します(readmeを読んでください)