テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

Unityで2DスケルタルアニメーションするUni2Dの使い方について

Uni2Dの使い方について、以前書いた記事が古かったので新しくします。他にも興味のあるアセットがあれば、教えてくれると嬉しいです。

http://u3d.as/content/bento-studio/uni2d/37H

f:id:tsubaki_t1:20150424041739p:plain

スプライト(2D絵)をシーンに配置する

  1.  メニューバー > Uni2D > Sprite Editorを選択してスプライトエディタを開きます。f:id:tsubaki_t1:20150424030047p:plain

  2. Projectビューの画像を選択してシーンへドラッグ&ドロップします。

    f:id:tsubaki_t1:20150424030733g:plain

これでシーンにスプライトが配置されます。

スプライトをパックする

Uni2DはUnity2Dのスプライトパックの機能ではなくオリジナルのパックを使用します。

  1. シーンに配置したスプライトを選択します。
  2. Uni2DSpriteコンポーネントのUse Atlasを選択し、登録したいAll Atlasesから登録したいAtlasを選択します。(無ければCreate New Atlas)

    f:id:tsubaki_t1:20150424031250p:plain

  3. Atlasにテクスチャが含まれていない場合Atlasに含めるか聞いてきますので、Yes Build Atlasを選択します。
    新規作成の場合は、この前にPrefabを作るか聞いてきますので、適当な名前を付けてSaveをクリック。

    f:id:tsubaki_t1:20150424031227p:plain

パック後は、該当のスプライトをシーン内に登録した際、自動的にパック済スプライトからファイルを取得し表示するようになります。

これでPrefabのサブフォルダにテクスチャを結合したAtlas、あとマテリアルが作成されます。こうするとドローコー…SetPassの数が減らせるはずです。

コライダー(当たり判定)の設定

当たり判定を設定します。

Uni2DSpriteコンポーネントのPhysicsのPhysics Modeをstatic(静的)かdynamic(動的)に設定します。Staticが動かないオブジェクト、dynamicが物理演算で動くオブジェクトです。物理演算で動かさない動くオブジェクトを設定したい場合、Dynamicに設定しIsKinematicを設定します。

f:id:tsubaki_t1:20150424031704p:plain

これで大雑把な当たり判定を繰り抜いてくれますが、より高い精度の当たり判定が欲しい場合、Collision TypeをConcaveに設定します。

左がConvex(凸面)、右がConcave(凹面)です。

f:id:tsubaki_t1:20150424032108p:plain f:id:tsubaki_t1:20150424032120p:plain

f:id:tsubaki_t1:20150424032203p:plain

スケルタルアニメーション

Uni2Dの最大の特徴であるスケルタルアニメーションについてです。

これは簡単にいえばボーンを決めてウニョウニョしたり、ボーンを基準に動かしたりすることが出来ます。

f:id:tsubaki_t1:20150424042024g:plain

さっそくやってみます。

Open Sceltal Animationボタンで、スケルタルアニメーションビューを開きます。

f:id:tsubaki_t1:20150424032601p:plainスケルタルアニメーションビューのPosingをクリックし、ボーンを設定していきます。Escapeでボーンの終了、右クリックでボーンの削除、ボーンから打てば途中から枝を伸ばしたりも出来ます。この辺りは以前と変わらず。

f:id:tsubaki_t1:20150424032707g:plain

Uni2DSpriteコンポーネントのSprite MeshをGridに設定します。Horizonal Sub divs(水平の分割数)とvertical sub divs(垂直の分割数)は、ボーンより細かくなるように設定して下さい。

f:id:tsubaki_t1:20150424033135p:plain

後はスケルタルアニメーションビューのAnimを選択し、ボーンを動かしてウニョウニョさせます。この動きをAnimationに記憶させれば、アニメーションでウニョウニョしたりします。

f:id:tsubaki_t1:20150424033427g:plain

なお、この枝にそって当たり判定を付けるには以下の様な設定を行います。

Uni2DSpriteコンポーネントのCollision TypeをConcaveに設定します。

Advanced Colission Settingsを開き、以下のように設定します。

  • Sub Diveにチェック
  • Subdivision Countを上げる
  • Only Boaderにチェック

f:id:tsubaki_t1:20150424034333p:plain

またSkeltal Smooth Bindingを開き、Physics Skin ModeをAuto Updateに設定します。

f:id:tsubaki_t1:20150424034344p:plain

これで、ウニョウニョした枝に当たり判定が設定出来ました。

f:id:tsubaki_t1:20150424041650g:plain

スプライトアニメーションを追加する

Sprite Animationを追加するにはAdd Animation Clipを選択してアニメーションを設定します(もしくはCreate a new animation clipで新規作成)

f:id:tsubaki_t1:20150424034938p:plain

編集するにはEditボタンを押しエディターを表示します。Add Frameでフレーム追加、Selectのある所にテクスチャを設定、フレームレートはフレームレート。

下の方にプレビューがあるので、そこで確認しながら作るのが良さそうです。

f:id:tsubaki_t1:20150424035202p:plain

参考

作りなおすに辺り、ココがすごく参考になりました。

befool.co.jp

旧記事

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

書き終わって何だけど、ここまでキッチリ書きなおさなくても良かった感…

一方Unityの2D機能は…

そのうち色々と新しく2D周りの機能が強化されるみたいです。

Unity-Technologies / 2DDemos / source / READMER1.md — Bitbucket

スプライトの9-Sliceとか、

f:id:tsubaki_t1:20150424035502p:plain

マスクとか(uGUIのマスクみたいなものでしょうか)

f:id:tsubaki_t1:20150424035655p:plain

Smart Spriteとか

f:id:tsubaki_t1:20150424035741p:plain

念願のタイルマップとか

f:id:tsubaki_t1:20150424035811p:plain

あとは iOS/Androidでテクスチャを利用する(多分)最も良い方法 を基本機能でサポートする…のかな?

果たして触れるようになるのは何時か Unity Professionalを持つユーザーは、先行ベータアクセス権でもう触れるみたいです。近々使い勝手について書こうと思います。