読者です 読者をやめる 読者になる 読者になる
WEB拍手ぱちぱちっと
Clap/拍手

01.MENU
Blog  / ブログ
Videos  / 動画
Pictures  / 絵
Game Materials  / 素材
SS(ShortStory)  / 小ネタ

02.MENU
Novels  / 小説
Chat  / チャット
BBS  / 掲示板
Others  / その他
Old Top  / 旧Top

Traffic Jam Products


2Dゲームの絵に動きをつけよう ~Spine入門・bone設定編~

アニメ塗り ゲーム 技術 解説系

ごきげんよう。

ダイエット中につきおやつはトマトとセロリのmです!

チョコが食べたいです。今ならまだチョコパフェでいいです。

 

今、シューティングゲーム2作目、今度はオリジナルを作成中です。

(1作目:http://milk0824.sakura.ne.jp/app/ab/

その際に「Spine」という2Dの絵を動かすソフトを使ってみたので、紹介がてら使い方を書きたいと思います。

 

2Dゲームの絵に動きをつけよう ~Spine入門・bone設定編~

 

昔。2Dのゲーム作りで大変なのが『キャラの動き』でした。

その昔はドット絵(キャラチップなど)を一枚一枚連番で描いて動かしていました。(下のような感じ)

f:id:m_training:20160507153856p:plain

パラパラアニメと同じ原理です。

1枚描くのに意外と時間がとられるのです……!

(上の例だと動きをつけるだけで一コマ1時間かけてます。それでも早いほう!)

ですが!

今でしたら簡単な動きならソフトでパパラパーとつけられてしまうのです!

時代の進歩すごい!

f:id:m_training:20160507154911g:plain

 

Live2DやSpineというソフトがあるのですが、今回は非常に簡単(30分くらい)で動きを作れた「Spine」について動きをつけるまで説明してみます!

 今回は動きをつけるための「モデル」の作成までです。

 

まずはゲームキャラの絵を描きましょう

私は絵描きなのでここから説明しますw

今回はオリジナルゲームということで、こういったキャラを設定。

f:id:m_training:20160507154746j:plain

悪魔っ娘ですw

ファンタジー系だと女の子は着る物が薄着かつティッシュのごとく破れやすいですが、私の今回のコンセプトは破れるもんなら破ってみろです(爆

鉄鋼系少女でいきますw

 

これをお絵かきソフトで2D用イラストに起こします。

絵を描いている様子は全部動画に収めたので下のほうに載せておきます(2分の動画です)

 

絵をお絵かきソフトで書くときの話。

最初からどこを動かすか考えてパーツを分けて描きます。

理由は、後ほどパーツごとの絵で1枚1枚保存するためです。

動画の例でしたら、例えば頭、リボン、二の腕、腕、羽、羽の関節から先……みたいに分けています。

それらを分けて、レイヤーセットで管理するととても楽ちんです。

photoshop, sai, ほかソフトでもレイヤーセット(フォルダみたいなの)あるかと思います)

あと、動いてもいいように、つなぎ目もちょっと大きめに塗っておきます。

動画の例だと、首が見えないのですが、動いてもいいように首も描いてます。

腕の関節部分は切ってしまわないで丸目に下地を塗ってしまっています。

アニメ塗りだとごまかしやすい!(ぉぃ

 

お絵かきソフトで描くときまとめ

  • 最初から動かすパーツを考えておく
  • 線画を描くときからもうパーツを分けて線画を描く。
  • パーツはレイヤーセット(フォルダみたいなの)で管理すると結合が楽
  • 動いてもいいように、関節部分は大きめに塗っておく(隙間ができないように)
  • 正面なら左右対称のものはコピペが楽(オリジナルだったらデザイン時点で左右対称にしておこうw)

 

youtu.be

f:id:m_training:20160507155523p:plain

 

「Spine」を使うための下ごしらえ

……描き方動画の絵を使いたかったのですが、すでに動きを完成したものを再集録するのも効率が悪かったので別の絵で説明します(汗)

使うのはこの絵。

f:id:m_training:20160507161619p:plain

f:id:m_training:20160507161515p:plain

01. パーツごとに分けてpng保存

まずは1枚1枚、パーツに分けてpngで保存、フォルダにまとめておきましょう。

 

f:id:m_training:20160507162114p:plain

ちなみにすぐさま練習してみたい人用に上の絵をまとめたものを作りましたw

http://milk0824.sakura.ne.jp/doukana/up/MyShipSide.zip

 

02. Spineをダウンロードしよう

以下からトライアルバージョンをダウンロードできます。

http://ja.esotericsoftware.com/

 

※注意

トライアル版では、保存もエクスポートもできません!

動かしてみて「わーすごい!」だけです(^-^;

 

※注意2

エッセンシャル版を買ってUnityにエクスポートしようとしている方!

現在UnityのランタイムがSpine 3.1.08までしか対応していません!!

Unityで「Error reading skeleton JSON~~~」とか、skeletenDataのインスペクターに「Attempt reimport」が出ている人はSpine 3.2以上で作っている可能性大です。

アニメーションを作る前にダウングレードしましょう(汗)

SpineのDowngradeの仕方は

左上のSpine>設定...>バージョン>その他>3.1.08>Spineの再起動

です。

私が気づかずにどれほど苦しめられたか……><

 

03. 絵を配置していこう

早速Spineを起動します。

最初に行うことは絵の組み立てです。

おそらく最初は、謎のグラサンのお兄さんがデフォルトで入っていると思うので…

左上の「Spine」アイコン>新規プロジェクト

です。

 

まずは絵を読み込みましょう

右側のリストの「イメージ」を選び、下の「閲覧」をクリックします。

フォルダ選択ができるので、先ほどバラバラにしたファイルがあるフォルダを選びましょう。

f:id:m_training:20160507163936p:plain

 

パーツを配置するための道しるべとして、完成済みの絵を置いておきましょう

イメージに絵が入っていると思います。

このままパーツを並べるのはすごく難しいっ!

なので完成済みの絵を置いておきましょう。

絵を置いた後は指針にするだけなので、透明度を上げておきます。

 

f:id:m_training:20160507164314p:plain

f:id:m_training:20160507164444p:plain

 

あとはひたすらパーツを置いていく!

あとはイメージからドラッグ&ドロップでひたすら絵を置いていきます!

もし回転になってしまう方がいらしたら、左下のウィンドウの「トランスレート」を選択すると移動に戻ります。

f:id:m_training:20160507164930p:plain

 

絵の表示順を変えよう

ただ配置しただけだと、考えていた配置順と違うと思います。

今の絵だと、スカートの部分とか手とか…気持ち悪い感じになっていますw

そんなときは「表示順序」が右のリストにあるので、そこを入れ替えます。

上にある項目ほど前面に表示されます。

f:id:m_training:20160507165505p:plain

 

04. 動きのキモ!bone(骨)を入れよう!

絵を動かすためには、動かすための「骨」が必要となります。

その「骨」を動かして、連動して絵が動く仕組みです。

 

一番最初に、全体の中心になる体のboneを作りましょう。(羽は邪魔だったので見えないようにしましたw)

左の「root」を選んで、左下の「作成」で作ります。

ドラッグで作成です。

f:id:m_training:20160507170459p:plain

作ったboneはリストのboneをダブルクリックすると名前を変えることができます。

f:id:m_training:20160507170534p:plain

 

 体にくっついているパーツのboneを作る

例えば頭なんかは体とくっついているパーツです。

そういったパーツは、今作った「body_bone」を選択して、またドラッグでboneをつくります。

こうすることで、体と連動して頭が動くようになります。

(体を傾ければ頭も傾くなど。これをやらないと、からだを回すと頭だけ置いて行かれます。デュラハン状態ですw)

f:id:m_training:20160507172639p:plain

 

続けてスカートも。

f:id:m_training:20160507172818p:plain

 

体以外の部分と連動するパーツのbone

この絵の場合、ふくらはぎの部分は「体」と連動ではなく「ふともも」部分と連動しないといけません。

そういったときは、連動させたい部分(このときはふともものところのbone)を選択してboneを作りましょう。

作っているときに赤い線で太もも部分に矢印が出ると思います。

こうすることで太ももを動かすと、一緒にふくらはぎが動くようになります。

f:id:m_training:20160507173316p:plain

 

あとは動くパーツ全部にboneを設定します。

f:id:m_training:20160507173447p:plain

……羽を忘れていました(^-^;

f:id:m_training:20160507173554p:plain

 

06. 骨と絵をくっつければ完成!

最後にboneと絵を連動させればモデルの完成です。

最初に配置したパーツを選択すると、下に「親設定」というボタンがでてきます。

親設定を押して、パーツと該当するboneを選択しましょう。

f:id:m_training:20160507175138p:plain

「体」の絵は「body_bone」と対応してますからbody_boneを選択しました。

f:id:m_training:20160507175209p:plain

 

それを一通り行って、モデルの完成です!

 

f:id:m_training:20160507175311p:plain

 

これにてbone設定編は終わりです!

 

Spineでモデルを完成させるまでのまとめ

  1. パーツごとにpngで保存する
  2. とりあえずガイドとなる全体絵を置いて薄くする
  3. それぞれのパーツを配置する
  4. 表示順序を変更する
  5. 体のboneをつくる
  6. それにくっつくboneをつくる
  7. それぞれのパーツを、それぞれ対応するboneに設定する

 

長く感じますが、例えば私の絵のパーツ数でしたら30分以内で終わりますw

 

さて!

次回はSpine・Animation編を書きたいと思います!

 

……想像以上に長くなってしまいました(^-^;

 

WEB拍手レス!

>おっちゃんさん

部活動、おつかれさまです!

 

5分アニメを見ようとしたら妹に「甲鉄城のカバネリ」を紹介されて見ていました!

ほのぼのどころかゾンビ系アニメですが燃えておりましたw(何

 

何かを学ぶ、体得する、ということはなかなか難しいことなのですよね><

見聞きして、実際にやってみて、うまくいったり失敗したりして……ようやく身についていくものだったりします。

それら含めて楽しめちゃう、というのがベストですw

 

Official LINE Account
友だち追加
@hgf7288s