アニメーションを編集する

「アニメーションを作成」でSpriteStudioの各種ファイルを作成し、アニメーション作成の準備を行いました。
このページではSpriteStudioでのアニメーションの編集方法と、さまざまな表現について、少し踏み込んで解説を行います。

キーとアトリビュートについて

OPTPiX SpriteStudioは、「キー」と「アトリビュート」を編集することでアニメーションを作成します。「キー」とはアトリビュート(指定フレームでのパーツの状態を表す情報)が設定されているフレームに作成されます。
このキーをパーツごとに設定し、アニメーションを作成します。
フレームコントロールウィンドウ上の、タイムライン領域に表示されているWindow_FrameControl_keyonが、キーを表します。

フレームコントロールウィンドウアトリビュートウィンドウのページも併せてご覧ください。

アトリビュートを整理する

初期設定では、アトリビュートウィンドウの「一般」にたくさんのアトリビュートが表示されます。
「ファイル」メニューの「プロジェクトの設定」-「互換性」の「カスタム」で、必要なアトリビュートだけを表示するようにすることが可能です。
詳しくは、Tipsアトリビュートの表示について をご覧ください。

「プロジェクトの設定」-「その他」で、キーを設定したときに有効にするアトリビュートを選択できますが、ここでチェックしたアトリビュートを非表示にしてしまうと、値を変更できなくなってしまいますのでご注意ください。

補間アニメーション

SpriteStudioではフレームに「キー」を設定し、キーが設定されている間のフレームについては指定された計算式で求めることでアニメーションを実現することができます。
このアニメーション方式を「補間アニメーション」といいます。

補間アニメーションを活用してループアニメを作成する

レイアウトウィンドウとフレームコントロールウィンドウを操作し、簡単にループするアニメを作成することが可能です。
この項目では「歩くときに腕を振る」アニメーションを作成します。

パーツをレイアウトウィンドウに配置し、親子関係とアトリビュートの「優先度」を設定した状態です。
まだ、1フレーム目にしかキーが設定されていません。

ここからキーを追加し、アトリビュートを編集することでアニメーションを作成します。

フレームコントロールウィンドウの5フレーム目を選択し、「肩」パーツの箇所にキーを設置しました。

キーはフレームコントロールウィンドウのコンテキストメニューで「キーを追加」するか、レイアウトウィンドウでパーツを編集するか、フレームコントロール上でダブルクリックすることで設置することができます。

今回は「肩」パーツのアトリビュート「Z軸回転」を編集し、角度をつけました。

フレームコントロールウィンドウの10フレーム目に、1フレーム目のキーを複製しました。
キーの複製は、複製したいキーのコンテキストメニューで「コピー」を選択し、キーをペーストしたいフレームのコンテキストメニューで「貼り付け(上書き)」を選択します。

これで「腕を振る」ループアニメが完成です。

なお、「貼り付け」には「上書き」の他に「挿入」があります。
挿入を選択した場合、フレームを追加してキーを挿入します。

アトリビュートの「優先度」を設定しない場合、フレームコントロールの階層で、下にあるパーツほど手前に表示されます。
親子関係の設定を行った際や、各パーツ毎に明確な表示順位が存在する場合は、必ず「優先度」を設定してください。
特に、Unityなどのゲームエンジンに出力した場合、パーツの並びが「OPTPiX SpriteStudio」での表示と一致しない場合がございます。
「優先度」は必ず設定してください。

カーブエディタで補間方法を編集する

カーブエディタを利用することでアニメーションに変化を付けることができます。
アトリビュートウィンドウのWindow_Attribute_icon04_ver5.6.1を押下することで「カーブエディタ」を表示します。

初期設定での補間方法は「線形」となっており、等速で補間するアニメーションとなります。
カーブエディタ・補間方法の詳細については以下のページをご覧ください。

参照セルを設定する

アトリビュート「参照セル」を使用することで、パーツが参照しているセルを変更し、コマアニメの方式でアニメーションを作成することができます。

パーツの参照セルを活用してまばたきアニメを作成する

参照セルを活用することで、まばたき(目パチ)アニメーションなどを作成することが可能です。
目の変化パターンを1つだけ使い、簡単なコマアニメを作成します。

パーツをレイアウトウィンドウに配置した状態です。

瞳のパーツの中間フレームを選択し、「参照セル」を設定します。
アトリビュートウィンドウで参照セルの「設定」を選択します。

coma_04

「参照セル選択」ダイアログが表示されますので、そこから変更したいセルを選択します。

今回は簡単なまばたきのアニメを作成するので、目を閉じる→開く→閉じる となるように、目を開くセルを選択します。

同じように、最終フレームにも目を閉じる参照セルを設定します。
これでまばたきのループアニメが完成です。

選択範囲

フレームを範囲選択し、一括で編集を行う機能です。
パーツやフレームが増えて、1フレームずつ調整するのが大変な時に、「範囲選択」が役に立ちます。
Window_FrameControl_label03_ver5.6.1

フレームコントロールウィンドウの「ルーラー部」の、範囲選択を行いたいフレームの開始・終了地点で+クリックを行うと、その範囲が黄色にハイライトします。
この状態でパーツを編集すると、選択範囲内のフレームが一括で操作され、アニメーションに反映されます。

また、範囲選択している状態で再生を行うと、その範囲内だけを再生するため、長尺のアニメの一部だけを確認したい際に便利です。

範囲選択を解除したい際は、ルーラー部のコンテキストメニューから「再生区間情報のクリア」を選択してください。

インスタンスパーツ

インスタンスパーツは「アニメーションを参照する」特殊なパーツです。
1つの背景上で再生タイミングの違う複数のキャラクターが別々に動作するようなアニメーションを作成するのに非常に便利な機能となっています。

本ページではインスタンスパーツの基本的な導入方法について記載しています。
インスタンスパーツに関しての詳細は下記ページをご覧ください。

インスタンスパーツを利用してアニメーションを作成する

インスタンスパーツの元となるアニメーションデータを作成する

インスタンスパーツはアニメーションデータを参照するパーツです。
そのため、組み込むためのアニメーションデータを作成する必要があります。
アニメーションデータを作る手順は通常のssae(アニメーションファイル)を作成する手順と同じです。

今回はボールが回転するアニメーションとキャラクターが歩くアニメーションをインスタンスパーツとして呼び出します。

ssae(アニメーションファイル)を新規で追加します。
ここで追加したアニメーションデータがインスタンスパーツの「ソースアニメーション」となります。

アニメーションを作成します。
最終フレームにZ回転を360で設定することで、1回転するアニメーションができあがります。

インスタンスパーツを組み込む

作成したアニメーションデータをインスタンスパーツとして組み込みます。
上記で作成したボールが回転するループアニメを配置します。

インスタンスパーツを組み込みたいssae(アニメーションファイル)を選択し、セルリストのWindow_celllist_icon03_ver5.6.1をクリックして「アニメリスト」に切り替えます。
アニメリストに上記で作成したアニメーションデータが表示されます。

セルを配置するのと同様に、「アニメリスト」からドラッグして配置を行います。
右図ではフレームコントロールウィンドウにドラッグしていますが、レイアウトウィンドウ上にドラッグすることでも配置可能です。

これでインスタンスパーツの組み込みは完了です。
ボールが回転するアニメが、インスタンスパーツとして組み込まれました。

インスタンスパーツは特殊なパーツではありますが、通常のパーツと同様に編集することが可能です。
さまざまなアトリビュートを設定することで、1種類のインスタンスパーツから様々な表現を作成することができます。

エフェクト

パーティクルエフェクトのような、パーツにランダムな要素の動きを加えたアニメーションは、「エフェクトエディタ」を利用することで作成することができます。

SpriteStudio上ではssae(アニメーションファイル)とは異なる「ssee(エフェクトファイル)」というファイルとして扱います。
インスタンスパーツと同様に、作成したsseeも「エフェクトパーツ」としてアニメーションデータに組み込むことが可能です。

エフェクト機能の関連ページ

マスク

SpriteStudio Ver.6では、マスク機能が追加されました。
「マスクパーツ」を使用することで、アニメーションに対してマスクを行うことができます。

マスク機能の関連ページ

メッシュ・ボーン

SpriteStudio Ver.6では、メッシュ・ボーンを使用したアニメーションを作成することができます。布や髪の毛がたなびく様子など、やわらかな動きを実現することが可能です。

メッシュ・ボーン機能の関連ページ

アニメーションを編集したら…

アニメーションを出力する
作成したアニメーションの出力方法について解説しています。