*

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

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

フーモアピクチャーズ技術部の遠藤です。

今回のテーマはエフェクトです。
UnityやCocosなどのゲームエンジン側で実装する事もできますが、
折角なのでSpineを使い倒してみましょう。

エフェクトの基礎知識、アニメの基礎知識

以前、fps(FramePerScond)について触れました。詳しくは過去記事をごらんください。
https://whomor.com/whomorpictures/?p=39

日本のTVアニメを例にしてみると、24fpsで製作されています。
製作環境が24fpsですが、実はほとんどの場合において24fpsだからと言って1秒間に24枚の絵をで描かれていません。
コスト的な理由も勿論あります。アニメ製作はコストとの戦いでもあり、(昨今、アニメ製作の劣悪な制作環境がニュースとして取り上げられることもありますね、、)24fpsでの製作環境においても全てのコマを作画していては、コストがかかりすぎるので、言い方は悪いですが極力手をぬいていくのです。
例えば、キャラクター自体は全く動いていなくても、レイヤー分けされている口だけをパクパクと動かせば、キャラクターが喋っているように見えるのです。
その場合、キャラクターの絵が1枚と、開いた口、半開きの口、閉じた口。
たった4種類の素材だけでキャラクターが喋っているかのようなカットを作成できます。

24fps

いわゆる、「リミテッド・アニメーション」です。

技術的な面においても、8fpsや12fpsで十分にアニメーションさせる事が可能な事もあります。なにより、8fps12fpsの作画を見慣れているわけですから、目で観て、十分ならそれでいいんです。逆に捉えれば、「このアニメは作画がすごい!」「すごく綺麗にアニメーションしている!」と思った時は、24fpsのアクションシーンや、細かい作画をしていると言うことですね。
Pixirに代表される3DCG映画などでは、フル・アニメーションになっていますし、
近年ではテレビアニメにも3DCGが多様されており、合成やエフェクトだけでなくキャラクターまでもが3Dで製作されている事もあります。機動戦士ガンダムUC、マクロスFなどのロボットアニメに代表され、作画では困難なフルフレームの激しいアクションなどを実現していますし、蒼き鋼のアルペジオ、プリキュアシリーズのOP、団地ともお、などなど。アニメにおいて最重要とも言えるキャラクターが3DCGで製作されている作品も少なくありません。

だいぶ話しがそれてしまいましたが、Spineを利用したエフェクト製作に戻ります。

エフェクトを製作するには

方法としては、ひとつしかありません。

「描く」ことです。

大友克洋監督の「AKIRA」と言う作品があります。
1985年公開で、この頃はまだCGと言うものが実用的ではなかったので、全てのエフェクトが人の手で描かれています。画面全体の情報量や、煙、爆発などに圧倒された方も多いのではないでしょうか。

エフェクト製作を補助するソフトもたくさんありますので、紹介します。

CELSYS RETAS!
whomorPicturesBlog_140620I
CLIP STUDIOやCOMIC STUDIOで有名なCELSYSのアニメ作画総合ツール。アニメの現場でもよく使われいるようです。

PSOFT ComicStyle
whomorPicturesBlog_140620H
AfterEffects用プラグイン。エフェクト製作を簡単に行える強力なツール群

CACANI
whomorPicturesBlog_140620G
作画の中割補間ソフト。HPに作例などが乗っていますが、面白そうです。

BISHAMON
whomorPicturesBlog_140620J
ゲーム用エフェクト製作用のオープンハウスツール。ゲーム製作の現場で研究されています。

他にも作画補助ツールなど様々なソフトウェアがありますので、また機会があったら紹介していきたいと思います。

とりあえず、Photoshop、SAIがあれば

色々紹介してみましたが、筆1本でも描けるんです。
描いてみましょう。
ツールはphotoshop、もしくはSAIでもいいですね
モアちゃんが背負っているロケット。ここから火を噴き出して空を飛びたいと思います。

whomorPicturesBlog_140620A

炎を3枚のイラストでサイクルモーションします。
whomorPicturesBlog_140620B

いい感じになるように、と言うのが一番難しいのですが、いい感じになるまで何度も挑戦しましょう。

気流

炎だけでは寂しいので、気流も描いてみます。コマの送りによってスピード感がでます。

whomorPicturesBlog_140620C

いい感じになるように。
エフェクト素材ができたらSpineに読み込みます。
Imageフォルダに入れましょう。

Spineボーンに関連付けし、位置を決めてこのような状態に。
whomorPicturesBlog_140620D

ここからキーを打っていきます。
イメージにキーを打つ際は、Treeメニューのスイッチを利用します。
一番左のスイッチをフレーム毎に切り替えます。

whomorPicturesBlog_140620E

1f1枚目
2f1枚目
3f2枚目
4f2枚目
5f3枚目
6f3枚目
7f1枚目
8f…以下コピー&ペースト

whomorPicturesBlog_140620F
と言った具合に「1フレーム抜き」のリミテッド・アニメーションにします。
キーを1フレーム抜くので、2コマ毎にキーを打つことになります。
Spineのシステムは30fpsですが、アニメーションは事実上15fpsになっています。

このようにして製作したエフェクト&モーションがこちら

それらしく見えますね。
ゲームでよく使われる斬撃や、炎のブレスエフェクトなども同様に作成できます。

結局は、デザイナーさんに描いてもらうしかないのですが、冒頭で紹介したソフトや、3DCGソフトなどを上手に利用してクオリティとスピードのバランスを取っていきましょう。

次回はエフェクトの続きと、モーションについてももう少し触れていきたいと思います。

フーモアでは一緒に働いきたいメンバーを募集しています。一緒に面白いコンテンツを創っていきましょう!!
その他お仕事のご依頼はこちらから

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

Comments

comments

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

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

漫画家大募集中!!

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

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

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

関連記事

icatch

Spineアニメーションを、Unityの画面で確認してみよう!

こんにちは、CG開発室アニメーターの吉村です。今回は「SpineのデータがUnityに読み込めない…

記事を読む

title

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

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

記事を読む

勉強会

【資料公開】マスタッシュ ✕ フーモア共同開催Spine勉強会資料

平成27年1月20日にミクシィcollaboスペースで、スマートフォン向けゲームなどで需要拡

記事を読む

whomorPicturesBlog_140901C

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

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

記事を読む

puppet2d

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

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

記事を読む

MA_002

モーションコミックは流行るのか?「MotionArtist」紹介

CG開発室の遠藤です。   弊社では代表の芝辻をはじめ「マンガを世界に届ける」

記事を読む

whomorPicturesBlog_140517B

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

読了時間3分 初めまして、フーモアピクチャーズ技術部の遠藤です。ビジネス的側面から切り込んで行

記事を読む

3_Synfig Studio1.0

今、注目のスプライトアニメーションツールSpineとSynfig Studioを比較してみた。

はじめまして、フーモアでスプライト系ツールを担当している吉村と申します。 趣味でMMDを触っていた

記事を読む

1

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

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

記事を読む

12

Live2D風モーション、Spineの限界に挑め part2 ~spineに追加された機能~

フーモアDCCツール研究開発局局長の遠藤です。 私が執筆しましたSpineの書籍が工学社さんより発

記事を読む


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

PAGE TOP ↑