【SpriteStudio】2Dアニメーション制作ツールのSpriteStudioを使ってみる ー導入編ー
前回はSpriteStudioと他の2Dアニメーション制作ツールを比較しつつ、SpriteStudioの魅力に関して考察してみました。今回は実際にSpriteStudioと必要なツールをインストールして、psd形式で作成したイラストをSpriteStudioに取り込む前段階まで紹介してみたいと思います。
SpriteStudioのインストール
SpriteStudioのライセンス購入や、ソフトのダウンロードは下記ページで行う事ができます。
SpriteStudio本体のダウンロードや、サンプルプロジェクトやツールのダウンロードはページ内の「OPTPiX ヘルプセンター」で行えます。
Win版とMac版でそれぞれインストーラーが用意されているので、必要な方をダウンロードしてインストールします。
インストールが完了し、SpriteStudioを起動してみるとライセンスコードの入力があったかと思います。正常に起動できたらSpriteStudioの使用準備は完了です。
PSDtoSS6をダウンロードして使用する
描いたイラストをSpriteStudioでアニメーションさせるにあたり、作成したイラストをSpriteStudioで扱えるように自動でコンバートしてくれる大変便利なツールが「PSDtoSS6」です。
特別な理由がなければ、作業時間の短縮になるのでぜひ活用した方が良いと思います。GitHubにてダウンロードする事が可能です。
PSDtoSS6の具体的な使用方法から、どういった部分が作業時間の短縮になるかを説明してみたいと思います。
PSD形式でイラストを作成保存する
使用しているペイントソフトによって異なると思いますが、PSDtoSS6でイラストをコンバートするにはツール名にもある通り.psd形式(Photoshopドキュメント)でイラストを作成する必要があります。
また、PSDファイルを作成できたとしても、ペイントソフトによってはPSDファイルのフォーマットが違うためコンバートできないといったケースもあるようです。
上記のPSDファイルを作成できないケースに該当してしまった場合は、PSDtoSS6で省略できる作業を手動で行う必要があります。
Photoshop、Illustrator、CLIP STUDIO PAINT、Photopea辺りのペイントソフトで作成したPSDファイルであれば大丈夫なようです。自分はCLIP STUDIO PAINTで行っています。
ペイントソフト上でレイヤーを分ける事で、PSDtoSS6でコンバートした際にSpriteStudio上で個別のパーツとして分ける事ができるので、どういったアニメーションをどの部分にさせるかを想定しながらイラストを作成する必要があります。
PSDtoSS6でPSDファイルをコンバートする際、 レイヤー名が全角文字になっているとコンバートエラーとなったので予め半角にしておくと良いと思います。
イラストが作成できたら、PSD形式で保存します。
PSDtoSS6でPSDファイルをコンバートする
PSDtoSS6をGitHubからダウンロードしてきたら、ファイルを展開して中を見てみます。
「PSDtoSS6GUI.exe」という実行ファイルがあるので、起動します。
PSDtoSS6を起動したら、PSDファイルの読み込みとコンバートの設定を行っていきます。
「ファイル追加」ボタンを押して、作成したイラストのPSDファイルを指定して読み込みます。
「出力フォルダ選択」をクリックして、コンバートで生成されるファイルの生成先を指定します。
「ssae出力」のチェックボックスをオンにします。アニメーションを作成するケースがほとんどだと思うので、オンで問題無いと思います。
「sspj出力」、「sspj、ssae上書き」のチェックボックスもONにします。上書きに関しては好みで良いと思いますが、上書きしてくれた方が個人的にはファイルがかさばらず便利かと思います。
設定が完了したら、「コンバート開始」を押します。ステータスにConvert Success!の文字と、ログに各ファイルのコンバートが成功した事が表示されればOKです。
指定した出力フォルダの中に、.ssce、.ssae、.sspjの三つのファイルに加えて、イラストのレイヤー分けした部分がパーツかされて敷き詰められている様子がわかるpng画像が生成されています。
SpriteStudioを起動しプロジェクトを開く
コンバートした事で生成されたsspjプロジェクトをダブルクリックするか、SpriteStudioを起動して「ファイル」→「プロジェクトを開く」からsspjファイルを指定してプロジェクトを開く事ができます。
プロジェクトを開いたら、SpriteStudio内の「セルリスト」と「セルマップ」というウィンドウに注目します。
ペイントソフトでレイヤー分けしたイラストパーツがセルリスト上に並んでいて、セルマップにはセルリスト上のパーツが適正な間隔で詰められて配置されている事が確認できると思います。
PSDtoSS6は、このセルマップの作成を自動で行ってくれるツールとなっている訳です。
PSDファイルをPSDtoSS6でコンバートした際に生成されたファイルの中の一つである、.ssceファイルがこのセルマップの情報となっています。
PSDtoSS6を使用しないで手動で.ssceファイルを作成する場合は、セルマップ中に各パーツ用のセルを一つ一つ確保し、セルリストのパーツを並べていかなければなりません。
また、アニメーションを作成するための前手続きである.ssaeファイルもコンバートで作成してくれます。
PSDtoSS6を使用する事で、セルマップの作成を省略して直ぐにアニメーションの作成に入る事ができるので、使用を推奨されている訳です。
次回、アニメーションを作成する
今回までで、アニメーションを想定して作成したイラストをSpriteStudioに取り込む事ができました。
次回はアニメーションを具体的に作成するために、パーツの移動や回転を行いキーを作成したり、キーフレームの補間方法に関して見てみたいと思います。