あるみにメモ

技術的なメモをかくかもしれない

そのいらすとや、動くよ(Anima2Dを使ってみた)

とりあえずこちらをご覧ください。

f:id:aluminum_pepe:20181021160528p:plain

いらすとやの男の子です。

かわいいですね。ハロウィンの時期にぴったりなかっこうです。



この子が、






f:id:aluminum_pepe:20181119135346g:plain




動きます。


……ということでUnityのアセット、「Anima2D」でいらすとやを動かしてみました。

言い訳

あれ?投稿日時ハロウィンとっくに過ぎてない?

その通り。

書きっぱなしにして放置していた。。。。。

週一くらいで上げるような習慣にしたかったのだけど、

忙しくて(自分の甘えが出たので)おやすみしてました。

やすみスギィ!

Anima2Dとは

f:id:aluminum_pepe:20181120222923p:plain

Anima2DはUnityのアセットで、2Dのスプライトに対してボーンをやメッシュを設定してアニメーションさせることができます。

いらすとやを動かしてみる

Anima2Dを適用する様子をざっくり紹介。


参考にしたのはコチラ↓

techblog.sega.jp

ここでは実際にSEGAスマホゲームアプリのキャラクターがAnima2Dで動かされている例が紹介されていておもしろいです。


qiita.com

「とりあえず動かしてみよう」という作業時はこっちを主に見てました。


画像を取り込む

f:id:aluminum_pepe:20181120224145p:plain

一枚絵をガツンとぶち込みます。

普通、こういった画像データは顔、腕、足など切り刻んで登録したほうがいいです。(参考サイトもそうしてます)

が、

めんどくさい

たぶんそんなことしなくてもそれっぽく動かせるやろ!(楽観)ということで、このままいきます()


SpliteMesh設定

いわゆる2Dキャラの「肉付け」に当たる部分です。

ゲーム状の肉付けしたいオブジェクトを右クリックして、項目「2DObject→SpriteMesh」を追加する

f:id:aluminum_pepe:20181120225737p:plain

Assetsにある元の画像に、SpriteMeshが生成されるので、これを選択し、インスペクターから「Edit Sprite Mesh」を選択

f:id:aluminum_pepe:20181120234336p:plain

するとSprite編集用のウィンドウが開くので、肉付けの設定する

f:id:aluminum_pepe:20181121001141p:plain

デフォルトだとこんな感じ。

うまく説明できないが、アニメーションとして動く肉の細かさだとか、範囲を決められます。

この状態だとかなりざっくりと肉付けされてますね

f:id:aluminum_pepe:20181121034904p:plain

「SliceTool」でMeshの設定ができる

f:id:aluminum_pepe:20181121102557p:plain

Outline detail でノード数が増えてるのかな?

Tessellation は内側にノードを持ってくるかという事が設定できそう。

Alpha cutout は……何だろう()

ともかく↑ので行きます。

多分Meshが細かすぎると処理が増えるんだろうね

ボーンを適用

ゲーム状の肉付けしたいオブジェクトを右クリックして、項目「2DObject→Bone」を追加する

f:id:aluminum_pepe:20181121102927p:plain

ノリと勢いと感覚でボーンを付けていきます。

ctrl+alt+B で親子関係を作りながらボーン適用できていい感じです。

f:id:aluminum_pepe:20181121103045p:plain

こんな感じになった。

ボーンに付いてくる度合い

さっき使ったSprite Mesh Editでボーンを含めた編集ができます。

f:id:aluminum_pepe:20181125020625p:plain

このボーンと対応するMeshの色の濃度が、ボーンについてくる度合いを表しています。ウエイトってやつですね。

適当に範囲選択してオートのウエイト分け機能を使ったので雑 of 雑だ

f:id:aluminum_pepe:20181125021138p:plain

うわなんだこの珍妙なシルエットは……

これは「Weght Tool」の"Overlay"と"Pie"を有効にした状態。

さっき設定したノードごとにボーンについてくる度合いが設定できます。

f:id:aluminum_pepe:20181125021613p:plain

ノードにどのボーンついてくるかの配分が円グラフのように表示されていて、ここをいじるのが感覚的かなと思いました。

さてシーンで動かしてみよう。


  • 彼の左手下におろすと凄いついてくるな()

  • 右手はいい感じ……と思いきや耳がついてきてないかwww

  • 足はまあいいとして、頭はやばいな

  • 首で回すと躍動感があるな


……ちょっとこのままでは不自然すぎるのでウエイトいじって何とかしてみるかな?

f:id:aluminum_pepe:20181125023415p:plain

まあさっきのウエイトと比べてみてもらえるとわかると思うんですが、より部位ごとにボーンの影響が極端になるよう、他のボーンの影響を完全カットしたり、雑過ぎたウエイトが良くなった気がします。


なんか口がついてくるんですが()

上見てもわかるけど左腕(紫)の影響が体の内側に出てるからだなあ

(青いわっかは後で説明するよ)

ということでこうした。


f:id:aluminum_pepe:20181206234644p:plain

ひだりての部分はひだりてのボーンだけのウエイトを受けるようにしたぞ。

するとどうだ



うーーんどうかな?

いい感じじゃない?


まあ、切り分けしてないのが悪いんですけどね。

妥協だ妥協。十分面白いので。


IK設定

f:id:aluminum_pepe:20181125033611p:plain

突然のカボチャヘッド君の登場です。

連結しているボーンに関しては、関節の設定とかできるみたい。

IK(インバースキネマティクス)ってやつです。

Limb,CCDの2種類がありそれぞれの特性に合わせた関節の動きを自動で補助してくれます



普通に1つずつ動かしていこうとすると面倒そう。



Limb,CCDをそれぞれの足先に適応してみました。

CCD(左足)は長い連結した部品を繋ぐのにあった機能なので、関節では有り得ない方向に曲がってますね。

揺れものと考えれば、自然な動きだと思われる。

Limb(右足)は2関節の手足にあった機能のため、持ち上げた際に傀儡人形みたいな足の上がり方してますね。

人の動きとして、自然な感じだ。こっちを採用。

ところでこの青い球をいっぱい出してるの、気功弾みたいでかっこいいね(?)

アニメーションをつくる

あとはUnityのアニメーション機能をつかってアニメーションを作成してみました。

 

腰(ボーン上では首)をグリングリン振りながら近づいてくるカボチャボディ君です。楽しそうですね。

まとめ

と、Anima2Dをいろいろ触ってみました。

2Dキャラを無理やりアニメーションさせられるのはなかなか面白い。

しっかり部品を切り取って使えばより自然になりそうです。

こんな機能もあるんやなあって。


ところで、各所に出てきたスクショは、遊びつつ、開発風景そのものです。

現在、仮装しながらご機嫌で近づいてくるキャラにキャンディを与えて帰ってもらうゲームを作ってます。

が、既に季節外れ

旬も過ぎてモチベもだだ下がりなんですが、来年のハロウィンには間に合うようにすればいいか()

来年お楽しみに