■はじめに
２Dボーンアニメーションの練習場へようこそ！
少ないパーツで多くの動きを作成できます。
このトピックではパーツを組み合わせた【人形】の完成まで学べます
↓動画では体パーツの[Plygon]に骨格部分の[Skelrton2D]を割り当て、連動している状態です。
0-1.[キャラクタ素材]をDLして≪ファイルシステム≫に登録してください
※顔差分は今回未使用です。
0-2.[完成予定図]もDLし、同じく登録してください。
■お品書き
- ボーンアニメ用のオブジェノードを準備
- 不要なノードを隠し、作業環境を整える
- 完成予定図を準備する
- Polygon2D(パーツ絵)にテクスチャを割り当てる
- Bone2D(骨格）を作成していく
- レストポーズ（基本姿勢）を決め、下準備をする
- Polgon2DをBon2Dに当てはめ、完成
■1.ボーンアニメ用のオブジェノードを準備
1-1.画面中央上部にある[＋]より、新規の≪ゲームオブジェクト≫を作成します
（オブジェ名は好きにつけてください）
1-2.テンプレートは【キャラクター】タイプ(型)を【2DBone Character Bace】にします。
※ここがAGMAkerの強みで、必要なノードを組み合わせたオブジェノードを用意してくれます
1-3.作成して準備完了です。
■2.不要なノードを隠し、作業環境を整える
さて、今回必要なのは【BoneAnimationRoot2d】にある
・Polygon一式
・Skeleton2D一式 になります。
2-1.作業で不要な
・壁判定「CollisionShape2D」
・やられ判定「HitArea2D」
・攻撃判定「AttackArea2D」
は非表示にしておきます。
※Skeleton2Dも後ほど使いますのでOFFにしておきます！
■3.完成予定図を準備する
3-1.この記事の最初に張ってある[完成予定図]（2d_bone_image.png）を
≪ファイルシステム≫に登録してますか？
3-2.登録したpngを画面中央にドロップし、Sprite2D（画像）として配置します
3.3≪ノード≫内の上部へ移動し、「奥」へ置きます ※下に行くほど手前になります
3-4.≪インスペクター≫のCanvasItemより[可視性]内の[変調]でα値を下げ、薄くしてます。
■4.Polygon2D(パーツ絵)にテクスチャを割り当てる
4-1.≪シーン≫にある【Polygon2D】を選択、≪インスペクター≫の[テクスチャ]を開きます
4-2.<空>の箇所に0-1で登録したキャラクタ素材をドロップし、登録します
中央下にも画像が表示されます。
・マウスホイールで拡縮
・マウス中央ボタン＋移動
で見やすい位置に調整してください。
4-3.この[Polygon2D]は１つのパーツになります。名前を[torso]とし
これから登録した画像より、torso(胴体)を切り出す作業をします。
4-4.中央下の作業窓から『点』『ペンアイコン』を選択します
4-5.「スナップ」「グリッド」もON（青）にしておきます。
※編集より、グリッドの幅などが設定できます。
4-5.テクスチャを４点＋終点、順番に選択してtorso(胴体)箇所を切り出します（↓動画4:00～）
4-7.回転ピボット設定ボタンを使用し、torso(胴体)の中央辺りでクリックします。(↑動画13:00～)
4-8.下地の画像を参考に、同じ座標へ移動します。
※マウス移動のほか、≪インスペクター≫Node2D内のトランスフォームの座標で入力もできます
4-9.シーンの＋から、新たに[Polygon2D]を作成し、すべてのパーツを登録する為に4-1～4-8の手順を繰り返します‥‥が
登録したPolygon2D(作成した胴体)をコピー＆ペーストし、4-4から続けると早そうです。
4-10.[頭][首][胴][腰][腕]x2[脚]x2の８パーツを登録します。
・↓画像を参照に、表示優先順位を確認してください。
・armに続く「f」は手前front、「b」は奥backを意味してます。
・すべてPolygonの階層直下に入れます
・上にある方が奥に表示されます ※Zインデックスが同じ場合
これでPolygon2Dの登録は完了です。着ぐるみ部分的なイメージです。
一旦、休憩入れましょう！
■5.Bone2D(骨格）を作成していく
5-1.≪シーン≫のSkeleton2DをONにし、謎のトンガリを確認します。
5-2.画像のような「細い」表示ではない場合の調整方法
・最上部メニュー「エディター」→「エディター設定」へ進み[高度な設定]をON。
・２Dにある[ボーンの幅][ボーンのアウトラインのサイズ]などを調整してください。
※細い方が見やすいです！
※フィルターにboneと入れると出てきます
5-3.キャラクター全体の中心に配置する
・下地の画像がありますのでPolygonは非表示にしておきます（お好みで）
・Bone2D（torsoにリネームしてます）をおへそ辺りに移動します
5-4.右に伸びたトンガリを上に向けます
・≪インスペクター≫のBone2Dより[AutoCalculate Length and Angle]をオフ
・Bone Angleを-90にすると上に向きます。
・長さも調整できそうです
5-5.胴体のBone2D(torso)をコピペし、直下に[首][頭]を作成します
・neckにリネームし、移動ツールでミゾオチ辺りに配置（↓動画2:00～
・neckをコピペし(head)とし、移動ツールで頭の付け根に配置（↓動画12:00～
5-6.体パーツ[Polygon2D]の数だけBone2Dを作成します。
ここで重要なのは関節部分をbone2Dの始点とする事です。
・Bone2d[head]をコピーし、[torso]でペースト。（ペースト後、torsoの直下に移動してもOK）
・名前を[Arm_f]にし、手前の腕の骨をイメージします（↓動画4:00～
・[Aem_f]を肩辺りに移動します（↓動画7:00～
※肩を回転軸として「腕」を動かすイメージです
Bone2Dを全て登録するとこんな感じです（↓画像）
torso(胴)を全体の軸として、図のようなツリー構造を作成してください。
■6.レストポーズ（基本姿勢）を決め、下準備をする
いろいろ気になってるポイント、ありますよね
Bone2Dの▲マーク！！
警告内容は「待機ポーズが確定されてませんよ」です
6-1.Bone2Dの親ノード『Skeleton2D』を選択すると専用ボタンが出ます。（↓動画4:00～
6-2.[レストポーズを上書き]を選択すると警告▲が消えます。
6-3.そうなんです、まだ着ぐるみ(Skeleton2D)と骨組み(Bone2D)は連動してません
予定したポイントに乗せてるだけです。
■7.Polgon2DをBon2Dに当てはめ、完成
Skeleton2DにBone2Dを通す前の儀式を行います
7-1.Polygon直下にあるPolygon2Dパーツを全て選択する
7-2.≪インスペクター≫のスケルトンにある[割り当て…]を選択し、Skeleton2Dを選択する。
これで袖を通す準備はできました。
Skeleton2Dを選択し、boneに割り振ります
7-3.Polygon内のパーツを選択します。↓動画ではFaceを選びました
7-4.作業窓内にある[ボーン]を選択し、Bone２DリストからFaceに対応するBoneを選びます
※名前がheadになってますね、統一することをお勧めします
7-5.バケツツールを選択し、ポリゴンの四隅を白くすることで登録します。（↓動画8:00～
・間違えて白くした場合、隣のハケツールにすることで色を戻せました。
※このスライダー、色味が微妙に変更できますが未調査です。
全て登録できたら回転ツールで不備がないかチェックしましょう
waist（腰）を回すと下位ツリーの両足も回転等を確認します。
※回転を戻すにはCtrl＋ZもしくはSkeleton2Dの「レストポーズへリセット」を使います
今回のサンプルでのツリー構造は↓コチラです。
これで2Dボーンアニメーションの「元」が完成しました。
次回、【動かそう、2Dボーンアニメーション！】で会いましょう！