# ウェイトビュー

ウェイトはアタッチメントの頂点をボーンにバインドするために使用され、ボーンが変形すると頂点も変形します。ウェイトを使うと、ボーンが操作された際にアタッチメントを自動的に変形させることができ、複雑な変形をアニメーションさせるために個々の頂点を動かすよりも簡単で効率的になります。

<callout>複雑なメッシュを設定する際には、[ウエイトの計画](/blog/Mesh-weight-workflows)を慎重に行なってください。</callout>

ボーンがメッシュ頂点に影響を与えることの他の名称としては、リニアブレンドスキニング、ブレンドスキニング、マルチマトリックススキニング、スケルタルサブスペースデフォーメーションなどがあり、単に「スキニング」と呼ばれることもあります。Spineでは、無関係な機能である[スキン](/spine-skins)との混同を避けるため、「ウェイト」という名称を使用しています。

ウェイトは主に[メッシュアタッチメント](/spine-meshes)に対して使用されますが、[パス](/spine-paths)や[境界ボックス](/spine-bounding-boxes)、[クリッピングアタッチメント](/spine-clipping)にも使用できます。このページの残りの部分では「メッシュ」という言葉が使用されますが、ウェイトは上記のタイプのアタッチメントでも動作します。

![](/img/spine-user-guide/weights/view.png)

ウェイトの賢い利用方法については、ウェイトの[Tips](/spine-tips#Weights)をご覧ください。

# バインド

ウェイトを調整する前に、ボーンをメッシュにバインドする必要があります。これには2つの方法があります。

1. **先にメッシュを選択した場合**<br>任意のツールでメッシュを選択し、ウェイトビューの`Bind(バインド)`をクリックしてバインドモードに入ります。次に、メッシュにバインドしたい各ボーンをクリックします。終了したら、もう一度`Bind(バインド)`をクリックするか、`スペースバー`か`エスケープ`キーを押してください。
1. **先にボーンを選択した場合**<br>任意のツールで任意の数のボーンを選択し、ウェイトビューの`Bind(バインド)`をクリックしてバインドモードに入ります。次にメッシュをクリックして、ボーンをそのメッシュにバインドします。

![](/img/spine-user-guide/weights/bind-mode.png)

初めてボーンがメッシュにバインドされたとき、ウェイトは[自動計算](#自動)されます。その後、ボーンがトランスフォームされると、頂点がその影響を受け、画像が変形するようになります。

![](/img/spine-user-guide/weights/rotate.png)

# ボーンリスト

ボーンリストには、選択中のメッシュにバインドされたボーンが表示されます。

![](/img/spine-user-guide/weights/bones-list.png)

各ボーンには色が割り当てられます。`Weight(ウェイト)`ツールが選択されると、ビューポートでもボーンの色が一致して表示されます。

![](/img/spine-user-guide/weights/bound.png)

ビューポートで頂点が選択されると、ボーンリストには、各ボーンがその頂点に対して持っているウェイトが表示されます。複数の頂点が選択されていて、ボーンがそれらに対して異なるウェイトを持っている場合、代わりにアスタリスク(`*`)が表示されます。ウェイトを持つボーンの名前は、ボーンリストでハイライトされます。

ボーンは、ボーンリストで選択して`Remove(取り除く)`をクリックすることでバインドを解除できます。バインドされていないボーンはメッシュに影響を与えなくなります。すべてのボーンが取り除かれると、メッシュがアタッチしているボーンのトランスフォームの影響のみを受けるようになります。

ボーンを右クリックすると、ツリーとビューポートでそのボーンが選択されます。

## 三角形の順番

ボーンリスト内のボーンの順番は、ボーンを上下にドラッグすることで変更できます。ボーンの順番は、メッシュのどの三角形が同じメッシュの他の三角形の上に描かれるかを決定します。これは、メッシュが重なり合う場合には重要です。

メッシュの三角形は、まずどのボーンがその三角形の頂点に対して最も高いウェイトを持っているかを判断することでソートされます。ウェイトビューでのそのボーンの順番は、どの三角形が他の三角形の上に描かれるかを決定するために使用されます。

![](/img/spine-user-guide/meshes/weights-order.gif)

# 円

`Pies(円)`がチェックされている時に`Weight(ウェイト)`ツールを選択すると、各ボーンからのウェイトを示す円グラフが各頂点に表示されます。円グラフのスライスは、ボーンリストの各ボーンの色と一致します。選択中の頂点には、より大きな円グラフが表示されます。

![](/img/spine-user-guide/weights/pies.png)

# オーバーレイ

`Overlay(オーバーレイ)`がチェックされている時に`Weight(ウェイト)`ツールを選択すると、メッシュがボーンカラーで塗りつぶされ、各ボーンのウェイトの量が表されます。

![](/img/spine-user-guide/weights/overlay.png)

# 選択中

`Selected(選択中)`がチェックされていると、円グラフは選択中の頂点と、ボーンリストで選択中のボーンのウェイトを持つ頂点に対してのみ描画されるようになります。また、オーバーレイは、選択されていないすべてのボーンに黒を使用するため、かすかな色を見やすくすることができます。

![](/img/spine-user-guide/weights/selected-black.png)

# ウェイトツール

![](/img/spine-user-guide/weights/weights-tool.png)

各頂点には、ボーンの影響力を決定するウェイトが設定されています。[自動ウェイト](#自動)だけでもしばしばうまく行きますが、`Weights(ウェイト)`ツールを使って手動でウェイトを調整することができます。

選択された頂点のウェイトを変更するには、まず、ウェイトを増減させたいボーンを選択します。これは、ボーンリストまたはビューポート内でボーンをクリックすることで行えます。次に、[モード](#モード)に応じて選択した頂点のウェイトを変更するために、ビューポート内でドラッグします。

## モード

![](/img/spine-user-guide/weights/mode.png)

`Mode(モード)`とその下のスライダは、`Weight(ウェイト)`ツールの動作を決定します。

`Weight(ウェイト)`ツールを使用する前に、まずウェイトを調整するボーンを選択してください。これは、ボーンリストまたはビューポート内のボーンをクリックすることで行えます。

### ダイレクト

`Direct(ダイレクト)`では、個々のウェイト値を正確にコントロールすることができます。ボーンリストで頂点とボーンを選択した後、ビューポート内で上下にドラッグして、それらのボーンのウェイトを調整します。また、`Weight(ウェイト)`スライダーを使って正確なウェイトを設定することもできます。

頂点が選択されていないときに頂点を選択するには、ドラッグしてボックス選択します`ctrl`(Macでは`cmd`)を押しながらクリックまたはドラッグしてボックスを選択すると、追加の頂点を選択することができます。選択された頂点は、`スペースバー`か`エスケープ`キーを押すか、空いているスペースをクリックすることで、選択を解除することができます。

### ブラシ

`Weight(ウェイト)`ツールには3つのブラシモードがあります:

* `Add(追加)`は選択中のボーンのウェイトを追加します。
* `Remove(取り除く)`は選択中のボーンのウェイトを削除します。
* `Replace(置換)`は、選択中のボーンのウェイトを特定の値に設定します。

各ブラシモードには、3つの設定があります:

* `Strength(強度)`は、適用される最大ウェイトを設定します。
* `Size(サイズ)`は、ブラシのサイズを設定します。
* `Feather(フェザー)`は`Strength(強度)`の値から0%までウェイトが減衰するブラシサイズのパーセンテージを設定します。

![](/img/spine-user-guide/weights/brush.png)

頂点が1つも選択されていない場合、ブラシはすべての頂点に影響を与えます。そうでない場合は、ブラシは選択された頂点にのみ作用します。

頂点をクリックして選択するか、`ctrl`(Macでは`cmd`)を押しながらでボックス選択ができます。選択された頂点は、`スペースバー`か`エスケープ`キーを押すか、何もないところをクリックすることで、選択を解除することができます。

## ウェイトの調整

あるボーンのウェイトを追加すると、その頂点に影響を与える他ボーンのウェイトは、ウェイトの合計値が100%になるように減少されます。ほとんどの場合、ウェイトを追加することによってのみ調整する方がより直感的です。

あるボーンのウェイトを減らすと、その頂点に影響を与える他ボーンのウェイトは、ウェイトの合計値が100%になるように増加します。そのボーンが100%のウェイトを持っている場合は、ウェイトを与える他のボーンがないため、ウェイトを減らすことはできません。

## ウェイトのテスト

ウェイトを調整した後、ボーンをトランスフォームさせて、ウェイトがどのように動作するかを確認することができます。

他のツールに切り替えても、`Weight(ウェイト)`ツールの選択は保存されます。そのため、トランスフォームツールに切り替えて、ボーンを操作してウェイトを試した後、`Weight(ウェイト)`ツールに戻ってウェイトをさらに調整する際に、選択を変更する必要はありません。

ボーンのトランスフォーム(変形)は設定モードで行うことができ、その後、アンドゥを使ってボーンへの変更を戻すことができます。しかし、ボーンのトランスフォームにはアニメ化モードを使った方が、設定モードに影響を与えないのでより便利です。[自動キー](/spine-keys#自動キー)が無効の場合、タイムライン上のどこかをクリックすれば、トランスフォームしたボーンがセットアップポーズに戻ります。

ウェイトを調整する際に、ボーンを最大範囲まで動かすアニメーションを作成しておくと非常に便利です。これにより、ボーンのトランスフォームツールに切り替えることなく、ウェイトがどのように動作するかに集中することができます。`Weight(ウェイト)`ツールの`Direct(ダイレクト)`モードは、アニメーションの再生中に使用するのが最も簡単です。また、ビューポートでアニメーションが再生されていなくても、[プレビュービュー](/spine-preview)を使ってウェイトを調整しながら再生されているアニメーションを確認することができます。

# 自動

`Auto(自動)`ボタンはウェイトを自動的に計算します。これは、頂点とボーンの間の単純な距離を使用するのではなく、Spineはメッシュのトポグラフィーを考慮した高度なアルゴリズムを使用して、最適なウェイトを選択します。

ビューポートでいずれかの頂点が選択されている場合、ウェイトは選択中の頂点に対してのみ計算されます。これは、メッシュの一部のウェイトを固定する必要があって、メッシュの残りの部分に手動で設定したウェイトを失いたくない場合に便利です。

ボーンリストでいずれかのボーンが選択されている場合、ウェイトは選択中のボーンに対してのみ計算されます。これは、自動ウェイトが必要なボーンのウェイトを計算してくれない場合に役立ちます。その場合、ボーンを選択せずに自動ウェイトを適用すると、必要な状態に近いウェイトを得られ、その後、さらにウェイトを手動で設定することができます。

# スムーズ

`Smooth(スムーズ)` ボタンは、選択された頂点のウェイトを、隣接する頂点と平均化します。隣接する頂点とは、ハル輪郭線（シアン色）または手動で作成した内部エッジ（オレンジ色）で接続されたものを指します。頂点が何も選択されていない場合、すべてが影響を受けます。`Smooth(スムーズ)`はボーンのウェイトを分散させ、より滑らかな変形を実現します。複数回クリックすることで、ウェイトをどんどん広げていくことができます。

ただし、スムージングにより、不必要な[頂点トランスフォーム](/spine-metrics#頂点トランスフォーム%28Vertex-transforms%29)が行われてしまうことがあります。`Prune(削減)`を使えば小さなウェイトを取り除くことができます。

# 削減

`Prune(削減)`ボタンは、しきい値以下のウェイトを削除します。ウェイトを設定する際、特に`Smooth(スムーズ)`を使用した後には、いくつかの頂点にごく小さな影響を与えるボーンが出てくることがよくあります。これらのウェイトは、目に見える違いをもたらすことはほとんどありませんが、それでも余分な[頂点トランスフォーム](/spine-metrics#頂点トランスフォーム%28Vertex-transforms%29)が計算される原因となってしまいます。不必要なウェイトを取り除くことで、メッシュのレンダリングに必要な頂点トランスフォームの数を減らすことができます。

`Bones(ボーン)`スライダーは、各頂点に対してウェイトを持つことができるボーンの最大数を決定します。頂点が指定された以上のボーンに対してウェイトを持つ場合、最も低いウェイトが取り除かれ、ウェイトを持つ他のボーンに分配されます。

`Threshold(しきい値)`スライダーはウェイトが頂点から取り除かれるしきい値を設定します。取り除かれたウェイトは、ウェイトを持つ他のボーンに分配されます。

これらのスライダーを調整すると、結果のライブプレビューが表示され、取り除かれるボーンの数が表示されます。

複数のメッシュで削減をするには、[ツリーフィルター](/spine-tree#フィルター)を使ってメッシュのみを表示し、すべてのメッシュを選択して`Prune(削減)`をクリックしてください。

# バインディングをアップデート

`Update Bindings(バインディングをアップデート)`ボタンは、現在の頂点をボーンに再バインドし、古いバインドポジションを破棄します。

![](/img/spine-user-guide/weights/update-bindings-button.png)

ボーンがメッシュにバインドされると、その時点でのメッシュの頂点が各ボーンに関連して保存されます。ボーンが移動すると、頂点もボーンに対して同じ位置になるように移動します。ボーンのウェイトは、各ボーンが頂点に与える影響の大きさを決定します。例えば、ボーンのウェイトが100%であれば、頂点はボーンの動きに完全に一致して動きます。

<callout>その他の`Update Bindings(バインディングをアップデート)`の使用例については、[メッシュバインディングチュートリアル](/blog/Mesh-binding-tutorial)や[回転するダイヤモンドのチュートリアル](/blog/Rotating-diamond-tutorial)をご覧ください。</callout>

メッシュにバインドされた後にボーンがトランスフォームされた場合、ウェイトを調整すると頂点の位置が変わります。これは、各ボーンが頂点を異なる位置にしたいために起こります。ウェイトを調整したときに、頂点が動くことが許容される場合もありますが、そうでない場合もあります。そんな時に`Update Bindings(バインディングをアップデート)`が役に立ちます。

#### 「バインディングをアップデート」を使用しない例

以下の例では、バインディングをアップデートする必要はありません。ウェイトを調整すると、頂点が動きますが、これは許容範囲内です。

長い尻尾を持つスケルトンを考えてみましょう。画像は曲げれば曲げるほど歪むので、曲げられる範囲の中央付近の画像から始めるのがよいでしょう。長い尻尾は両方向に大きく曲げる必要があるので、長くて細い長方形を使い、ボーンにバインドしてウェイトを設定するのがベストです。

![](/img/spine-user-guide/weights/tail1.png)

しかし、設定モードで尻尾が完全にまっすぐになっているのは奇妙に見えるかもしれないので、設定モードで尻尾が曲がるようにボーンを回転させることができます。

![](/img/spine-user-guide/weights/tail2.png)

尻尾を曲げるためにボーンを回転させたので、メッシュがバインドされてからボーンのトランスフォームが変わりました。現在、各ボーンが頂点が異なる位置にさせているので、ウェイトを調整すると頂点が動きます。ただ、ウェイトを調整することで、曲げられた尾の変形をコントロールすることはできますし、このセットアップポーズが正確な位置を保つことは重要ではないので、これは問題ありません。

#### 「バインディングをアップデート」の使用例

以下の例では、ウェイトを調整したときに頂点が動かないようにするために、バインディングをアップデートを使用しています。

腕にウェイト付きのメッシュがあるスケルトンを考えてみましょう。腕のボーンを設定モードで回転させて、希望通りのセットアップポーズを実現する場合、アニメーション中での腕の曲がり方を修正するためにウェイトを調整すると、設定モードで頂点が動いてしまい、セットアップポーズが台無しになってしまいます。このような場合には、`Update Bindings(バインディングをアップデート)`を使って、腕を回転させた後に新しいバインドポーズを設定することができます。そうすれば、ウェイトを変更しても、設定モードの頂点は動きません。

# ボーンの複製

ボーンが[複製](/spine-tree#プロパティ)されると、そのボーンの下にあるすべての子ボーン、スロット、およびアタッチメントも複製されます。ウェイトを持つアタッチメントがこの方法で複製された場合、出来るだけ対応する複製されたボーンを使用するようにウェイトが修正されます。

# ビデオ

[youtube:d-YeActEi38&list=PLwGl7Ikd_6GRFo7d0uRu_fN2RIlvkxW7b?modestbranding=1&rel=0]

[次: ウェルカムスクリーン](/spine-welcome-screen)
[前: ツリービュー](/spine-tree)
[Spine ユーザーガイド: 目次]