*

これからはspine!?操作性のあるソーシャルゲーム向けキャラ制作のニーズに答えて使ってみた。その1「イラスト制作~スケルトン組み立て」

公開日: : 最終更新日:2015/10/21 , ,

読了時間3分

初めまして、フーモアピクチャーズ技術部の遠藤です。ビジネス的側面から切り込んで行く芝辻と、技術的、実践的な側面を遠藤が補完していく形で、様々なトピックを記事にしていきたいと思っています。

ソシャマノートブログでもMAYA LTを始めとする3DCGの記事を書いてきましたが、今後は2D&3Dアニメーション技術に関してはこちらで記事更新をしていきますのでよろしくお願いします。

スマートフォンの普及により、ソーシャルゲームもポチポチ系のゲームから操作性の高いゲームが増えてきました。それに合わせて3DCGのニーズが高まる中で、2Dアニメーション技術を用いたクリエイティブのニーズも高まってきています。

2Dアニメーションツールと言えば、Synfig StudioSmoothMovesSpriteStudio、ちょっと異なりますがLive2Dなど多く存在します。

フーモアでは、SmoothMoves、Live2Dも取り扱っておりますが、今回からしばらくの間、紹介させていただくのは Esoteric Softwareの「Spine」です。

http://esotericsoftware.com/
spine
制作したイラストに、スケルトンと呼ばれる”骨組み”をくっつけて、イラストをアニメーションさせるためのソフトです。

Unityエンジンを利用したローレゾリューションゲーム制作が勢いを増していく中で、こういった安価でシンプルなソフトウェアが次々に登場しており、フーモアピクチャーズでも様々なソフトを研究しております。

 

Spriteの特徴としては

  • スタンドアローンなソフトウェアであること
  • エッセンシャル版が$60、プロフェッショナル版が$249と比較的安価なこと
  • ユーザーフレンドリなインターフェースで、動作も軽く安定しています。

EsptericSoftwearのHPからトライアル版もダウンロードできますし、チュートリアルムービーやTipsも充実しており、素晴らしいソフトだと思います。

実製作例を含めて、説明してきたいと思っています。

1.キャライラスト制作

まずはイラストを発注してみましょう。今回僕がデザイナーさんに伝えた仕様は、「三頭身の女の子、ツインテールで。横スクロールゲームを想定しているので、斜め45度の角度で左を向いた状態。地面との接地を考えてカメラは水平にしてください」

whomorPicturesBlog_140517A

提出されたラフと完成イラストです。ラフをいただいてから色々継ぎ足し、最終的なイラストへ。ラフではゲームのデフォルメキャラクター然としていますが、個人的な好みでファンシーな顔に修正しました。どこか腹が立つような顔をしていますね。

アニメーション映えするように、頭身なども若干修正しています。

このイラストをパーツ毎に保存していき、Spineに読み込んでみます本来であれば、線画の段階からパーツ分けをして絵を描いてもらうのですが、今回は試験的制作なので、完成したイラストを分解する手順で進めてみました。

whomorPicturesBlog_140517B

レタッチをしながらこのような状態にしていきます。

2.Spineへの読み込みとSkelton構築

このイラストをパーツ毎に保存していき、Spineに読み込んでみます。画面右のTreeメニューのimagesを選択して画像を参照し、画像が全て入っているフォルダを指定してあげましょう。

Browseボタンを押してPathを指定すると、用意した画像が全て表示されます。イメージファイル名の左側のアイコンが赤くなっているので、全て選択してワークスペースにドラッグアンドドロップしましょう。

アイコンが緑色になり、画像が全て現れました。

whomorPicturesBlog_140517C

グレーになっている大きなモアちゃんは、テンプレート用の画像です。これに合わせて福笑いの要領で、組み立てていきます。

whomorPicturesBlog_140517D

右腕や、両足が服の上にきています。

これはDrawOrderで調整します。胸やスカートの順位を上にあげてみましょう。

whomorPicturesBlog_140517E

モアちゃんになりました。どこか勝ち誇ったような、腹が立つ顔をしていますね。

Spine上でキャラクターを再現できたら、次はスケルトンを組み立てます。ToolsからCreateを選択しリンクする骨を選択し、クリック&ドラッグしていきましょう。クリック&ドラッグをする前に骨を選択しておくことで、リンクしていくことができます。

ひと通りできたら、骨をリネームしていきましょう。

whomorPicturesBlog_140517F

パーツイラストと同じ名前にすることで、骨とイラストのリンク付けが楽になります。全てのパーツがrootにリンクされていますので、画像を、ドラッグ&ドロップでリンクしたい骨の下にいれていきます。

whomorPicturesBlog_140517G

ひとつひとつリンク付けして、完成しました。モアちゃんも薄ら笑いを浮かべていますね。

次回からはモーション制作に入って行こうと思います。

株式会社フーモア 遠藤 有
HP:https://whomor.com/
Blog:ソシャマノートブログ
書籍:MAYA LT 3D‐CG キャラクター講座 (I・O BOOKS) [単行本]

Comments

comments

  • このエントリーをはてなブックマークに追加
  • LINEで送る

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

3DCG、Spine制作ならフーモア!

プロの漫画制作ならフーモア!

関連記事

1

Live2D体験版をさわってみた その1

CG開発室の牛丸です。     遠藤が行方不明になってしまったので

記事を読む

title

WhomorGames「あの星で君が待ってる」

https://yoyaku-top10.jp/u/a/OTk3NA &nbs

記事を読む

1

Live2D体験版をさわってみた その2

ども...牛丸です...   前回はViewerのレビューまで。 今回はAn

記事を読む

whomorPicturesBlog_140901C

Live2D風モーション、Spineの限界に挑め part3~モデリングちょい足しレシピ~

フーモアDCCツール研究開発局局長の遠藤です。 隔月ペースの記事投稿になってしまいまして、不甲斐な

記事を読む

whomorPicturesBlog_140620D

Spineでエフェクトって付けれるの?Spine使い倒して頑張ってみた!

フーモアピクチャーズ技術部の遠藤です。 今回のテーマはエフェクトです。 UnityやCoco

記事を読む

e14d883a2a6efd80446f6cad692a716b

第一回spine勉強会〜Mastache x フーモア共同開催(会場mixi)のお知らせ

フーモアピクチュアズの遠藤です。 さて、このたびMustasche × フーモア 共同開催

記事を読む

icatch2

Spineアニメーションを、JavaScriptでWEB上に表示してみよう!

こんにちは、CG開発室アニメーターの吉村です。 SpineがWEB上で動いたら、もしかしてゲー

記事を読む

icatch_animate

【Adobe Animate CC】デザイナー視点で使いやすくなった新機能を解説!

こんにちは、CG開発室のOTKです。 今回は、2016年に名称変更された「Adobe Anim

記事を読む

puppet2d

期待のツール!?Puppet2Dは使える?その他諸々

フーモアCG開発室の遠藤です。 ■なかなか忙しくさせていただいており、スタッフ一同、毎

記事を読む

whomorPicturesBlog_140901C

Live2D風モーション、Spineの限界に挑め~spineをLive2D風にしてみました~

ご無沙汰しておりました。フーモアDCCツール研究開発局局長の遠藤です。 7月11日からブログ記事が

記事を読む


  • 「おもしろいMANGAを創る」をビジョンに今までになかった新しい価値観を創造する会社。イラストや漫画制作のディレクター集団。
    お問合せはこちらからお気軽にどうぞ
  • ブログ最新記事とクリエイティブに役立つ情報を日々配信しています。

PAGE TOP ↑