![見出し画像](https://assets.st-note.com/production/uploads/images/69182906/rectangle_large_type_2_531184c6ce7aea58cdb005594ead570a.jpeg?width=1200)
SpriteStudio活用法(アニメーション①)
さて、いよいよアニメーション作成をいたしましょう。前項にて作成できたsspjデータをダブルクリックして、SpriteStudioを立ち上げます(SpriteStudioを立ち上げてから読み込んでもいいです)。するとこんな画面になっていると思います。
![](https://assets.st-note.com/img/1640998375446-EusqVF59DU.png?width=1200)
Photoshopで作られたデータが、そのままSpriteStudioで展開されていると思います。画面下部のタイムラインでアニメーションを管理します。左側にアニメーション対象となるパーツ名、右側がアニメーションキーを設定するタイムラインです。
![](https://assets.st-note.com/img/1640998549558-QLoWJPHEDj.png?width=1200)
キャラクターのセットアップ
まずSpriteStudioで最初にやること!それはキャラクターのセットアップです。というのは、この段階ではPhotoshopのレイヤー構造同様に、並列でパーツが並んでいる状態になりますので、例えば胴体を動かしても、手足や首、羽根が胴体に連動せず、単独で動くのみとなってしまいます。
![](https://assets.st-note.com/img/1641000308246-KIocWJvqDF.png?width=1200)
このため、まず階層構造の設定をしましょう。例えば手足は胴体の子供階層、手首は肘の子供階層、というように、親階層のトランスレーションを子供階層に継承(例えば上腕パーツを下げると肘パーツが連動して動く)できるようにします。
![](https://assets.st-note.com/img/1641000576223-tUp6or6KwT.jpg)
親となるパーツの右あたりの領域に、子供となるパーツをドラッグ&ドロップします。これでパーツ間の親子関係が結べます。
![](https://assets.st-note.com/img/1641000907163-DRGNdczVBq.png?width=1200)
![](https://assets.st-note.com/img/1641001087487-gwPUeML0Xj.png?width=1200)
各パーツの中心点
パーツが親子関係を反映した構造で動かすことができたと思います。しかし回転軸の位置がおかしな場所にあるため、思ったような形になっていないかと思います。
![](https://assets.st-note.com/img/1641002035997-JY9Z4PTF5K.png?width=1200)
そこで各パーツそれぞれの「中心点」を設定する必要があります。画面に左部にある”セルリスト”から、中心編集をしたいセルをダブルクリック。するとセル編集ウィンドウが開きます。黄色いラインが交差する部分が現状のパーツ中心点になっているので、望みの位置に移動させます。
![](https://assets.st-note.com/img/1641002330692-LytmnCZtMe.jpg?width=1200)
![](https://assets.st-note.com/img/1641002571154-srqaTpuXs8.png?width=1200)
これらの中心点の設定を全パーツで行います。全部、と言われると大変ですが、最初に一度やってしまえばこれ以降は触らないので大丈夫です。これが一通りできたら、次は表示優先についてです。
表示の優先順位について
次に、パーツ表示の優先順位についてです。データ変換する前の、Photoshopの段階でのレイヤー順序がそのままSpriteStudioに反映されるので、大抵の場合はあまり意識することはないかと思います。が、表示優先が適切でないと…。
![](https://assets.st-note.com/img/1641002847162-SoR3rW90AV.png?width=1200)
![](https://assets.st-note.com/img/1641002958465-wZeZD9Xznk.jpg?width=1200)
なので、Photoshopの時点である程度、表示優先を考慮したレイヤー順序にしておいた方が良いかと思います。ただし、結構複雑なアニメーションで、手が頭部の前に行ったり後ろに行ったりと、アニメーションの中で表示優先が頻繁に切り替わることはあり得ます。
その場合は、アニメートできるパラメータとして”優先度”という項目がありますので、ここの数値を変更して画面上での表示優先を変更することができます。
セットアップの仕上げ
と、ここまでやってみて、レイヤー数が無駄に多くて作業しづらいぞ…と思われた方も居ると思います。これはつい最近気づいたことなのですが、パーツ種類によっては、これらのレイヤーを消去してレイヤー数をまとめることが可能です。
![](https://assets.st-note.com/img/1641003378132-hOmeBJP3Un.jpg?width=1200)
例えば、このワイバーンの場合、翼と顎、目玉が”パターンアニメーション”です。アニメートできる設定の中に”参照セル”というものがあります。こちらは、パーツ間の親子関係を変えることなく、パーツの中身を変える、というものでパターンアニメーション(いわゆるコマアニメ)で表現するときに使用する項目です。
つまり、上図で見ると、翼はアニメーションパターン数(12枚)それぞれにレイヤーが存在していますが、それをひとつだけ残してあとの11レイヤーを全部消してしまってレイヤー構造を最適化することができます。
![](https://assets.st-note.com/img/1641003804502-6GzqadLKhE.jpg?width=1200)
![](https://assets.st-note.com/img/1641003907608-IyUATaBus4.png?width=1200)
このように、パーツの内容によってはひとつにまとめることが出来るので、最初の段階でうまく設計しておけば、労力がかなり削減できます。
![](https://assets.st-note.com/img/1641005032390-duZDxqxgti.jpg?width=1200)
以上で、SpriteStudioを使っての下準備は全て終わりました。いや、本来はもっと複雑で凝った表現ができるんですが、自分にとって必要な作業はだいたいこんなところです。それではデータを保存しましょう。
データ保存について
データ保存ですが、sspjは、他のセルマップデータ、アニメーションデータを参照して管理するプロジェクトファイルなので、パーツの中心点やアニメーションを追加したときなどは、それら参照データの保存も行いたいので、念の為「全て保存」してからプロジェクト保存をするのが良いと思います。無論、セルマップやアニメーションだけを保存したい場合もあると思いますので、そのあたりはその時々に適した対応をしていただければと思います。
![](https://assets.st-note.com/img/1641004279333-7LPsaFrdsy.png)