キー

Spineでは「キー」を設定することでアニメーションを作成します。キーは、トランジションの開始時間と終了時間、および値を定義します。キーとキーの間の時間は、値が補間されます。スケルトンのアニメーションは、このキーで定義されたポーズと、タイムライン上のキーの時間が決め手になります。

アニメーション

キーを設定する前に、アニメ化モードになっていることと、ツリービューで表示ドットを設定するか、アニメーションビューでアニメーションを選択して、アニメーションがアクティブになっていることを確認してください。

新しいアニメーションを作成するには、ツリーのAnimations(アニメーション)ノードを選択し、New...(新規...) Animation(アニメーション)をクリックします。

フォルダ

アニメーションはフォルダにまとめることができます。フォルダを作成するには、アニメーションを選択してNew...(新規...) Folder(フォルダ)をクリックします。アニメーションは、ドラッグしてフォルダー間を移動できます。

エクスポートされたスケルトンデータでは、アニメーション名の前にフォルダ名が付けられ、Spineランタイムで使用される最終的な名前になります。例えば、emotesというフォルダにwaveというアニメーションがあった場合、ランタイムでのアニメーション名はemotes/waveとなります。

タイムライン

アニメ化モードでは、スケルトンのポーズは、現在のタイムラインの位置とアニメーションのキーから得られます。タイムラインは、グラフ、ドープシート、タイムライン、オーディオの各ビューに表示されます。

キーが設定されると、グラフやドープシートビューのタイムラインの下に表示されます。タイムライン上のオレンジ色のダイヤモンドは、そのフレームに1つ以上のキーがあることを示します。オレンジ色の縦線は、最も最後のフレームを持つキーを示しており、アニメーションのデュレーションを決定します。

ビューポートでのパン操作と同様に、マウスの右ボタンでドラッグすると、タイムラインが左右または上下にパンします。

タイムライン上でマウスホイールをスクロールさせると、タイムラインがズームイン／アウトします。ドープシートの左下にあるズームスライダーは、現在のズームレベルを示しており、ドラッグすることができます。スライダーの右側にある全てのキーにズームボタンを押すと、タイムラインのズームが調整され、すべてのキーが表示されます。

タイムラインポジション

タイムラインポジションは、シアン色の縦線で表示されます。タイムラインポジションは、左クリックやドラッグで設定できます。タイムライン上でのドラッグは「スクラブ」と呼ばれ、スケルトンのポーズが時間とともにどのように変化するかをすばやく確認することができます。shiftキーを押しながら操作すると、フレームスナップが無効になります(後述のフレームを参照)。

リピートが有効で、タイムラインが最後のフレームを越えてスクラブされた場合、ポジションは最初のフレームにループバックしますが、これはスクラブが最後のフレームの前から始まっている場合に限ります。これにより、ループするアニメーションにスクラブを使用することができます。この動作を望まない場合は、最後のフレームの後からスクラブを開始するか、リピートを無効にしてください。

フレーム

タイムラインは、「フレーム」と呼ばれる時間の単位に分けられています。フレームを利用することで、時間内の個別の位置を選択したり、複数のキーを同時に設定したりすることが容易になります。デフォルトでは、タイムラインは1秒間に30フレームを使用していますが、再生ビューで変更することができます。

フレームは便宜上存在するだけです。再生時には、タイムラインの位置がフレーム間で移動します(補間が無効の場合を除く)。再生は、タイムラインが示すフレームレートよりも高い、または低いフレームレートで行うことができます。

フレームスナップ

タイムラインをクリックしたりスクラブしたりするときに shiftを押したままにすると、フレームスナップが無効になり、フレームの間にタイムラインポジションを設定することができます。これにより、アニメーションを再生したときのようにスムーズに補間することができ、必要に応じてフレーム間にキーを設定することができます。

フラクショナルフレームは、非常に短いトランジションにも使用できます。例えば、ボーンのトランスレートキーをフレーム15に設定した後、フレーム15.01に別のキーを設定することができます。

リピート

無効の場合、再生はアニメーションの終わりまで続きます。

有効にすると、再生は、キーを持つ最後のフレームに達した時点で、フレーム0に巻き戻ります。複数のスケルトンがアクティブなアニメーションを持っている場合は、すべてのスケルトンのうち最後のキーを持つフレームが基準になります。

リピートはアニメーションごとに保存されますが、JSONやバイナリデータにはエクスポートされません。

キーの設定

自動キーを有効にしていない場合、アニメ化モードでスケルトンに変更を加えても、その変更は自動的にキーとしてアニメーションに記録されません。タイムラインポジションが変更されると、キーになっていない変更は失われます。変更内容を維持するためには、変更された各プロパティのキーボタンをクリックして、キーを設定する必要があります。代わりに、Key Editedのホットキーを使えば、キーボードのK を押すことで、変更されたすべてのプロパティをキーにすることができます。

プロパティのキーボタンの色は、現在のフレームにキーがない場合は緑に、まだキーが設定されていない変更がある場合はオレンジに、そのプロパティの現在のフレームにキーがある場合は赤くなります。

自動キー

メインツールバーのAuto Key(自動キー)を有効にすると、変更があったときに自動的にキーが設定されます。これはとても便利なので、自動キーを常に有効にしておくのが一般的です。ただし、誤って不要なキーを作成しないように注意する必要があります。

表示内容をキーに記録

グラフおよびドープシートのツールバーにある表示内容をキーに記録ボタンは、グラフに表示されているすべてのカーブ、またはドープシートに表示されているすべての行にキーを設定します。この設定は、ホットキーのctrl+shift+L(Macではcmd+shift+L)でも行えます。

キーが設定されているすべてのプロパティのキーを記録すると、現在のポーズを構成するキーができます。これらのキーを別のフレームに移動して、同じポーズを取ることができるので、非常に便利です。

キーイング可能なプロパティ

以下の章では、Spineでキー操作が可能なすべてのプロパティと、キーボタンの場所をご説明します。

ボーンのトランスフォーム

回転、トランスレート、スケール、シアーの各キーは、メインツールバーの各ツールの数値入力の横にあるキーボタンをクリックして設定できます。

さらに、そのボーンに回転、トランスレート、スケール、シアーでまだキーになっていない変更がある場合、ツリー上のボーンの隣にオレンジ色のキーボタンが表示されます。このボタンをクリックすると、キー設定されていないトランスフォームの変更をキーとして記録します。

回転、スケール、シアーのキーの値は 、Local(ローカル) 軸 を使って保存されます。トランスレートのキー値は Parent(親) 軸を使用して保存されます。

セットアップポーズ

他タイプのキーとは異なり、ボーンのトランスフォームのキー値はセットアップポーズに対して「相対的」に保存されます。そのため、セットアップポーズが変更されると、アニメーションポーズのボーンのトランスフォームも変更されます。

XとYの分離

デフォルトでは、ボーンのトランスレート、スケール、シアーの各キーは、XとYの両方を一緒に設定します。これは多くのアニメーションには十分で、ドープシートやグラフに表示されるタイムラインの数を減らすことができます。また、ランタイムでは適用する必要のあるタイムラインの数が減るため、若干効率が良くなります。

必要に応じて、ツリーのプロパティでボーンのSeparate(別々)チェックボックスをオンにすることで、XとYを別々にキーにすることができます。分離すると、ボーンのXとYは、現在のアニメーションのグラフとドープシートに別々に表示されるようになります。

トランスフォームの継承

ツリーに表示されている継承の隣のキーボタンをクリックすることで、トランスフォームの継承をキーにすることができます。

スロットアタッチメント

スロットにどのアタッチメントを表示するかを設定するには、表示ドットをクリックして、ツリー上で希望するアタッチメントを隠したり表示したりします。スロットのアタッチメントの表示状態をキーにするには、ツリー上のスロットの横にあるキーボタンをクリックします（ここではオレンジ色で表示）:

スロットアタッチメントをキーにして、数フレームごとに異なる画像を表示することで、コマアニメーションを実現できます。使用例については、コマベースのデモやサンプルプロジェクトをご覧ください。

スロットカラー

スロットカラーをキーにするには、ツリーのカラーボタンの隣にあるキーボタンをクリックします。

カラーとアルファの分離

デフォルトでは、スロットの各カラーキーには、カラー（RGB）とアルファ（A）の両方が一緒に設定されます。大半のアニメーションではこれで十分で、ドープシートやグラフに表示されるタイムラインの数も少なくなります。また、ランタイムに適用しなければならないタイムラインの数が減るため、若干効率が良くなります。

必要に応じて、ツリーのプロパティでスロットのSeparate(別々)チェックボックスをオンにすることで、カラーとアルファを別々にキーにすることができます。分離すると、そのスロットのカラー（RGB）とアルファ（A）が、現在のアニメーションのグラフとドープシートに別々に表示されるようになります。

表示順序

ツリー内のDraw Order(表示順序)ノードの隣にあるキーボタンを押すと、現在の表示順序のキーが設定されます。詳しくは表示順序をご覧ください。

イベント

イベントのキーを設定するキーボタンは、ツリー上の各イベントの横にあります。イベントのinteger(整数)、float(浮動小数点)、string(文字列)、volume(ボリューム)、balance(バランス)の各プロパティにキーが設定されます。

キーを設定する前に、イベントのプロパティを変更することができます。これにより、必要なイベントの数を減らすことができます。例えば、particlesイベントを1つだけ作成して、各キーのstring(文字列)にランタイムで表示するパーティクルの名前を入力することができます。

変形キー

メッシュ、パス、境界ボックス、クリッピングアタッチメントの頂点座標に変形キーを設定するには、ツリー上でアタッチメントの隣にあるキーボタンをクリックします。

一般的には、以下のような理由からウェイトを使用することが推奨されており、変形キーの使用は控えめにするのが望ましいです:

• ウェイトを使って変形させるボーンのキー記録は、アニメーションデータをほとんど必要としません。
• 変形キーは、特にウェイトと組み合わせた場合、アニメーションデータのサイズを大幅に増加させてしまいます。各変形キーには、各頂点に影響を与えるすべてのボーンの頂点座標が格納されています(これはアタッチメントが必要とする頂点トランスフォームの数に相当します)。
• 変形キーとウェイトのどちらもリンク済みメッシュに使用できますが、ウェイト用にアニメーションされたボーンは他のアタッチメントにも使用できます。
• アタッチメントのすべての頂点に対してキーが設定されますので、同じアタッチメントの異なる部分を変形させてアニメーションさせることが難しく、変形キーをストレート・アヘッドで設定していく必要があります。
• 頂点はRotate(回転)ツールで回転させることができますが、変形キー間の補間では、あるキーから次のキーまで直線的に頂点を移動させてしまいます。

変形のハイライト

アニメ化モードでは、変形された個々の頂点がピンク色で表示されます。ctrlを押しながら頂点をダブルクリックすると、変形した、または変形していないすべての頂点を選択することができます。

IKコンストレイント

IKコンストレイントにキーを設定するには、ツリー上でIKコンストレイントの隣にあるキーボタンをクリックします。IKコンストレイントのMix(ミックス)、Softness(ソフトネス)、Positive(曲がる方向)、Stretch(ストレッチ)、Compress(圧縮)の各プロパティが一緒にキーになります。

トランスフォーム・コンストレイント

トランスフォーム・コンストレイントにキーを設定するには、ツリー上でトランスフォーム・コンストレイントの隣にあるキーボタンをクリックします。トランスフォーム・コンストレイントの回転、トランスレートX/Y、スケールX/Y、シアーYの各ミックスが一緒にキーになります。

パス・コンストレイント

パス・コンストレイントにキーを設定するには、ツリー上のプロパティでパスコンストレイントのSpacing(間隔)、Position(位置)、Mix(ミックス)の隣にあるキーボタンをクリックします。パス・コンストレイントのミックスにキーを設定すると、回転とトランスレートのミックスが一緒にキー設定されます。

クローズされていないパスの位置をキーにする際、位置を0から100に変更した後、すぐにまた0から100に変更したい場合があります。このような場合には、フラクショナルフレームを使って実現することができます。例えば、フレーム0、30、30.01、60にキーを設定し、位置を0、100、0、100とします。

キーの操作

ドープシートとグラフビューには、キーを操作するためのツールバーボタンが用意されています。

クリップボードボタン

向かって左から順に:

• コピー 選択したキーをクリップボードにコピーします。コピーはctrl+C(Macではcmd+C)を押しても実行できます。
• 切り取り 選択したキーをクリップボードにコピーして削除します。切り取りはctrl+X(Macではcmd+X)でも実行できます。
• 削除 選択したキーを削除します。削除は、キーボードのDeleteキーを押すか、キーをダブルクリックしても行えます。
• 貼り付け 最後にコピーされたキーを、現在のタイムラインの位置に貼り付けます。貼り付けはctrl+V(Macではcmd+V)を押しても実行できます。

ボーンのトランスフォーム、カラー、スロットアタッチメント、変形の各キーは、貼り付け前に選択すれば別のボーン、スロット、アタッチメントに貼り付けることができます。

シフト

Shift(シフト)を有効にしてキーを移動すると、移動したキーの後にあるすべてのキーも移動します。Shift(シフト)はalt(Macではoption)を押しながらキーをドラッグすることでも使用できます。これは、移動するキーよりも後にあるキーのタイミングには影響を与えないようにしながら、キー間のタイミングを調整したい場合に便利です。

オフセット

Offset(オフセット)ボタンは、ループするアニメーションのキーを移動させるためのもので、キーがアニメーションの終了時点を通過すると、そのキーをスタート地点に戻します。これにより、アニメーションを自然に見せるための重要な原則である フォロースルーやオーバーラッピングアクションを簡単に調整することができます。

また、有効にして、キーがアニメーションの終了時点や開始時点を超えて移動すると、キーはアニメーションのデュレーション内に収まるようにラップします。また、アニメーションの最初と最後にキーが設定されて、ループする動きが維持されます。

Offset(オフセット)はctrl+alt(Macではcmd+alt)を押しながら、ドープシートやグラフ上でキーをドラッグすることでも使用できます。

Offset(オフセット)を使用するには、最初と最後のキーが同じでなければなりません。ただ、ループするアニメーションの場合は、ほとんどの場合、すでにそうなっていることが多いでしょう。

Offset(オフセット)を使用すると、アニメーションがループする場所に新しいキーが作成されます。同じキーを再び動かすと、元のキーが記憶され、2つ目の新しいキーを作成することなく、再びオフセットが行われます。しかし、他のキーが選択されると、元のキーは記憶されず、再度Offset(オフセット) を使用すると、2つ目の新しいキーが作成されます。

ループをオフセットに使用される開始フレームと終了フレームを制御するために使用することができますが、そうでない場合はフレーム0とアニメーションの最終フレームが使用されます。

クリーンアップ

アニメーションのツリープロパティにあるClean Up(クリーンアップ)ボタンは、不要なキーをすべて削除します。これは、アニメーションのポーズに影響を与えることなく、安全に削除できるキーです。これで削除されるのは、同じ値を複数回連続してキーにしている場合や、セットアップポーズと同じ値をキーにしている場合など、さまざまなケースが含まれます。

アニメーションをデザインする際にはキーを自由に設定し、その後にClean Up(クリーンアップ)を使用すると便利なことがよくあります。キーの数が少ないと、アニメーションの作業効率が上がり、エクスポートされるアニメーションデータのサイズも小さくなります（特に変形キーを削除した場合）。また、キーの数が少ないと、ランタイムでアニメーションを適用する際のCPU使用率が若干低くなります。

Clean Up(クリーンアップ)は通常、安全に使用できますが、必要なキーを削除してしまう場合もあります。最もよくあるシナリオは、アニメーションがより高いAnimationStateトラックに適用されることを意図している場合です。その場合、下位のトラックのアニメーションをオーバーライドするためのキーが必要になることがあります。他にも、ランタイムでAnimationStateが使用されていない場合や、ランタイムコードがキーを見つけてその値を変更するために使用されている場合など、稀なケースがあるかもしれません。

ハンズオン

この機会に、Spineでキーがどのように機能するか、実際に試してみましょう。まだご自分のスケルトンをセットアップしていない場合は、サンプルプロジェクトを開いて、ツリーのAnimations(アニメーション)ノードをクリックし、New...(新規...) Animation(アニメーション)で新しいアニメーションを作成してください。そしてアニメ化モードで、フレーム0でスケルトンのポーズを作成し、キーを設定してください（例えば、Kを押すか、自動キーを有効にしてください)。次に、フレーム 30 をクリックし、スケルトンのポーズを変えて、キーを設定してください。タイムラインをドラッグしてスクラブするか、再生をクリックしてアニメーションの動きを確認してみてください。

ビデオ

パート1:

パート2:

次: アニメーション制作 前: ツール