2022/08/31
こんにちは。影織です。
前回の開発工程日誌でお話した通り、 アニメーションを作るにあたって、画像を自由に変形させる機能が必要、 ということがわかりました。 今回は、img-motionの中でそれを実現するための弓削田さんの開発工程について伺いました。画像の台形変換
つまりどういうこと？
具体的には、このような変換を実現できるようになりました。実際に触ってみたい方は、以下の弓削田さんのブログを参照してください。 > 静的HTMLの限界を超えた画像を台形変換するツールを作ったよ。
試行錯誤の過程
scale, translate, rotationという3つを一つで使うmatrixというCSSがあるのですが、 これだけでは、画像を平行四辺形や菱形にしか変形できません。 台形に変換するには、画像の拡大縮小、回転、平行移動などを、 行列を使って座標を変換する「アフィン変換」をする必要があるそうです。
SVGを使う方法や、canvasを使う方法などを調べた後、 改めてCSSでの実装にトライする中で、 matrixではなく、matrix3dというものを使わないといけない、と気づいたそうです。 ここで出てくるのが、「ホモグラフィ」という、 平面を射影変換を用いて別の平面に射影する変換方法です。 これを使うと、一つの画像の四隅をピッタリ合わせて動かすことができるようになるんですね。img-motionの中ではどのように動くか
一つの画像を縦横に区切って、ブロックに分けて、そこにイメージをクリッピングします。 すると、そのブロックごとに画像を変形させることができるので、 下図のように、かなり柔軟に画像の形を作れるんですね。言い換えるなら、3Dのポリゴンの概念と同じようなことを実現できるというわけです。 こりゃすげぇや...
img-motionについて
画像一式を読み込んで、親子構造をつけることで、 親パーツが動くと、子パーツも追随して動くような仕組みになっています。最初にお話しした台形変換ができるshape機能は、 このアニメーションの一種として登録していきます。
このツールを使ってモーションの登録をした後、保存すると、 画像データもモーションも全部入ったjsonファイルが1つ出来上がります。 ゲームエンジンの中で、モーションの指示だけすれば動くようになっているので、 このゲームだけでなく、ゆくゆくは、他のゲームを作る時にも使えるツールなんですね。 こりゃすげぇや...（2回目）
ということで、今回は台形変換についての知識を深めることができました。 これを機に、めちゃくちゃ苦手だった数学をもう一回勉強してみてもいいなぁ。
