Spineで目パチを行う

スポンサーリンク

まばたきの表現(目パチ)をやってみたいと思います。
画像を入れ替えてパチパチさせるパターンと、スケーリングで直接画像を変形させるパターンを試してみました。

画像の入れ替えで目をパチパチさせるパターン
目パチ画像切り替え

スケーリングで目を開閉させるパターン
目パチスケーリング

画像の入れ替えで目をパチパチさせるパターン

目の画像
開けた目と閉じた目の画像を別個に用意します。

女の子レイヤー分け
ウインク 私服 若い 女性 指差し上半身イラスト - No: 1213292/無料イラストなら「イラストAC」
illustratorでレイヤー分けされた状態です。
「開けた目」と「閉じた目」を同じポジションに置いているので重なって見えます。
画像の出し分けはSpine側で行いますのでこれでOKです。

データインポート
Spineにデータインポート時、目の各画像はアタッチメントとして一つ一つ個別スロットに入ってます。

レイヤー整理
それをこのように「左目スロット」と「右目スロット」に整理します。
各スロットは、「開けた目画像」か「閉じた目画像」のどちらかが表示される仕様です。

スロット名変更
スロット名を変更する時は「アタッチメント名を変更」のチェックを外します。
チェックがついたままだと、画像のパスごと外れてしまいます。

タイムラインカーソル
次にアニメ化モードに変更して動きをつけていきます。
まず、ドープシートのタイムライン0フレーム目にカーソルがあるのを確認します。

ツリーのHierarchy
ツリーのHierarchyよりeye_lスロットの横の緑の鍵マークを押して、赤に変更します。
これで、0フレーム目にキーが打ち込まれました。
明示的に、左目のeyeopen_lアタッチメントを表示させeyeclose_lアタッチメントを非表示にさせる、という実行(だと思います)

タイムラインカーソル
タイムラインカーソルを15フレーム目に移動させます。

オレンジ鍵
Hierarchyよりeyeclose_lアタッチメントの目のマークを押すと、画像アタッチメントの表示が切り替わり、eye_lスロットの鍵がオレンジに変わり内容が変更されたことが分かります。
オレンジ鍵を押すと赤鍵に変わります。

タイムライン
これでタイムラインの15フレーム目にキーを打ち込めました。
表示が「開いた目」から「閉じた目」に変更されます。

アタッチメントの表示・非表示
タイムラインの20フレーム目を選択して、Hierarchyより今度はeyeopen_lアタッチメントの目のマークを押して、表示を「閉じた目」から「開いた目」に変更します。
先ほどと同じようにオレンジ鍵を赤鍵に変更してキーを打ち込みます。
15~20フレームまでが、まばたきの目が閉じている時間帯です。
Spineでは30フレームが1秒(30fps)なので、まばたき時間は0.166秒ぐらいになるでしょうか。

タイムライン
20フレーム目をコピーして40フレーム目にペーストします(20~40フレームを閉じた目の状態にする)
同じ作業を右目にも行います。

目パチ画像切り替え
完成です。

ドープシート
ドープシートの再生ボタンを押すと、タイムラインが流れます。

スケーリングで画像を変形させるパターン

続いては、画像の変形で開閉を表現してみます。

ボーン
新しく女の子のスケルトンを用意します。
左目と右目用にそれぞれボーンを作り、それの子としてスロットと目の画像アタッチメントを配置しています。

初期値
アニメ化モードに移動します。
Hierarchyからeyeopen_lボーンを選択して、タイムラインの0フレーム目にトランスレートとスケールの緑鍵をクリックしてキーを打ちます。
デフォルト状態を記録しておきます。

スケーリング
タイムラインカーソルを15フレーム目に移動させます。
目の画像を、タテにひしゃげたようなスケーリングを行なって、閉じた風っぽく見せます。
ポジションはトランスレートで調整します。

タイムライン
0フレーム目をコピーして、14フレーム目、18フレーム目、40フレーム目にそれぞれコピーします。
15フレーム目以外は、全部デフォルト状態ですので、つまりフレーム間の変化アニメーション(トゥイーン)の長さを調整しているだけです。

目パチスケーリング
完成です。


下記は、YouTubeにある目パチ説明動画です。
中国語?のようですが、とても勉強になりました。

Spine教學 - 眨眨眼 │Spine Tutorial - Blink Blink Eyes
今回は目のイラストがシンプルでしたので画像変更やスケーリングで直接変更しましたが、細かいイラストの場合だとこのようにメッシュから変更する方がいいんだと思いました。


[参考サイト]
簡単なアニメーションを作ってみる

[環境]
Win10
Spine 3.8.76 Professional