Unity技術ブログ

AnyPortraitのチュートリアル解説その2

取り急ぎ、前回から引き続きAnyPortraitのTutorialの解説を行って行きます。
今回は、Psd(フォトショップのファイルデータになります。)からデータを読み込んでボーンを組み込みキャラクターを動かしていくチュートリアルとなっています。

では、順次説明して行きます。

2.1

・初期設定を終わらせます。
(前回のAnyPortRaitの項目1.1を参照)

AnyPortraitのスライムのアニメーションのチュートリアル

・Window -> AnyPortrait -> 2D Editor からいつものAnyPortRaitのEditorを開きます。

AnyPortraitのEditorが開いたら、MakeProjectボタンを押下します。

・次にInportPSD File Buttonを押下します。

・LoadPsdFileを押下


・Assets -> AnyPortrait -> Demo -> AP_SampleCharacter_PeacockTheAria.psdを今回は選択します。


・Psd読み込み完了後にPaperレイヤーは不要なので、Bakeのチェックを外す


・次の画面でSavePathをSetする(任意のフォルダを選択します)

 

・Bakeボタンを押下します。
こちらの操作によって、任意のフォルダにAtlasが生成されます。

・CompLeatボタンを押下します。


・こちら、CompLeatボタン押下後に Images、Meshes、MesheGroupsが自動生成されます。(大変便利ですね)

・MeshGroupsを選択し、SetRootUnitボタンを押下します。


・その後にBakeボタンを押下します。

・生成したAtlasの設定を変えます。

まずは、先ほど生成したAtlasを選択します。

次に
GenerateMipMapsのチェックを外します。


Compression をNoneに

Applyを押下する

・ゲームシーン上にキャラクターがセットされているのが確認できます。

2.2

次のチュートリアルでは、

2.1で自動作成されたメッシュ(四角い形状で初期はメッシュが設定されています。)

を手動でメッシュ設定していきます。

ひたすら、メッシュを設定していってうまくメッシュ変形を行えるように形状を整えていきます。

メッシュ周りの操作は前回のチュートリアル1.2の項を参照

 

2.3

こちらの項ではメッシュのクリッピングマスクについての解説を行っています。

メッシュグループを選択します。

メッシュの一覧が表示されますので、クリッピングマスクを適用したいオブジェクトを選択して、

SetClipingMaskボタンを押下します。

クリッピングマスクが適用されました。

また、MaskのTextureサイズを変更することで、Maskのクオリティを変えることが可能です。

低いクオリティのマスクだと境界がぼやけます。

2.4

こちらの項では、ボーンの挿入のやり方の解説になります。

では、まずはじめに、MeshGroupを選択します。

次にMeshGroupのBoneボタンを押下

Boneのメニューに切り替わるので、StartEditingBonesボタンを押下します。

次にBoneをこれから追加していきたいのでAdd Boneボタンを押下します。

画面上で左マウスボタンでボーンを追加

右マウスクリックでボーンの作成をやめます。(そのままだとボーンが連続作成される)

また、ボーンは「B」キーで表示や非表示を切り替えることができます。

また、ボーンを選択した状態で右の詳細メニューから色や形状を変えることができます。

Shape->Colorから好きな色を入れたり

Shape->Widthに大きな値を入れて幅を太くしたり、

Shape->Taperの値を少なくして尻尾の部分を太くしたりすることが可能です。

また右の詳細メニューの上の方にボーン名を入れる箇所があり、好きな名前をつけることが可能です。

それでは大体の作成方法を把握したのでキャラクターのBoneを組み上げて行こうかと思います。

まずは、背骨部分から作っていきます。

新しくボーンをお腹のあたりに作成します。

右の詳細メニューから、値を上イメージのように設定

名称をBoneSpine1に

を選択した状態で

画面上でボーンをさらに二つ作成します。

親子関係のついたSpineのボーンを作成することができました!

次にBone Spine 3を選択して名称を変えます。

Bone Neckに変更

色もわかりやすように変えます

次にBone Neckの配下にBone Headを追加します。

わかりやすいように図太い形状に

次に親のBoneを選択していない状態で、左と右の耳のBoneを作成します。

同じ要領でフードの尻尾部分にもBoneを入れます。

Bone Hood Tail L,

Bone Hood Tail R を入れます。

次に、腕のBoneを入れていきます。

まず、何も選択していない状態で右腕の辺りにBoneを作成します。

名称をBone Arm R 1にします。

Bone Arm R 1を選択した状態でさらにBoneを作成します。

Bone Arm R 1配下に Bone Arm R 2が作成できました。

同じような操作で右側も作成します。

同じような流れで足のBoneも作成します。

これで、このキャラクターのボーンが一通り作成できました。

これから、Boneの関連付けを行っていきます。

Link Bonesボタンを押下します。

Bone Spine 1 -> Bone Parent

Bone Ear R,Bone Ear L -> Bone Head

Bone Hood Tail L,Bone Hood Tail R -> Bone Head

Bone Arm R 1,Bone Arm L 1 -> Bone Spine 2

Bone Leg R 1,Bone Leg L 1 -> Bone Parent

これらの操作により、Boneの親子関係が設定されてBone Parentが全てのBoneの親になりました。

2.5

2.5の項では

2.4で作成したボーンに沿ってウェイト付けをおこなって行きます。

メッシュグループを選択します。

1:Add Modifier

2:Rigging

3:Slect

を押下して編集できるようにします(もしくはAキー押下)

MeshesからHairを選択します。

右メニューのAdd to Riggingを選択

こちらのボタン押下でRigのWeight付けが可能になります。

Headのボーンを選択します。

Hearの頂点を範囲選択

右メニューのWeight付けボタンで1を押下します。(一番大きい値)

↓Weight付けがされたのですが、Bone Colorが有効になっているとWeightの値が見辛いので無効に変えます。

↓Bone Colorボタンを押下で有効、無効を切り替えられます。

Bone Colorが無効になると以下のようにWeightの表示がみやすくなります。

次にHoodのWeight付けをおこなって行きます。

Hoodを選択します。

Add to Riggingを選択

BoneはHeadを選択した状態でHoodの頂点を範囲選択で選択状態にします。

1を選択します。

フード全体のWeightが1に

Bone Ear Rを選択し、周辺頂点も選択します。

今回は.1を選択します。

Weightが.1で設定されました。

次は、Bone Ear Lを選択します。

2.5のチュートリアル動画では、 Weightを1で設定しています。

右詳細メニューでBoneの影響範囲の表示切り替えが可能です

こちらで Bone Ear Lから Bone Headの表示に切り替えると

Bone Ear LのWeightを1で設定した為、HeadのBoneのWeightが0になっているのがわかります。

なので、一旦間違えて設定してしまっているので

Bone Ear L周辺の頂点が選択されていてHeadのBoneが選択されている状態で

.9を選択します。

そうすると以下のようにBone Ear L周辺のWeightが設定されます。

表示を切り替えると

Bone Ear LのWeightが変わっているのがわかります。

Bone Ear Lの上頂点が選択されている状態で、

Weightの1を選択

耳の先っぽが赤くなります。

耳全体の頂点を選択します。

Blendボタンを何回か押下します。

Weightが馴染んでちょうど良い感じになります。

さらに、SetWeightの+,-ボタンを押下してWeightの値を調整して行きます。

こんな感じになります。

同じような形で反対側も設定

Bone Headの影響範囲を確認する為に右メニューから表示範囲選択

Weightがちょうどよく設定されているのが確認できたかと思います。

では、こちらのWeight付けでBoneを動かした時に違和感なく動くかどうかチェックしてみます。

画面下にあるPose Testボタンを押下します。

上部のRotate Tool を押下(もしくは、Eキー)

Boneをグリグリ動かせるようになりますので、ここで違和感がないかどうかチェックします。

また、RenderRiggingWeightOnlyボタンを有効に、Bone Colorも合わせて有効にすると・・・

このように対応するボーンの影響度合いの表示を確認することができます。

BoneはScale Tool (Rキーで選択)で拡大縮小するようなことも可能です。

Boneを変形させた状態でWeightを調整して違和感がないようにしていきます。

(動画だと、3:00~3:50付近まで)

次に、Bone Headが選択された状態で

Teeth,Tongue,Mouth,MouthLine,EyeBrow,Eyelid,EyeLight,EyeIris,EyeWhite,Head

のWeightを1で設定していきます。

このような形で顔周辺のWeight付けが完了しました。

次に、Bone Neckを選択します。

Necklaceを選択しWeightを1に設定

CapeのMeshと Bone Spine 2を選択し、Weightを1に設定します。

Bone Arm R1とCapeのその周辺頂点を選択しWeightを1に設定

同じように、Bone Arm L1とCapeのその周辺頂点を選択しWeightを1に設定

ボタン押下でうまい具合にWeightをなじませて行きます。

こんな感じにWeightが馴染めばOK

(動画だと4:40~5:06あたりまで)

PoseTestモードにして

Boneを動かして動作確認を行います。

次は、DressのMeshとBone Parentを選択して、各頂点を選択後にWeightを1で設定します。

次にBone Spine 1のWeightをこのような範囲で設定

次にBone Spine 2のWeightをこのような範囲で設定

Bone Parentを選択

 ボタン押下でなじませます。

このような形で馴染めばOKです!

 PoseTestボタン押下で

体の傾きなどもチェックします。

DressのMeshに対してBone Leg R 1,Bone Leg L 1のWeightも少し入れます。

Bone Arm R1とArmsのMeshの左側頂点を選択しWeightを1に設定します。

Bone Arm L1とArmsのMeshの右側頂点を選択しWeightを1に設定します。

Bone Arm R2とArmsのMeshの左側周辺頂点を選択しWeightを1に設定します。

Bone Arm L2とArmsのMeshの右側周辺頂点を選択しWeightを1に設定します。

Bone Arm L1とArmsのMeshの中央頂点を選択しWeightを.5に設定します。

Bone Arm R1とArmsのMeshの中央頂点を選択しWeightを.5に設定します。

 PoseTestボタンを押します。

あとは、Boneを曲げた時に自然な形になるようにWeightをBlendやSet Weightを使って各頂点ごとに調整していきます。

うまく、各頂点のWeight付けが行われて、Boneを曲げた時に違和感がなくなって入ればOKです。

Bone ParentとLegsのMeshを選択しWeightを1に設定します。

上記のように LegsのMesh と Bone Leg R 1,Bone Leg R 2,Bone Leg L 1,Bone Leg L 2を

PoseTestを行いながらWeightの値を調整して行きます。

 

HoodBackとHoodTailのMeshをBone HeadにWeight1で設定してやります。

HoodTailのMeshは、Bone Hood Tail R,Bone Hood Tail Lにうまい具合にWeightを設定してやります。

2.6

こちらの項では、Animation Editorの使い方についてのチュートリアルとなっています。

左メニューのAnimation ClipsのAdd Animation Clipを選択

AnimationのTimeEditorが開きます。

アニメーションで設定するキャラクターを選択したいので、

右上のAnimation ClipのNameに任意の名前を入力しSelect Mesh Groupを押下します。

Selsectを押下

右上のTestAnimeの項目で

Start Frame:アニメーションの開始フレーム

End Frame:アニメーションの終了フレーム

LoopのOn,Off切り替え

FPS : アニメーションのFPS

Animation Events :イベントのトリガーを受け取ることがおそらくできる?(要確認)

Export/Import :AnimationのImportやExportが可能

でTimeLineのMove to first flame ボタンとMove to Last flameボタンのショートカットが

Shift +< or Shift +> になります。

押下時に最初のフレームか最後のフレームに移動します。

また、< or  > で1フレームずつカーソルを移動させることができます。

また、Spaceキー押下でアニメーションを再生/停止させることができます。

またTimeLineの下部メニューから、TimeLineの横幅や縦幅、並び順などの表示を切り替えることができます。

マウスホイールでTimeLineを上下に

ホイールボタン押下+移動でTimeLineを左右にスクロールできます。

2.7

ボーンアニメーションをいよいよ完成させます!

右上のアニメーション設定でEnd Frame を60に、LoopをOnにする

一旦、Mesh Groupsからアニメーションを設定したいMeshを選択します。

1:Add Modifier

2:Transform(Animation)

3:Select

押下でTransformAnimationをMeshGroupに適用します。

あと、Color Option をOffにしておきます。

設定が終わったら、作成したAnimation Clipを選択してAnimationのEditorを表示させます。

1:AddTimelineボタンを押下

2:Modifier:Transform (Animation)を選択

3:Selectボタンを押下

今回はBoneのアニメーションを追加したいので、

Bonesタブを選択後にAll Bones to layersボタンを押下します。

各ボーンがTime Lineに追加されました。

Display Boneボタンを押してBoneを画面に表示します。

Start Editボタン、もしくはAキーでeditモードへ移行します。

カーソルを20の位置へ移動させる。

Add Keyframes to All layersボタン押下で全てのBoneのキーフレームが指定したフレームの箇所に挿入されます。

挿入されました。

sキー押下でボーンを選択できるようになります。

ボーンを移動させて形状を変えます。

キーフレームが設定できましたので、再生ボタン押下でアニメーションが設定されていることを確認できます。

キーフレームの列は上部のキーマークをドラッグアンドドロップで場所を移動できます。

選択したキーマークは、 Ctrl + DDか、shift + DDで移動先にコピーを生成することができます。

これで、一旦はアニメーションが設定完了です。

では、これからゲーム中でアニメーションの挙動を確認します。

MeshGroupsを選択し、RootUnitボタンを押下でRootUnitに設定します。

RootUnitsを選択し、

作成したAnimeの

↓Auto Play Disabledを

AutoPlayEnabledに変更します。

BakeしてUnityのゲームシーンに戻ります。

Unity上でキャラクターアニメーションが再生されます。

次はアニメーション設定の補足説明になります。

キーフレームを選択します。

Curveタブを選択する

アニメーションのカーブ種類を選択する、

アニメーションカーブが設定されました。

以上で5.7の項のチュートリアルが終わります。

取り急ぎ、こんなところでAnyPortRaitのボーンアニメの解説を終わります。