ご無沙汰し過ぎております。 穀潰し担当のイカリヤマ(ikareyama)です。グローバル〜(ただのローマ字表記)

スパイスのグローブには鎮痛作用があるそうですよ。 ・・・・・(ググっています)　抗菌効果もあるそうですよ。 合ってました、よかった〜

それでは動かす作業に移りますか・・・ ご無沙汰し過ぎて脊椎(spine)の動かし方がもう吹っ飛んでいます。(致命的)

自分が昔に書いたspineの社内ブログが役立ちそうです。 https://befool.co.jp/blog/categories/spine/ に行ってきます。

・・・・役に・・立たない・・だと・・・ 冗談です。少しは役にたちました。

画像の準備

今回の犠牲者は、ブラウザ三国志モバイル(B3M)からサラってきた、迷子の小虎さん。 上から　攻撃38000　防御26400　知力29000　の・・・差がない(ズンドゥ)

この画像をフォトショ(Photoshop)を使ってパーツごとに分解します。

spineをダウンロード時についてきたスクリプト、EXpoet for spineを使い 一気にレイヤーごとの画像(png)とその位置データ(json)を書き出します。 (書き出す際、レイヤーを一つのフォルダに入れて、フォルダ名に.spineを付けないと書き出されないみたいです)

画像があった方かわかりやすいかな・・・

あ、今はLayersToPNG.jsxになっているんですね ・・・こっちの方が・・・良いぞ、ドラッグアンドドロップで使える。 もしかして前のも使えたっけかな・・・

あ、あ、後から「ここ修正したい」となっても書き出された画像をいじって 修正できるので大丈夫だ、問題ない。(不安)

画像の縦横比が変わるとその分ズレるので、バラしていない画像があると便利かもです。

・・・ここら辺昔のブログに書いてるかもしれないけどあやほやだったので一様 spineのボーン入れとかは確かブログに書いていたはず・・・たぶん ここからどんどんはぶきますね。　もうすでに長いから・・・ね

Spineの準備

こんな感じに準備したか分かるように画像を・・・

ボーンをボォォォオオン！と入れて

画像のメッシュをバァァァアアン！と作りました。(これはひどい)

ここで全貌が明らかに！ https://befool.co.jp/blog/categories/spine/ ただの昔のspineブログです。

もともと動かす前提でないイラストなので ボーンとメッシュをどうしたらいいのか考えないといけないうえ、 きにならない程度に動くかをなんども確認しないといけないのがめんどくさいです。 自分のspine経歴が少ないプラス、間が空いてるせいかもしれないですが。

画像を分けて、書き出して、ボーンを入れて、メッシュを作って、 ここまでの作業でアニメーションを作る準備は完了です。

アニメーション

本当は、バラす時にどのように動かすかを考えていた方が ここを、こう動かしたいから、こういう風にパーツを分けるってことができるから楽です。

自分は決まらなかったのでここでいろいろ動かしてから決めました。

先に決めた方が楽って書いたばかりなのですが、 どう動かすか決めて描かれていないイラストの時は、どこまで動かせるのか試してから考えるのもいいかもしれないです。

その時その時、のらりくらり・・・ 他にもいろんなやり方がありそうです。

迷っていたところにキックとかどうかというお言葉をいただいたので、 キックにすることにしました。

キックなら足で動きが変でも隠せるうえ、 奥行きのある動きが単純にできそうなので良さそうですね。

で、できたのがこれです。

ちょっとした工夫なのですが、工夫なのだろうか？ キック時手前にきた足の色を暗くしています。

色を変えたい画像は動かなくても分けないといけないのです。 色の動きということで動きなのですね。

後、足のボーンを画像ごと複製して残像を残しています。 工夫かな？と思いつくところはこんな所です。

あぁ、あと大変になった所なのですが、

パスのコントロールどうしたら最善なのか； うまくコントロールできなかったです；

そしてこれがシンプルに効く・・・ 髪につけたボーンが多すぎてコントロールが効かない！ 多すぎてうわわわああぁぁぁぁ！・・・・

ボーン過剰　ダメ　ゼッタイ！

・・・あ、重なっていて書かれていない所を書き忘れている・・・OTZ

イラストを書く時点でspineで使うって 決まっていたら重なっている部分も描かれているのですが； みなさん、お気を付けを；

誤字、脱字、構成、いろいろあれですが、 ここまでお付き合いいただき、ありがとうございました。

またよろしけてば次回もよろしくお願いいたします。