そのいらすとや、動くよ(Anima2Dを使ってみた)
とりあえずこちらをご覧ください。
いらすとやの男の子です。
かわいいですね。ハロウィンの時期にぴったりなかっこうです。
この子が、
動きます。
……ということでUnityのアセット、「Anima2D」でいらすとやを動かしてみました。
言い訳
あれ?投稿日時ハロウィンとっくに過ぎてない?
その通り。
書きっぱなしにして放置していた。。。。。
週一くらいで上げるような習慣にしたかったのだけど、
忙しくて(自分の甘えが出たので)おやすみしてました。
やすみスギィ!
Anima2Dとは
Anima2DはUnityのアセットで、2Dのスプライトに対してボーンをやメッシュを設定してアニメーションさせることができます。
いらすとやを動かしてみる
Anima2Dを適用する様子をざっくり紹介。
参考にしたのはコチラ↓
ここでは実際にSEGAのスマホゲームアプリのキャラクターがAnima2Dで動かされている例が紹介されていておもしろいです。
「とりあえず動かしてみよう」という作業時はこっちを主に見てました。
画像を取り込む
一枚絵をガツンとぶち込みます。
普通、こういった画像データは顔、腕、足など切り刻んで登録したほうがいいです。(参考サイトもそうしてます)
が、
めんどくさい
たぶんそんなことしなくてもそれっぽく動かせるやろ!(楽観)ということで、このままいきます()
SpliteMesh設定
いわゆる2Dキャラの「肉付け」に当たる部分です。
ゲーム状の肉付けしたいオブジェクトを右クリックして、項目「2DObject→SpriteMesh」を追加する
Assetsにある元の画像に、SpriteMeshが生成されるので、これを選択し、インスペクターから「Edit Sprite Mesh」を選択
するとSprite編集用のウィンドウが開くので、肉付けの設定する
デフォルトだとこんな感じ。
うまく説明できないが、アニメーションとして動く肉の細かさだとか、範囲を決められます。
この状態だとかなりざっくりと肉付けされてますね
「SliceTool」でMeshの設定ができる
Outline detail でノード数が増えてるのかな?
Tessellation は内側にノードを持ってくるかという事が設定できそう。
Alpha cutout は……何だろう()
ともかく↑ので行きます。
多分Meshが細かすぎると処理が増えるんだろうね
ボーンを適用
ゲーム状の肉付けしたいオブジェクトを右クリックして、項目「2DObject→Bone」を追加する
ノリと勢いと感覚でボーンを付けていきます。
ctrl+alt+B で親子関係を作りながらボーン適用できていい感じです。
こんな感じになった。
ボーンに付いてくる度合い
さっき使ったSprite Mesh Editでボーンを含めた編集ができます。
このボーンと対応するMeshの色の濃度が、ボーンについてくる度合いを表しています。ウエイトってやつですね。
適当に範囲選択してオートのウエイト分け機能を使ったので雑 of 雑だ
うわなんだこの珍妙なシルエットは……
これは「Weght Tool」の"Overlay"と"Pie"を有効にした状態。
さっき設定したノードごとにボーンについてくる度合いが設定できます。
ノードにどのボーンついてくるかの配分が円グラフのように表示されていて、ここをいじるのが感覚的かなと思いました。
さてシーンで動かしてみよう。
カボチャボディくんにボーンをつけてみる pic.twitter.com/KyYxgfygqn
— えんかあるみに (@alumini_strugg) 2018年11月24日
彼の左手下におろすと凄いついてくるな()
右手はいい感じ……と思いきや耳がついてきてないかwww
足はまあいいとして、頭はやばいな
首で回すと躍動感があるな
……ちょっとこのままでは不自然すぎるのでウエイトいじって何とかしてみるかな?
まあさっきのウエイトと比べてみてもらえるとわかると思うんですが、より部位ごとにボーンの影響が極端になるよう、他のボーンの影響を完全カットしたり、雑過ぎたウエイトが良くなった気がします。
— えんかあるみに (@alumini_strugg) 2018年12月6日
なんか口がついてくるんですが()
上見てもわかるけど左腕(紫)の影響が体の内側に出てるからだなあ
(青いわっかは後で説明するよ)
ということでこうした。
ひだりての部分はひだりてのボーンだけのウエイトを受けるようにしたぞ。
するとどうだ
少しウエイトをいじった pic.twitter.com/ULt6V4R0Xq
— えんかあるみに (@alumini_strugg) 2018年12月6日
うーーんどうかな?
いい感じじゃない?
まあ、切り分けしてないのが悪いんですけどね。
妥協だ妥協。十分面白いので。
IK設定
突然のカボチャヘッド君の登場です。
連結しているボーンに関しては、関節の設定とかできるみたい。
IK(インバースキネマティクス)ってやつです。
Limb,CCDの2種類がありそれぞれの特性に合わせた関節の動きを自動で補助してくれます
関節を1つずつ動かす pic.twitter.com/2OalULXKne
— えんかあるみに (@alumini_strugg) 2018年11月25日
普通に1つずつ動かしていこうとすると面倒そう。
LimbとCCD比較 pic.twitter.com/JIh0iynpRG
— えんかあるみに (@alumini_strugg) 2018年11月25日
Limb,CCDをそれぞれの足先に適応してみました。
CCD(左足)は長い連結した部品を繋ぐのにあった機能なので、関節では有り得ない方向に曲がってますね。
揺れものと考えれば、自然な動きだと思われる。
Limb(右足)は2関節の手足にあった機能のため、持ち上げた際に傀儡人形みたいな足の上がり方してますね。
人の動きとして、自然な感じだ。こっちを採用。
ところでこの青い球をいっぱい出してるの、気功弾みたいでかっこいいね(?)
アニメーションをつくる
あとはUnityのアニメーション機能をつかってアニメーションを作成してみました。
近寄るカボチャボディくん pic.twitter.com/4I6z0XMppM
— えんかあるみに (@alumini_strugg) 2018年11月26日
腰(ボーン上では首)をグリングリン振りながら近づいてくるカボチャボディ君です。楽しそうですね。
まとめ
と、Anima2Dをいろいろ触ってみました。
2Dキャラを無理やりアニメーションさせられるのはなかなか面白い。
しっかり部品を切り取って使えばより自然になりそうです。
こんな機能もあるんやなあって。
ところで、各所に出てきたスクショは、遊びつつ、開発風景そのものです。
飴あげて帰ってもらう pic.twitter.com/z1L8P0XNrY
— えんかあるみに (@alumini_strugg) 2018年11月26日
現在、仮装しながらご機嫌で近づいてくるキャラにキャンディを与えて帰ってもらうゲームを作ってます。
が、既に季節外れ
旬も過ぎてモチベもだだ下がりなんですが、来年のハロウィンには間に合うようにすればいいか()
来年お楽しみに