和める絵を描きたいです
 

 

 


ここまで来てやっとアニメーションを作り始めます(・ω・`)
まずフレームコントロールパネルの機能説明から
bandicam 2017-05-28 14-37-24-798
現在選択中のパーツ(セル)が青く光ります
クリックする事で選択パーツを変更することが出来ます
また、一番左の目のマークをクリックするとそのパーツを非表示にすることが出来ます
また、前回説明した親子関係もここで設定変更が可能です

縦に黄色い線が通っていますが
これが現在選択中のフレームを表しています
フレームとは表示される画像1回分のコマを意味します
例えば30フレームとは最初から紙芝居のようにコマを変化させていき
30枚目のコマという事になります(正確には0フレームから始まるので+1コマ)
この画像では開始から11フレーム後を選択しています
因みに今回は④の単位時間が1/30に設定されている為1フレームは
1/30秒になっています
また、このフレームという単位はウディタなどのゲームツールでは
少し違う意味でも使われています
例を出すとウディタでは一秒を1/60で区切ってプログラムを書きます
そして任意で処理を行う最小単位である1/60秒を
1フレームとしています
何かしらの処理を行う→(待ち時間)→次の処理
という処理の場合の真ん中の待ち時間を〇〇フレーム時間を置く(ウェイト)
と表現します。
つまり30フレームウェイトとすると30/60秒で0.5秒語後に次の処理を行う
という事になります。
総フレーム数はそのアニメーション
今回は45フレームに設定されています
つまり45フレーム描写し終えるとまた0フレーム目に戻ります
今回は④の単位時間が1/30に設定されている為1フレームは
1/30秒になっています
単位時間とは1秒をいくつに区切るかを示しています
(この説明で合ってる・・・?)
今回は1/30に設定されています
つまり1フレームの表示時間は1/30秒となります
よく次世代ゲームの画像処理で言われる60fpsとか30fpsとか
言われている分野ですね
後々ウディタなどでこのアニメーションを表示させるためには
この設定を覚えておく必要があります



さて、まず現在選択中の左足の動きを設定してみましょう
今回のアニメーションは45フレーム、
歩いているように見せるため
左足は前に出す→もとに位置に戻す→後ろに下げる→元に戻す
というループにします
単純計算で11フレーム毎に位置を変えればいいので
①を左足のパーツに、②を11フレームの位置に設定します
bandicam 2017-05-28 12-09-05-655 
11フレームの位置にある状態でその上にある
レイアウトパネルのパーツを動かします
赤い〇をクリックしたまま下へ動かすと回転させることが出来ます
回転する時の中心となる支点はセルリストで編集できます

bandicam 2017-05-28 12-10-24-500 
左足を前に出すことが出来ました
bandicam 2017-05-28 12-10-35-291 
するとどうでしょうフレームコントロールの
左足のパーツ欄、11フレーム目に点が現れました
因みにこの点をクリックしたまま他のフレームの所に移動すれば
設定フレームの位置を変えることが出来ます(便利)
bandicam 2017-05-28 12-11-53-429 
次に上げた足を元の位置に戻します
ニュートラルな足の位置は初期位置なので
初期位置の①を右クリック、コピーを選択
設定先となる22フレーム目を右クリックし
貼り付けします
この際、(上書き)は文字通りそのフレームに上書きされますが
(挿入)は選択フレームと次のフレームの間にフレームを付け足す処理なので総フレーム処理が1フレーム増えます
「あれ?いつの間にかフレーム数増えてね?」
って時は大体このボタンの押し間違いなので注意しましょう
bandicam 2017-05-28 12-13-12-573 
どんどん行きます
次は左足を後ろに引かなければならないので
33フレーム目を選択します
bandicam 2017-05-28 12-14-12-139 
その状態でレイアウトパネルの左足の部分の赤丸を
クリックしパーツを回転させ足を引きます
bandicam 2017-05-28 12-14-55-910 
最後、このアニメーションをループさせるため
最終フレームである45フレーム目(0フレームから始まる為44ですが)
に0フレーム目の初期位置をコピーペーストして完成です
さて、うまくいったかどうか右下の▶(再生)ボタンを押して
確認してみましょう
体、頭IK別個版_anime_0 
凄まじくシュールですがちゃんと動きました
お尻の部分の線が削れていますが
これはそのパーツをしっかり書き込まなかった結果です
こうならない為にも余裕をもって見えないところも書き込みましょう

bandicam 2017-05-28 12-17-41-313 
さて、左足が出来たので
同じく右足も同様の設定をしていきます
体、頭IK別個版_anime_0-1 
メタクソシュールな上
全く持って歩いているようには見えませんが
両足を動かす事が出来ました
歩いているように見えないのは肩の位置が上下していないためです
通常、歌舞伎役者でもない限り
歩けば体全体が上下します
bandicam 2017-05-28 12-19-05-819 
因みにパーツの変形は回転だけではないです
パーツを選択した際の四角の四辺の真ん中と四隅
にある小さな点をクリックしたまま動かすと
そのパーツの比率や大きさを変更できます
試しに上の小さな□をクリックし上に動かすと
bandicam 2017-05-28 12-19-26-405 
伸びました
クリックしたまま対面する点の方向へ動かせば
画像を反転させることが出来ます
体、頭IK別個版_anime_1 
ヘリコプターかな?
この反転を応用するとペーパーマリオみたいな感じで
振り返る画像も作ることが出来ます






さて、今までのテクニックをすべて駆使するだけでも
それなりのアニメーションを作ることが出来ますが
これにさらに二つ、設定を上乗せします


まずは参照セル
bandicam 2017-05-28 12-29-34-515 
今回は試しに瞬きを作ってみましょう
フレームコントロールパネルで瞬きするパーツを選択
(今回は顔全体を違うパーツに差し替えるので輪郭)
変化させるフレームを選択した状態(今回は10フレーム)で
アトリビュートパネルの参照セルをクリックします
bandicam 2017-05-28 12-30-03-845 
こんなミニウィンドウが出てきました
これはセルリストパネルと同じ物になります
①青く選択されている部分が現在表示されているパーツです

瞬き用にあらかじめ半分目を閉じたパーツ、
完全に目が閉じたパーツを登録しておいたので
②の目が半分閉じているパーツをクリックします
bandicam 2017-05-28 12-30-14-694 
10フレーム目に点が出現し画像が差し変わりました
bandicam 2017-05-28 12-30-29-614 
さらに2フレーム先を選択し(①)
先ほどと同様に参照セルをクリック(②)
完全に目を閉じたパーツを選択します(③)
bandicam 2017-05-28 12-31-01-997 
参照セルで画像を差し替えると
そのあとのフレームすべてで差し替えたパーツが表示され続けるため
また、目を開かせるため14フレームで10フレーム目の
半目の画像をコピーペースト、16フレーム目で
0フレームの初期画像をコピーペーストします
体、頭IK別個版_anime_2 
するとどうでしょう、ちゃんと瞬きしているようになりました
この参照セルは
瞬き以外にもしゃべるときの口の動きや
指先の手の動きなどにも応用できます





次はカーブエディタです
bandicam 2017-05-28 12-33-56-512 
物は試しなので今回は分かりやすく23フレーム目で振り上げ
また元に戻す動きを作ってみます
体、頭IK別個版_anime_1-1 
こんな感じになりました
bandicam 2017-05-28 12-35-27-872 
さて、パーツを選択した状態でアトリビュートパネルの
①Z軸回転の右側をクリック
そうするとカーブエディタのミニウィンドウが出てきました
なんかよくわからん青線が山型に引っ張ってありますが
縦軸は角度、横軸はフレーム(時間)のグラフになってます
今回このパーツは23フレーム目までに60度回転させ
最終フレーム(44フレーム目)までに戻の位置に戻る設定にしたので
頂点となる点は一個となります

では②0フレーム目の点をクリックし
③試しに「加速」に設定してみましょう
因みに補間方法の左右はその点から見て左右どちらの線か
って意味になります
今回選んだ①の点は左側に線がないため設定できません
山の頂点の点では左右の設定が可能です
bandicam 2017-05-28 12-36-01-138 
すると直線だった線が曲線になったことがわかります
これは文字通り最初はゆっくりで
段々動きが早くなっていくことを意味します
体、頭IK別個版_anime_1-2 
アニメーションで見るとどうでしょう
確かに動きに変化が出ました
bandicam 2017-05-28 12-36-41-005 
次は減速です、これは加速とは逆で段々動きが遅くなります
体、頭IK別個版_anime_1-3 
アニメーションにするとこんな感じ
確かに遅くなってますね
bandicam 2017-05-28 12-37-54-198 
では山の頂点をクリックし左右の動きを変えてみましょう
このように選択した点の左右に線がある場合は
両方の設定が出来ます
向かって左側緑色のゾーンは減速に
右側の赤いゾーンは加速に設定してみました
体、頭IK別個版_anime_1-4 
ちょっと動きに表情が出来ましたね
このような動きは主に慣性などに使われます
勿論動きにメリハリを付けたいときなどにも用いられます
ですがこの動きを最初に設定するのはオススメしません
慣れないうちはごちゃつきます

また、今回はパーツを回転させる動きをさせたので
Z軸回転のカーブエディタを使用しましたが
パーツの大きさを変えたりした場合は
アトリビュートパネルのX,Yスケールの右側のボタン
パーツを移動させた場合はX、Y座標の右側のボタンで
それぞれのカーブエディタウィンドウを開くことができ、
個別に動きのスピード曲線を設定できます


またカーブエディタの線形には加速減速のほかに
エルミートとベジェがあります
一応説明しますが

エルミートはキー間を三次曲線で補間します。
三次曲線は「S字」のような変化をする曲線です。
カーブエディタ上のキーをアンカーポイントとし、ハンドルを操作して、キーとキーの間のカーブを調整することができます。(公式説明)

ベジェはキーの間を「ベジェ曲線」と呼ばれる曲線で補間します。
カーブエディタ上のキーをアンカーポイントとし、ハンドルを操作して、任意のベジェ曲線を作成することができます。(公式説明)


なんのこっちゃ
まぁ簡単に言うと先ほどの点と点の間をただの曲線でなく
S字にしたりして動きを複雑にするのがエルミート
設定位置を元に任意の曲線を色々自由に設定できるのがベジェ(多分)
ぶっちゃけベジェに限ってはボクも意味がよくわかりません
この二つ、使いこなせればいろいろできるのは
分かるんですが
使わなければいけない場面が想像できないため
最初の内は無視でいいと思います
加速減速線形が使えれば大抵のものは何とかなります
というか殆どの人は気が付きません



さて、初めてSpriteStudioを触った人にとっては
上記のパーツの変形、移動、回転、参照セルによるパーツの差し替え
そしてそれらの動きにメリハリをつけるカーブエディタ
これらを使いこなせれば大抵のものは出来ます
歩きGIF 
因みに完成した歩きモーション
上記のテクニック以外は何も使ってません
体、頭IK別個版_anime_1 
ペラペラしゃべらせたり
体、頭IK一体版_anime_5 
こんなモーションも作れます

勿論ほかにも色々な機能がありますし
もっと便利な機能やショートカットも沢山ありますが
とりあえず自分で色々作れるようになってから
試してみる事をオススメします

次は制作したアニメーションをレンダリングする方法です
スポンサーサイト
 

 

 

Comment

 

Secret?


 

 

 

 

*Template By-MoMo.ka* Copyright © 2017 Regret party 001, all rights reserved.

05 ≪│2017/06│≫ 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

あなぐま

Author:あなぐま
とりあえず大学院生
(´・ω・`)
趣味で絵描いてます
あと明日使えない情報など
載せてる絵は全部ペンタブ絵です
(プリンタ皆無)

とりあえず頑張ります!

未分類 (9)
自己紹介 (2)
オリキャラ紹介 (3)
日記 (149)
絵 (31)
下書き (97)
東方系 (60)
東方系(下書き) (63)
ポケモン系 (6)
ポケモン系(下書き) (7)
ボーカロイド (8)
ボーカロイド(下書き) (31)
ニコニコ動画 (18)
その他の絵 (9)
バトン (3)
ギャラリー (4)
時間かかる絵 (2)
マンガ作り途中 (11)
オリジナル (13)
SAIの参考 (12)
いただきもの (2)
ゲーム制作参考 (1)

このブログをリンクに追加する

Bear Cat
A Starting Point
からっぽの額
-2レベオフィシャルブログ『-2レベのカオス』
◇我輩はゆゆ。である◆
自宅潜伏
空と宙-ソラトソラ-
騎士団出撃司令部
draw world
ちゃらんぽ

この人とブロともになる

QRコード