2022/09/22
こんにちは。影織です。
先日、img-motionツールができたのですが、技術的な問題が発生してしまい...!? さて、何が起こったのか、早速見ていきましょう。シェイプアニメーション（自由変形）の問題
アニメーションの計算について
アニメーションは全て、CSSのキーフレームを使って動かす実装をしていたのですが、 シャイプアニメーションの場合、計算結果の線形補完ができず、 綺麗な変形ができないとわかったそうです。 そこで実装を変更し、 回転や移動は従来通りのキーフレームアニメーションをさせ、 シェイプだけは、スクリプトを読み込んだ後にメモリに保持しておく形で アニメーションする方針に切り替えたそうです。 ちなみにワンフレームずつ計算する方法も検討したそうですが、 そうすると、コマ落ちしてしまうことがあるとのことでした。 パーセンテージで動きが揃うように処理してあるので、 アニメーションをループさせても、齟齬が起こらないような仕組みになっています。ポリゴンの1ドット問題
ポリゴンにテクスチャをはる際、1ドット分大きく大きく作らないと、 画像をセグメントに分ける時に隙間ができてしまう、という問題がありました。 線が斜めになると、1ピクセル単位でアンチエイリアスが発生します。 上下の線が綺麗に補完されるようにするためには、 その分の1ドット多めに取っておく必要があるんですね。 なるほど〜。 ツール内では、このようにさりげなく1px分大きく作られています。
セグメント分割でずれる問題
シェイプ機能では、下図のようにセグメントを分割できます。 そうして、真ん中だけを膨らませたり、歪ませたりできるんですね。この時、ある程度（二倍くらい）以上大きくすると、このように変な計算結果になってしまうんですね。
また、セグメント分割した際に、左右の高さをずらして動かすと、 上下の切れ目がずれてしまうことがあります。
三次元で計算しているので、ずれてしまうようです。 変形の際は、高さを揃えるよう注意が必要です。
まとめ
こうした技術的障壁を一つずつ乗り越えていくのも、 プロジェクトの醍醐味ですね！
