『PhotoshopToSpine.jsx 』で親子関係をもったボーンを書き出した時、『親から子までの「長さ」と「方向」が整ったボーンを作成すること』は可能でしょうか?
現状、「長さ」が「0」のボーンが作成されるのみで、親から子まで向かう「長さ」のあるボーンが作成したいです。
『PhotoshopToSpine.jsx』内を同の様に変更すれば良いかわからない状態です。
『PhotoshopToSpine.jsx 』で親子関係をもったボーンを書き出した時、『親から子までの「長さ」と「方向」が整ったボーンを作成すること』は可能でしょうか?
現状、「長さ」が「0」のボーンが作成されるのみで、親から子まで向かう「長さ」のあるボーンが作成したいです。
『PhotoshopToSpine.jsx』内を同の様に変更すれば良いかわからない状態です。
torun こんにちは!
スクリプトの制作者であるNateに確認を依頼したところ、以下のように回答がありました:
やりたいことは、506行目から529行目を修正すれば実現できるはずです:
https://github.com/EsotericSoftware/spine-scripts/blob/master/photoshop/PhotoshopToSpine.jsx#L506-L529
たとえば、518行目を以下のように変更すれば可能でしょう:
var rotation = Math.atan2(y, x) * 180 / Math.PI;
var length = Math.sqrt(x * x + y * y);
json += ' "length": '' + length + ', "rotation": ' + rotation + ' }';
変数 x
と y
はすでに親からの相対値になっています。なのでこれらを使って角度を計算することができるでしょう。
もしうまくいかなければお手数ですが再度ご質問ください。
どうぞ、よろしくお願いいたします。
お返事ありがとうございます!
var rotation = Math.atan2(y, x) * 180 / Math.PI;
var length = Math.sqrt(x * x + y * y);
json += ' "length": '' + length + ', "rotation": ' + rotation + ' }';
コードを518行目に代入したところエラーがでましたので
「,」「'」を調整し下記で動作させました。
var rotation = Math.atan2(y, x) * 180 / Math.PI;
var length = Math.sqrt(x * x + y * y);
json += ', "length": ' + length + ', "rotation": ' + rotation + ' }';
書き出されたjsonをSpineにインポートさせたところ、長さは取れているようなのですが
角度があべこべな状態となりうまくいきませんでした。
「自身のやりたいこと」に近い参考動画がありましたので調整方法を教えていただきたいです。
『~~Photoshop上で描いた中心点を基にSpine上に自動でボーンを生成してくれる~~』
00:40辺り~
You can fix it this way:
以下のように修正できます:
var rotation = Math.atan2(y, x) * 180 / Math.PI + 180;
var length = Math.sqrt(x * x + y * y);
json += ', "length": ' + length + ', "rotation": ' + rotation + ' }';
This points the child bones to the parent though. Image removed due to the lack of support for HTTPS. | Show Anyway
これによって、子ボーンが親を指すようになります。
A bone can have multiple children, so pointing at the children would have to decide which, like the first. You can sort of do that this way:
一つのボーンには複数の子がいる可能性があるため、子を指す場合にはどの子を指すかを決める必要があります。例えば、最初の子を指すことができます。その場合、以下のようにしてそれを行うことができます:
for (var boneName in bones) {
if (!bones.hasOwnProperty(boneName)) continue;
var child = bones[boneName];
if (child.parent == bone) {
var cx = child.x - bone.x, cy = child.y - bone.y;
var rotation = Math.atan2(cy, cx) * 180 / Math.PI + 180;
var length = Math.sqrt(cx * cx + cy * cy);
json += ', "length": ' + length + ', "rotation": ' + rotation;
break;
}
}
json += ' }';
However, it doesn't give you what you want because when you rotate the parent to point at the child, all the children are rotated: Image removed due to the lack of support for HTTPS. | Show Anyway Image removed due to the lack of support for HTTPS. | Show Anyway
ただし、親を子に指すように回転させると、すべての子も回転してしまうので、望む結果は得られません:
If you could rotate all the children the opposite amount you'd see it work (done by hand):
もし子たちを逆方向に同じ量だけ回転させることができれば、正しく動作すると思います(手動で行った場合):
The code to rotate all the children is a little tricky. I think it would be easier to create the bones by hand than to write that code!
すべての子を回転させるためのコードは少々複雑になります。そのコードを書くよりは、手動でボーンを作成した方が簡単だと思います!