【初心者向けチュートリアル】はじめてのアニメーション、作ってみよう！

画像（PNGなど）

基本的な動作が設定されたアイコンがズラッと並んでいますが、今回は基本的な物だけ使用します。今回は赤矢印の箇所をONにしてください。

実際にアニメーションをエディットするメイン画面です。

※ マウスのホイールボタンをクリックしながらドラッグすると表示位置の変更（スペースを押しながらマウスドラッグでも同様の操作ができます）、マウスホイールで表示のサイズの変更が可能です。

画像を④のパーツとして切り出しをするウィンドウです。初期状態はレイアウトウインドウのタブになっています。

表示されている物は、.ssceファイルに登録された画像ファイルです。

アニメーションのサイズや基準となる位置を設定するウィンドウです。初期状態はアトリビュートウインドウのタブになっています。

はじめに「プロジェクデータを格納するssae(アニメーションファイル)を新規作成します。

「プロジェクトウィンドウ」の「アニメーション」を右クリックし、コンテキストメニューから「新規作成」を選択します。

1からアニメーションを作成する場合は必ず必要となりますので覚えておいてください。

※ファイルを新規作成する時や削除するときなどに、”警告、この操作は取り消しができません。またこれまでに～”と警告のウィンドウが表示されますが、ファイル追加の場合は気にせず”はい”を選択して問題ありません。ファイルを削除する場合の警告は、作成したファイルが完全に削除されますので、慎重に操作を行ってください。

フォルダとファイルを選ぶためのウィンドウが開きますので、ファイルに名前をつけOKを押します。

（今回は名称はNewAnimation.ssaeとしています）

するとアニメーションファイルである.ssaeが作成されます。

作成した.ssaeファイルは、「プロジェクト」ウィンドウの「アニメーション」の中に、表示されます。

１つのプロジェクトファイル内に複数のアニメーションファイル（.ssae）をもたせることが可能です。

はじめに③のプロジェクトウィンドウで今回作成したファイル(作例はNewAnimation.ssae)の「anime_1」を選択してください。

※”Setup”はボーンとメッシュを使ったアニメーションを作成する際に必要となりますが、今回はこちらは使用しません。

今回は右のように設定してみてください。

基準枠のサイズは作成するアニメーション全体の大きさです。

基準点はゲームなどで使用使用する際、この中心にプログラムで背景の高さを値を足すことでキャラクタの立ち位置が変化させることができるようになります。

キャラクタが何を見るかにより変化します。例えば天井に張り付いたキャラなどは中心は上になります。また空中を飛び回るキャラなどは中心に設定したほうがぐるぐる回ることができますので便利になります。

今回は地面に立つことになりますので基準点は地面に作るように下に設定します。

基準枠や基準点を入力すると⑤のレイアウトウィンドウの見え方が変化します。

基準枠の設定はゲームなどで使用使用する際、この中心にプログラムで背景の高さを値を足すことでキャラクタの立ち位置が変化させることができるようになります。
ゲームなどで使わない場合は厳密でなくてもいいですが、キャラクタを動かす目印になりますので設定をしておいたほうが良いでしょう。

またレンダリング（画像の出力）をする際、この枠が切り出されるのでキャラクタの動きを想定したサイズにしておくと良いですが、枠サイズはあとからキャラクタの動きを見ながら調整もできます。

※ マウスのホイールボタンをクリックしながらドラッグすると表示位置の変更、マウスホイールで表示のサイズの変更が可能です。

④のセルリストウィンドウにパーツが沢山登録されています。
この中から”body”というパーツを見つけ出し、④のセルリストウィンドウから⑤のレイアウトウィンドウにドラッグアンドドロップします

また、⑥のフレームコントロールウィンドウにも同じパーツが登録され、リストになっていきます

⑤のレイアウトウィンドウにパーツが配置されたら、”２”で設定した地面の位置を見ながらこのあと足が入ることを考えて、おおまかに位置調整しましょう。（後で調整可能ですのでおおまかで構いません）
なお、一番はじめに”body”を配置しましたが、人体の動きの基準は基本腰のあたりになります。体が動いたら、腕、足、頭などが一緒についてくるようにするためです。

※リスト上でマウスのホイールを回転すると、リストがスクロールします。

“body”が配置し終わったら、④のセルリストウィンドウから”skirt”を探し、⑤のレイアウトウィンドウへドラッグアンドドロップしスカートとして”body”に重ねます。

次に④のセルリストウィンドウから右足と左足として”leg”を２つの⑤のレイアウトウィンドウへドラッグアンドドロップします。

⑤のレイアウトウィンドウに配置されたら”skirt”に足の根本がつながり先が横の緑の点線に接触する感じに配置します。（この時点で体の位置を調整しても問題ありません)

※パーツを選択際は⑥のフレームコントロールウィンドウリストのパーツを選択すると⑤のレイアウトウィンドウに表示されたパーツに枠がフォーカスされます。

逆に⑤のレイアウトウィンドウのパーツを選択すると⑥のフレームコントロールウィンドウのリストのパーツも同時に選択という感じに連動しています。

また④のセルリストウィンドウのパーツも⑤のレイアウトウィンドウや⑥のフレームコントロールウィンドウで選択されたパーツにフォーカスされます。

続けて”arm”と”head”と”tail”を配置します。

見た目が変になると思いますが、ひとまず全てのパーツをならべてください。

⑤のレイアウトウィンドウでパーツをクリックし選択すると、⑦のアトリビュートウィンドウの選択したパーツに対する項目がアクティブになります。

優先度は体を0とした時、手前にしたいものは＋、奥にしたいものは－の値にしていきます。

頭は首の手前にしたいので＋１、その手前に手が回り込むようにしたいので左の手は＋２、左の足は体の奥にしたいので－１、奥の腕はそのまた奥にしたいので－２…というように数値を設定していきます。
今回のキャラクタはこのような形で設定を行います。

この時点で再度パーツの位置関係を調整しても問題ありません。

リスト左のように階層状になれば成功です。

これで”body”と”head”は親子関係が成立しました。

左のようになった場合は、パーツのリストの位置だけ移動しています。（リストの左側にドラッグしたり、パーツとパーツの合間に入れていると思われます）再度”body”にドラックアンドドロップしてください。

同様に、手やしっぽ、頭も設定します。顔のパーツは頭の子供になるようにします。
“body”＞”head”＞”tail”のパーツ　という２段階の親子関係になります。

通常足は腰のパーツがあれば腰の子として足をつなぎますが、今回はスカートで隠れた部分のパーツは存在しませんので、体の子にしています。

スカートは足とは繋げず体の子にしています。（スカートに足をつけてしまうと、スカートを動かした際一緒に足が動いてしまう為です）

最終的に右の画像の状態になるように親子関係を設定してください。

また、この時点でパーツやキャラクタの表示位置を調整をしても問題ありません。

※初期ポーズを保持したいのでこの時点でファイルを保存しましょう。また、手戻りが発生しそうなタイミングでは、保存するクセを付けるのが望ましいでしょう。

ファイルの保存は①の「メニュー」＞「ファイル」＞「プロジェクトの保存」で行います。（プロジェクトの保存を行うことでプロジェクトで管理されているファイルで内容に変化ががあったものは一括で保存されます）

⑤のレイアウトウィンドウでパーツを選択すると右画像のようなハンドルが表示されます。この赤丸をドラッグすると赤丸から伸びる青線の先を軸として関節を曲げることが出来ます。

パーツの親子関係のつながりや優先度の前後関係をチェックしながら、パーツを回転させたり移動させたりしていろいろポーズをつけてみてください。

もし手を回転したら足にめり込んだ…などがあったら優先度の値を見直してください。

⑥のフレームコントロールウィンドウのメモリ部のスライダを０に合わせてください。

⑤のレイアウトウィンドウで手足を上げ、踏み出したようなポーズを作成してください。

この時右足を前に出した時は右手は後ろ、左足を後ろに下げた場合は左手は前と逆の方向に動かすことになります。
※動きの基本は実際に自分で動いてみて確認するとよいでしょう。

※⑥のフレームコントロールウィンドウに並んだ青い丸中身は⑦のアトリビュートウィンドウに並んだ項目の情報となり、パーツの座標や回転角度、不透明度など、様々な情報が設定されます。

”４”の工程で設定した優先度も設定されています。

リストの先頭の”キー”の欄にある丸印は、情報の有り無しを表します。

灰色の丸は未設定となり、情報が存在するものは青丸で点灯します。

なおパーツ配置時に最低限必要な情報は自動的に設定されています。

※フレームコントロールの枠の操作について

EXCELの列選択と同様の操作で、上から下まで一律で設定しますよという状態です。（同様にCTRLを押しながら、クリックすると表の離れた箇所を個別に選択することが可能です）

39フレーム目の”root”、もしく”body”にマウスを合わせ、マウス右クリックで貼り付け”上書き”（もしくはCTRL+V）をします。

すると、0フレーム目のものが39フレーム目に丸ごと移植されます。

※２”root”は基本動かしませんので、0フレーム目に情報があれば0フレーム以外にコピーしなくても問題ありません。

次に中割りを行います。
タイムスライダを19フレーム目にスライドさせます。

※注意：タイムスライダが赤い場合は、そのスライダの時間以外のパーツが選択されている状態です。移動した時間のパーツの設定を行いたい場合は、パーツの選択をし直してください。スライダが黄色になればOKです。

手と足を逆の位置に回転させてください。
腕が前に出ている場合は後ろに、足が後ろにある場合は前になります。左右とも動かします。

動かすとフレームコントロールウィンドウの19フレームの手足にキーが記録されます。

これでアニメーションのための情報が登録されました。

※マウスで移動すると横にも動いてしまいがちです。

縦だけ動かしたいなと思った時は、アトリビュートのY座標の数字をクリックし、表示された三角形をマウスでクリックすると数値を変更できます。
またダイレクトに数字を入力することも可能です。

Y座標の文字の上をマウスで左右にドラッグすることでも数値入力が可能です。

接地できたら0フレーム目の”body”のパーツを1クリックし、”Body”のキーのみを選択し、マウス右クリックのコンテキストメニューのコピー”全て”(もしくはCTRL+C)でコピーします。

ですので、一番めり込んでいる10フレーム目あたりの”body”のキーを選択しY座標をめり込まないように上に上げてください。

３０フレーム目も同様にめり込まないように移動します。

その他の動いてない頭や髪の毛を動かすことによって不自然さがどんどんなくなっていくと思いますので、色々試してみてください。

※左は”head”、”tail”、”skirt”にZ回転を加えました。

１：まず初めに新たな絵を追加します。Windowsのエクスプローラ、Macのファインダーを開き、画像を選択、SpriteStudioへドラッグアンドドロップすることで新たに絵を追加することが出来ます。

２：ファイルをドロップすると、ウィンドウが開き「コピー先のフォルダとファイル名を指定してください」と表示されますので、現在存在するプロジェクトに追加する場合は、プロジェクトファイルのあるフォルダを指定し、名前をつけて保存ボタンを押します。これで画像が登録されました。

３：続けて「セルマップの新規作成」を促されますので、画像と同様に名前をつけて保存します。

※新規に追加したパーツは、新たな.ssceファイルに記録されています。

今まで作成していたキャラクタのデータを加工する際はプロジェクトウィンドウのセルマップの項目で聞いりかえが可能です。

（レイアウトウィンドウや、フレームコントロールウィンドウのパーツを選択した際は自動的に切り替わります）

４：次に追加した画像をセルリストに並べるセルパーツにします。

レイアウトウィンドウと重なっている（見当たらない場合はメニュー＞ウィンドウ＞セルマップを選択）”セルマップ”を開きます。

５：⑤のレイアウトウィンドウに取り込んだ画像が表示されますので、パーツを左上から右下に囲うように左クリックしながらマウスをドラッグします。

６：マウスで囲んだ枠をダブルクリックします。するとセルリストに新しいパーツが登録されます。
　※新規のプロジェクトファイルでなく、既存のファイルに画像を追加した場合は、既に登録されている画像と.ssceファイルとは別のファイルとして登録されます。

追加した画像はプロジェクトウィンドウのセルマップのリストに登録されますので、既に登録した絵を選択したい場合はそちらを切り替えてください。

　※既存の画像自体に絵を付け足すことも可能です。その場合は絵を追加し保存したあとに、プロジェクトウィンドウのセルマップのファイル名を右クリックしコンテキストメニューを表示し、”参照イメージのリロード”を選択し、２～４の工程を行うことで既存のセルマップにパーツを追加することが出来ます。

７：回転軸の設定をします。セルリストのパーツをクリックするとセル編集ウインドウが新たに開きます。黄色い十字線がありますので、これを移動することで回転軸の設定ができます。
（サンプルのパーツは回転軸は設定済みでしたが、自分で絵の登録をする場合は回転軸の設定は必須になりますのでご注意ください）

今回は手で持つ場所に移動します。

ウィンドウを閉じると原点設定が確定します。

ウィンドウを一旦閉じたあとに、再度原点設定を行いたい場合は、④のセルリストのパーツをダブルクリックすると再度セル編集ウィンドウを開くことが出来ます。

※サンプルのパーツは原点は設定済みでしたが、自分で絵の登録をする場合は追加の都度原点の設定は必須になりますのでご注意ください。

８：回転軸が設定できたら、今までと同様にレイアウトに追加しアニメーションを作成していきます。

学んだことを元にパーツを追加していきます。

ハンマーを手に保たせる場合は、親子関係で手の子にし、手のひらのあたりに設置します。(右はarm_rの子にしています)

前後関係がおかしい場合は優先度を見直します。

キャラクタにハンマーを持たせることが出来ました。