SpriteStudio でアニメ制作テスト - 制作編

前回の記事で SpriteStudio のインストールは完了した。
今回は制作に取り掛かる。

制作環境
SpriteStudio Ver7.1.2
PC:Surface GO (mem 8GB)

※SpriteStudio での制作詳細は目次の後に。

完成したテスト動画
こういうのが完成した。
頑張った所が黒塗りになってしまって…極めて残念だ…
全体的にもう少し大きく動かした方がよかったかな。
乳房がボヨンボヨンできるか試したかったが、胸が無かったわ。

感想
SpriteStudio は UIはかなり独特で、デザインツールの標準的な操作とかけ離れていたり、一般的な感覚とは違う動作をしたりする。
その癖や覚えにくさは克服しなければならない。

また UIの小さな不具合がそれなりにあり、うまく行かずに悩む場面も多いと思われる。
私も遭遇した問題には対処法等を記述した。（自分の備忘の為に）

まだ私の思い描いたアニメが作成できるかは分からない。
もう少し実験してみるつもりだ。

制作開始

とりあえず「何か制作して動画で出力してみる」を目標に定める。
現在は SpriteStudio Ver7 だが、この最新版でのチュートリアルが少ない…というか無い。ほぼ変わらないということか？

以下、参考にしたサイト
公式サイト
https://www.webtech.co.jp/help/ja/spritestudio7/
サンプルデータ（実際の作りが分かる。大いに参考にした）
https://www.webtech.co.jp/help/ja/spritestudio/download/sample/
さらえみさん：OPTPiX SpriteStudioでキャラクターイラストを動かしてみた
https://saraemi.com/2112spstudio-making/

プロジェクト作成

まずはプロジェクトを作成する。

プロジェクトファイルを作成

ファイル ＞ 新規プロジェクト でプロジェクトファイルを作成。
（画面左上のプロジェクトウィンドウに表示される）

互換性の設定

プロジェクトを作成したら、互換性を確認する。
プロジェクト ＞ プロジェクト設定 ＞ 一般：互換性

「再生対象プラットフォーム」を設定。
ゲームでSDKで再生する場合は再生対象プラットフォームを設定。
動画再生の場合は「デフォルト」を選択。

セルマップ作成

画像を動かす部位ごとに分けてセルマップを作成する。

画像を用意

部位ごとに切り取りやすいように分けた画像を用意する。
とりあえずこんな感じで。（一部黒塗り）

画像サイズは 512, 1024, 2048等の正方形。透明を記録できるPNGで保存。
（Photoshop用に自動ツールが用意されているが、私はクリスタなので自力で作成）

セルマップファイルを作成

プロジェクトウィンドウの「セルマップ」を右クリック ＞ 新規作成
先の画像を選択して、セルマップファイル（.ssce）を作成する。

セルの作成

セルマップウィンドウ（画面中央上ウィンドウ「セルマップ」タブ選択）で矩形に囲って、囲った中をダブルクリックでセル登録する。（画面左下のセルリストに表示）
セル編集ウィンドウが開くので、問題なければ閉じる。

アニメーションの作成

アニメーションさせる前に、アニメーションファイルの作成と 動かすパーツのセットアップを行う。

アニメーションファイルを作成

プロジェクトウィンドウの「アニメーション」を右クリック ＞ 新規作成
でアニメーションファイル（.ssae）を作成する。

セットアップ

プロジェクトウィンドウでアニメーションの Setup を選択すると編集できる。
レイアウトウィンドウ（画面中央上ウィンドウ「レイアウト」タブ選択）の
基準枠 が赤くなる。

基準枠サイズは適当でよい。（パーツ配置の目安に使用する）
基準枠サイズはレイアウト情報ウィンドウ（画面右ウィンドウ「レイアウト情報」タブ選択）で設定する。

パーツ登録

セルリストからレイアウトウィンドウへ セル をドラッグドロップしてパーツ登録する。
フレームコントロールウィンドウ（画面中央下ウィンドウ「フレームコントロール」タブ選択）に登録パーツが表示される。

親子関係設定

フレームコントロールウィンドウでパーツ名をドラッグドロップして親子関係を構築する。
今回、body > face > hair を親子にした。

表示順序調整

パーツの表示順序は以下で決まる
１：アトリビュートの優先度（高い値が前）
２：フレームコントロールでの並び順（下の方が前）

表示の優先が正しくない場合、アトリビュートウィンドウ（画面右ウィンドウ「アトリビュート」タブ選択）の 優先度 で調整する。

基本配置設定

基本の位置・回転・スケールを設定。
「表示：ギズモ」（画像の赤丸）を使用すると操作しやすい。

アニメーションの編集

編集するアニメーションを選択し、キーを打って動かすことでアニメーションさせる。
プロジェクトウィンドウの「アニメーション」で設定するアニメーションを選択。

基準枠、再生時間、fpsを設定

ここでも 基準枠 を設定する。（あくまで目安として使用）
フレームコントロールで フレーム数 や fps を設定する。
fps は1秒間の再生フレーム数である。（ゲームだと概ね３０らしい）
フレーム数 は、例えば2秒のアニメを作りたい場合 2秒 × fps30 ＝ 60フレーム必要。（※便宜上＋１して６１）
フレーム数を設定時「キーフレームの位置を調整しますか？」で「いいえ」を押すとキーは変化せずフレーム数のみ設定できる。

キーを打つ

動かしたいパーツのキーを打ちたいフレームを選択しダブルクリックでキーを打つ。
（※アトリビュートの値を変えると自動でキーが打たれる）
Setupの配置でキーを打ちたい場合は、右クリック「Setupからキー作成」を使う。

アトリビュートで変化する項目毎に補間方法を設定できるが、
面倒なので全項目一度に設定する、キーを右クリック「補間方法を変更」を使う。
（カーブエディタも使えるが、まだ良く分かっていない＆意外と面倒なので割愛）

再生して動きを確認。
キーを前後に移すにはドラッグドロップでOK。

キーを打っても反映されない

まれにキーの打ち方の問題か編集した値が反映されない場合がある。
アトリビュートの項目の●が青くなっているか確認する。灰色のままならクリックして青くすると反映される。

メッシュ・ボーンを使ったアニメーション

体を ボーン を使って制御するように変更する。
ボーンで制御するにはセルをメッシュ化し、
頂点ごとにボーンへの追従割合を設定する必要がある。

セルのメッシュ化

セルリストから セル を選んで右クリック「メッシュ編集」
これでセルをメッシュ化できる。（セルリストにメッシュと表示される）

メッシュ編集ウィンドウ

オートモード（表示：オート）

自動でメッシュを形成できる。
「オート：粗さ」の数値を操作して「適用」で決定。
以降はマニュアルモードに移行する。

マニュアルモード（表示：マニュアル）

手動でメッシュを形成できる。
ここでは外側の点を 頂点 、中にある点を 分割点 と呼んでいる。
頂点や分割点を追加するにはこのモードで行う。

範囲選択モード（表示：範囲選択）

点を編集するのに便利。
点を選択して移動や右クリック「削除」等の編集ができる。
Ctrl を押しながら点を選択すると選択の追加ができる。
複数の点を選択すると「ツール」や「拡大縮小」が使える。

編集が終わったらウィンドウを閉じる。

通常パーツのメッシュパーツ化

faceセルをメッシュ化しても、faceパーツは通常パーツのままである。
パーツのアトリビュート「パーツ情報：パーツ種別」を通常からメッシュに変えるとメッシュパーツに変更できる。
（恐らくSetupモードで行った方がよい）

ジョイントとボーン追加

ボーンを使用するにはジョイントが必要になる。
Setup画面にした後、（これをせずに追加したボーンが正しく表示されなかった）
フレームコントロールでジョイントを追加、子にメッシュとボーンを追加。

レイアウトウィンドウの「表示：ボーンパーツ」でボーンが表示され「表示：フォーカス枠」でボーンの回転用操作子が表示される。
（ボーンの長さと回転の操作子が被った場合、ズームインアウトで解消できる）

コンストレイントパーツ

公式にコンストレイントパーツを説明している記述がなさそう…
パーツ情報を見ると、IKの影響範囲と曲がる方向を指定できる。
IKで膝が逆に曲がるのを防ぐのに使用するとか。

ボーンポイントパーツ

公式にボーンポイントパーツを説明している記述はなさそう…
散見される記述では、ボーンの子にのみ作成でき、座標取得等に使ってとの事。
NULLパーツをボーン専用にした様なものか？（パーツ情報もNULLと大差ない）
ボーンポイントはレイアウトウィンドウに「×」が表示され、ボーンの非表示で表示制御できるのでNULLより便利。

ウエイト設定

ウエイトとはボーンの動きにメッシュをどれだけ追従させるかの割合。
レイアウトウィンドウでSetup画面にして「表示：ウエイト表示」をONに。
初期状態はメッシュは真っ黒（ウエイト設定なし）。
設定するメッシュパーツを選択し「ウエイト：ウエイト再設定」を押すと近くのボーンのウエイトが自動設定される。
（※「ウエイト：ウエイト編集」はウエイト設定をしてからでないと行えない）

ウエイト編集

ボーンを動かしてメッシュが変に動く場合は ウエイト編集 する。
Setup画面にして編集するメッシュパーツを選択し「ウエイト：ウエイト編集」でウエイト編集ウィンドウが出る。
まず編集する点を選択する。Ctrlで追加選択。Shift+ドラッグで範囲選択できる。
選択するとボーンごとのウエイトが表示される。

ボーンをアニメーション

ウエイト設定後は、ボーンを動かすとメッシュがウエイト分動く。
IKを使用してボーンを動かす事もできる。（その他：IKの項目で解説）

メッシュのデフォーム（変形）アニメーション

メッシュを頂点単位で変形することが可能。
レイアウトウィンドウで「編集：デフォーム編集」にする。
変形したいメッシュパーツのフレームを選択してデフォームする。
変形を戻したい場合はアトリビュート「高度な機能：デフォーム」の「リセット」を行う。
（※上手くアニメしない場合、アトリビュート「高度な機能：デフォーム」の●が青いか確認）

マスク機能

今回の製作には使用しないが、表示物の一部分を非表示にするマスクが使える。

互換性を確認

プロジェクト ＞ プロジェクト設定 ＞ 一般：互換性
「拡張機能の有効：マスク機能を使用する」が有効か確認。

マスクパーツの作成

通常パーツと同じようにマスクにするセルをSetup画面に追加する。
レイアウトウィンドウの「表示：マスクの有効化」がONになっているか確認。
パーツのアトリビュート「パーツ情報：パーツ種別」を「マスク」に変えるとマスクパーツになる。
（※マスクから通常パーツに戻すのもここを変えるだけでOK）

マスクパーツの強度設定

マスクパーツのアトリビュート「高度な機能：マスク強度」を255に設定する。
強度＋画像α値が256以上ならマスクされる。
簡単に言うと、強度255ならマスクされ、0ならマスクされない。

パーツをマスクさせるための設定を行う

各パーツがマスクされるかは、アトリビュート「パーツ情報：マスク対象」と「優先度」で決まる。
「マスク対象」がチェックされており、「優先度」がマスクパーツの優先度以下ならマスクされる。

その他に

マスクパーツの重ね掛け

マスクパーツを重ねた場合、マスクパーツの「マスク対象」チェックによって効果が変わる。
マスク対象チェックあり：重なった部分はマスクの打ち消し、つまりマスクされない。
マスク対象チェックなし：重なった部分もマスクされる。

マスクパーツを可視化したい

レイアウトウィンドウの「表示：マスクの有効化」をON/OFFする。

インスタンス機能

インスタンスは別のアニメを呼び出して配置できるパーツ。
群衆などはアニメを１つ作って、それをインスタンスで複製すると良いらしい。

インスタンスパーツ作成

インスタンス設定先アニメーションのSetupを選択する。
（※Setupで行うのが一番問題が少ない）
インスタンスリスト（左下ウィンドウ「インスタンスリスト」タブ選択）から「インスタンス」をレイアウトウィンドウにドラッグドロップ。
（※インスタンスリストに何もない場合は、別のアニメーションが無い状態）

再生設定

インスタンスパーツにキーを打つと再生設定が行える。
アトリビュート「高度な機能：インスタンス」の「編集」を押す。
再生区間や再生速度、再生回数等が設定できる。
（フレームコントロールに再生される区間が［ ］で表示される）

元アニメのフレームにラベルを設定すると、再生区間をラベルで指定できる。
元アニメを修正すると、インスタンスパーツにも即座に反映される。
（※元アニメに飛ぶのに便利なアイコンボタンがフレームコントロールにある）

思い通りに表示されない場合

インスタンスにはUI的に細かな不具合が存在する。
必ず０フレームから[ ]が表示される。
表示されない場合、アトリビュート「非表示」の●を青にして、表示状態に設定すると改善するかも。
アニメしない場合、キーをドラッグ移動しても[ ]が付いてこない場合、アトリビュート「高度な機能：インスタンス」の●を青にすると改善するかも。

シーケンス機能

シーケンスは一連のアニメーションをまとめて再生するデータ。
（※アニメ映像制作では使わないかも）

シーケンスファイル作成

プロジェクトウィンドウの「シーケンス」を右クリック ＞ 新規作成
でシーケンスファイル（.ssqe）を作成する。

シーケンスの編集

プロジェクトウィンドウのシーケンスデータを右クリック ＞ 編集
シーケンスエディタが開くので「追加」で再生するアニメーションとループ回数を設定してOKを押す。
リストの上から再生されるので、再生順を整えたらOKを押してエディタを閉じる。
フレームコントロールに設定されたアニメが表示される。

シーケンスの再生

プロジェクトウィンドウのシーケンスデータを選択。
フレームコントロールで再生ボタンを押す。

シェイプ機能

シェイプは画像なしに矩形パーツを作れる機能。
シェイプはマスクにも使用出来る。
場面転換のフェードイン・アウトに使えそう。

シェイプは「名前の変更」したりアトリビュート変えたりで表示されたり消えたりと
まだちょっと動作が不安定か？

互換性の確認

プロジェクト ＞ プロジェクト設定 ＞ 一般：互換性
「拡張機能の有効：シェイプ機能を使用する」が有効か確認。

シェイプの作成

Setup画面にする必要があるかわからないが、念のためSetup画面にする。
フレームコントロールのアイコン「シェイプパーツの追加」をクリックで矩形が表示される。
アトリビュート「サイズ」でシェイプ矩形のサイズを設定できる。

その他に

マスクに使用する

互換性で「マスク機能を使用する」が有効か確認。
アトリビュート「パーツ情報：シェイプ情報：マスク」をチェック。
アトリビュート「高度な機能：マスク強度」を255に設定。（0だとマスク無効）

フェードイン・アウトに使用する

シェイプを描画面全体を覆うサイズに設定。
「優先度」を最前面に（1000とか大きい値に）。
「パーツカラー」を単色で設定してミックスに。
後は「不透明度」にキーを打ってフェードイン・アウトを実現。

エフェクト機能、サウンド機能、テキスト機能

SpriteStudio にはエフェクト機能がある。
これは他の２Ｄアニメツールには無い機能（だと思う）。
今回はちょっと面倒そうだったので使用しなかったが、何れ解説しようと思う。

他にはサウンドが埋め込めたり、テキストを表示できたりする。

その他

IKで動かす

パーツを選択してALTキーを押しながら動かすとIKで動く。
（※IKというとボーンパーツしか使えない印象があるが、他のパーツでも使用可）
先端にNULLパーツを付け、それを選択して動かすと良いらしい。

レイアウトの「設定：パーツIKの影響リンク数を変更」で影響範囲を設定出来る。
メッシュパーツならコンストレイントパーツを使えるらしい。

ギズモで操作しやすく

レイアウトの「編集：ギズモ」でギズモを出すことができる。
ギズモは小さなパーツの移動・回転・拡縮を行うのに便利。

パーツの移動パスを表示

レイアウトの「表示：移動パス表示」でパーツの移動軌跡が表示される。

制作完了

とりあえずアニメーションが作成できた。
作成したアニメーションを動画で出力する。

動画出力

プロジェクトウィンドウ の アニメーションデータ を右クリックで「レンダリング」をクリック。（シーケンスデータでもレンダリング可）
ウィンドウが出るので出力形式を MP4に（※ビットレートはそのまま）で出力。

隠ぺい処理問題

エロアニメの場合は「誠に残念ながら」制作後にモザイクをかける必要があるが、今回は元画像を黒塗りで対応した。今後の課題だ。