OPTPiX SpriteStudioでアニメーション制作を行っている池田ピロウです。
今回はOPTPiX Labs Blogの場をお借りして、第27回 CGアニメコンテストにて入選しました自主制作したアニメ「てのひらの宇宙」についてOPTPiX SpriteStudioでのおおまかな制作のコツをご説明させていただきます。
個人で「動画作品を作ってみたい」という方の参考になれればうれしいです。
「てのひらの宇宙」について
著者：池田ピロウ（イラストレーター）
Twitter
使用ツールはおなじみの2Dスプライトアニメーション作成ツール「OPTPiX SpriteStudio」です。
基本的な使い方はOPTPiX ヘルプセンターにまとめられていますので、まだSpriteStudioを使ったことがない方や使い始めたばかりの方はそちらもご覧ください。
目次
絵コンテは全体の設計図
まずはじめに、作品のアイデアを「絵コンテ」に描き起こします。
絵コンテを用意することで、作品の完成形をイメージでき必要な素材や演出が分かります。
複数の人と共同で作る場合には、作品のイメージを共有することにも役立ちます。
プロットやアイデアを整理して絵コンテにします
描きながら、浮かんできて良かったアイデアは次々に取り入れます。
今回の作品では、クロッキー帳から水彩絵の具で直接描いたキャラクターが飛び出す演出をSpriteStudioで動かそう、フラワーアレンジの中を駆け回らせてみようといったアイデアを盛り込んでいきました。
絵コンテから必要な絵を割り出す
絵コンテが完成したら、必要な素材を洗い出します。
キャラクターを動かす場合、絵は多いほど表現の幅が増えるので良いのですが今回はコンテストに応募するための制作期間が2ヶ月と短期なので、表現に必要な分だけの絵を描き起こすことにしました。
絵コンテを並べながら、各カットの絵作りが必要であると想定する部分に印をつけておきます。
（↑の画像の場合オレンジ色の部分）
キャラクターの絵が必要な部分に印をつけたら、実際に絵を描き起こしていきます。
原画の描き起こし
キャラクターラフの作成
絵コンテをもとに必要な絵を描いていきます。
ラフを描いたら、トレース台を使って別紙に清書します。水彩で色を塗ることを考慮して、油性ボールペンを使用しました。
この時、SpriteStudioで動かす部分（顔、手、足など）を分けながら描きます。
清書が完了したら、色を塗って完成です。
アニメーションを想定したパーツ分割
原画の描き方は、アニメーションのパーツ数やデータの構成に大きく影響を与えます。
あらかじめ構成がシンプルになるようにデザインすることで、操作するデータを抑え作業時間を短縮することができます。
例えば上図の左側の絵を袖の中の腕まで動かそうとすると、フリルや服で手をサンドイッチさせる必要がありますので、上段のような分割構成になります。
この構成だとフリルもアニメーションできるので、絵面は豪華になります。
しかし、すべての部位を可能なかぎりパーツ分けをするとデータ量が増え、パーツをリストから探す手間がかかるなどアニメーションの作成や修正作業も増えていきます。
作業を少しでも減らすため、パーツごとにアニメーションの目的（やりたいこと、見せたいこと）を意識しながら、パーツ分割数を決めていきます。
今回は下段のようにパーツ数を2つに絞りました。
目的に沿ったパーツの配置
各パーツをセルへ配置にする際に少し工夫しているところがあります。アニメーションの目的に沿った配置についてです。
水平に配置されたパーツとナナメに配置されたパーツとではSpriteStudioでの自由変形で表現できることが異なってきます。
左側がななめ配置。右側が水平配置。
そこで、「揺れモノはななめ配置」をしています。
髪や布といった、パーツの根元と先端が時間差でズレて揺れ動くようなものを1枚絵で表現したい場合は、そのポイントが四角形の対角線あたりに配置するようにします。こうすることで、パーツの先端部分を曲げやすくなります。
画像クリックでアニメGIFを表示
実際にななめ配置で髪の毛を揺らしてみたシーンです。毛先の柔らかい印象を出すことができます。
背景の作成
背景の情報量を操作する
「てのひらの宇宙」の背景はクロッキー帳やフラワーアレンジなどといった小物を机上に並べて舞台を作り、カメラで撮影したものを使用しています。
しかし写真そのままでは使わずデジタルで加工を行っています。
上図の写真では、奥の物置や時計などを消しています。
時計の持つ情報である、「時間」というワードには特別な意味と強さがあると自分は考えています。そのような見る側に影響を与え、物語に関係のないモチーフは消去します。
重要なモチーフは目立たせる
上図の加工の前後では、鉢の大きさと花のボリュームが違います。シーンを見た時にすぐ大事なモチーフは何なのかを知らせるためです。主人公の小人感を出すためにアオリアングルで撮影し、フレーミングは上辺ぎりぎりまで大きくします。
花の形を整えることもそうですが、配置の工夫として右側の紫色の花よりも映る面積と高さを上げるようにして対比も作ります。
「直線」を利用する
絵の情報では直線は目線の流れを促し、とても強い影響力を持ちます。上図の場合では天井の茶色の縁が空間の奥行きや方向性を助けています。
さらに線と線が交わる交点に視線が集約しますので物語のキーとなるもの（この場合は花）を置いておくのも有効です。
便利機能で作業時間を短縮する
コンテンツに応じて塗りつぶし機能を使う
限られた時間をできるだけ多く創作時間へ費やすためにパーツ分けや塗り足しなどといった作業時間を短縮する必要があります。
そこでさまざまな便利ツールをご紹介します。
写真をパーツ分割する時に分割することで生じる空白部分はAdobe Photoshop CC の「コンテンツに応じて塗りつぶし」機能を使っています。
塗り足したい部分を選択範囲で囲み、「塗りつぶし」機能を使います。その中から「コンテンツに応じる」を使用します。
塗りつぶし機能を使用したことで空白部分がおおまかに生成されました。あとはPhotoshopのコピースタンプツールを使用して細部を整えて作業完了です。
この機能は写真だけでなく、背景イラストや厚塗り系のキャラクターイラストでも応用できるので、作業時間の短縮に役立ちます。
ショートカットを割り当てる
SpriteStudioには「SsKeyBindingEditor」というショートカットキーを組み込めるツールが配布されています。
私は「フレームの追加」と「フレームの削除」のショートカットを設定してから作業の効率が上がったことを実感しました。
その他にも、「先頭のキーにジャンプ」「前のキーを複製」や「再生」と「停止」などに設定するのもオススメです。
ふたつのアニメーション作成方法
キャラクターを動かしていく上で、大きくふたつの方式に分けることができます。これらの手法を目的に応じて使い分けたり、時には組み合わせてアニメーションを作ります。
ストレート・アヘッド方式
とにかく動かし始めて、その都度起きるキャラクターの動きをたどっていく方式です。
メリット
- のびのびとクリエイティブに作ることができる。
- 作りながら無意識にアドリブの動きが入ったり、生命感が宿りやすい。
デメリット
- 行動をキャラクターの意思に委ねるため、先のことを把握しづらく、制作時間と修正コストがかかる。
ポーズ・トゥ・ポーズ方式
動きに重要なポーズを先に全てに作っておき、そのあとにキーを中割りしていく方式です。
メリット
- 計画的に、比較的スムーズに制作が進められる。修正しやすい。
デメリット
- 計算ずくで機械的な動きになりすぎる傾向がある。
今回の制作では、スピードとクオリティを両立させるためにまず「ポーズ・トゥ・ポーズ方式」で全体像を作り上げたあとに重要な部分（特に観せたいところ）を中心に「ストレート・アヘッド方式」で深めていく手法で作成しました。
上図のタイムラインのキーは「ポーズ・トゥ・ポーズ方式」でアニメーションで作成を行い、その後キーを追加したり削ったりしながら「ストレート・アヘッド方式」で制作を行い細部を仕上げました。
空間に奥行きを出す工夫
画像クリックでアニメーションGIFを表示
2Dアニメーションを作っていると無意識にY軸（上下）とX軸（左右）の動きに縛られたものを作ってしまい、平面感が強調されがちです。画面に「奥行きの空間」を作るためにはキャラクター、背景、エフェクト、カメラなどをZ軸（手前や奥）に操作しなければなりません。
上図のシーンを参考例にいくつかポイントをご紹介します。
舞台に階層を作る
上図の場合、キャラクターを中景としてさらに近景と遠景を階層的に用意することで絵的に奥行きが生まれます。
もっと奥行きを出そうとしたい場合には、建物や物の配置で直線的にパースを持たせたり、空気遠近法やカメラの絞りによるぼかし、スクロールスピードに近景と遠景で変化をつけるなどの手法があります。
奥～手前に移動する時は「曲線」で移動する
キャラクターが奥側から手前側へ移動してくるときにはX、Y、Z軸の動きを混ぜて行うとより舞台の空間を広く観せることができます。
X、Y、Z軸の動きを混ぜず、そのままキャラクターを拡縮で移動を表現することも可能ですが表現の仕方に気をつけないと、演出の意図が間違って伝わってしまいます。
これは別の参考例を使って説明します。
これは、X、Y、Z軸の動きを混ぜず、そのままキャラクターを拡縮で移動を表現しようとした例です。これでも奥側から手前側に走ってきているようにも見えなくもないのですが人によっては「キャラクターが巨大化している」と誤解してしまうかもしれません。
これは「キャラクター自体の座標変化の情報量」よりも「キャラクターが拡大する情報量」の方が勝ってしまっているために起きてしまう現象です。
こちらは、X、Y、Z軸の動きを混ぜて移動を表現したものです。この場合だとキャラクターは拡大もしているのですが、キャラクター自体の座標変化の情報量が拡大する情報量よりも勝っているので巨大化の誤解はされません。
さらにキャラクターが奥側に写っている時は移動幅の間隔を狭く、手前側に写っている時は移動幅の間隔を大きくするなどして変化をつけるとよりリアリティが増すでしょう。
フレームイン、アウトを使う
舞台の広がりを感じさせるためには、「画面に映っている外側にも世界は続いている」ということを伝えなければなりません。
そのためにはさまざまな方法があるのですが、その中のひとつとして「フレーム枠を使う」方法があります。
上図のシーンではキャラクターが一度画面外へフレームアウトします。その後、アングルが変わりながらキャラクターが画面内へフレームインすることで直接キャラクターが身を翻すアニメーションを画面内で作らなくても、その間が補間されているように感じさせることができます。
さらにこのシーンでも先ほどの「曲線の動き」でキャラクターを移動させることで空間づくりを補助しています。
まとめ
制作前はこれまでSpriteStudioで1～10秒ほどのアニメーションのみを作ってきて、いきなり3分ほどの物語を内在したアニメーションが作れるのかどうか不安でした。
結果的に形にはなったものの、「伝える」ことの難しさを痛感しました。
絵をアニメーションさせ生命を感じさせて見る側の感情を呼び起こせるような物語をいつか作れるようになりたいです。
最後まで読んでくださりありがとうございます。
OPTPiX SpriteStudioは皆さまのさまざまなアイデア、クリエイティビティに応える素敵なツールです。
ぜひ、一度チャレンジしてみてください。
参考文献
- アニメーターズ・サバイバルキット
- 映像の原則
- filmmaker’s eye
