【Ver.5】アニメーションを編集する

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

本ページではVersion 5.8以前について解説しています。
Version 6についてはこちらをご覧ください。

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

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

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

「OPTPiX SpriteStudio」の初期設定では、アトリビュートウィンドウの「一般」にたくさんのアトリビュートが表示されます。

「ファイル」メニューの「プロジェクトの設定」-「互換性」を選択し、目的とするプラットフォームを選択するか、もしくは「カスタム」を選択して、必要なアトリビュートだけを表示するようにすることが可能です。

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

補間アニメーション

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

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

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

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

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

keyflameanime_01

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

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

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

keyflameanime_02

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

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

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

keyflameanime_03

アトリビュートの「優先度」を設定しない場合、フレームコントロールの階層で、下にあるパーツほど手前に表示されます。

親子関係の設定を行った際や、各パーツ毎に明確な表示順位が存在する場合は、必ず「優先度」を設定してください。

特に、Unityなどのゲームエンジンに出力した場合、パーツの並びが「OPTPiX SpriteStudio」での表示と一致しない場合がございます。
「優先度」は必ず設定してください。

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

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

初期設定での補間方法は「線形」となっており、等速で補間するアニメーションとなります。
カーブエディタの詳細については下記動画と併せてこちらのページもご覧下さい。

参照セルを設定する

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

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

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

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

coma_01

「右目」「左目」の5フレーム目にキーを置き、アトリビュートの「参照セル」の設定をクリックします。

coma_04

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

今回は簡単なまばたきのアニメを作成するので、目を閉じる図柄のセルを選択します。

coma_02
これで簡単なまばたきのループアニメが完成です。
パターンを増やすことで、動画のような滑らかなまばたきも作成することができます。
coma_03

選択範囲

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

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

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

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

インスタンスパーツ

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

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

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

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

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

今回はハートが拡縮するループアニメをインスタンスパーツとして作成します。

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

instans_01
アニメーションを作成します。
5フレーム目にハートが拡大するように設定し
ハートが拡縮する10フレームのアニメを作成しました。
instans_02

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

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

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

instans_03

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

instans_04
これでインスタンスパーツの組み込みは完了です。
ハートが拡縮するアニメが、インスタンスパーツとして組み込まれました。
instans_05

インスタンスパーツは特殊なパーツではありますが、通常のパーツと同様に編集することが可能です。

さまざまなアトリビュートを設定することで、1種類のインスタンスパーツから様々な表現を作成することができます。

右図では2つ配置したうちの1つのハートに、5フレーム目にZ軸回転で角度をつけて、動きに変化をつけています。

instans_06

エフェクト

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

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

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

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

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

このエントリーは役に立ちましたか?