この記事は「続・Mohoから出力したSVGを制御したい妄想の話」の一部です。
■実物
【GitHub】SourceOf0-HTML/path_control: SVGを制御したい願望
https://github.com/SourceOf0-HTML/path_control
【GitHub Pages】ベクターデータをいじり倒したい気持ち
https://sourceof0-html.github.io/path_control/
■記事一覧
【SVG制御妄想１】SVG解析しないと始まらない
https://qiita.com/flying_echidna/items/5a628db0d652d1558208
【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる
https://qiita.com/flying_echidna/items/3930caf04626deec7bfb
【SVG制御妄想３】連番データをどげんかせんと
https://qiita.com/flying_echidna/items/ded3f3590c3d67fadb86
【SVG制御妄想４】変形させたいよなぁ？
https://qiita.com/flying_echidna/items/188634f35a05bbde9a51
【SVG制御妄想５】ボーンぐりぐり
https://qiita.com/flying_echidna/items/a34648da8a650fe34824
【SVG制御妄想６】助けてマルチスレッド
https://qiita.com/flying_echidna/items/80b101c1a1eedb534137
【SVG制御妄想７】SVGの限界
https://qiita.com/flying_echidna/items/2f53a461c5e6c05109df
■過去記事
【2019-03-06】「SVGでアニメーションさせたいんじゃ」の詳細報告
https://qiita.com/flying_echidna/items/ff3a061f4e348e62cca0
【2020-02-13】Mohoから出力したSVGを制御したい妄想の話
https://qiita.com/flying_echidna/items/da7ecc721650fa9ab651
SVGをいじり倒してわかったSVGだと困ること
今まで散々いじり倒してきて。
いろんなことをやってきて。
やっぱり思うこと。
Mohoから出力したSVGにはバグもあるし、あくまで出力結果であって、編集データではない。
そんな部分についての話。
マスクの出力不良
これは１つの記事まるまるで話したことなので、詳細割愛。
【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる
https://qiita.com/flying_echidna/items/3930caf04626deec7bfb
一回転オーバーしてても検出できない
主にボーンの話。
例えばボーンがアニメーションの中で360度以上回転してたとしよう。
でも出力されたSVGから無理やりボーンの角度を算出したところで、そのことは分からない。
Math.atan2()を使って角度を算出してる現状、返ってくる値は-PIからPIの間でしかない。
それじゃ困るんだよ。
特にスマートボーンは。
スマートボーンの角度によって、アクションの再生位置を制御している上、Moho上では一回転オーバーの値も設定できてしまう。
これが検出できないのは、正直困る。
同シェイプ内の同位置にある点が消失する
一つの形を変形させていくアニメーションの途中で、点が同じ位置にくることがある。
だんだん小さくなっていく、なんてアニメーションだと、おもっきり重なる。
すると、どうなるのか。
出力したSVGだと1つの点として合体して出力される。
やめろーー！！
どの点がどこに移動したか分からなくなるだろーー！！
点の数は常に一定であれーー！！
キーフレームが単純でもフレーム数が多いと重い
例えばMoho上で1フレーム目から100フレーム目にかけて一回転するアニメーションを用意したとしよう。
キーフレームとして見るなら、
1フレーム目：0度
100フレーム目：360度
程度の情報量なわけだ。
ところが、これをSVGで出力すると、100枚分のデータになってしまう。
1000フレーム使おうものなら、たかが一回転させるだけで膨大なデータになる。
ないわぁ。
イージングを実装した上で、キーフレームの情報が取れれば、もっと軽くなるんじゃねぇの？
と思うけど、Mohoから出力したSVGにキーフレームの情報なんて入れられるわけもなく…
ボーンのデータ手動で書くのめんどくさすぎる
SVGにはどうあがいても入らないからということで、JSONファイルで設定を書いた。
でも、新しく作ったMohoのデータでも、また新しくJSONファイルを手書きするの？
あれでも大変だったのに、その数倍の数もあるボーンの設定を？
また各々のボーンが識別できるように命名を考えながら？？
めんどくせぇえええええ！！！！
そもそもこの時点でSVGだけで完結できてねぇんだよぉおおおおおお！！！
レイヤー変形アニメーションが取得できない
一番我慢できなかったのが、正直これ。
全部がパスの変形データになってしまって、レイヤー変形情報が取れない。
正直これを口頭で説明するのは難しい。
当時の雑放送を見てもらった方が早い。
雑放送（2020/11/21：もうええSVG自力で出力したるわ！） - YouTube
https://www.youtube.com/watch?v=Rl-cxvuGnP8
配信のタイトルや後半でも言ってる通り、
最終的に「Moho上で動くLuaスクリプトを使って、自力でSVGを出力したるわ！」
という結論に至ってる。
が、それでもやっぱりSVGというフォーマットだとアンカーポイント（回転・拡縮の中心座標）の情報が入れられなかったりと、困ることが多すぎた。
もう脱SVGしようぜ
そしてこの結論に至る。
MohoのLuaスクリプトにすら手を出すようになってしまった今、
ボーン用に用意していた三角のパスも、JSONファイルも、Mohoのメニューから選ぶだけで自動で出力できるようになった。
各アクションのSVGファイルを出力するために、各アクションのMohoファイルを自動で生成できるようになった。
Moho既存のレンダラーを使ってSVGを出力しなくても、自力でSVGのフォーマットをそれっぽく出力できるようになってしまった。
というか、わざわざSVGというフォーマットで出力している、と言ってもいい。
だったら、自分が扱いやすい新しいフォーマットを作った方がいいんじゃない？
ということで。
To be continued...
（WindowsでLuaから日本語パスを出力するのに苦労しまくったのは、また別のお話…）