#0.発端
PlayCanvasでSpineが使えるらしい!
確かにサンプルでデフォームアニメできてる!
Overview | Dashboard | Spine Plugin | PlayCanvas | 3D HTML5 & WebGL Game Engine
https://playcanvas.com/project/371225/overview/spine-plugin
↓
当然デフォーム目的だ!Live2Dみたいな事するぞ!
↓
苦労してモデル作る!
↓
PlayCanvasに入れる!!
↓
・・え??(壊れたモデルを眺める)
恐ろしい事に画像にメッシュのフラグ付けただけで壊れる。
笑い事じゃない。(SpinePro$299だぞ!)
esotericsoftwareもPlayCanvasも公式説明なし。鬼。
サンプルデータのHero-Proインポートしてもデフォーム部壊れる。鬼畜。
Spineの公式プラグインではないのでSpine側に非はないが。
※メッシュなしは動きますが剪断変形はエラー出るのでダメ。
#PlayCanvasでSpineのメッシュモデルが壊れる理由
##1.画像が2の倍数じゃない
PlayCanvasに読み込んだ時点で
サイズ勝手に2の倍数に変更されて画像もatlasも画像サイズが変わる。
エクスポート時はアトラス設定のページの2のべき乗にチェックを入れる。
##2.Spineのjsonモデルデータの出力がおかしい。
Spine: JSON export format
http://ja.esotericsoftware.com/spine-json-format
公式の公開フォーマット
これによるとtypeの設定は"mesh"と"skinnedmesh"の２種類あるが
常に"mesh"しか出力していないっぽい
(skinnedmeshと書かれているデータがあるのだから一定条件では出力されていると思われる)
デフォームをするパーツなのに"mesh"と出力されている事がある
##3.実際にデータを確認してみる
jsonをテキストエディタで開きます。
※以下は手持ちのjsonを開いた物なので座標は気にせず
メッシュを使用している"skins"を見る。
"type"を見る。"mesh"か"skinndedmesh"か?
"vertices"を見る。
ただの矩形である場合は"type"が"mesh"
"type":"mesh","path":"stand_clip","uvs":[1,1,0,1,0,0,1,0], "triangles":[1,3,0,1,2,3], "vertices":[112.5,-4.35,-112.5,-4.35,-112.5,650.65,112.5,650.65]
verticesのフォーマットが(x,y, x,y ..)
メッシュである場合は"type"が"skinnedmesh"
{"type":"mesh","path":"stand_clip","uvs":[1,1,0,1,0,0,1,0], "triangles":[1,3,0,1,2,3], "vertices":[ 1,1,-218.27,-122.62,1, 1,1,-222.29,102.35,1, 1,1,432.61,114.04,1, 1,1,436.62,-110.92,1],
verticesのフォーマットが( borncount, bornindex, x,y, weightbornindex .. )
しかし"type"が常に"mesh"で出力されてる。
これによって(x,y,x,y..)のフォーマットにしか対応してない。
スキンがメッシュを使用している場合。
jsonを開いて、"type"を"mesh"から"skinnedmesh"に手動で書き換える。
{"type":"mesh","path":"stand_clip",
↓
{"type":"skinnedmesh","path":"stand_clip",
追記(6/6) : animationの"deform"と書かれている部分を全て"ffd"に変える。
で、とりあえず動いた
実行結果
https://playcanv.as/p/lqrncr5j/
プロジェクト
https://playcanvas.com/editor/scene/616172
#追記(6/5) : exampleのhero-pro読み込むと壊れる件を解決
1.上記のまとめから、mesh->skinnedmeshに書き換える
これはverticesを見て配列が長い物はskinndedmeshだろうと判断して書き換える。
2.animationの"deform"と書かれている部分を全て"ffd"に書き換える。
それだけでデフォーム部分がちゃんと描画される。
ffdと書けばSpinePluginは動くのに、データがffdで出力されないというのは完全にミスじゃないの?
~~でも今のバージョン(3.6.52)で自作した物は普通に出力されるのか?~~→されない。やはり壊れた。要修正!!
※"ffd"という命令は公式フォーマットに書かれていないが、SpinePluginに入っているheromeshのjsonを見ると
"deform"の場所が全て"ffd"と書かれている事から試した。他の文字列でもいいのかは不明。
3.IKの足元が90度曲がっている問題。
bonesを見て、foot1、foot2の最後に
"transform": "noRotationOrReflection" と書かれている部分を
"inheritRotation": falseに 書き換える。
#追記(6/5) : 描画の優先順位?
前提として
Spine Plugin
https://playcanvas.com/project/549812/overview/spine-plugin
をフォークしている、またはレイヤー設定をしている事。
SpinePluginのプロジェクトを探すといくつも出ますが上記が本家最新版のようです。
spine.jsアトリビュートでpriority指定しつつ、個別のアニメーション指定してるスクリプト内でも
this.entity.spine.spine.priority = 2;
などと指定しいると混乱します。(違う値が入ったまま片方を修正し続けている場合がある)
個別スクリプト内のpriority設定を消して、エンティティのアトリビュートから指定。
(またはスクリプト内のみにする)
1が一番奥にして(0だとWorldの裏行く)、各エンティティに順番に2,3,4..と指定したら、カメラによる描画順番狂いが収まりました。
#終わりに
実際の所、既に解決されている問題なのか
余りにも人口少なすぎて誰も試してないのか分りませんが
( 英語のフォーラム見ても解決っぽい記事がない )
この為にSpinePro買ったのに畜生!!みたいに心折れた方がいた場合、助けになれば。
またWebGLで動くイラストの選択肢になれば幸い。
ちなみに。
Unityで同じデータ使うと普通にできるんだな・・typeでなく配列の長さで見てるのか。