『山が笑えば』制作録 2Dアニメーション編

 

　うぉお人生が流れるのが早すぎる。

　絶賛（自画自賛）製作中の『山が笑えば』ですが、今月は基本的に2Dサイドビュー画面用のアニメーションとイベント／Perkの追加をやっていました。

　2Dアニメですが、→以前に出した蜘蛛に引き続いて新たにメイン車両を描いてもらいました。南極大陸長距離旅行用氷床渡航無限軌道雪上車両SC-22（Twitterに載せていた紹介の名前間違えていた）です。

 もともと自分で作っていた（タイヤのみフリー素材）雪上車と比較すると雲泥の差。

蜘蛛に引き続き車両も描いてもらったのでビジュアル面かなり改善されました。左はもともと使っていた、わたしが自分で作ったPowerPointのやつ。 pic.twitter.com/BGjxDy1fTB

— ブリキの (@buri_kino) October 24, 2022

　こうした2Dアニメ用のイラストはPSD形式で納品してもらっていますが、今回はメモついでにUnityでの2Dボーン入りスプライトアニメ用の作り方を書き記しておきます。

　メモついでにというか、自分へのメモがメインでわかりやすくないし用語が間違っていたりもするため、これからアニメーション作られる方は参考URLのほうを参照してください。

参考

：【Unity】2DAnimationでboneを入れてSpriteを動かしてみたお話 | ゴマちゃんフロンティア

：【Unity】Sprite Resolverで2Dアニメーション 

：【Unity入門】AnimatorControllerの使い方を解説

：【Unity】任意のタイミングでanimationを発動させるやり方【animation／animator】

　まずレイヤー名を整えます。Unityにインポートするとおそらくレイヤー名は変更できないっぽいので、ちゃんと秩序的につけましょう。

　PSDを開く必要があるのですが、自分はフリーソフトのKritaを使っています。ローディング画面で癖（ﾍｷ）の強いケモレベル2-3くらいのケモキャラが出迎えてくれるので小気味良いです。

Krita起動画面。ちなみにこの子はリス型アンドロイドのKikiちゃんなので正確にはケモではなくメカケモだったりする……というような説明がKrita公式サイトにありました。業が深い。

　レイヤーを調整したら、拡張子をPSDからPSBに切り替えます。

　PSDはそもそもフォトショップ用のデータ（PhotoShop Data）ですが、PSBはフォトショップ用の大きいデータ（PhotoShop Big document）だそうです。どうやらこれは本当に識別子用の意味しかないらしく、なんと拡張子を変えるだけでOKです。

　ファイルをPSBにすることで、「Unity PSB importer」というPSBを読み込んでスプライトを分けてくれるパッケージで自動で読み込んでくれるようになります。

　上記のimporterが入っていない場合は手動でインポートする必要があるようですが、なんかいつの間にか入ってた。

　Unityにドラッグ＆ドロップしてスプライトをインポートしたら、すでにSpriteの分割は行われているため、その自動分割で良ければPixel per Unitsだけ調整（デフォは100。自分の場合は1）してScene画面にドラッグ＆ドロップすればそれでSpriteそのものの描画は可能です。

　これをボーンを入れてアニメーションをさせるためには、Sprite Editorを開いてSpriteの分割やボーンの操作をする必要があります。

 

Sprite EditorはインポートしたSpriteのインスペクタから開ける。

　まずSpriteの分割ですが、Sprite Editorを開いた時点で表示されているとおり、PSB importerのおかげで自動で分割が行われています。

　それぞれのSpriteはこの状態からさらに拡げたり縮小することも可能なのですが、縮小はともかく拡げようとした場合、すでに分割されている他のスプライトレイヤーが邪魔してきます。

　複数の大きさの違うレイヤーに同じ動きをさせようとする場合、複数のボーンによるWeightの差があると、そこに歪みが生じます。Geometryをコピーしてやればその歪みを同期させることで差をなくせるのですが、スプライトの大きさが違うとそもそもうまくいきません。

　そういうわけで、大きさの違うスプライトを同一のサイズにする必要があって、おそらくこれを対処する方法もあるとは思うのですが、やり方がわからないので無理矢理対処します。具体的にはPSDを作る時点でそれぞれのレイヤーにレイヤーの大きさを示す枠を描いておきます。こうするとPSB importerがその枠に沿ってスプライトを切り抜いてくれるので、Sprite Editorでその枠が切れるように縮めればいいだけ。

あらかじめPSD（PSB）作成の際に枠をつけたレイヤーと、その際の分割。分割されたレイヤーからそれぞれ縮めている。

　これでSpriteの分割は綺麗にできたので、次にボーンを割り当てます。Sprite EditorからSkinning Editorを選択し、Create Bonesでボーンを作成します。

 だいたい見たままなのでちょっちょっとやりましょう（こんなアンチョコあるか？）。なお、Spriteとかアニメーション関係は対象を選択し、Deleteではなく⌘+Deleteで削除できることが多いです。

　ちなみにボーンの親子関係は既成のボーンを選択している状態でボーンを置けば自動で親子関係となるのですが、変更したい場合はVisibilityからドラッグすることで変更できます。

　さらにBone influenceでボーンとスプライトの関係を割り当てます。これもスプライトのとボーンをそれぞれ選択して+ボタンで割り当てるだけです。細かい操作は勘で。

　ボーンとスプライトの関係は、単一のボーン対スプライトであればボーンの動きにそのまま追従しますが、複数のボーン対スプライトの場合はボーンの動きによってスプライトが曲がります。

　この曲がりについて影響を与えるのがWeightで、Auto WeightでWeightを割り当てることでどこがどれくらい曲がるかを決定できます。気に入らない場合は自分で設定も可能。

　またBone InfluenceをAuto Geometryで一括で自動で行うこともでき、これは必ずしも正しくはならないのですが、あとからBone influenceを調整すれば複雑なスプライトでなければ良い具合になります。

　ただし、Autoでの割り当ては目で見える範囲をうまい具合に割り当てるので、前述の「枠を作って、枠を外し、大きめのサイズのスプライトを切り分ける」やり方で作ったスプライトの割り当てが同期したいスプライトと一致しません。

　これに対処するためにはCopy Rigで割り当ての情報をコピーすればOKです。OKです……OKで……のはず………。

うーむ、リグコピーして再生成すればいいのかと思ったが、ペーストしたタイミングでコピー元が全部消えるな。ほんとなんなんだこのバグはUnity。

— ブリキの (@buri_kino) October 23, 2022

　できねぇ！

　なぜかコピーして貼り付けると元の割り当てが消える（つまりコピーではなく切り取りになってしまっている）というバグなのか、そもそもCopy Rigの概念を読み違えているのかよくわからないものが。

　うぉおと唸りながら回転していたら、アドバイスが。

フォロー外からすみません。
同じところで今日悩んでいたのですが、もしかするとペースト時にBonesのチェックを外すとうまくいくかもしれません……？
もし既に解決済みであったり、的外れなことを言っていたらすみません。その場合はスルーしていただけると幸いです pic.twitter.com/FN4DwZr0e4

— NLN⚰ノロナさんだよ (@NLN_San) October 26, 2022

　Pixels per Unitのときもそうだったけど、Twitterとかで仰向けになって手足をばたばた動かしながら腰を視点として回転しながら「できない、できない」と叫んでいるとアドバイスくれる方がいてありがたい。

　というわけで、Copy Rigが想定通りにいかない場合はBoneのチェックを外すと（なぜか）うまくいきます。Bone Influenceとかもちゃんとコピーされる。

　このようにしてボーンとスプライトの割り当てが終わったところでSprite Editorを閉じてUnityの通常画面に戻ります。インポートしたPSBファイルをSceneにドロップするとBoneが追加されていることがわかります。

　Boneを動かすと対応しているSpriteが動くはずですが、ここで動かすと初期配置がよくわからなくなるので、Sprite EditorのSkinning EditorのPreview Poseで確かめたほうがいいでしょう。

　さて、やっとアニメーションです。ここではAnimate ControllerとAnimationを使ってアニメーションさせます。

　わかりやすい例として、雪上車のラジオゾンデ観測装置のアニメーションを作ります。

 まずはCreateからAnimate Controller1つと、作りたい数のAnimationを作成します。ここではゾンデの起動（Work）、非起動（Unwork）、観測（Obs）の3種を作成しました。

　ちなみに複数のスプライトを別々にアニメーションさせるため、雪上車は車体・内装・キャタピラ・観測装置3種・脱出装置の7つのスプライトパッケージに分割しています。

 

　作成したAnimate Controllerをラジオゾンデのスプライトパッケージにアタッチします。

 　Animation3種もブチ込みます。

 　AnimationのひとつをダブルクリックするとAnimation作成用のビューが展開されるので、その状態でヒエラルキー上のラジオゾンデのスプライトパッケージを選択するとアニメーションを作れるようになります。

　ブチ込んだ3種のアニメーションが選択できるようになっていると思うので、そのうちのひとつを選択し、録画ボタンの赤いマークをクリックして録画を開始します。

　この状態でScene上の対応するBoneを動かすと、Animation画面の白い線の時間での動きが決定され、白い線を動かしてBoneを決定するという動作を繰り返すことで間の動きが補完されてアニメーションを作ることができます。

　終わったら再度録画ボタンを押して録画終了。このへんは身体で覚えます。

　Animation画面を閉じてAnimatorを確認します。SceneやGameビューの隣にAnimatorビューが表示されている（されていなければViewで表示）と思うので、そちらに移動するとよくわからないPower Pointの図みたいなものが並んでいます。

　とりあえず使用するWork、Unwork、Obsを見やすい位置に移動させ、何もないところで右クリック→Create Emptyで無のモーションを作成。

　で、このEmptyを右クリックしてDefault Stateを制定します。するとEntryからEmptyに矢印が伸び、スタートした直後に自動でこのEmptyに向かうようになりました。

だんだん説明がてきとうになってきたな。

　さらにこのEmptyを右クリックしてMake Transitionで他のAnimationに矢印を伸ばせるようになります。

　通常時をEmptyとして、仕舞うときにUnwork、Unwork状態から動かせるようにするときにWork、通常時で観測するときにWorkとしたいので、下のようにTransitionを設定しました。

　この設定だと自動で動いてしまうので、条件をつけて動くように変更します。

　Animatorの画面をLayerからParameterに切り替え、Bool値を追加します。0番目のゾンデの動作なので、bWorkZonde0、bUnworkZonde0、bObsZonde0というBool値を作成。

　矢印のTransitionを選択し、そのビューでWork、Unwork、Obsのそれぞれの遷移に各々のBool値のTrue条件を設定しました。

 あとはスクリプト上で、

[Animatorコンポーネント].SetBool([StringのBool値名], [true/false]);

でBoolを変更してやれば任意のアニメーションを動かせるようになります。

　ボーンを動かしての変化はこれでいいのですが、スプライトを切り替えたいときはこれだとうまくいきません（まぁAnimatorでGameObjectのオンオフも設定できるっぽいのでできなくはないんだけど）。

　たとえばキャラの表情変化や、雪上車でいえばキャラピラの差分での表現などです。

　これに関してはSprite Resolverを使えばOKで、Sprite Library Assetsを作ってスプライトにアタッチし、変化させるうちのひとつにSprite Resolverをアタッチ、他のオブジェクトを非アクティブにすれば、動いているオブジェクトのSprite Resolverを変更するだけでパターンを変更することができます（面倒になったので雑な説明）。

キャタと車体と観測装置とかその他の動き、Sprite分割してAnimatorで動かせばOKか。 pic.twitter.com/FQHyXxAiWr

— ブリキの (@buri_kino) October 22, 2022

　最後だいぶ面倒になったけど、Sprite Resolverについては参考でも挙げた→【Unity】Sprite Resolverで2Dアニメーションを参考にしてください。

　というわけで最後体力が尽きたのでかなり雑になりましたが、大事なのは2Dアニメーションを作る手法を一通り体験できるようになったことです。

　まだまだSpriteの操作は慣れないけど、こっからはゴリゴリ作っていくしかない。

　あと学ぶ必要があるのは雪を降らす手法と、ライティング関係のアセットの使い方だなぁ。これもちょいちょいやってどうにか頑張っていきたい所存。

最近よく毛布の上で月になっている。