スプライトシート(SSCE) 出力

このページではSpriteStudioで作成したアニメーションをスプライトシート化する方法とその活用法を説明していきます。

スプライトシートは、一般的に各フレームの絵を敷き詰めたシートの画像ファイル(アトラスとも)と、画像ファイル内のどの領域を、どのタイミングで表示するかを記録したデータファイルで構成されます。

SpriteStudio Ver.7.2.0 で対応された「スプライトシート(SSCE)」出力では PNG形式の画像ファイルと、データファイルとして SpriteStudio のセルマップ(.ssce)とアニメーション(.ssae) を生成します。

アニメーションの基本的な作成方法については「はじめての方」で解説しています。
各アトリビュートについては「アトリビュート」ウィンドウを、アトリビュートの整理方法についてはこちらをご覧ください。

スプライトシート(SSCE) の用途

はじめにスプライトシート(SSCE)出力の用途から説明します。
どういったケースで有用なのか、考えられるものを以下に列挙します。

新機能を使ったアニメーションを対応前のバージョンの SpriteStudio 及び Player で再現
アニメーション全体にパーツカラー、シェーダー、半透明化(重なり部分が透けない)を適用
Player プログラムの描画負荷を軽減

上記に当てはまるものがある場合、是非一度試してみてください。

重要な注意点として、１フレーム単位で画像化して並べていく(重複を除外する機能あり)ため、アニメーションのレンダリング時の画像サイズ、総フレーム数に比例して画像ファイルが肥大化していきます。
このため、尺が短めのワンショットアニメーション、低解像度が許容されるエフェクト、ピクセルアートシミュレーション機能を活用し意図的に低解像度化したいアニメーションに適していると言えます。

1. 新機能を使ったアニメーションを対応前のバージョンの SpriteStudio 及び Player で再現

スプライトシート(SSCE) で出力されるアニメーションデータには、参照セル、X/Y座標、非表示キーしか含まれません。
このため、ほとんど全てのバージョン SpriteStudio および Player プログラムで表示することができます。
SpriteStudio Ver.4~5 向けのプレイヤーも問題なく再生できるはずです。
また特定のゲームエンジン向けの Player が対応していない機能（シェーダー、マスク等）をエンジン上で表現することもできます。

Ver.5~6 で使う場合

.ssce と .ssae ファイルの内容が非常にシンプルであるため、多くの場合、そのままで読み込むことが出来ます。
ただし、ファイルに記録されたバージョン番号が未知の数字であったり、未知のタグが含まれるために警告が出力されます。（再生目的では無害であっても出力されます）
これを回避するには、バージョン指定エクスポート機能を利用して実際に利用するバージョン向けに出力し直すようにしてください。

Ver.4 で使う場合

Ver.4 では「参照セル」等の概念が無いため変換が必要になります。
バージョン指定エクスポート機能を開いて 4.2 (ssax) を選択して出力してください。

2. アニメーション全体にパーツカラー、シェーダー、半透明化(重なり部分が透けない)を適用

パーツカラー、シェーダー、頂点変形などはパーツ単位でのみ指定が可能なものです。
不透明度は子孫パーツに継承することでまとめて半透明にすることが出来ますが、関節部分などパーツが重なり合った場所には透けてしまう問題があります。

例）パーツが重なった領域は背後のパーツが透けてしまう

これに対してスプライトシート(SSCE) ではアニメーション全体がレンダリングによってセルに落とし込まれるため、全体に一律で変化を加えることが出来ます。

例）全体に対して半透明化

同様にアニメーション全体に対してシェーダーを適用することも出来ます。

例）全体に「ステップ」シェーダーを適用

3. Player プログラムの描画負荷を軽減

1つの通常パーツのみを対象にテクスチャの参照位置を移動する参照セルの動作のみになるため、キーフレーム値の補間計算が発生せず、パーツの数が多いほど座標計算などに要する処理がなくなる分、かなり高速に処理することができます。

アニメーションの表示サイズに比してパーツ数が多い、キーの曲線補完が多いような構造の場合、検討の余地があるかもしれません。

スプライトシートに変換される様子

スプライトシートに変換される様子をSpriteStudio公式サンプルのりんごちゃんを例に示します。

元のアニメーションデータ

複数のパーツとキーフレームで動きを設定したボーンアニメーションになっています。

スプライトシートとセルマップ

アニメーションの各フレームの絵を敷き詰めたシート画像ファイルとこれを参照するセルマップが生成されます。

アニメーションファイル

単体のパーツに対して、各フレームに表示すべき絵（セル）を参照する「参照セル」のキーが並べられたコマアニメーションに変化していることがわかります。

基本設定とスプライトシート(SSCE)の出力

スプライトシート(SSCE)出力の準備～出力までの手順を解説していきます。

基準枠の設定を行う
関連ページ

基準枠の設定を行う

出力時の画像の大きさは、基準枠で設定したサイズが基になります。
「レイアウト情報」ウィンドウで基準枠のサイズを指定することができます。

※ 基準枠の設定方法

SpriteStudio 7 ではレイアウト情報ウィンドウは初期状態では表示されておらず、タブによる切り替えで表示されるようになりました。

タブは画面の右下にあり、アトリビュートウィンドウとの切り替えとなります。

レイアウト情報ウィンドウが表示されましたら、基準枠の数値を設定してください。

「レイアウト」ウィンドウに基準枠を表示するにはを選択状態にしてください。
また、マスク機能を使用している場合は「マスクを有効化」を選択してください。

基準枠を表示すると、基準枠のサイズ外は黒く表示されます。
基準枠からパーツがはみ出てしまうことを防ぐために、基準枠は表示した状態で作成を進めることをおすすめします。

また、マスクの有効化をONにしていないと、マスクパーツがマスクされないまま出力されてしまいます。マスク機能を使用している場合は必ずONにしてください。

スプライトシート(SSCE)で出力を行う

アニメーションの作成が終わったら、レンダリング機能を使ってスプライトシート(SSCE)形式に出力します。

1.「アニメーション」メニューの「レンダリング」を選択します。
2.「レンダリング」ウィンドウを開きます。
3.「出力形式」で「スプライトシート(SSCE)」を選択します。
4.出力時の画像サイズを設定します。ピクセルで指定するか、比率を指定してください。なお、基準枠を512×512に設定して作成したアニメーションを、256×256に指定して出力した場合、50％に縮小された状態で出力されます。
5.出力形式を”スプライトシート(SSCE)”に設定した場合、出力オプションに設定項目が表示されます。必要に応じてオプションを変更してください。	幅の上限／高さの上限シート画像１枚当たりの最大サイズをピクセル単位で指定します。敷き詰める画像群がここで指定したサイズに収まらない場合、2枚目、3枚目…と追加のシート画像を生成していきます。正方形に補正するシート画像が正方形になるよう調整します。例えばシート画像を正方形が要件となっている圧縮テクスチャ(PVRTC等)に変換して利用するようなケースでチェックを入れます。同一のセルを除去する(低速) 全く動きが無くピクセル単位で同一となるフレームがあった場合、これらのフレームの絵を１つにまとめてシートに配置します。これにより画像ファイルの圧縮につながります。注意：同一判定の計算で処理負荷が上がるため、特にレンダリングの出力サイズ、総フレーム数が大きくなるほどレンダリングに時間がかかります。
6.「出力」ボタンをクリックすると出力を開始します。
7.出力が完了すると「出力先フォルダ」で指定したフォルダが表示されます。シートの画像ファイル(.png)、セルマップ(.ssce)、アニメーション(.ssae) が作成されます。

以上でスプライトシート(SSCE)形式の出力は完了です。

スプライトシートをプロジェクトに取り込む

出力したデータ郡は各種 SSPlayer for ~ プログラムで利用したり、既存プロジェクトに追加して利用することもできます。

基準フォルダに注意

既存プロジェクトに追加する際に、プロジェクト設定で「基準フォルダ」が設定されている場合は、 .png .ssce .ssae ファイルそれぞれを、設定されたフォルダに分配するようにしてください。
特に設定されていない場合は、.sspj ファイルと同じ場所に配置すれば問題ありません。

ssae ファイルのドロップのみで追加する

環境設定で「参照しているセルマップを自動的にプロジェクトへ追加する」(下記参照)にチェックを入れておくと、.ssae ファイルをドロップするだけで済みます。

以上です。

ご質問、ご要望はお問い合わせページからお気軽にお寄せください。