Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

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

完成イメージはこちら!
記事用.gif

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

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

手順

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

0.準備

アセットストアで

Anima2D スクリーンショット 2019-06-05 23.44.10.png
DynamicBone スクリーンショット 2019-06-05 23.44.32.png

をDLしておきましょう!
DynamicBoneは有料ですが
Anima2Dは無料です!

1.画像のImport

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

・Inspectorを開く
スクリーンショット 2019-06-13 16.01.13.png

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

2.anima2Dを適用

anima2Dを使うと、簡単に2Dのアニメーションができます!
画像の中に骨(Bone)を入れて動かします。

・SpriteMeshの作成

スクリーンショット 2019-06-05 23.52.02.png
ImportしたSpriteを右クリック>Create>Anima2D>SpriteMesh
をクリックします。

スクリーンショット 2019-06-05 23.56.26.pngスクリーンショット 2019-06-05 23.56.45.png
こんな感じでProjectViewのSpriteMesh(水色の四角いマーク)が増えます。

・Boneを入れる

空のGameObjectを用意!
そこに先ほど作ったSpriteMeshをドラックアンドドロップで入れます!
そうするとSpriteがGameViewに表示されます。
・Boneを作る
スクリーンショット 2019-06-06 0.07.45.png

Create>2DObject>Bone
でBoneを作ります。揺らしたいSpriteの先端(頭)に配置します。
スクリーンショット 2019-06-06 0.12.45.png
ここからBoneを複製して増やします。ここではとりあえず5個くらいにしておきます。

・Boneの子オブジェクト化

このようにBoneは複製した順に親子関係を作っておきます。
スクリーンショット 2019-06-13 16.03.34.png

各BoneのInspectorを見るとBone2Dが入っています。
スクリーンショット 2019-06-06 0.16.30.png

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

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

Boneを配置

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

メッシュの分割、ウェイトの設定

Spriteを選択しながら
Window>Anima2D>SpriteMesh Editorを開きます。
スクリーンショット 2019-06-06 0.55.18.png
Sliceボタンを押して、Tessellationを上げ、Applyを押します
すると、細かく分割されました!!

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

スクリーンショット 2019-06-06 0.57.04.pngスクリーンショット 2019-06-06 0.57.33.png

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

もう一度SpriteMesh Editorを開くと、Boneが現れています。
左上のメニューでBindだけが押されている状態にし、
各々のBoneの影響力を決めます。
右下のweight toolでAutoを押すといい感じにしてくれます
スクリーンショット 2019-06-06 1.03.36.png
出来ました!

おそろしくエラーが出るのでここの
スクリーンショット 2019-06-06 1.10.08.png
スクリーンショット 2019-06-13 16.06.01.png
Center
-Infinity
の値を全て0にしました。

1.2についてはこちら
の記事を参考にさせていただきました。

3.DynamicBoneを適用

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

GameObjectのInspectorViewでDynamicBoneの欄を見ます
スクリーンショット 2019-06-06 1.38.26.png

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

DynamicBoneの適用は以上です。
Inspectorの
Damping
Elasticity (弾性)
Stiffness(剛性)
Insert
を色々いじって理想のぐねぐねを実装します。
スクリーンショット 2019-06-06 1.39.54.png

3についてはこちらの記事を参考にさせていただきました。

4.スクリプトで動かす

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

新しいScriptを作成します。

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に関連付けしましょう!

動かしてみましょう!

完成

動かしてみましょう!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした