MENU

カテゴリー

プロフィール

すいみん

技術的なことが好きなデザイナーです。
月間22万pvの当ブログ『CGメソッド』運営
詳細はこちら

おすすめのVRヘッドセット

【Spine】ちびキャラ作成!イラスト作成からSpineへのインポートまで

eyecatch-sd-character-creation-illustration-import-to-spine

すいみん
こちらのCGメソッドの記事ではちびキャラ作成!

イラストレーターでの作画

イラストレーターを用いて解像度に依存しないベクトルデータでイラストを作成します。

イラストレーターでのちびキャラの作画

お好みのバランスで、ひたすらパスを引くだけです。
土曜に午前中にぱぱっと作成してます。

ポイント1「関節部分は円を意識して作る」


回転して動いた時に、関節部分を円にしておくときれいに曲がります。

ポイント2「関節部分の線はクリッピングマスクで消す」

すべてのパーツに線を加えてみたのですが、関節部分の線は邪魔なのでマスクで消してます。


ポイント3「パーツ分割」

動かしそうなところはバラバラにしてます。また目口眉は1つにまとめてます。

他に気がついたことがあれば追記します!



イラストレーターでのPSD書き出し

イラストレーターからSpineへの書き出しもできるのですが、
ピクセル変換して解像度や色味など微調整したいので、
Photoshopへ移行する為にPSDデータに変換します。

STEP.1
レイヤーの整理
・非表示のレイヤーは格納されないので、必要なパーツは表示をONに。
・背景レイヤーを作成しておくとそのサイズのカンバスサイズになります。

STEP.2
書き出し設定
・ファイル>書き出し>書き出し形式
・レイヤーを保持にチェック(※カラーモードはCMYKにする必要)

OKボタンを押すとPSDが書き出されます。
STEP.3
Photoshopで開く
・PSDを開いて確認しましょう。

セットアップ方法に応じて、「腕」や「足」のパーツの状態を変化させる

関節の曲げ方によって書き出す画像を分けるかまたは統合します。

骨を入れるだけでそのまま関節を曲げる場合

関節ごとにパーツを分けておきましょう。

➔腕や足は「手」「二の腕」「上腕」の3パーツに分ける

画像をメッシュ化してウェイト調整にて腕を曲げる場合

腕の素材は、一枚絵に統合しておきましょう。

➔腕や足は「手」「二の腕」「上腕」の3パーツに分けず、一枚に統合する



PhotoshopからSpineへの書き出し

Photoshopでデータを整えて、Spineへの書き出しします。

STEP.1
データの整理

  • カラーモードをRGBに変更(※CMYKだとPNG保存できない)
  • カンバスのサイズを1024×1024pxに変更
  • ルーラーの位置(0,0 )を足元に変更 ※原点のアタリのガイドは必ず残しておきましょう!
  • レイヤー名の階層順と名前の確認(日本語NG)
  • bgは背景レイヤーに変換(レイヤー>新規>レイヤーから背景へ)
※レイヤー名の左右は「L」「R」ではなく、手前を「Outer」、奥側は「Inner」としています。
STEP.2
書き出しスクリプトの起動
Photoshopの上部メニューから
ファイル>スクリプト>PhotoshopToSpine

STEP.3
書き出しスクリプトの設定と書き出し

  • 背景レイヤーを無視するにチェック
  • 余白をトリミングするにチェック
  • 倍率指定を50%に(512x512pxにする)
OKボタンを押して書き出します。

注意
同名のレイヤーがあると書き出し時、警告&error.txtに出力されます。
すいみん
「PhotoshopToSpine」の詳細はこちらに書きました
eyecatch-spine-photoshop-to-spine 【Spine】書き出しスクリプト「PhotoshopToSpine」の詳細解説と日本語化について
STEP.4
Spineにインポートして確認
Spineを起動して、Spineアイコン>データインポートから出力したJSONを選択して読み込みます。

以上です。


ちびキャラ作成!イラスト作成からSpineへのインポートまでまとめ

ということで、ちびキャラ作成はじめました!不備があれば随時リライトしていきます。
意外とちびキャラ(SDキャラ)を自主制作する人は少ないので、ブルーオーシャンかもしれません。

すいみん
下記、本気にのイラストに骨を入れてセットアップする方法を記事にしました!
eyecatch-spine-bone-insert-setup 【Spine】ちびキャラ作成!骨入れからセットアップ(リギング)まで

以上、すいみん(@cg_method)でした!

すいみん
専門誌の定期購読をするなら月額980円の「Kindle Unlimited」がおすすめです!


eyecatch-amazon-kindle-unlimited
【Kindle Unlimited】CG・DTP・Webデザイナーにおすすめの読み放題サービス[圧倒的コスパ!]