このページではSpriteStudioでの基本的なアニメーションデータの作成の流れをご紹介します。
各ウィンドウの解説
SpriteStudioはさまざまなウィンドウの組み合わせで構成されています。
各ウィンドウの詳細については以下のページをご覧ください。
プロジェクトの新規作成
「sspj(プロジェクトファイル)」は、アニメーションデータやssce(セルマップファイル)・セルリスト・編集情報など、すべての情報をまとめて記録しているファイルです。
OPTPiX SpriteStudioで作業する上で、基準となるファイルになります。
新規プロジェクト(sspj(プロジェクトファイル))を作成する
「ファイル」メニューから「新規プロジェクト」を選択する
メインメニューの「新規プロジェクト」を選択するか、
を押下することで、sspj(プロジェクトファイル)を作成することができます。
保存するフォルダとファイル名を指定する
フォルダとファイル名を指定するウィンドウが開きます。
フォルダとファイル名を指定して「保存」をクリックしてください。
ここで指定したフォルダは、この後、新規で作成されるすべてのファイルが格納されるための基準フォルダになります。
また、ここで指定したファイル名は、ウィンドウ上部のタイトルバーに、エディット中のプロジェクト名として表示されます。
新規プロジェクトの作成が終了すると、プロジェクトウィンドウの「カテゴリ」タブ内に「アニメーション」
「セルマップ」
「参照イメージ」
「エフェクト」
の区分ができます。
それぞれ頭にフォルダのアイコンマークがついています。
これで、アニメーションを作成するためのsspj(プロジェクトファイル)ができあがりました。
このsspjに「ssce(セルマップファイル)」「セル」「ssae(アニメーションファイル)」「ssee（エフェクトファイル）」を追加していくことで、アニメーションを作成・編集することができます。
プロジェクトの設定で「互換性」の設定をする
sspjを作成したら、アニメーションの作成を始める前に、「互換性」について確認をしましょう。
「互換性」は、メインメニューの「ファイル」から「プロジェクトの設定」を選択し、「プロジェクトの設定」ウィンドウを開き、「互換性」を選ぶことで設定できます。
詳しくは「プロジェクト設定」のページをご覧ください。
素材を作成する
SpriteStudioでアニメーションを作成するには素材となる画像データ(テクスチャ)が必要です。
画像編集ソフトを利用して、素材の作成を行います。
テクスチャは基本、２の累乗、２のべき乗のピクセルサイズで作成します。
このサイズでない画像でも編集は可能ですが、ゲームエンジンの仕様によっては受け付けない場合があります。
SpriteStudioでは、パーツが分かれていなくても、アトリビュートを利用することで簡単なアニメーションを作成することができます。
ですが、関節や装飾などを分けることで、複雑なアニメーションを作成することが可能です。
| レイアウト後 | 使用テクスチャ（512×512） |
 |
 |
関連ページ
- イラストをパーツ毎に分割する
セルマップを作成する際のパーツ分割について、実例を交えて解説しています。
セルマップ・セルを新規作成・追加する
「セルマップ」は、SpriteStudio上でアニメーション作成時に使用する「テクスチャ」と、「セル」の切り出し情報を持ったデータです。拡張子は「.ssce」です。
本ヘルプセンター上では主に「ssce」と表記します。
このssceからアニメーションの部品を切り出したものを「セル」と言います。
「セル」を「パーツ」としてレイアウトウィンドウに配置、編集することで、アニメーションを組み立てていきます。
ssce(セルマップファイル)を新規作成する
ssceをsspjに追加する
ssceは画像ファイルを読み込むことで作成します。
下記のいずれかの方法でssceをsspjに新規作成・追加を行います。
| メインメニューから「プロジェクト」-「新規ファイルの追加」-「セルマップ」を選択 |  |
| プロジェクトウィンドウのセルマップのコンテキストメニュー「新規作成」を選択 |  |
|
メインメニューから「プロジェクト」-「インポート」を選択 インポートと新規ファイルの追加の違いについては以下のページをご覧ください。 |
 |
ssceの「参照イメージ」を選択する
「参照イメージ」とは、ssceが参照する「テクスチャ画像」を指します。
ssceを新規作成すると、参照イメージを選択するためのダイアログが表示されますので、使用するテクスチャを選択してください。
読み込める画像データは bmp ／ gif ／ jpg ／ psd ／ png ／ pvr ／ tga ／ tif です。
新しいssceがプロジェクトウィンドウに追加されます。
複数のssceを使用する場合、このssceの新規作成の操作を繰り返して追加を行ってください。
追加作業は、アニメーションを作成している途中でも行うことができます。
セルを新規作成・追加する
ssceを登録したら、セルマップウィンドウ上で矩形で範囲選択し、アニメーションの部品となる「セル」を登録します。
「セル」はアニメーションに配置する「パーツ」の元となるデータです。「セル」を登録すると「セルリスト」に表示されます。
「セルリスト」は「セルマップ」ごとに管理されています。
目的の「セル」の元となる「セルマップ」を選択するとセルリストウィンドウの表示も切り替わります。
セルマップからセルを登録する
プロジェクトウィンドウから、「セル」を作成したいssceを選択します。
セルマップウィンドウに選択したssceに紐づいている「参照イメージ」が表示されます。
セルマップウィンドウ上で、「セル」として指定したい矩形範囲を選択します。
矩形範囲の指定が終わったら、その矩形範囲内をダブルクリックすると、新しい「セル」として「セルリスト」内に登録されます。
この作業を繰り返して、必要な「セル」をすべて作成してください。
セルリストウィンドウのコンテキストメニューから名称変更やタグの設定を行うことができます。
また、セルリストウィンドウ内の「セル」をダブルクリックすることで、そのセルをアニメーションで回転・拡大・縮小させる際の原点位置を決定することができます。
セル編集ウィンドウの解説はこちらをご覧下さい。
1つのセルマップから複数のセルを作成する際、この作業を繰り返します。
セルの追加作業はアニメーションの作成途中でも都度行うことができます。
下記のツールを利用することで作業を短縮することが可能です。
- PSDtoSS 6
PSDからSpriteStudio用のデータ一式を生成するツールです。
無料でご利用いただけます。- TexturePackerToSS
TexturePackerからssceとテクスチャ画像を作成することができるツールです。
既にTexturePackerを使用している方にお勧めです。
パーツを配置する
「ssae(アニメーションファイル)」に「セル」をレイアウトウィンドウに「パーツ」として配置します。
SpriteStudioでは、このパーツを動かしてアニメーションを作成します。
「ssae(アニメーションファイル)」は、アニメーションに関する情報（アニメーションデータ・セットアップデータ）を格納しているファイルです。
ファイルの拡張子は「.ssae」となります。本ヘルプセンターでは主に「ssae」と記述します。
ssae(アニメーションファイル)を作成する
まず、データを格納するssae(アニメーションファイル)を新規作成します。
下記のいずれかのメニューを選択します。
| メインメニューから「プロジェクト」-「新規ファイルの追加」-「アニメーション」を選択 |  |
| または、「プロジェクト」ウィンドウのアニメーションを右クリックし、コンテキストメニューから「新規作成」を選択 |  |
フォルダとファイルを選ぶためのウィンドウが開きますので、ファイル名を指定してください。
ここで指定したファイル名は、「プロジェクト」ウィンドウの「アニメーション」の中に、表示される名前になります。
セットアップデータとアニメーションデータの違い
Ver.6では「セットアップデータ」が追加されました。
ssaeの中に「Setup」という名称で、必ず一つ存在します。名前の変更は行うことはできません。
「セットアップデータ」はアニメーションデータのベースとなる情報を有するデータです。
セットアップデータで構築したパーツ構造を元に、「アニメーションデータ」が作成されます。
「アニメーションデータ」は、実際にアニメーションを作成するデータです。
ssae内に複数作成することが可能で、セットアップデータを基に作成されます。
SpriteStudioのメッシュ・ボーン機能を使用する際は、セットアップデータの設定から行う必要があります。メッシュ・ボーン機能を使用したアニメーションを作成する手順につきましては、以下のページをご覧ください。
レイアウト情報ウィンドウでレイアウトウィンドウの設定を行う
レイアウト情報ウィンドウで、「基準枠」のサイズと基準点を設定します。
基準枠のサイズは作成するアニメーション全体の大きさです。
基準点は基準枠の座標（0,0）となります。
レイアウトウィンドウでセットアップデータにパーツを配置する
セルリストウィンドウから、アニメーションに使用する「セル」を選択して、レイアウトウィンドウにドラッグ＆ドロップして配置します。
レイアウトウィンドウに配置した「セル」のことを「パーツ」と呼びます。
|
プロジェクトウィンドウで「setup」を選択します。 |
 |
| セットアップデータを選択すると、レイアウトウィンドウの背景が赤くなり、「Setup」と表示されます。 |  |
| レイアウトウィンドウにセルリストからセルをドラッグドロップします。 |  |
| 「パーツ」が配置されました。 この作業を繰り返し、すべてのパーツを配置します。 |
 |
親子関係を構築する
レイアウトウィンドウ上にパーツをすべて配置したら、フレームコントロールウィンドウ上で、必要に応じてパーツの「親子関係」を設定します。
「親子関係」とはパーツ同士の階層関係を表します。
他のパーツを内包しているパーツを「親パーツ」、親パーツに属するパーツを「子パーツ」と言い表すことから「親子関係」と呼びます。
子パーツは親パーツの編集に同期しますが、親パーツは子パーツの編集に影響されません。
例えば、上図だと「UpperBody」という親パーツに「PenguinFoot」というパーツが子パーツとして属する形で親子関係が設定されています。
「UpperBody」を編集すると、「PenguinFoot」がその編集に同期します。
フレームコントロールウィンドウで、属したいパーツの上に、パーツをドラッグ＆ドロップすることで親子関係を作成できます。
親子関係を変更したい場合、フレームコントロールウィンドウ内で、子パーツを移動させたい階層にドラッグします。
パーツとパーツの間の境界線が青色にハイライトされ、その階層に配置されます。
セットアップデータでのパーツのレイアウト、構成が完了したら、アニメーションデータで配置したアニメーションを作成していきます。
セルの原点について
セルには「原点」が設定されています。
「原点」はパーツの位置情報・拡大縮小・回転などの基準になる点です。
セル作成時、原点はパーツ中央に設定されます。
原点の位置はセル編集ウィンドウで設定することができます。
アニメーションデータを設定する
セットアップデータを構築したら、次はアニメーションデータを編集し、実際にアニメーションを作成していきます。
プロジェクトウィンドウで
マークが付いているデータが「アニメーションデータ」です。選択することでアニメーションデータを編集することができます。
まずはフレームコントロールウィンドウの下部にあるツールバーで、アニメーションの設定や再生制御を行えます。
今回は以下２項目の確認・設定を行います。
- 総フレーム数：アニメーションの全体の長さ
- 単位時間：1秒あたりの更新フレーム数(fps)
ファイルを保存する
ファイルの保存方法は大きく分けて2種類存在しています。
「ssae」「ssce」だけを保存する方法
選んだssaeまたはssceだけを保存する方法です。
| 保存したいssaeかssceを選択して 「ファイル」メニューの「選択ファイルのみ保存」 |
 |
| メインメニューの保存アイコンを押下 |  |
| ショートカットキーを利用 | + |
「sspj全体」を保存する方法
sspjに属しているファイルすべてを保存します。
| 「ファイル」メニューの「プロジェクトを保存」または「すべて保存」 |  |
| メインメニューのすべて保存アイコンを押下 |  |
| ショートカットキーを利用 | ++ |
データを保存し、SpriteStudioのアニメーション作成の基本的な流れは完了です。
アニメーションの基礎を作成したら……
アニメーションを編集する
今回作成したアニメーションを実際に動かすための、さまざまな編集方法について解説しています。
アニメーションを出力する
作成したアニメーションの出力方法について解説しています。