こんにちはHabr！
比較的最近、キックスターターで、イグロデロフのための新しいツールのためのお金の収集が完了しましたが、これはHabréでカバーされていませんでした。 Spineは、骨格2Dアニメーションを作成するためのプログラムです。 このツールは、インディーデベロッパーや初心者のゲームデザイナーだけでなく、経験豊富なマーケットプレイヤーにとっても興味深いものになります。 使いやすさと魅力的なデザインは、画面に魔法をかけるような印象を与えます。
興味のある方はカットをお願いします（たくさんの写真）。
公式サイトに詳細な説明ビデオが既にあるのに、なぜこのチュートリアルを書いたのですか？ 基本的に、ロシア語圏の聴衆を犠牲にして脊椎コミュニティを増やすために、コミュニティが大きくなればなるほど、プロジェクトはより動的に開発され、問題はより速く解決されます。 そしてもちろん、アニメーションを作成してゲームコードに統合する際に、いくつかのトリックとトリックを共有したいと思います。
1.仕事の準備
試用版をダウンロードしてインストールします。 ここでは、プロジェクトのエクスポートを除くすべての機能を使用できますが、印象を与えるにはこれで十分です。
もちろん、ここでは既製のアセンブリの例を繰り返すのではなく、魂のために独自のフランケンシュタインを彫ります。
お気に入りのグラフィックエディタを開き、後で歩く、ジャンプする、その他のジェスチャーを実行するものを描画します。 背景が透明なPNGファイル形式。 私は悪いという言葉からのアーティストですが、それは私が1つの素敵な、魅力的な生き物を描くことを止めませんでした。
ここで、タスクはより複雑になります。 私たちの写真を、互いに相対的に移動する身体の部分の別々の画像に分割する必要があります。 ここで考慮すべき主なことは、画像がどのように重なり、それに応じて丸いエッジと滑らかなぼやけた色のスライスを作成するかです。
したがって、私たちは体の部分の絵が置かれているフォルダーを持っています-私たちのモンスターの肉体と、元の画像。 そして今、楽しみが始まります。
2.組立テーブルの準備
Spineを起動します。 メインメニューで、[新しいプロジェクト]コマンドを実行します。
階層ウィンドウで、[画像]アイテムを選択し、[参照]ボタンを使用して、画像のあるフォルダーを選択します。
ボーンを作成するためのモデルとして、キャラクターの完全な画像を作業領域にドラッグします。 これがテンプレートであることを明確にするために、この画像の透明度を上げることができます。
4.スケルトンを組み立てる
骨は、アニメーションで写真を転送する主な手段です。 ボーンには明確な階層があり、その頭は常にルートボーンです。 階層の意味は、シニアボーンを移動すると、それに応じて若いボーンもすべて移動するということです。
ルートボーンを選択してください
そして、新しいボーンツールを作成します
ルートの後に、骨盤の骨（骨盤）を古い骨として選択し、画像内の目的の場所をクリックするだけで骨盤を作成します。 この骨の周りで、他の全員が回転します。 カーソルをドラッグして（ドラッグアンドドロップ）、古いボーンの端から目的のサイズまで他のボーンを作成します。 骨が身体の部分のサイズの長さに一致することが望ましいが、重要ではない。
ボーンの階層は次のとおりです。
5.骨に肉を縫う—モンスターはもうすぐ準備ができています
ここで、各ボーンを身体の部分の画像に関連付ける必要があります。 画像ファイルを選択し、「親を設定」ボタンをクリックします。
カーソルが新しい形になり、この画像がアタッチされるボーンをクリックできます。 パターンに従って正しい位置を達成するために、画像とボーンを回転、平行移動、スケーリングできます。
そして、すべては次のようになります。
骨と肉ができあがったので、フランケンシュタインは生き返る準備ができています。 おそらく、親の骨を回すと子供の骨が回転することに気づいたでしょう。これをアニメーションに適用するときです。
6.活性化— IT'S ALIVE
スイッチを押す
そしてアニメーションモードに入ります 
。
すべての自尊心フランケンシュタインは歩くことができなければなりません。 階層ウィンドウで[アニメーション]の行を選択し、[新しいアニメーション]ボタンをクリックして、walkというアニメーションを作成します。
今、創造的な実験の時間です。 あなたも私もプロのアニメーターではありません（彼らはこの記事を必要とせず、十分なモンスターを持っています）が、アニメーションの4つのキーフレームを作成する必要があります。 クトゥルフ、拷問グーグルを呼び出します-意識を拡大するためのあらゆる手段が良いです。
骨を回して移動し、移動を開始する最初の位置に体を設定します。 すべてのボーンを選択し、回転、移動、スケーリングのボタンの横にある黄色のキーをクリックして、変更をコミットします。
ゼロ時間の最初のキーフレームがドープシートウィンドウに表示されます。 白、緑、青、赤の棒が変化を示しています。 それらをすべて選択するには、ウォークラインの一番上の白い棒をクリックする必要があります。
最初のフレーム全体を選択したら、それをコピーして、このフレームを貼り付けるタイムラインの新しい場所（たとえば8）にポインターを移動します。 これで、ゼロと8番目の分割に2つの同一のフレームができました。 次に、体が動いたかのように8番目の分割でフレームを変更し、変更を修正する必要があります。
新しい変更を加えたので、Spineは画像を最初のフレームから2番目のフレームにスムーズに移動します。 これらの動きは、タイムラインの灰色の水平線で示されます。
これらの2つのフレームをコピーして、それぞれ20分割と28分割に貼り付けます。 今、あなたはちょうど右と左の手足を交換する必要があります。 右脚があった場所、左脚があった場所、左腕があった場所、右腕がなった場所、およびその逆。
40分割で、最初のフレームをコピーして、アニメーションループを作成します。
再生ボタンをクリックして（スイッチを引く）、モンスターが生き返ります。 これはまだディズニーではありませんが、すでに機械物語のレベルに近づいています。 再生プロパティでは、再生の速度と方法を設定できます。
これでアニメーションの準備が整いました。必要な形式にエクスポートするだけです。
エクスポートには、データ、画像、ビデオの3つのタイプがあります。 最初のタイプには、jsonとbinが含まれます。 このフォームでは、Spineアニメーションを操作するための特別なAPIであるSpineランタイムを使用して、アニメーションがゲームプロジェクトに転送されます 。
ハードコアタイムラプスやgifアニメーションのファンの場合、プロジェクトを一連のフレーム（jpeg、png）としてエクスポートするか、すべてをgif形式で記録できます。 アニメーションをビデオaviまたはQuickTimeとして表示することもできます。 しかし、悲しいかな、これらすべての機能は完全な有料版（$ 60）でのみです。
6.モンスターを制御します
誰にも注意を払わずに馬鹿になった場合、私たちのモンスターは何がいいでしょう。 それでは、アニメーションをゲームプロジェクトに統合します。 ここでは、新しい記事でコード例を示し、何がどこから来たのかを伝える必要があります。 誰か興味があれば書きます。
プログラムでは、アニメーション、ボーン、画像のあらゆる側面を制御できます。
Spineランタイムには、アニメーションのミキシングなどの便利な機能がたくさんあります。 あるアニメーションが突然別のアニメーションを開始しないようにした後、特定の方法でミックスし、互いにスムーズに移行します。
物理的なボディを各ボーンにアタッチして、ボーンとともに移動し、ゲームワールドとやり取りすることができます。 私自身は、この魔法の道具の可能性をすべて知っているわけではありませんが、知りたいと思っています。
Spineランタイムの美しく理解しやすいソースコードに言及せざるを得ません。必要に応じて少し変更することができます。
立証されないように、私は人間の裁判所に私の小さな動物を提示します：（. jarおよび.exe ）。 コマンドラインからより良く実行し、矢印で遊んでください。