メッシュ・ボーン機能の使い方

SpriteStudio に実装されるメッシュ・ボーン機能は、３DCGソフトウェアのようにすべてのパーツをメッシュとボーンで構成する必要がなく、必要なパーツのみ柔らかい動きを実現できるようになっています。髪の毛や布などの柔らかい動きを表現するのに最適です。

SpriteStudio独特の制御になっており、そのため、３DCGソフトウェアの操作などと異なる部分がありますが、ウェイトなどが自動化されており、２Dアニメーションの知識のみで扱うことが可能です。

事前準備

互換性を確認する

メッシュ・ボーン機能を使用するためには「プロジェクト設定」の「互換性」でメッシュ・ボーン機能を有効にする必要があります。

メッシュパーツ用のセルマップを準備

メッシュパーツに使用するセルマップは、2の累乗のサイズにする必要があります。
（セルとして切り出す際は２の累乗にする必要はありません）

メッシュパーツは、通常パーツと同じように「セル」を使用します。
ただし、メッシュの切り出しを行う際、メッシュの範囲(UV)を設定する際に、隣接するセルの画像が表示されてしまいます。
参照イメージとなるテクスチャ画像を作成する際はご注意ください。

セットアップデータについて

アニメーションデータの中の「セットアップデータ（Setup）」でメッシュ・ボーンを配置します。セットアップデータはssaeにつき一つ存在し、ssae内の全アニメーションデータと情報を共有します。
セットアップデータが複数存在することはありません。

プロジェクトウィンドウの「Setup」を選択することで、セットアップデータを編集することができます。

レイアウトウィンドウの「Animation」「Setup」の文字をクリックすることで、アニメーションデータとセットアップデータの編集を瞬時に切り替えることができます。
「Animation」時にクリックするとセットアップデータの編集に、「Setup」の時にクリックするとアニメーションデータの編集に切り替わります。

アニメーションデータ編集時	セットアップデータ編集時

メッシュパーツを作成する

メッシュパーツ対応のセルを作成する

メッシュ編集はセットアップ・アニメーションデータ　どちらでも行えます

メッシュパーツは、従来のセルマップをそのまま使用します。
ただし、セルの切り出し位置に隣接して画像が存在した場合、メッシュ編集時の範囲設定によっては、隣接画像が表示されてしまうので注意が必要です。

セルリストウィンドウでメッシュパーツ対応のメッシュセルを作成することができます。

メッシュセルにしたいセルを選択し、コンテキストメニューを開きます。
メニューから「メッシュ編集」を選びます。

メッシュ化するセルを「通常パーツ」と「メッシュパーツ」両方で使用したい場合、セルを複製してください。
（メッシュ化した後でも、コンテキストメニューの「メッシュ化解除」でメッシュを解除することが可能です。）

「メッシュ編集ウィンドウ」が開きます。
メッシュ編集での作成方法は後程解説します。

セルリスト上で、(メッシュ)と名称についているセルが「メッシュセル」です。

メッシュを選択してコンテキストメニューを開くと「メッシュ編集」「メッシュ化解除」が有効になります。

メッシュ編集ウィンドウでメッシュ分割を行う

メッシュ編集ウィンドウでメッシュの分割を行います。

メッシュ編集ウィンドウを開くとオートが選択され、自動で生成されたメッシュのプレビューが表示されます。「オート」欄の粒度スライダでメッシュの粗さを調整できます。
メッシュの粗さを決めたら適用をクリックします。
メッシュが作成され、マニュアルに切り替わります。
作られたメッシュで問題なければメッシュ編集ウィンドウを閉じてください。確認ダイアログが表示されるので、「はい」をクリックしてください。
メッシュセルが完成しました。

オートとマニュアルの違い

メッシュ編集ウィンドウにはメッシュ自動分割の設定を行う「オート」と、自分で頂点や分割点を設定する「マニュアル」があります。

機能の詳細につきましては「メッシュ編集ウィンドウ」のページをご覧ください。

オートとマニュアルはツールバーで切り替えることができます。

オート	マニュアル

オート

セルの大きさに合わせて自動でメッシュ分割を行います。
分割時の粗さなど、設定はコントロールパネル上の「オート」欄で設定できます。

全体を均等にメッシュ分割するため、布や髪の毛といった、全体を均等にアニメーションさせるオブジェクトの場合、大幅に効率化を図ることができます。

マニュアル

オートで「適用」する、もしくはツールボタンの「マニュアル」を押すと、手動で頂点と分割点を設定するマニュアルに切り替わります。

本や弓など、面に沿ってメッシュを分割したい・持ち手だけ分割数を減らして動きを調整したいパーツは、手動で分割するのが適しています。

また、オートで作成した頂点・分割点を手動で調整することも可能です。

左クリック	「頂点」か「分割点」を打ちます。頂点を元に、アウトラインを構成します。種類「種類」メニューで、作成する点の種類を切り替えることができます。頂点アウトラインを設定するための点です。頂点を元にメッシュを作成する範囲を指定します。分割点メッシュに分割する際の基準となる点です。頂点で設定した範囲の中に設定することで、メッシュの形状を指定します。方法「方法」メニューで頂点の作成方法を変更できます。挿入自由に頂点を挿入します。頂点を挿入する箇所は青くハイライトされます。すでに作成されたメッシュに頂点を追加するときに向いています。連続生成最後に設定した頂点(青)の先に頂点を打ちます。途中で頂点を挿入しなおすことはできません。マニュアルで１からメッシュを作成したいときに向いています。
右クリック	コンテキストメニューを開きます。
ドラッグ	状態に応じて、機能が変化します。頂点・分割点のリピート生成頂点か分割点を連続で生成します。リピート間隔で生成間隔を指定することが可能です。範囲選択ツールバーで範囲選択を有効にすると、ワークスペースをドラッグすることで範囲内の頂点・分割点を選択することができます。なお、範囲選択を有効にしていなくても、Shiftを押しながらドラッグすることで、範囲選択が可能です。
Deleteキー	選択中の頂点・分割点を削除できます。
編集を終了	ウィンドウを閉じる際に、「変更を保存しますか？」とダイアログが表示されますので、「はい」を選択して終了してください。作成・編集したメッシュが保存されます。

ウィンドウの機能について、詳しくは以下のページもご覧ください。

「メッシュ編集」ウィンドウ

メッシュパーツとボーンパーツをレイアウトする

この項目の操作はセットアップデータ上で行います。

ジョイントパーツを配置する

メッシュ・ボーンパーツは、セットアップデータ上に配置を行います。
まずはジョイントパーツを配置します。

フレームコントロールウィンドウからジョイントパーツを追加する

フレームコントロールウィンドウの「ジョイントパーツを追加」からジョイントパーツのみを追加できます。

追加したジョイントパーツの子にメッシュパーツを追加することで、ジョイントパーツにメッシュパーツを関連付けすることができます。

フレームコントロールウィンドウから「ジョイントパーツを追加」をクリックすると、ジョイントパーツを追加することができます。
ジョイントパーツの子に属するようにメッシュセルをドラッグドロップすると、そのジョイントパーツに対してメッシュパーツが関連付けされます。

ボーンパーツを配置する

ジョイントパーツに対して、ボーンパーツを配置します。
セットアップデータで追加を行います。

なお、先にボーンパーツを配置してから、メッシュパーツを配置することも可能です。

ボーンの追加方法は２種類あります。

フレームコントロールウィンドウでジョイントパーツを選択し、ボーンパーツ追加アイコンをクリック
パーツツリーのコンテキストメニューから「ボーンパーツの追加」を選択

ボーンは通常の親子関係の他、ジョイントパーツから二股、三股と分けて配置することも可能です。

ボーンパーツの先端に違う絵を登録する場合

1つのジョイントパーツに複数のメッシュパーツを子パーツとして配置することはできません。
ただし、ボーンパーツの先にジョイントパーツを設定することで、先端に異なるメッシュパーツを設定することが可能です。

ボーンパーツの子パーツとして、新たにジョイントパーツを作成します。

メッシュパーツを新たなジョイントパーツの子パーツにし、新規にボーンツリーを作成することで、ボーンの先にさらにメッシュ・ボーンパーツを配置することができます。

注意
ボーンパーツに対して、通常パーツを使用した親子関係の構築はできません。
インスタンスパーツやエフェクトパーツも設定することはできません。

ウェイトを調整する

メッシュパーツとボーンパーツを配置が完了したあとは、メッシュパーツがボーンパーツの影響をどのように受けて変化するか、ウェイトを調整する必要があります。

レイアウトウィンドウで

「ウェイト表示」をクリックすると、現在のウェイトの状況を表示することができます。

「ウェイトの再設定」をクリックすると、ウェイトを自動で再設定します。
動きがおかしい時など、ウェイトの再設定を行ってください

ボーンパーツを配置した直後は、「ウェイトの再設定」を行ってから作業をしてください。
また、メッシュ編集をした後に、表示に違和感がある場合もこちらの機能を使用してください。

ジョイント・ボーンパーツを色分けする

レイアウトウィンドウのジョイント・ボーンパーツは、フレームコントロールウィンドウのカラーラベルを設定することで変更が可能です。

フレームコントロールで色を変更したいボーンパーツを選択し、右クリックをしてコンテキストメニューを開きます。

「カラーラベル指定」で任意の色を設定します。

カラーラベルを指定したパーツの色が、指定した色に変化します。

その他、セットアップデータで配置可能なパーツ

いずれのパーツも、セットアップデータ上で、ボーンパーツの子パーツとして設定することができます。

ボーンポイントパーツ

ボーンパーツの子供として配置する、座標取得を行うためのパーツになります。
ボーンパーツの動きに連動しますので、プログラムから特定の位置を取得する場合などに使用してください。
フレームコントロールウィンドウのパーツ選択領域のコンテキストメニューから追加できます。

コンストレイントパーツ

ボーンパーツのアニメーションを組む際に、ボーンパーツの動きに指定された拘束を与えるパーツになります。
フレームコントロールウィンドウのパーツ選択領域のコンテキストメニューから追加できます。

ボーンパーツにアニメーションを設定する

アニメーションの編集はアニメーションデータ上で行います。

セットアップデータで追加・設定したボーンパーツは、通常パーツと同様の方法でアニメーションを設定することが可能です。

0フレーム目を全て選択し、コンテキストメニューから「Setupからキーを作成」を選択します。
セットアップデータで設定したキーが作成されました。
ボーンパーツを通常パーツと同様に編集することで、メッシュパーツにアニメーションを設定することができます。

セットアップデータ上でZ回転値を設定しても、アニメーションデータ上ではZ回転値が設定されていません。
見え方を同じにするには、セットアップデータ上のZ回転値を、アニメーションデータ上でも同様の値をZ軸回転のアトリビュートに入力する必要があります。

メッシュ・ボーン機能の使用例

メッシュ・ボーン機能をどのように使用するかの作例を紹介します。使い方によって、さまざまな表現を実現することが可能です。

メッシュ・ボーン機能を活用したサンプルデータもご覧ください。

サンプルデータのダウンロード – 基本的なアニメーションのサンプル

また、動画ページに実際にメッシュ・ボーン機能を使用したアニメーションを掲載しております。こちらも是非ご覧ください。

動画 – 作例
SpriteStudioで作成した動画作品のご紹介

髪の毛やマントなどをたなびかせたい時に

キャラクターの髪の毛の揺れや、旗やマントといった布がたなびく表現を簡単に作成することができます。

脚の動きや棒のしなり、蛇など

棒や蛇のような、関節の無い棒状のものをしならせる、くねらせるアニメーションを簡単に作成できます。

また、今までは足を関節ごとにパーツ分けをしていましたが、メッシュ・ボーン機能を使用し、ボーンを人間の骨に見立てることで、間接でパーツを分けなくても足の動きを作成することができます。

作例「てのひらの冒険」

こちらの作品は、従来のSpriteStudioの機能と、Ver.6で追加されたメッシュ・ボーン機能、マスク機能をうまく組み合わせて作成されたアニメーションです。
髪の毛や布のアニメーションはもちろんですが「1枚の絵を立体的に動かす」といった、メッシュ・ボーン機能の様々な表現方法と、SpriteStudio Ver.6の可能性をご確認いただけます。

詳しい解説は下記ページをご覧ください。

SpriteStudio Ver.6の活用例「てのひらの冒険」