画像にDynamicBoneを適用して動かす

# 画像にDynamicBoneを適用し滑らかに動かす方法

２Dゲームを作る時、sprite画像をDynamicBoneで動かす方法について書いていきます。

２Dで龍がうねうね動くゲームを作った際、
**DynamicBoneを２D画像につけて動かしている記事がなかった！！**

なので、もし２D画像をDynamicBoneで動かそうとしている人がいたら参考にしてください！
具体的には龍とか蛇のような動きを再現するのに使えると思います。

完成イメージはこちら！
![記事用.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/cdee9c33-99f4-a230-eaba-aa5668609201.gif)

使ったものは
・Unity2018.4
・visual studio code
です。
あとはUnityのアセットストアからImportしたものを使っていきます。

なかなか綺麗にクネクネしていますね！
では実装していきましょう！！

##手順
0.準備
1.画像をImport
2.anima2Dを適用
3.DynamicBoneを適用
4.スクリプトで動かす

##0.準備
アセットストアで
######[Anima2D](https://assetstore.unity.com/packages/essentials/unity-anima2d-79840 )  <img width="221" alt="スクリーンショット 2019-06-05 23.44.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/3e049bda-065e-a2df-9f56-106ac36a47d3.png">
######[DynamicBone](https://assetstore.unity.com/packages/tools/animation/dynamic-bone-16743)   <img width="215" alt="スクリーンショット 2019-06-05 23.44.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/5342b3ed-ea97-275d-7ba1-7eaf9f60155c.png">
をDLしておきましょう！
DynamicBoneは有料ですが
Anima2Dは無料です!


##1.画像のImport
準備ができたら早速うねうねさせていきましょう！
まずは画像をUnity上にImportします
うねうねさせる任意の画像をImportしてください。（龍でも蛇でも！！）

**・Inspectorを開く**
<img width="319" alt="スクリーンショット 2019-06-13 16.01.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/348a3adb-e951-e0c7-dc7c-676da3ab16a1.png">

Inspectorでこのように
**Texture TypeをSprite**
**SpriteModeをSingle**
に設定します。


##2.anima2Dを適用
anima2Dを使うと、簡単に２Dのアニメーションができます！
画像の中に骨（Bone）を入れて動かします。

####・SpriteMeshの作成

<img width="507" alt="スクリーンショット 2019-06-05 23.52.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/cc3d43c1-df2b-1ebc-47f6-d38f72575a64.png">
**ImportしたSpriteを右クリック>Create>Anima2D>SpriteMesh
をクリックします。**

<img width="151" alt="スクリーンショット 2019-06-05 23.56.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/976ddbe3-63a3-5791-7a54-397c30c17109.png">→<img width="149" alt="スクリーンショット 2019-06-05 23.56.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/13226439-27d4-6e9f-0452-854638e276a9.png">
こんな感じでProjectViewのSpriteMesh（水色の四角いマーク）が増えます。

####・Boneを入れる
**空のGameObjectを用意！**
そこに先ほど作ったSpriteMeshをドラックアンドドロップで入れます！
そうするとSpriteがGameViewに表示されます。
**・Boneを作る**
<img width="379" alt="スクリーンショット 2019-06-06 0.07.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/29785a88-ee30-f084-bbff-fbefad303dc0.png">

**Create>２DObject>Bone**
でBoneを作ります。揺らしたいSpriteの先端（頭）に配置します。
<img width="663" alt="スクリーンショット 2019-06-06 0.12.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/27cfc81d-f6da-d4e1-997c-ac895d43af50.png">
ここからBoneを複製して増やします。ここではとりあえず５個くらいにしておきます。

####・Boneの子オブジェクト化


このようにBoneは複製した順に親子関係を作っておきます。
<img width="206" alt="スクリーンショット 2019-06-13 16.03.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/d46a3791-5b56-1b4e-1f84-4e1cd62e7e47.png">




**各BoneのInspectorを見るとBone2Dが入っています。**
<img width="323" alt="スクリーンショット 2019-06-06 0.16.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/dfa4d5d3-244e-7bc7-6667-69c6b70f2b66.png">

Childに、Boneの一つ下側のBoneを入れていきます
（newBoneのchildにはnewBone(1)を、newBone(1)のchildにはnewBone(2)を、、、といった具合に一番最後までやります。尻尾のBoneのchildは空で構いません。）

こうしておくとBone同士がくっついて綺麗に配置することが出来ます。

#####Boneを配置
ここまでできたらBoneをいい感じに配置してください

#####メッシュの分割、ウェイトの設定
Spriteを選択しながら
**Window＞Anima2D＞SpriteMesh Editor**を開きます。
<img width="530" alt="スクリーンショット 2019-06-06 0.55.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/bd197016-99be-7dcb-3c9b-0b23450452cb.png">
Sliceボタンを押して、Tessellationを上げ、Applyを押します
すると、細かく分割されました！！

**SpriteのInspectorを開く**
SpriteMeshInstance（Script)のSetBonesに
一番上（頭）のBoneをドラックアンドドロップで入れます。

<img width="321" alt="スクリーンショット 2019-06-06 0.57.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/c409a43f-2c89-8ba4-9de7-70a923447fe3.png">⇨<img width="306" alt="スクリーンショット 2019-06-06 0.57.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/881625b3-7f41-f99b-614a-647631a5ee4e.png">

Boneがこのようにセットされます。

**もう一度SpriteMesh Editorを開くと、Boneが現れています。**
左上のメニューでBindだけが押されている状態にし、
各々のBoneの影響力を決めます。
**右下のweight toolでAutoを押すといい感じにしてくれます**
<img width="784" alt="スクリーンショット 2019-06-06 1.03.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/5c8f4c1b-39e5-5b78-4b1d-9f65ee123a5c.png">
出来ました！

**おそろしくエラーが出るのでここの**
<img width="307" alt="スクリーンショット 2019-06-06 1.10.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/8042d0a5-bab1-63ba-5b20-d85c12cd0b17.png">
<img width="836" alt="スクリーンショット 2019-06-13 16.06.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/ec96a8ca-2bae-3594-48b7-bd76935d2142.png">
**Center**
**-Infinity**
の値を全て０にしました。



1.2については[こちら](https://www.cg-method.com/entry/2017/07/29/215908/)
の記事を参考にさせていただきました。


##3.DynamicBoneを適用
dynamicBoneを適用することによって、頭の動きに反応して尻尾が自然になびくようになります。
**・GameObjectにdynamicBoneを入れる**
SpriteやBoneが入っているGameObjectにDynamicBoneを入れます。
**Project>DynamicBone＞Script＞DynamicBone**
このスクリプトをGameObjectにドラックアンドドロップします

GameObjectのInspectorViewでDynamicBoneの欄を見ます
<img width="702" alt="スクリーンショット 2019-06-06 1.38.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/07c380d2-9284-a796-8465-30f6d4635684.png">

RootにBone(１)をドラックアンドドロップで入れます

DynamicBoneの適用は以上です。
Inspectorの
**Damping**
**Elasticity （弾性）**
**Stiffness（剛性）**
**Insert**
を色々いじって理想のぐねぐねを実装します。
<img width="409" alt="スクリーンショット 2019-06-06 1.39.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394213/319d817d-c73e-b155-cb1b-b6cc73b1e595.png">

３については[こちら](http://shiasakura.hatenablog.com/entry/2018/02/14/094851)の記事を参考にさせていただきました。




##4.スクリプトで動かす
ここまで出来たら、あとはボタン等でGameObjectを動かしてあげるだけです。
画面の右側クリックで右周りに回転、左側をクリックで左回りに回転するScriptです。
他にも直進する、角度を変えるなど動けばなんでもいいですね。

新しいScriptを作成します。

```C#:PlayerScript
void Update () {
			if(Input.GetMouseButton(0)){
				if(Input.mousePosition.x <= Screen.width / 2){
//画面の左側をクリックしたら
				transform.Rotate(new Vector3(0,0,300 * Time.deltaTime));
//クリックしている間左回りに回転する
				}
			}
			if(Input.GetMouseButton(0)){
				if(Input.mousePosition.x >= Screen.width / 2){
//画面の右側をクリックしたら
				transform.Rotate(new Vector3(0,0,-300 * Time.deltaTime));
//クリックしている間右回りに回転する
			}
		}
	}
```

Updateにこのように書き込み、GameObjectに関連付けしましょう！

動かしてみましょう！


###完成
動かしてみましょう！